Widget vertical de redes sociales para Blogger

Hacía tiempo (muchísimo tiempo) que me había robado este widget de algún sitio que lo compartía por ahí. No recuerdo cual era, ni mucho menos el nombre de su autor por lo que dejaré el pendiente de buscar y dar el respectivo crédito.

El caso es que el día de hoy, comparto con ustedes este widget de redes sociales para colocar en la barra lateral del blog. Este widget lo utilicé por varios años en La Taberna por resultar muy atractivo por la transición CSS que contiene mismo que podemos observar aquí:

• Sigueme en Facebook
• Sigueme en Twitter
• Sigueme en Google+
• Suscribete a RSS

El widget es muy recomendable, ya que resulta de una carga rápida, no resulta complicada su configuración, es altamente personalizable y sobre todo, es muy elegante.


Colocando el widget en Blogger

Para colocarlo en nuestro blog, basta con hacer lo siguiente:
     1. Ir a Blogger.
     2. Ir al escritorio de nuestro blog y después a Diseño.
     3. En la barra lateral de nuestro blog pincharemos en Agregar gadget.
     4. Pegaremos el siguiente código:

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover  .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Sigueme en Facebook"><a class="icon facebook" href="URL PÁGINA DE FACEBOOK">Sigueme en Facebook</a></li>
<li data-alt="Sigueme en Twitter"><a class="icon twitter" href="URL PÁGINA DE TWITTER">Sigueme en Twitter</a></li>
<li data-alt="Sigueme en Google+"><a class="icon googleplus" href="URL PÁGINA DE GOOGLE+">Sigueme en Google+</a></li>
<li data-alt="Suscribete a RSS"><a class="icon rss" href="http://feeds.feedburner.com/URL_DE_TU_FEED">Suscribete a RSS</a></li>
</ul>

En donde:

• La marcado en rojo debe ser sustituido por la URL de la red social respectiva.
• Lo marcado en azul es el texto que se mostrará predeterminadamente (es decir, cuando el ratón no pasa por el widget) podemos cambiarlo si así lo deseamos.
• Lo marcado en Morado debe ser sustituido por el texto que queremos que aparezca al pasar el cursor sobre el texto predeterminado.

     5.  Una vez hechos los cambios, daremos clic en guardar y después en guardar blog.
¡Y listo! Ya tenemos el widget instalado en nuestro blog.


Cómo funciona

El widget mostrará una columna vertical con los cuatro iconos que vemos junto con los textos que hayamos colocado. Cuando el usuario pase el ratón sobre alguno de estos textos, se expandirá una columna de color junto a un nuevo texto que sustituirá el original.

Al hacer clic, una nueva pestaña se abrirá con la redirección al perfil social que el usuario haya seleccionado.

Este widget puede ser modificado por completo, de ahí que podamos añadirle o quitarle, elementos, transiciones, colores, etc. pero eso depende del conocimiento, tiempo y creatividad de cada uno.

¿Te fue de ayuda este artículo?

Si el artículo te agrada puedes suscribirte a La Taberna para recibir las últimas actualizaciones del blog o bien, puedes dar me gusta en Facebook, seguir en Twitter o agregar a tus círculos de Google +. También puedes expresar alguna duda, sugerencia, o comentario a través de la página de contacto o aquí en la misma entrada.

¡No te pierdas ninguna publicación!

Suscríbete a La Taberna de Julio y recibirás todas las actualizaciones directamente en tu correo. Cero SPAM, lo prometo :)