Botones para hacerse fan con contador de seguidores

En este nuevo tutorial, os voy a presentar unos botones espectaculares para hacerse fan o seguidor de Twitter, Goolge+ y Facebook, y llevan consigo un espectacular efecto con jQuery, que al pasar por encima el cursor o el puntero de tu ratón, se abren una compuertas con la numeración de los seguidores que tienes en cada cuenta de cada red social, pertinente. Hay que decir, que el contador de números sociales, no es automático, es manual, deberás de actualizarlo, según se vayan haciendo fan de tu blog o página web. Cuando haces clic en cualquiera de los distintas redes sociales que porta este gadget social, te transportará al muro de cada red social, perteneciente, para que tus usuarios se hagan seguidor de tu blog.
Tengo que decir que me ha costado muchísimo compartir este gadget en este blog, me ha llevado horas, para conseguir que funcionara bien, y se visualizará bien en mi blog. Faltaban unos flecos, que se te tenían que modificar, para que se viera correctamente. Espero que estéis agradecidos tanto como yo, por hallar tal hallazgo, y por ofreceros este estupendo gadget social, inmensamente original y con contador social manual. A continuación veréis la demostración en forma de imagen o screenshot o también si lo quieres ver en funcionamiento y en acción de lo que hablamos, en la columna lateral del blog, en la zona de gadgets, en la sidebar, en la parte superior, puedes ver cómo funciona y si te gusta, añade-lo en tu blog.

1. Ahora vayamos a los códigos para insertar estos magníficos botones en tu blog de Blogger, son sólo dos pasos, y es muy fácil implantarlos, no tiene perdida, luego debes de modificar, las URL sociales por las tuyas.

Añade el siguiente código Script antes de </head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script> 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(document).ready(function() {
$('.social').hover(
function() {
$(this).find('.shutter').stop(true, true).animate({
bottom: '-36px'
},
{
duration: 300,
easing: 'easeOutBounce'
});
},
function () {
$(this).find('.shutter').stop(true, true).animate({
bottom: 0
},
{
duration: 300,
easing: 'easeOutBounce'
});
}
);
});
</script> 


Añade el siguiente código CSS y HTML en modo de gadget:
<div class="wpr"><a class="social" id="twitter" href="Aquí_Tu_URL_De_Twitter" title="Seguirnos en Twitter" target="_blank"><div class="icon"></div> <div class="shutter_frame"><div class="shutter"> <div class="number">33</div><div class="bar"></div> <div class="text">Seguir</div></div></div></a> <a class="social" id="google" href="Aquí_Tu_URL_De_Google+" title="Seguir en Google+" target="_blank"><div class="icon"></div><div class="shutter_frame"><div class="shutter"><div class="number">141</div><div class="bar"></div><div class="text">+1</div></div></div></a><a class="social" id="facebook" href="Aquí_Tu_URL_De_Facebook" title="Hazte fan en Facebook" target="_blank"><div class="icon"></div><div class="shutter_frame"><div class="shutter"><div class="number">135</div><div class="bar"></div><div class="text">Me gusta</div></div></div></a></div> <style> .clear{clear:both}.clearfix,.wpr{*zoom:1}.clearfix:after,.wpr:after{content:"";display:table;clear:both}.wpr{margin:20px auto 0;width:336px}.social{background:#eaeaea;border:0px solid;#cacaca;display:block;float:left;height:105px;margin:1px;padding:5px;width:90px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px #fff;-moz-box-shadow:inset 0 1px 1px #fff;box-shadow:inset 0 1px 1px #fff}.social .icon{background-color:#c5c5c5;background-image:url(http://3.bp.blogspot.com/-sigUt9pMmX8/UpIZ8iHIOPI/AAAAAAAARWY/17dh7ONun4I/s1600/QrH5YDn.png);background-repeat:no-repeat;height:40px;margin:8px auto 12px;width:40px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.social .shutter_frame{height:44px;overflow:hidden;position:relative;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.social .shutter_frame .shutter{bottom:0;left:0;position:absolute;width:100%}.social .shutter_frame .shutter .number,.social .shutter_frame .shutter .text{height:40px;text-align:center;text-transform:uppercase}.social .shutter_frame .shutter .number{color:#fff;font-size:13px;line-height:40px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);box-shadow:inset 0 2px 2px rgba(0,0,0,0.5)}.social .shutter_frame .shutter .text{background:#d8d8d8;color:#666;font-size:12px;line-height:47px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2);box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2)}.social .shutter_frame .shutter .bar{background:#eaeaea;border:1px solid #b7b7b7;height:6px;left:0;position:absolute;top:36px;width:88px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff;box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff}.social#twitter .icon{background-position:8px 10px}.social#twitter .number{background:#00aced}.social#twitter:hover .icon{background-color:#00aced}.social#google .icon{background-position:-50px 10px}.social#google .number{background:#da3d50}.social#google:hover .icon{background-color:#da3d50}.social#facebook .icon{background-position:-103px 9px}.social#facebook .number{background:#3f5fa3}.social#facebook:hover .icon{background-color:#3f5fa3}</style>
Algunas configuraciones a tener en cuenta:

2. Debes de añadir tus URL de tus páginas de redes sociales correspondientes de cada una de las cuentas, está resaltado en el código HTML del código anterior, así: Aquí_Tu_URL_De_Twitter... etcétera. También modifica, la numeración de los números de seguidores que tienes en cada cuenta, también está en el código HTML, del anterior código, en la parte superior, después de <div class="number"> añade el número de fans manualmente. Espero que os guste y que comentéis si tenéis alguna duda o para agradecer, gracias.

Get free premium widgets for your blog and website.