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í:
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 .
2. Ir al escritorio de nuestro blog y después a .
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 debe ser sustituido por la URL de la red social respectiva .
- Lo marcado en 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 debe ser sustituido por el texto que queremos que aparezca al pasar el cursor sobre el texto predeterminado.
¡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?