Hoy traigo unos cuantos botones para que nuestras visitas puedan suscribirse a nuestras cuentas en diversas redes sociales. Estos botones de suscripción son muy llamativos, puesto que tienen un movimiento y cambio de color al pasar el cursor sobre ellos.
Le he realizado algunos ajustes para que funcione correctamente en Blogger.
No habrá problemas de incompatibilidad o errores al funcionar porque este Gadget no utiliza scripts. Sus efectos están hecho en CSS, y esto no afectara ningún otro artilugio de nuestro blog.
Le he realizado algunos ajustes para que funcione correctamente en Blogger.
Para agregar este Widget al blog, ve a Plantilla - Editar HTML, da un clic dentro de la plantilla, presiona Ctrl + F, escribe ]]></b:skin> y presiona la tecla Enter. Justo antes pega el siguiente código.
/* Widget-TerrenoBlogger.co */
.widget-counter{
margin-bottom:20px;
overflow:hidden;
background: white;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 1px 3px 0 #B5B5B5;
-moz-box-shadow: 0 1px 3px 0 #b5b5b5;
-webkit-box-shadow: 0 1px 3px 0 #B5B5B5;
clear: both;
border: 1px solid #DDD;
border-bottom:0 none;
}
.widget-counter.col1 lo{width:100%;border:0 none !important;}
.widget-counter.col2 lo, .widget-counter.col4 lo{width: 153px;border-width:0 0 1px 0 !important;}
.widget-counter.col2 lo:nth-child(2n+2) , .widget-counter.col4 lo:nth-child(2n+2){border-left:1px solid #DDD !important;}
.widget-counter lo{
line-height:15px;
float:left;
width:102px;
padding:7px 0;
border-bottom:1px solid #ddd;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
}
.widget-counter lo:nth-child(3n-1) { border-right:1px solid #DDD; border-left:1px solid #DDD;}
.widget-counter lo a{display:block;text-align:center;}
.widget-counter lo a strong{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclGTYmbGTnaFA9HA8bYN7lNtB3ntxIzoOxuFSsEuDiQR-xYQvpc3RWThfwYP0uOhZpyYTTlTQev-OvN19mJhisV2atLUbN-8BVTs1xam2jQ0UC622Ge2usIOXNUDEflDg7Gho1LPV_oE/s1600/separate%5B1%5D.png) no-repeat;opacity:.6;display:block; height:51px; margin-bottom:5px; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s;}
.widget-counter lo a:hover strong{opacity:1;}
.widget-counter lo:hover{ background-color:#F8F8F8;}
.widget-counter lo:hover a{text-decoration: none;}
.widget-counter lo.rss-subscribers a strong{ background-position:center -884px ;}
.widget-counter lo.rss-subscribers a:hover strong{ background-position:center -939px ;}
.rss-subscribers span{font-family: BebasNeueRegular,arial,Georgia, serif;font-size: 14pt;display: inline-block;}
.widget-counter lo.facebook-fans a strong { background-position:center -992px ;}
.widget-counter lo.facebook-fans a:hover strong { background-position:center -1046px ;}
.widget-counter lo.twitter-followers a strong{ background-position:center -668px;}
.widget-counter lo.twitter-followers a:hover strong{ background-position:center -722px;}
.widget-counter lo.youtube-subs a strong{ background-position:center -776px;}
.widget-counter lo.youtube-subs a:hover strong{ background-position:center -830px;}
.widget-counter lo.vimeo-subs a strong{ background-position:center -560px;}
.widget-counter lo.vimeo-subs a:hover strong{ background-position:center -614px;}
.widget-counter lo.dribbble-followers a strong{ background-position:center -452px;}
.widget-counter lo.dribbble-followers a:hover strong{ background-position:center -506px;}
.widget-counter lo span{display:block;font-size:15px;}
.widget-counter lo a small{color:#777;}
#widget-TB {width: 310px; height: 200px;}
Si tu quieres que el Ancho y Alto de la caja se modifique automáticamente a las medidas de tu blog, puedes eliminar la linea marcada en morado.
Sin embargo, podría no verse bien y desordenarse completamente el widget. Lo recomendable es dejar las medidas originales.
Después de esto, ve a Diseño - Añadir un gadget - HTML/Javascript, y pega el siguiente codigo.
<div id='widget-TB'>
<div class="widget-counter">
<TB>
<lo class="rss-subscribers">
<a href="http://feeds.feedburner.com/terrenoblogger" target='_blank'>
<strong></strong>
<span>Subscribete</span>
<small>Al Feed RSS</small>
</a>
</lo>
<lo class="twitter-followers">
<a href="http://www.twitter.com/terrenoblogger" target='_blank'>
<strong></strong>
<span>Twiiter</span>
<small>Seguidores</small>
</a>
</lo>
<lo class="facebook-fans">
<a href="https://www.facebook.com/pages/Terreno-Blogger/161470857350835" target='_blank'>
<strong></strong>
<span>Facebook</span>
<small>Fans</small>
</a>
</lo>
<lo class="youtube-subs">
<a href="http://www.youtube.com/USUARIO" target='_blank'>
<strong></strong>
<span>Youtube</span>
<small>Subscriptores</small>
</a>
</lo>
<lo class="vimeo-subs">
<a href="https://vimeo.com/USUARIO" target='_blank'>
<strong></strong>
<span>Vimeo</span>
<small>Subscriptores</small>
</a>
</lo>
<lo class="dribbble-followers">
<a href="http://dribbble.com/USUARIO" target='_blank'>
<strong></strong>
<span>Dribble</span>
<small>Seguidores</small>
</a>
</lo>
</TB>
</div></div>
Cambia todos los enlaces marcados en verde, por los links respectivos de tus cuentas.
Recuerda que tus enlaces pueden ser diferentes a los que he dejado, pero no habrá problema por ello.
Al haber realizado lo anterior, tendrás unos llamativos botones de suscripción que atraerán a tus lectores y los incitara a seguirte en las redes sociales.
Con esto hemos terminado.
Si surgen dudas o inconvenientes, coméntalos!
.png)
