Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Gadget Estilo Metro Social para Blogger



Widget 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:









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>



Aizum Blog, lunes, junio 30, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9