add

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

0 comentarios:

Publicar un comentario en la entrada

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