Si te gusta ofrecer a tus lectores la posibilidad de suscribirse al contenido que publicas o invitarles a seguirte en Twitter, esta es sin duda tu mejor herramienta.
Construí una pequeña cajita con los colores y las tonalidades típicas de blogger -lo que la convierte en un artilugio muy familiar- y con un bonito efecto al pasar el cursor por encima de cada enlace.
Es una alternativa a los botones individuales que solemos incluir en nuestra barra lateral para ofrecer las mismas ventajas a todo visitante y por suerte, con una rápida instalación.
El resultado será el mismo que aparece en la imagen de la izquierda. ¿Te animas? ¡Empecemos!
Busca la etiqueta </head> y añade esta línea encima (antes):
<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSS.css" rel="stylesheet" type="text/css"/>
Guarda la plantilla.
Pega este código en su interior:
<div id="blCajaMeta">
<div id="blCajaMetaContenid">
<div class="blcaja1"><a href="URL FEED">Suscríbete a mi feed</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja2"><a href="URL FEED EMAIL">Suscríbete vía email</a></div>
<div style="padding:2px;border-bottom:1px dashed #E1D4C0;"></div>
<div class="blcaja3"><a href="URL TWITTER">Sígueme en Twitter</a></div>
</div>
</div>
<style>#blCajaMeta {width:220px;}</style>
Ahora tan solo debes reemplazar URL FEED, URL FEED EMAIL y URL TWITTER por la dirección del feed de tu blog, la dirección de la suscripción por email o correo electrónico (aconsejo utilizar Feedburner) y la dirección de tu perfil en Twitter -respectivamente-.
Las frases del código (resaltadas en color grisáceo) pueden editarse a gusto propio.
La cifra en color rojo (220) indica la anchura de la caja. Auméntala o disminúyela para ajustar el marco a tu barra lateral.
Si es así, haz uso de esta otra línea en el primer paso (en lugar de la indicada):
<link href="https://sites.google.com/site/scriptsbalcon/b/blcajCSSfcbk.css" rel="stylesheet" type="text/css"/>
Y añade esto justo antes de los cierres </div> y </div> del segundo código:
<div style="padding:2px;border-top:1px dashed #E1D4C0;" class="blcaja4"><a href="URL FACEBOOK">Seguir en Facebook</a></div>
Sustituye URL FACEBOOK por la dirección de tu perfil o página en dicha red social y edita la frase a mostrar si lo consideras necesario.
¡Guarda el gadget y habrás terminado!
Preciosa es poco Jaime, es la séptima maravilla del mundo jajajajajaj. Me sirvio de mucho, además tienes razón yo solía tener unos cuantos botones y diferentes entre ellos (se veía muy mal). Ahora esta todo mejor.
Muy útil, gracias ya la añadí.
Gracias Diana kiss, estoy seguro de que ahora será muy fácil suscribirse a tu blog. Además, evita que la página se demore al cargar ya que no posee casi ninguna imagen y éstas están en el CSS incluido en la plantilla (mientras que los botones se incluyen directamente en un gadget y la imagen tarda en aparecer).
Gracias a ti por comentar, Anónimo.
Muy chula la cajita... Mucho!
exelente solo que como puedo reducirlo de tamaño
¡Gracias Laubeee!
Cesar, si me envías la dirección de tu blog te enviaré el código con el valor exácto del ancho que necesita la caja de suscripciones, así como las indicaciones para implementarlo en la plantilla.
Me gusta el blog, te sigo de cerquita!!
Una invitación al mío: globosagua.blogspot.com
:)
Excelente, Jaime; tú nos ayudas mucho con tu admirable dedicación a esta tarea. Felicitaciones. Me gustaría que en esta herramienta que has diseñado tuvieramos la opción de incluir adicionalmente la dirección Facebook.
Proclama Norte del Cauca
Muchas gracias por la invitación, Alicia Alina y... ¡Bienvenida!
Tu blog me gustó mucho, tiene un nombre muy original y las obras que escribes son fantásticas, ¡sigue así!
Hola Alfonso. Revisa la entrada pues ha sido actualizada y ahora podrás añadir también el enlace a tu perfil o página en Facebook.
Este es mi blog quisiera colocarlo en la sidebar doble http://soldadodelreydereyes.blogspot.com/
Cesar, ¿Deseas entonces modificar el ancho de la caja? Si es así, revisa la entrada e incluye el segundo código de nuevo ya que han sido actualizadas las indicaciones.
gracias Jaime si pudieras decirme si le pudo cambiar el color del fondo a blanco
Cesar, prueba a reemplazar la última línea del segundo código con esta otra:
<style>#blCajaMeta{width:220px;}#blCajaMetaContenid{background:#ffffff;}</style>
Ten en cuenta que deberás editar la cifra que indica el ancho de la caja (220) de nuevo.
Nota: Quise visitar tu blog para ver como había quedado la caja pero me resultó imposible.
Excelente Jaime no cabe duda que por eso este es el mejor blog de ayuda GRACIAS.
Es un honor recibir tales palabras, Cesar. Gracias a ti por instalar el widget.
abusando de tu confianza podria cambiar el margen a dotted
¡A este paso creamos un nuevo modelo Cesar! Jajaja, tranquilo, es broma. Incluye esta línea entre las etiquetas <style> y </style>:
#blCajaMeta{border: 4px dashed #cccccc;}
Utiliza la tabla de colores para editar el color del borde (resaltado en negrita).
Bro solo para avisarte que quise utilizar el widget y el archivo .Css está offline u.u
Mauricio, he revisado el script y funciona sin problemas. Si me envías la dirección de tu blog podré ayudarte ya que el error no está en el archivo css.
Jaime, muchas gracias por este truco.Por ahora lo he instalado en el pie de blog (Lille Skvat)pero me gustaría (igual que César), cambiar el color y el ancho, pero no encuentro ese segundo código del que hablas. ¿Dónde está?
Hola Lille Skvat. Para modificar el ancho, al contrario que la indicación en mi respuesta a César, edita la cifra 220 del segundo código a añadir. Para el color de fondo necesitas esta otra línea:
#blCajaMetaContenid{background:#ffffff;}
Colócala justo antes del cierre </style>. No olvides que #ffffff es el código del color blanco y puede editarse haciendo uso de la tabla de colores.
Muchas gracias, ha quedado perfecto :-)
Gracias a ti, Lille, por haber sido paciente.
Hola amigo te agradezco mucho por las ayudas que nos brindas para mejorar día a día en nuestros blogs, te quería pedir una ayuda, yo puse la cajita en mi blog y la modifique para que quedara negra, ya que mi blog maneja mucho ese color, y las letras las he puesto de color blanco pero no quedan, salen oscuras, me preguntaba si podrías ayudarme a solucionarlo, te lo agradezco, gracias
PD:
Raices Rastas
I-Tural Roots, añade esta línea de CSS justo después de la que agregaste antes de la etiqueta </head>:
<style>#blCajaMetaContenid a, #blCajaMetaContenid a:visited {color: #FFFFFF;}#blCajaMetaContenid a:hover{color: #FFFFFF;}</style>
Eso debería mostrar el texto en color blanco. Si no percibes ningun cambio avísame.
guaaa!! me encanta el blog, siempre encuentro temas muy interesantes.
Buen Blog. muy interesante.Un gusto seguirte amigo.
Excelentes consejos algunos ya han pasado su tiempo por las actualizaciones de Blogger y tu retirada seria bueno continuaras.