Tutorial: Cómo añadir widget social estilo Metro en Blogger

¡Comparte el tutorial!

Tweet

Si buscas gadgets para personalizar tu blog, o un gadget social para Blogger en el cual promocionar tus redes sociales, estás en el lugar correcto.

Hoy te mostraré cómo añadir un widget social estilo Metro para Blogger, verás que es muy sencillo y que se verá muy bien en tu blog de Blogger.

¿Que necesitamos?

► Blog en Blogger

Dificultad

Fácil

Paso 1:

Antes de pasar a los pasos, aquí te dejo la muestra de como se ve el widget para que te animes a implementarlo:

Lo primero que tenemos que hacer es entrar a nuestro panel de Blogger, una vez dentro iremos a la pestaña Diseño, y buscaremos un lugar para añadir nuestro nuevo Widget:

Paso 2:

Seleccionaremos la opción HTML/JacaScript:

Y ahí pegaremos el siguiente código:

<div class="metro-social">
<li><a class="fb" href="Tu URL de Facebook"></a></li>
<li><a class="tw" href="Tu URL de Twitter"></a></li>
<li><a class="gp" href="Tu URL de GooGle"></a></li>
<li><a class="fd" href="Tu URL de FeedBurner"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.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}
</style>

Sustituye los textos en color rojo del código de arriba por las URL's de tus redes sociales antes de seguir para que no se te olvide.

Una vez pegado el código guardamos los cambios y listo, el widget social ya se verá en nuestro blog.

Y listo, eso sería todo, como ves es muy sencillo y el resultado es muy llamativo. Si aún no tienes un blog en Blogger aquí abajo te dejo un video para que te inicies en este mundo de los blogs.

Video

Fin del tutorial