Este
Gadget muestra los
iconos y el número de suscriptores que tenemos en cada una
de nuestras redes sociales, los seguidores de
Twitter, los fans de
Facebook,
el número de posts y los comentarios de Blogger con un movimiento oscilante al colocar el ratón sobre cada icono.
Cómo instalar:
1 - Entrar a
Blogger .
- En la versión antigua de Blogger: Entrar al "
Diseño" -> "Elementos de página", haga clic en "
Añadir un gadget" -> "HTML / Javascript"
- En el nuevo panel: Ir a "
Diseño", haga clic en "
Añadir un gadget", seleccione "
HTML / Javascript";
2 - Cuando se abra una ventana, pega el siguiente código:
<style>
/* Iconos Sociales */
#follow img:hover {
-webkit-animation-name: rotateThis;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: rotateThis;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-o-animation-name: rotateThis;
-o-animation-duration: 2s;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in-out; }
@-webkit-keyframes rotateThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(360deg); }
}
@-moz-keyframes rotateThis {
0% { -moz-transform:scale(1) rotate(0deg); }
10% { -moz-transform:scale(1.1) rotate(0deg); }
100% {-moz-transform:scale(1.1) rotate(360deg); }
}
@-o-keyframes rotateThis {
0% { -o-transform:scale(1) rotate(0deg); }
10% { -o-transform:scale(1.1) rotate(0deg); }
100% {-o-transform:scale(1.1) rotate(360deg); }
}
</style>
<div id="follow">
<div class="redesss" style="font-size:10px;font-weight: bold;text-align:center;font-family: Arial, Helvetica, sans-serif;">
<div style="width: 62px;float:left;margin-right:10px;">
<a href="http://facebook.com/NOMBRE-PAGINA-FACEBOOK"><img src="http://codigosblog.net/servidor/gadget_social/facebook.png"/></a>
<b style="font-size: 12px;">1.000</b> <br/>Fans
</div>
<div style="width:62px;float:left;margin-right:10px;">
<a href="http://twitter.com/NOMBRE-TWITTER"><img src="http://codigosblog.net/servidor/gadget_social/twitter.png"/></a>
<b style="font-size: 12px;">1.000</b> <br/>Seguidores
</div>
<div style="width:62px;float:left;margin-right:10px;">
<img src="http://codigosblog.net/servidor/gadget_social/artigos.png"/>
<b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></b> <br/>Artículos
</div>
<div style="width: 62px;float:left;">
<img src="http://codigosblog.net/servidor/gadget_social/comment.png"/>
<b style="font-size: 12px;"><script type="text/javascript"> function
showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script><script
src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>
</b> <br/>Comentarios
</div>
<div style="clear:both;"></div>
</div>
</div>
3 - Realice los siguientes cambios:
NOMBRE-PAGINA-FACEBOOK: por el nombre de la página de Facebook
NOMBRE-TWITTER:por el nombre de usuario de Twitter.
4 - Guardar y Listo.-
Publicaciones Relacionadas
trucos blog