Widgets y Plugins para Blogger


Widgets para Blogger - Widget de perfiles sociales


Los Widgets de perfiles sociales es la mejor forma de dar a conocer nuestros perfiles sociales a los usuarios que visitan nuestros blogs. Con este método los usuarios del internet podrán seguirnos en nuestras cuentas sociales. Dando como lugar a un incremente de trafico web en nuestros blogs. Cada vez que realices una nueva publicación los usuarios que están suscritos a sus cuentas sociales les llegara lo que publicaste. Lo que vamos hacer es ingresar un código en un widget HTML/Javascript y ubicarlo en el sidebar de nuestro blog o donde mejor nos parezca, además podrás insertar este código en una entrada en particular. Este widget de perfiles sociales funciona perfectamente en todos los navegadores web.

Widgets para Blogger - Widget de perfiles sociales

Pueden ver su demostración a continuación





Vamos a insertar el código en un widget

1 Ir a Blogger

2 Un clic en “Diseño


3 Abre un gadget “Añadir un gadget

Widgets para Blogger - Widget de perfiles sociales

4 Busca el widget que tiene como nombre “HTML/Javascript” ábrelo


5 Ingresa el siguiente código en su interior

<style>

    .social-ayudadeblogger {
    margin:0 auto;
    padding:0px;
    text-decoration: none;
    }

    .social-ayudadeblogger ul li {
    list-style-type: none;
    border-bottom:none;
    margin:0 auto;
    background: none;
    padding:0px;
    line-height: 0!important;
    }

    .social-ayudadeblogger li a {
    margin:5px 3px 0px 0px !important;
    padding:0px;
    width:50px;
    height:50px;
    text-indent:-99999px;
    float:left;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
    .social-ayudadeblogger li a.facebook1 {
    background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px 0px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-ayudadeblogger li a.facebook1:hover {
    background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -73px;
    }
    .social-ayudadeblogger li a.twitter1 {
    background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -127px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-ayudadeblogger li a.twitter1:hover {
    background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -204px;
    }
    .social-ayudadeblogger li a.google-p1 {
    background:#a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -254px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-ayudadeblogger li a.google-p1:hover {
    background: #a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -330px;
    }
    .social-ayudadeblogger li a.rss1 {
    background:#ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -381px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-ayudadeblogger li a.rss1:hover {
    background: #ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -454px;
    }

    .social-ayudadeblogger li a.pinit1 {
    background:#cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -508px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-ayudadeblogger li a.pinit1:hover {
    background: #cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -580px;
    }

    .social-ayudadeblogger li a.linkdin1 {
    background:#1698E3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -635px;
    -webkit-transition:All 0.3s ease-out;
    -moz-transition:All 0.3s ease-out;
    -o-transition:All 0.3s ease-out;
    }
    .social-ayudadeblogger li a.linkdin1:hover {
    background: #1698e3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -711px;
    }


    </style>

    <div class='social-ayudadeblogger'>
    <ul>
    <li><a class='facebook1' href='http://www.facebook.com/ayudadeblogger' target='_blank' title='Facebook' rel='nofollow'></a></li>
    <li><a class='twitter1' href='http://twitter.com/ayudadeblogger' target='_blank' title='Twitter' rel='nofollow'></a></li>
    <li><a class='google-p1' href='https://plus.google.com/+Ayudadeblogger' target='_blank' title='Google Plus' rel='nofollow'></a></li>
    <li><a class='rss1' href='http://feeds.feedburner.com/foroayudadeblogger' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
    <li><a class='pinit1' href='http://www.pinterest.com/' target='_blank' title='Pinterest' rel='nofollow'></a></li>
    <li><a class='linkdin1' href='http://ec.linkedin.com/pub/luis-chavez/53/549/a91' target='_blank' title='Linkedin' rel='nofollow'></a></li>
    </ul>
    </div>

Realiza estos cambios:

He marcado de color azul a las URLs de mis perfiles sociales, tienes que realizar sus diferentes cambios por sus perfiles sociales.

Y por último borra el nombre que dice foroayudadeblogger por el nombre de tu cuenta de suscripción FeedBurner

Eso es todo, da un clic en “Guardar” y ubica tu nuevo widget de perfiles sociales donde mejor te parezca

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

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

Saludos


Enviar por correo

Publicar un comentario

Discusión: