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
8 comentarios: