SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

5 mar. 2014

Cómo poner los iconos sociales en tu blog

¡Hola!
Ya estamos a miércoles, pasa el tiempo volando.
Hoy voy a explicaros un tutorial que esta en el Curso blogger 2 que publiqué hace poco. Fue gracioso porque estaba ya editando el curso cuando Cristina de Mujer después de los 40, en un coment no recuerdo bien de que post, me preguntaba justamente como poner los iconos de las redes sociales tal como los tengo yo.

Así que como el curso iba a salir al día siguiente o a los pocos días después de que comentara, pensé pues le pongo el tutorial en el curso y seguro lo lee. Porque conozco a mis lectoras y encima ese Curso fue hecho de la manera que ellas mismas pidieron que fuera.

Así fue como lo incluí en el curso, pero claro, siempre pienso que si publico todos los tutoriales aquí, en el blog, de forma gratuita, ¿por qué voy a cambiar ahora?
Sería raro, así que publico el tutorial aquí también para los despistados, gente con vaguitis que no tenga ganas de bajarse el curso y para que todos los tutoriales estén igual de accesibles.

Cómo poner los iconos sociales en tu blog
Como siempre que queramos agregar un gadget nuevo nos iremos a Diseño y en nuestra sidebar (barra lateral) agregaremos un gadget nuevo elegiremos el de HTML.

Se nos abre una ventanita como siempre y en el título no pondremos nada, lo dejaremos vacío esta vez. Sólo rellenaremos el campo de código con lo siguiente:

<div align="center"><a href="URL DE TU RSS" target="_blank"><img alt="Sígueme vía RSS" src="URL_DE_TU_IMAGEN" /></a><a href="URL DE TU FACEBOOK" target="_blank"><img alt="Sígueme en Facebook" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE BLOGLOVIN" target="_blank"><img alt="Sígueme en Bloglovin" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE TU TWITTER" target="_blank"><img alt="Sígueme en Twitter" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE TU PINTEREST/" target="_blank"><img alt="Sígueme en Pinterest" src=" URL_DE_TU_IMAGEN" /></a></div>

Cambiando lo que veis en AZUL por la dirección de vuestro sitio (ya sea facebook, twitter, etc….) y lo ROJO por la URL de la imagen del botoncito que queráis poner.

Así, todo seguido, os aparecerá en el blog un icono al lado del otro horizontalmente, si lo queréis en vertical tan solo tendréis que poner un enter entre cada </a> y <a>

Os quedaría así:

<div align="center">
<a href="URL DE TU RSS" target="_blank"><img alt="Sígueme vía RSS" src="URL_DE_TU_IMAGEN" /></a>
<a href="URL DE TU FACEBOOK" target="_blank"><img alt="Sígueme en Facebook" src=" URL_DE_TU_IMAGEN" /></a>
<a href="URL DE BLOGLOVIN" target="_blank"><img alt="Sígueme en Bloglovin" src=" URL_DE_TU_IMAGEN" /></a>
<a href="URL DE TU TWITTER" target="_blank"><img alt="Sígueme en Twitter" src=" URL_DE_TU_IMAGEN" /></a>
<a href="URL DE TU PINTEREST/" target="_blank"><img alt="Sígueme en Pinterest" src=" URL_DE_TU_IMAGEN" /></a></div>

¿Quieres que tus iconos sociales aparezcan ENCIMA de la cabecera?
Nos iremos esta vez a Plantilla y Editar HTML.
Buscaremos en nuestra plantilla (con los artiugios desplegados) Ctrl + f lo siguiente:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
y reemplazamos el 'no' por 'yes' y el '1' por un '2'.

Quedará así:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Apunte: en este ejemplo ponemos un 2 pero pueden ser hasta 5 sitios de gadgets los que podemos añadir.


Guardamos. Vamos a Diseño y vemos que encima de la cabecera ahora aparece un hueco donde añadir un gadget

El 1 --> Es el hueco donde podemos agregar el gadget que queramos que aparezca encima de la cabecera.
El 2--> El gadget lateral de los iconos sociales. como veis NO LE PONGÁIS TÍTULO para que así aparezcan solamente los iconos. Si le ponéis título aparecerá el titulo encima y no quedara tan bien como quedan solamente los iconos.

Y ya tenéis los botones de vuestras redes sociales en el blog.
Espero que os haya gustado
Besotes!

Lireth's Notebook

27 comentarios:

  1. Muchisisimas gracias por el tutorial!! Llevaba mucho tiempo buscando justamente uno para hacer eso, y asi sencillito, para dummies que digo yo, jajaja
    Te descubrí hace poquito y ya te sigo, explicas cosas interesantisimas!

    En cuanto tenga un poco de tiempo lo pruebo :)

    ResponderEliminar
  2. Gracias a ti pude poder hace poco mis iconos sociales en horizontal, me fuiste de gran ayuda.....eternamente agradecida!!!

    Besitos

    ResponderEliminar
  3. Muchas gracias por el tutorial, ha sido muy útil!!
    Un saludo

    ResponderEliminar
  4. Muchas gracias, no tenía ni idea de como ponerlos encima de la cabecera. Besos.

    ResponderEliminar
  5. Muchas gracias!! No tenia ni idea de como hacerlo!! Besos!!

    ResponderEliminar
  6. Acabo de quedarme por aquí, por tu blog, compartes mucha información muy interesante... muchas gracias.
    Un abrazo

    ResponderEliminar
  7. Muuuchas gracias!! Siempre muy útiles e interesantes tu entradas. Besos

    ResponderEliminar
  8. Aquí la aludida, agradecerte tu dedicación y trabajo porque somos muchos los que aprendemos cada dia contigo, yo efectivamente los he añadido a "Mujer después de los 40" y estoy muy contenta con el resultado. ya me dirás que te parecen maestra :D

    ResponderEliminar
  9. Genial y sencilla la explicación muchas gracias !

    ResponderEliminar
  10. Sensacional, magnifico. muy buena entrada.
    gracias por la informacion y por la clase.
    un abrazo

    ResponderEliminar
  11. ¡Hola Lireth!
    Sí, hace nada te he comentado en el post en el que nos dabas iconos sociales, pero bueno, como me he basado en tu código para poner los iconos sociales, pasaba a darte las gracias también por aquí :3

    ResponderEliminar
  12. Guauu!! esto tengo que probarlo...me da miedo el HTML, pero bueno, será cuestión de empezar. Me lo copio. Muchas gracias por la explicación.

    ResponderEliminar
  13. Muchísimas gracias por el tutorial!

    ResponderEliminar
  14. Es estupendo!!. Tenía unas ganas de tener los iconos en la cabecera, y había buscado y todos eran complicados de hacer, pero este es muy fácil de seguir y me ha funcionado... perfecto!!. Muchísimas gracias!!!

    ResponderEliminar
  15. Hola Lireth, me estoy leyendo tus tutoriales y me están resultando muy útiles. Soy muy novata en esto de los blogs, he creado el mío hace un par de semanas. Acabo de hacerme una página de FB para dar a conocer un poquito más el blog y he venido aquí para ver cómo poner los iconos de la RRSS, pero tengo una duda. Me he bajado unos iconos que pusiste tú en otro post, monísimos ;p , y veo en el tutorial que tengo que poner la URL de la imagen, pero si están en mi PC cómo pongo la URL??? Gracias de antemano por tu tiempo y dedicación
    Me encantaría que te pasaras por mi blog. Acepto todo tipo de críticas ,p
    Besos ♥♥♥
    Mi princesa Emma

    ResponderEliminar
    Respuestas
    1. Mira en este otro tutorial explico como hacer de tu blog un host de imágenes:
      http://lireth.blogspot.com.es/2014/01/cambiar-fondo-blog.html
      Espero que te sirva :)

      Eliminar
    2. Hola Lireth, muchas gracias por contestar. Al final no pude colocar tus iconos porque, creo que llevan un fondo transparente, y en mi blog aparecían unos cuadraditos grises de fondo y no sabía como quitarlos.He creado unos iconos muy sencillitos en picmonkey para ir tirando.
      Besos ♥♥♥
      Mi princesa Emma

      Eliminar
  16. hola wapa, una pregun, y para poner el icono de youtube??
    Gracias de antemano.
    Muaksss

    ResponderEliminar
    Respuestas
    1. Pues primero tienes que tener la imagencita, y luego hacer lo mismo que para los demás botoncitos, lo unico que cambia es que la dirección será la de tu canal de youtube.

      Haz exactamente lo mismo que has hecho en el botón de Facebook por ejemplo pero donde ponga la dirección de tu Facebook pone la dirección de tu canal de Youtuve y ya esta :)

      Eliminar
  17. Y si tengo la imagen, cómo la pongo????

    ResponderEliminar
  18. ¡Muchísimas gracias por esta entrada!
    He leído muchas otras que contenían tu mismo título (poner los iconos sociales encima de la cabecera) y que sin embargo o no funcionaban o estaban mal editados.

    ¡Un saludo y gracias!

    ResponderEliminar
  19. Se me queda uno encima del otro !!! Que hago :'(

    ResponderEliminar
  20. jo que facil es hacerlo tal como lo has explicado!!!! gracias!!!

    ResponderEliminar
  21. Me gustó tu publicación...muchas gracias!!

    ResponderEliminar
  22. Yo estoy desesperada porque por más que lo intento no consigo nada. Ni tan siquiera ponerlos en horizontal :( www.virginiagilrodriguez.com. No entiendo lo que hago mal con lo clarito que lo has explicado y lo sencillo que parece.

    ResponderEliminar