Botones expansibles para compartir tu blog en Redes Sociales

por Yurisander Guevara Zaila

Los botones para que nuestros usuarios compartan el contenido del blog en las Redes Sociales son importantes. Y en Internet hay muchos sitios que pueden ayudarnos a agregarlos a nuestra bitácora.

Estos que hoy presento son atractivos en diseño e interactividad.

Ahora le enseño cómo instalarlo para que así pueda aumentar el tráfico hacia su sitio con la ayuda de sus lectores.

Antes, les dejo una vista previa:




En tu panel de control de Blogger, ve a la pestaña Diseño y añade un Gadget. Selecciona luego de la lista HTML/javascript y pegas este 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/AVvXsEirnp8eidkp7LnNh1tMW5s2k5A7hqWcY30H3-m4mib0OB6noHhP5jwSBiOIohO6I2IL3d6Fb-SzbLL3Vhu6qek4TB5ORNMIs4EuSowx1co0oPPldfhWRnm-TJVRUTiDE2ysd6GLyO6d6mM/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>

Luego, reemplaza cada una de las frases resaltadas en mayúsculas en el pedazo de código que inicia con <ul id="tbsose">, por tu usuario en cada una de las Redes Sociales y Feedburner.
Si no dispones de alguna red, elimina el pedazo de código que pertenece a la red para eliminar el botón.

Para conocer tu usuario en las redes sociales, vas a cada una de tus cuentas y en la URL de la barra de direcciones se mostrará.

Para saber el usuario de Feedburner, visita http://feedburner.google.com/. Elige tu feed y das un clic en Edit Feed Details… (Esta bajo el título de tu feed). Ahora en Feed Address: dentro un recuadro está el usuario de tu Feedburner.

Pon un título a tu Gadget, guarda, y ya tendrás instalado uno vistosos botones de Redes Sociales.

En caso de dudas o algo que quieras comentar, no dudes en hacerlo.

2 comentarios:

Anónimo dijo...

Βuenаs,
dir�a que еs la unica vеz que he llegado tu sitio у debo
dеcir que esta bastаnte bien y seguramente me tеndгаs maѕ frеcuentеmente por los comentarіοs.

Un ѕaludo!

Si quieгеѕ leer mas nοticіas Alex

miarmariocoquetoblog dijo...

Me ha funcionado. Muchas gracias!!

Publicar un comentario

Deja tu comentario

Related Posts Plugin for WordPress, Blogger...
Copyright © Mirador Social Media - Blogger Theme by BloggerThemes & newwpthemes - Sponsored by Internet Entrepreneur