Widget de redes sociales para blogger con efectos
Tener un buen widget de redes sociales
en nuestro blog de blogger, es algo necesario para nuestro blog. Atraer a los
usuarios que visitan nuestros blogs con buenos efectos y así animarlos a que se
suscriban en nuestros perfiles de redes sociales, es darse a conocer mucho más
en el ámbito del internet. La intención es que nuestros visitantes puedan
suscribirse en las diferentes redes sociales y así compartir con ellos nuestras
nuevas actualizaciones. No vamos a insertar ningún Javascript ni tampoco un
Jquery, todo el código esta implementado para hacer fácil su instalación. El código
es basado en líneas CSS el cual le dará un efecto a su widget de redes sociales. También podrás ver un widget de redes sociales en este enlace, Widget de redes sociales para blogger.
A continuación mire su demostración en
mi blog de demos
Ahora vamos a implementar el Widget de
redes sociales en nuestro blog de blogger
Ir a Blogger
Primer Paso
Da un clic en “Diseño”, luego da un clic
en “Añadir un gadget” y busca el widget que dice “HTML/javascript”, ábrelo e
inserta el siguiente código en su interior.
<!--Botones sociales
Widget By Ayudadeblogger.com-->
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7kvGP_PVb69Ggw_bfbU49CPe3I3EBXGkQTa7tFGQbBwGNv0BOLpcgg2865I_nzf5yELHcIhz6PmGtdZ4VUScylM2ldWqoc2g7Opfnl6yenXfWDbT1TpSoKA-YindY6JTTcyMno1oaK8g/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 .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss,
#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="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017">Sigueme
en Facebook</a></li>
<li
data-alt="Sigueme en Twitter"><a class="icon
twitter" href="https://www.twitter.com/ayudadeblogger">Sigueme
en Twitter</a></li>
<li
data-alt="Sigueme en Google+"><a class="icon
googleplus" href="https://plus.google.com/114283163993086871162">Sigueme
en Google+</a></li>
<li
data-alt="Sigueme en Pinterest"><a class="icon
pinterest" href="#">Sigueme en
Pinterest</a></li>
<li
data-alt="Suscribete a RSS"><a class="icon rss"
href="http://feeds.feedburner.com/ForoAyudaDeBlogger">Suscribete
a RSS</a></li>
</ul>
<!--Botones sociales
Widget By Ayudadeblogger.com-->
|
Realiza estos cambios:
Los 5 links que están marcados de color
azul incluyendo al numeral #, deberás cambiarlos por los links
correspondientes de tus redes sociales.
Eso es todo ahora dale un clic en “Guardar”,
y ubica tu nuevo widget donde tu quieras.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé.
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
te felicito es realmente bonito, lo e puesto y parece que no falla , así que se queda jjj, saludos y buen trabajo
ResponderEliminarHola, de nada saludos.
ResponderEliminarbuena opcion, a mis favoritos.
ResponderEliminarHola, de nada.
ResponderEliminarSaludos.
Hola Luis, te cuento que quedaron perfecto en mi blog felicitaciones..!
ResponderEliminarHola, me da gusto que te haya quedado bien,
EliminarSaludos.
Gracias!!!!
ResponderEliminarSE LE PUEDEN AGREGAR MAS REDES A ESTE ESTILO COMO LO HAGO, ENSEÑAME AGREGARLE UNA DE INSTAGRAN Y YO HAGO LAS DEMAS
ResponderEliminar