Gadget Estilo Metro Social para Blogger

En Blogger, existen una multitud de gadgets o widgets sociales, casi infinita, que podemos implantar en nuestro blog de Blogger, o en una Web, sólo hay que darse una vuelta por el navegador Google, y encontrarás muchos de ellos, de diversa índole. Hoy os voy a mostrar, unos botones que podrás añadirlo en vuestra columna lateral de tu blog o también conocido por Sidebar, fácilmente. A parte de darle un toqué de sofisticación y mejorar el diseño de vuestro blog, agregaremos unos botones sociales de estilo metro, con las principales redes sociales, para que te sigan, tus lectores sencillamente. Vayamos al tajo, ver la demo:

Metro Social para Blogger!
Para agregar éste widget en Blogger, sigue estos pasos!

1. Ir a Blogger
2. Después a Diseño.
3. Añadir un Gadget.
4. Y ahora ir a HTML & Javascript.
5. Y por último copiar y pegar el siguente código.
6. Haz las modificaciones pertinentes, cambia las "#" por las URL de tus redes sociales.

<div class='metro-social'>
<li><a class="fb" href="#" rel="nofollow"></a></li>
<li><a class="tw" href="#"></a></li>
<li><a class="gp" href="#"></a></li>
<li><a class="pi" href="#" rel="nofollow"></a></li>
<li><a class="in" href="#" rel="nofollow"></a></li>
<li><a class="yt" href="#"/></a></li>
<li><a class="fd" href="#" rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:295px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Get free premium widgets for your blog and website.