Este gadget lo veremos uno con 5 botones pequeños alineados de forma horizontal. Están hechos con sprites y transiciones CSS3.
vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.
Ejemplo:
Usamos este codigo:
<style>Fácil y rápido, ¿no? Lo único que resta hacer es poner tus nombres de usuario de cada red social donde se indica en color rojo.
/* Botones de Redes Sociales - UniversoBlogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV0onhy6gCD951YEuIZnlmKEfDQKsEqH5QwopVJJ2tp5jYowredradrfRjWMtrsDslNM36IQqxek42y8wgneAZLqAf6CLBtFozmo3Qg0ADGz2IfPQWsOB74LUYIwVkF7yaBgxkZK0DBCoG/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSJjuxcMX2_eMUcKICG9TIjVaeIzF4-X_oVbm42R_74MHs1-43C20jNqbVqRjE58LpwKSwn3ISoc1OV7We_m3fE0YQlkuK5fP8oAQYpG6ioOQHHxI9UPdUgD1o7CqK8Rt97p91xn3gqDWw/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimWMY960KsRYNibBSle3yHSRNXaNxxueO_5ao7zLY37mL6jQpy0VEfAwOwh58fSVsTHl3Xry8K4U27eKGkNsjYJb1d-uhjU4PDwQYpBYmeWtQOb4UJo381LEP3DRVk7DhKISryYca4n8r3/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_hpAh-8SfVTq8FwQixixeAuzUCT-TZVGsz7z49DdmTjVBNVOfafEJBxNY2r3rwJ0JGdtA1Za8U7QDlJxJch-f3_lSgvRG1Tb9-fGtGfHQ3-IHuD2WejLO3CYw8xX6vdesAldZs_7F8Qtt/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4jCHpRLiALRhfcMga0-ZVgHHr18RUKlvW4DB9qJBNS_Z-goVAskX6o53IBSsB6rzSLiwTdyL0-nF6VLZvY6HBQXzFfWMBb_I_MCZ1kBdeP5oFZjfZswlX2bDeoLMPmL5_4U5ceL9FPNR/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTlBWbTXG30ad2sLX87Hu8X6UmS6as1O0w2IXEtV0i0ynlDdZnKt6UATBw5d_VrP9-CpXB9IqabIQIonbXThF2Rc4CRv6yfJml_zxrHGXYW9VHUmMm6ZfCmAMzW9hfxT4oTsu7eaoFGy4/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.
Y si no te gustan los colores, también puedes cambiarlos. Los códigos hexadecimales que están en negrita son los colores en su estado normal, y los que están en color naranja son los colores al pasar el cursor.