Widget seguidores de Redes Sociales para Blogger

Widget seguidores de Redes Sociales para Blogger

Alberto Lozano 7 / marzo / 2011 Blogger 12 comentarios    1 visitas
Publicidad

Hace unos días me llego un correo de un lector de V-Junker por medio de contáctanos y me pregunto sobre el widget que tengo del lado derecho en la sidebar, pero para Blogger ya que este widget es para WordPress.

Es por eso que les voy a dar los pasos a seguir para obtener este widget en su Blog en la plataforma Blogger 🙂 para que chequen como se vería les dejo un ejemplo en este Blog de pruebas.

Primero nos vamos a Diseño > Edición de HTML > Expandimos los artilugios, y tenemos que buscar </b:skin> y justo antes de esta etiqueta pegamos el siguiente código:

.subscribe_icons {
width:286px;
height:auto;
margin:0px auto;
}
.subscribe_icons li {
display:inline;
float:left;
margin:0px 2px 5px 2px;
width:52px;
text-align:center;
font-size:11px;
}
.subscribe_icons a {
display:block;
padding:40px 0px 2px;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
color:#444 !important;
}
.subscribe_icons a:hover {
color:#369 !important;
text-decoration:none;
-moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
}
.subscribe_icons .subscribe_buzz a {
background:url(https://i1205.photobucket.com/albums/bb440/VJunkercom/iconbuzzrvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_twitter a {
background:url(https://i1205.photobucket.com/albums/bb440/VJunkercom/icontwittervjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_facebook a {
background:url(https://i1205.photobucket.com/albums/bb440/VJunkercom/iconfacebookvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_rss a {
background:url(https://i1205.photobucket.com/albums/bb440/VJunkercom/iconrssvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_email a {
background:url(https://i1205.photobucket.com/albums/bb440/VJunkercom/iconmailvjunker1.png) center top no-repeat;
}

Guardamos la plantilla y nos vamos a Diseño > Elementos de la página y agregamos un nuevo gadget HTML/Javascript donde tenemos que pegar lo siguiente:

<div>
<ul class="subscribe_icons">
<li class="subscribe_buzz"><a href="USUARIO BUZZ" rel="nofollow" target="_blank">Buzz</a></li>
<li class="subscribe_twitter"><a href="ENLACE DE TWITTER" rel="nofollow" target="_blank">Twitter</a></li>
<li class="subscribe_facebook"><a href="ENLACE DE FACEBOOK" rel="nofollow" target="_blank">Facebook</a></li>
<li class="subscribe_rss"><a href="ENLACE DE FEED" rel="nofollow" target="_blank">Feed</a></li>
<li class="subscribe_email"><a href="ENLACE DE CORREO/CONTACTO O FEEDBURNER MAIL" rel="nofollow" target="_blank">Contacto</a></li>
</ul>
</div>

Por último y antes de guardar, tenemos que modificar algunos aspectos como: USUARIO BUZZ, ENLACE DE TWITTER, ENLACE DE FACEBOOK, ENLACE DE FEED y ENLACE DE CORREO/CONTACTO O FEEDBURNER MAIL, ahora si guardamos el gadget y listo tendrán su widget como lo tengo yo 🙂

Publicidad

12 Comentarios en 'Widget seguidores de Redes Sociales para Blogger'

  • mayo 6, 2011
    barbara:

    que tal. lo hice y me aparece los links es genial pero no me aparece el logo de los links! porque?

    Responder
    • mayo 6, 2011
      Alberto:

      @barbara: Lo que pasa es que el enlace de las imágenes estaba roto, pero ya volví a subir las imágenes, nada mas remplaza todo el primer código, saludos!

      Responder
  • mayo 6, 2011
    barbara:

    gracias! ahora me voy a fijar si lo puedo hacer! un apregunta mas, porque no me aparece la imagen flotante? segui todos los pasos y no me sale,

    Responder
    • mayo 6, 2011
      Alberto:

      @barbara: Como que flotante? volví a colocar este widget en el blog de pruebas y todo bien, no se a que te refieres.

      Responder
  • mayo 30, 2011
    carlos:

    introduje correctamente todo los codigos y me aparecen los iconos pero cuando clikean dice que la pagina no existe

    Responder
    • mayo 30, 2011
      Alberto:

      @carlos: Valla! parece que eres nuevo en esto de Blogger, por lo que veo, apenas estas creando tu Blog, y viendo porque falla es porque no has colocado los enlaces de cada red social, es por eso que no te re direcciona a ninguna página. Saludos!

      Responder
  • junio 21, 2011
    roy cordero:

    hola amigo me gusto mucho este post. pero te queria preguntar hacerca de los botones sociales q usas al final del post los contadores de meneame bitacora etc… como los puedo conseguir o unos parecidos para el blogger?.. te cuento lo q pasa es q yo toy usando una plantilla de worpress q la adaptaron pa usarla en blogger y al parecer las opciones de los botones de compartir o social no estan habilidados ni tampoco os comentarios, ni los botones al final de nuevos post o viejos post entre varias otras cosas, lo q me intereza es los botones social bookmarkin… y no se como ponerlos como los q tu tienes dentro de una cajita o imagen asi como estos ojala puedas ayudarme soy nuevito en esto de blogs

    Responder
  • septiembre 14, 2011
    christian:

    a mi no me salen los botones solo letras no entiendo por que..????

    Responder
    • septiembre 14, 2011
      Alberto:

      @christian: Algo estás haciendo mal, borra todo y empieza desde el principio a colocar cada código correcto como lo comento en el post, ya que revise los códigos y esta todo perfecto. Saludos!

      Responder
  • noviembre 19, 2011
    Geeky 3.0:

    Gracias justo andaba buscando este codigo !

    Responder
  • enero 10, 2012
    ricardogot2010:

    Hola,

    veo que has puesto el botón de Google Plus y quisiera saber cual es código del gadget tanto como el que se pone en HTML.

    Soy @ricardogottheil y necesito hablar con vos de lo del proyecto.

    Responder
  • septiembre 2, 2012
    JUANCHO:

    que buen articulo me sirvio mucho gracias !!!

    Responder

Deja tu comentario

  • Nombre:
    E-mail:
    URL: (opcional)