Gadget de Redes Sociales METRO STYLE

Todos sabemos que las Redes Sociales toman un papel importante para aumentar las visitas a nuestro blog. Por ello es importante hacer visibles nuestras Redes en el blog. Hoy te traemos una forma fácil y creativa de agregar tus Redes Sociales en la portada de tu Blog.

Este gadget de Redes Sociales tiene un estilo metro, plano y minimalista. Podrás hacer visibles tus redes como: Facebook, Twitter, Google Plus, y RSS.

Lo primero que tenemos que hacer es dirigirnos a la sección Diseño > Añadir un Gadget y agregamos el siguiente código:

<div class="metro-social">
  <li><a class="fb" href="URL-Facebook"></a></li>
  <li><a class="tw" href="URL-Twitter"></a></li>
  <li><a class="gp" href="URL-GoogleP"></a></li>
  <li><a class="fd" href="URL-RSS"></a></li>
</div>

Ahora tenemos que colocar los enlaces a nuestras Redes Sociales. Por ejemplo:


Y así hacemos con todos lo enlaces de nuestras Redes Sociales: Facebook, Twitter, Google Plus y RSS.

Una vez cambiado los enlaces tenemos que añadir los estilos para ellos nos dirigimos a Plantilla > Editar HTML y buscamos   ]]></b:skin>   Justo arriba de este texto pegamos lo siguiente:

.metro-social { width: 285px; }

.metro-social li {

position: relative;

cursor: pointer;

padding: 0;

list-style: none;

}

.metro-social .fb, .tw, .gp, .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: 140px;

height: 70px;

}

.metro-social .gp {

background: url(//goo.gl/oT0kF) no-repeat center center #da4a38;

width: 140px;

height: 69px;

}

.metro-social .fd {

background: url(//goo.gl/ncoLY) no-repeat center center #e9a01c;

width: 282px;

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 .fd {

background: url(//goo.gl/JFGqn) no-repeat center center #e9a01c;

}

Y listo ya tendríamos nuestro gadget de Redes Sociales en nuestro blog.