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:

  URL-Facebook    =  Enlace de nuestra página de Facebook

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.
Gadget de Redes Sociales METRO STYLE Gadget de Redes Sociales METRO STYLE Reviewed by Sergio Medina on marzo 18, 2017 Rating: 5

No hay comentarios.

Boletín Semanal

Boletín Semanal