Añadir iconos de redes sociales en tu blog

13.8.14

En el último post te enseñé dónde encontrar más de 3000 iconos para tu blog. Hoy, a pesar de que a lo  mejor estás de vacaciones, te enseño cómo puedes añadirlos en tu blog de manera fácil y sin complicaciones.

Sólo te llevará unos pocos minutos poner los iconos que quieres, pero si no tienes tiempo ahora, lo puedes dejar para septiembre, cuando todo vuelva a la normalidad! :)

Anadir iconos redes sociales blog

Primero de todo lo que tienes que hacer es crear el código que más adelante pondrás como gadget en la parte lateral del blog o donde quieras.

Cómo crear el código

  1. Crea una "Entrada nueva" (un nuevo post).

  2. Con el modo "Redactar", escoge la opción de añadir una imagen


    elige los iconos que guardaste en tu ordenador (en este caso he seleccionado el icono de Twitter de mi blog).

    y dale a "Añadir las imágenes seleccionadas" para que te quede en la nueva entrada.


  3. Ahora entra en el modo HTML (en vez de "Redactar") y mira el código que te ha quedado. Es muy parecido a este o igual (excepto lo que hay detras de href y src, porque es lo específico de cada imagen que subes).


    <div class="separator" style="clear: both; text-align: center;">

      <a href="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
        <img border="0" src="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" />
      </a>

    </div>
    <br />



  4. Ahora lo tienes que modificar un poco para poderlo pegar en el gadget de tu blog. Primero de todo tienes que elinimar todo lo que hay antes de <a href=

  5. (los dos trozos de texto subrayados del siguiente código)


    <div class="separator" style="clear: both; text-align: center;">


      <a href="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
        <img border="0" src="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" />
      </a>

    </div>
    <br/>



  6. A continuación tienes que tener un código parecido a este


      <a href="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
        <img border="0" src="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" />
      </a>


  7. Quita un poco más de código, que no sirve para nada en tu caso (márgenes). Es lo que hay en azúl en el siguiente código.


      <a href="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" >
        <img border="0" src="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" />
      </a>


  8. Ahora sustituye lo que está marcado, por el link de lo que quieras enlazar. En mi caso he anadido el icono de Twitter y después de href he anadido el link de mi twitter (https://twitter.com/lilcoccinelle)


      <a href=" http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png">
        <img border="0" src="http://3.bp.blogspot.com/jdhcbsH&54Dh;/U9istw6?AAAA/Twitter.png" />
      </a>


Perfecto, ahora ya tienes el código que necesitas para poner el icono en tu blog.


Cómo integrar el gadget de iconos de redes sociales?

  1. Entra en "Diseño".



  2. Añade un gadget en la parte de tu blog que más te guste o que quieras.



  3. Escoge el gadget de "HTML/Javascript".


  4. Pega el código que has creado antes en el recuadro indicado como "Contenido".

    En el caso de que quieras centrar los iconos, sólo tienes que añadir antes del código <div align="center"> y al final de todo del código, en la última linea </div;>




  5. No te olvides de "Guardar la disposición"


Así es cómo he añadido los iconos sociales en mi blog. Depende de lo ancho que sea el espacio donde pongas los gadgets, podrás poner dos, tres, cuatro o más iconos. También depende de la medida de tus iconos, no te olvides de ello!



En el caso de que quieras añadir más de un icono sólo tienes que crear el código del primer apartado varias veces y luego pegarlos todos uno debajo del otro en el gadget HTML, siguiendo las instrucciones del segundo apartado.

Espero que a partir de ahora no haya nadie en la blogosfera que no tenga los iconos a su gusto y en el lugar del blog que siempre había querido. Que acabes de pasar un buen mes de agosto y que el calor te deje respirar un poco!


Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.