Botones de Redes Sociales con Efecto Expansible

Navegando en la red encontré estos botones que me han parecido muy llamativos, realmente son atractivos y pueden verse bien en cualquier blog.

Estos botones no utilizan ningún script, ni javascript, ni jquery; están hechos en CSS3 y sencillamente se pueden modificar.

Traen un efecto hover expansible, lo que hará que al pasar el cursor se despliegue el botón hacia la derecha. Al mismo tiempo, viene con las principales redes sociales y la suscripción por email.

Este widget es uno de los mas necesarios en cualquier pagina, puesto que no se pueden dejar a un lado las redes sociales que tanto bien nos hacen al aumentar el trafico hacia nuestro sitio.

Obtén la vista previa aquí mismo:

• Síguenos en Facebook
• Síguenos en Twitter
• Síguenos en Google+
• Síguenos en Pinterest
• Suscribete vía Email

La instalación es sencilla; para esto ve a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pega allí el siguiente código:

<style>
#tbsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbsose .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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUqOj6aQRzhJQ7MB4oc3jPfFJJP8oEw1Ndgt2LbKTq4f6unCZFIg_EzNi9hlnkWkLatYmfNTSEEAu5I5aT2NlGhHrBZPkjLw8vZ5ZDlO-i8H6zv62JaojAy5KEMnm0b5F_qlw6zThCyw/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;}
#tbsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbsose .icon{overflow:hidden; color:#fafafa;}
#tbsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbsose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbsose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbsose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbsose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbsose li:hover .icon, 
.touch #tbsose li .icon{width:210px;}
.touch #tbsose li .facebook, #tbsose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbsose li .twitter, #tbsose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbsose li .googleplus, #tbsose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbsose li .pinterest, #tbsose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbsose li .rss, #tbsose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="tbsose">
<li data-alt="Síguenos en Facebook"><a class="icon facebook" href="http://www.facebook.com/USUARIO-FACEBOOK" target='_blank'>Síguenos en Facebook</a></li>
<li data-alt="Síguenos en Twitter"><a class="icon twitter" href="http://www.twitter.com/USUARIO-TWITTER">Síguenos en Twitter</a></li>
<li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/ID-GOOGLE+" target='_blank'>Síguenos en Google+</a></li>
<li data-alt="Síguenos en Pinterest"><a class="icon pinterest" href="http://pinterest.com/USUARIO-PINTEREST" target='_blank'>Síguenos en Pinterest</a></li>
<li data-alt="Suscribete vía Email"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" target='_blank'>Suscribete vía Email</a></li>
</ul>

Ahora sencillamente has de reemplazar cada una de las frases resaltadas en color verde por cada una de tus cuentas en las redes sociales y feedburner respectivamente.

Para conocer el usuario en las redes sociales, vas a cada una de tus cuentas y en la URL de la barra de direcciones se mostrara el nombre de usuario.

Para saber el usuario de feedburner, te diriges a http://feedburner.google.com/. Elige tu feed y das un clic en "Edit Feed Details…" (Esta bajo el titulo de tu feed). Ahora en "Feed Address:" dentro un recuadro esta el Usuario de tu Feedburner

Con esto ya tendrás configurado e instalado este Gadget.

¿Alguna duda o comentario?