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.
Botones expansibles para compartir tu blog en Redes Sociales
Publicado por
Unknown
a las
8:38 a. m.
jueves, 13 de junio de 2013
Etiquetas
Blogger,
Botones,
Cómo hacer,
Gadgets,
Recursos,
Redes Sociales,
Widgets
Suscribirse a:
Enviar comentarios (Atom)
2 comentarios:
Β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
Me ha funcionado. Muchas gracias!!
Publicar un comentario
Deja tu comentario