Este widget incluye una imagen con efecto hover que le brinda un atractivo especial.Pero lo principal de este widget es que muestra el numero de suscriptores y puedes actualizar el numero cuando asi lo desees solo cambiando el numero.
La instalacion de este widget es sumamente facil solo copie y pegue el codigo,y actualiza el numero de
tus seguidores.
Como añadir este Gadget a tu Blogger?
1. Entra a la cuenta de Blogger > Diseño> Añadir un Gadget > HTML/Javascript.
2. Pega el codigo de abajo y guardalo.
<style>
.rss-hb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTjBz5Xogm6ffJpdTJ4Eq7g_aWAfRW4GXPJC2qmsFBSYtns5Hq2xPRvp4FOaaRLVOcFB-duJluyep4QkwbdbIYRWr-UKw6k3C-p_pATzbr7GrJqdc4vgZSBi0SQAL905zsx1KgrHwIcdQ/s1600/rss+sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 5px;
}
.rss-hb:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXzppOmry7W4NHcIHLGVUwPBZJRJV4kePUNLU-HrxqZnBgK8WuZ7zVh4IThWLRcqd2DHpPikVq_gAu8iPoOE-MV6SxRMrg0tfXNyMDw_4JSzL5BTe52TuhagL_KwgVhoSB76tbpWST7c/s1600/rss.png) no-repeat;
}
.twitter-hb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0gwdnscs9-7Tej-Ah6OWT4qK_6n5uqCRZrT_VfJgWb_vt7B_Z12bgTCcS21ioJs3wNb96GvdD8icP9qF8usJC8dQhtTAfAM8mL_TkW7rTDsLUxt8e9D0bs7yxMTda4YtRzkgvKHf9HY/s1600/twitter.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.twitter-hb:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKzascz3pc8wVjOa48qVp5z-dQ2okOxhY7wTh2fxx6g1W8pX2NCYb8Wt2vHFV6FxvsTUojcI7f3GUjXDTdHnfvIMLW5L3C0kOyiVyBtke_g43AV9yYlt9ZerbR8iRzRf4j6xacNyjuNg/s1600/twitter.png) no-repeat;
}
.facebook-hb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhlAYnOj5W95RYVbv4KGYqMp_dpho3kVZE_5460969GzYyqwWXvZKC3n6e3j5ibRKwF1fcubuZVCzlsO8ZPfw9pv3bNhL7zA8NVpbk9ToD7d2fqpZY9Mpgcf_Ba5PK79kXY_9nMB3Flg/s1600/fb+sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.facebook-hb:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUbz_2mHc6axtxJ3Mn-PV4pMHC_5fFdu_X-ok8gD3W9uEXc5QszFi7kQB7KRzMVkfn9VeAHk6NtoSAu9mjBiw4fhdEG5IEN-q49FhPRHRr8XmCVm3_BBuKWfBn5Jy6HhPhATus3Tduwk/s1600/facebook-logo.png) no-repeat;
}
.follower-rss, .follower-twitter, .follower-facebook {
font-family: Georgia, sans-serif, Times;
font-size: 1.5em;
font-style: italic;
color: #D3C5B1;
padding-top: 05px;
text-shadow: 1px 1px #B2A99D;
}
.follower-rss a, .follower-twitter a, .follower-facebook a {
color: #AA9C89;
}
.follower-rss span {
font-size: 2.2em;
font-weight: bold;
font-style: italic;
}
.follower-twitter span {
font-size: 1.9em;
font-weight: bold;
font-style: italic;
}
.follower-facebook span {
font-size: 1.9em;
font-weight: bold;
font-style: italic;
}
</style>
<div class='rss-hb'>
<div class='follower-rss'>
<span>
<a href='http://feeds.feedburner.com/supertrucosdeblogger'>33</a>
</span>loyal readers</div>
</div>
<div class='twitter-hb'>
<div class='follower-twitter'>
<span>
<a href='http://twitter.com/andante772' rel="nofollow">270</a>
</span>followers</div>
</div>
<div class='facebook-hb'>
<div class='follower-facebook'>
<span>
<a href='http://www.facebook.com/ciudadblogger'>63</a>
</span>fans</div>
</div>
- Ahora reemplace
http://feeds.feedburner.com/supertrucosdebloggercon tu URL de feedburner y reemplaceel numero 33con el numero de suscriptores de RSS (resaltado en Rojo )
- Reemplace
http://twitter.com/andante772con tu URL de twitter y reemplace el numero270con el numero de seguidores. (resaltado en color i verde )
- Reemplace
http://www.facebook.com/ciudadbloggercon tu URLde pagina de facebook y reemplace el numero63con el numero de fanaticos. (resaltado en color in Amarrillo )
Ahora guarda tu widget y todo esta finalizado.
Espero que este sencillo widget ayude en la belleza o diseño de tu blog.
0 comentarios:
Publicar un comentario