domingo, 7 de febrero de 2016

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

¡Comparte el tutorial!
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
    Ayúdanos compartiendo esto
    WhatsApp

    En este momento hay comentario(s) sobre Tutorial: Cómo añadir widget social estilo Metro en Blogger.


    En este momento hay 0 comentarios sobre Tutorial: Cómo añadir widget social estilo Metro en Blogger.

     
    Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
    Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.