2/12/12

Tutorial para el blog: insertar iconos de redes sociales con códigos HTML







Hace ya unos tutoriales os aconsejé sobre cómo insertar en los blogs los iconos de las redes sociales de dos maneras: una, a través de botones propios de cada red; y, dos, a través de imágenes.
También os propuse enlazar imágenes con códigos HTML (recuérdalo aquí).
Y aquí os descubría este tipo de fuentes para crear iconos sociales.


En el tutorial de hoy se mezclan los tres anteriores, porque veremos como insertar los iconos sociales, hechos a partir de esas fuentes, e insertados como códigos HTML.

Para insertar los iconos de redes sociales en el blog primero necesitamos tenerlos. Podemos crearlos usando las fuentes que os comenté el viernes a través de un procesador de imágenes, (como hice yo, jugando con estas fuentes y con otras); o podemos descargarlos de internet.

Una vez tengamos los iconos, necesitamos su URL, que se consigue colgándolas en una entrada o en cualquier aplicación tipo Flickr, Google sites, Photobucket...
Si las cuelgas en una entrada, con el botón derecho del ratón COPIA SU URL.

Entramos en diseño y agregamos un gadget HTML/HAVASCRIPT.





Utilizaremos un código por imagen. Así que si tenemos 4 iconos, generaremos 4 códigos, que los editarás según tus necesidades cambiando lo que está en rosa: 

<a href="dirección completa de tu red social" target="_blank"><img src="URL DE LA IMAGEN" alt="SÍGUEME EN..."/>


Pega todos los códigos seguiditos uno de otro, así:
(los palitos verdes son para que veáis que están juntos, sin espacios)

Para que los códigos queden centrados, pondremos éste otro código al principio de toda la retahíla: <center>

Y guarda. Después sitúalo donde más te interese. Por último, GUARDA SU DISPOSICIÓN.

Espero que os hayan gustado estas fuentes y que os sean útiles para este tutorial. Podéis descargarlas y darles el uso que queráis. 




Puedes compartirlo en Facebook @Las Creaciones de Bea y Natalia,
y en Twitter @CreacionesBN
para que llegue a más bloggers.

#tutorialdeldomingo




Si creáis vuestros iconos con estas fuentes, y los instaláis, contádmelo para que lo vea o colgad una foto en 
Facebook.

Facebook ´´ Pinterest ´´ Twitter

14 comentarios:

  1. me encantan los post del domingo! un beso!!!

    ResponderEliminar
  2. La verdad es que me encanta este tipo de post! dando orden a los pequeños detalles y además enseñando como ponerlos en practica!:D
    Espero que pases un buen día guapa! :) y también comentarte que estamos de sorteo, por si te quieres pasar!^^
    xxx

    http://livelymixture.blogspot.com.es/

    ResponderEliminar
  3. ME parece un blog estupendo!

    http://mipalaciodelamoda.blogspot.com.es/

    ResponderEliminar
  4. Muchas gracias por la información. Los tutoriales de los domingos me encantan! Besos. Estoy de sorteo!

    ResponderEliminar
  5. Muchas gracias, me parece un post muy interesante! :)

    ResponderEliminar
  6. Y lo que cambia la cosa con un sólo espacio que dejemos sin querer y tonterias así con el dichoso HTML verdad? muy buenos post

    ResponderEliminar
  7. Sé que siempre lo digo y me repito, pero madre mia, jajaja me tengo que poner al día con todo esto, que quiero hacer un montón de cosas en mi blog y nunca me pongo, y esto de las redes sociales y tal, me interesa :)
    Besín!

    ResponderEliminar
  8. GENIAL!!Como siempre lo pondré en práctica y ya t diré!!

    ResponderEliminar
  9. Y por cierto tngo q aprender a colgarte la foto en facebook, q hice tus mil tutoriales y no fui capaz de sacar la foto jajajajaja!!Soy un queso!!Menos mal q las descubrí!!GRACIAS!

    ResponderEliminar
    Respuestas
    1. pues sí!! hazlo, que me hace mucha ilu!

      Eliminar
  10. Sigo mirando vuestro blog, genial este también :D

    ResponderEliminar
  11. Hola!! antes de empezar quiero decir que me encanta el blog, que es un gran tutorial y que estoy enganchadaaaa jajajaja ahora si... si quisiera centrar los iconos que tengo que añadir al código??? un saludote ;)

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. sí! antes de toda la retahíla pon center entre<> seguido de la siguiente etiqueta

      Eliminar

Related Posts Plugin for WordPress, Blogger...