add

Widget social de suscripciones horizontal para blogger


Los widgets sociales de suscripciones para blogger es la forma en la que los usuarios que visitan sus blogs lo podrán seguir. El día de hoy aprenderán a insertar un código que les mostrara en un widget de forma horizontal una nueva forma o método de suscripción social para blogger, el cual hará que algunos usuarios lo puedan seguir en sus redes sociales como Feed Rss, Twitter, Facebook, Google+, Linkedin, con esto aumentara el trafico web de su blog al momento que ustedes publiquen un nuevo tema en su blog de blogger. El widget social funciona perfectamente en todos los navegadores web como Firefox, Internet Explorer, Google Chrome etc. Al momento de la instalación no le causara ningún daño en el diseño de su blog.

Widget social de suscripciones horizontal para blogger

Además en anteriores publicaciones di a conocer algunos métodos de suscripciones de los cuales les dejo los enlaces

4.       Widget de Twitter

A continuación mire su demostración en mi blog de demos, el widget social está ubicado arriba de la cabecera principal de mi página de demos.


Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño



3 Abre un gadget “Añadir un gadget

Widget social de suscripciones horizontal para blogger

4 Busca el widget que dice “HTML/Javascript”, ábrelo e inserta las siguientes líneas de código en su interior


<style>

    .ayudadeblogger-Social-metro {
        width: 960px;
        float: left;
        margin: 0;
        padding: 1em 0;
    }

    .ayudadeblogger-Social-metro ul {
        margin: 0;
        padding: 0;
    }

    .ayudadeblogger-Social-metro ul li {
        list-style: none;
        list-style-type: none;
        padding: 0;
        text-transform: none;
        margin: 0;
        float: left;
        display: inline-block;
        width: 20%;
    }

    .ayudadeblogger-Social-metro ul li a {
        font-size: 80%;
        color: #fff!important;
        display: block;
    }

    .ayudadeblogger-Social-metro ul li a:hover {
        color: #000!important;
        background-color: #999;
        text-decoration: none;
    }

    idc-scoail ul li a, ul li a:hover {
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
    }

    .ayudadeblogger-Social-metro ul li .rss {
        background: url("http://3.bp.blogspot.com/-ngdRXBFRpUM/UeKuk3z0WKI/AAAAAAAADBQ/bbRi4AgjIAo/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .twitter {
        background: url("http://2.bp.blogspot.com/-vhpRbg4K92E/UeKun8idaJI/AAAAAAAADBk/njAvOwkBtaQ/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .facebook {
        background: url("http://2.bp.blogspot.com/-rPP0q6LhkZs/UeKukkKYMgI/AAAAAAAADBM/hrOR8EhJ-DE/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .google {
        background: url("http://2.bp.blogspot.com/-2P6YjCu0rY0/UeKuoELnV9I/AAAAAAAADBo/tqBSANktEFA/s1600/google.png") no-repeat scroll 10px center #D44937;
        background-size: 20px;
        padding: 10px 50px;
    }

    .ayudadeblogger-Social-metro ul li .linkedin {
        background: url("http://2.bp.blogspot.com/-5VGeWSSRZj0/UeKuk_FD9tI/AAAAAAAADBc/7QaZlCk9TmU/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
        background-size: 20px;
        padding: 10px 50px;
    }

    /* width of 768px */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .ayudadeblogger-Social-metro ul li {
            width: 50%;
        };
    }

    /* width of 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .ayudadeblogger-Social-metro ul li {
            width: 50%;
        };
    }

    /* width of 320px */
    @media only screen and (max-width: 480px) {
        .ayudadeblogger-Social-metro ul li {
            width: 100%;
        };
    }

    </style>

    <div class='ayudadeblogger-Social-metro'>
    <ul>
    <li><a class='rss' href='http://feeds.feedburner.com/foroayudadeblogger'>Suscribete Feed</a></li>
    <li><a class='twitter' href='https://twitter.com/ayudadeblogger'>Siguenos en Twitter</a></li>
    <li><a class='facebook' href='http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017'>Fan en Facebook</a></li>
    <li><a class='google' href='https://plus.google.com/109642587966892719343'>Siguenos en Google+</a></li>
    <li><a class='linkedin' href='http://www.linkedin.com'>Siguenos en LinkedIn</a></li>
    </ul>
    </div>

Realiza estos cambios:

He marcado de color azul en las URLs que ustedes tendrán que cambiarlas por sus respectivos perfiles de redes sociales, cambialas todas.

Eso es todo ahora dale un clic en “Guardar” y ubícalo arriba o debajo de la cabecera principal de tu blog de blogger, revisa tu blog y disfruta de este espectacular widget social en tu blog de blogger.

Recuerda suscribirte para que recibas mis nuevas actualizaciones directamente en la bandeja de entrada de tu correo electrónico.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios