Widget de redes sociales con efectos

 Widget de redes sociales con efectos

Tener un buen widget de redes sociales en nuestro blog de blogger, es algo necesario para nuestro blog. 

Para 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. 

Ahora vamos a ver como instalamos el Widget de redes sociales en nuestro blog, seguir los pasos que os indico a continuación que son muy sencillos.

1-Un clic en “Diseño”                                     

2-Clic en “Añadir un gadget”   
             

3-Busca el widget que dice “HTML-Javascript” y ábrelo 

                                                                        

                                                                                 

4-Coloca el siguiente codigo en el 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/AVvXsEg8GD8kdXirqNNIMaiC7beHzmwRphwg0_Vp8oToL9R1ChkjiadPqQXGpG_xTc8M6E7BKsXPWl91D708r9LhxBUy_i8hu4hxIegP3nYMoGcOZaiYxthfiGHG94z5eEx1Uyxvt7F9uFhsaMg/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-->

5-Da un clic en “Guardar”

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.

Fecha:04/05/2018

Fuente: ayudadeblogger

Publicado por: