Revista Creaciones

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

Por Natalia_ @CreacionesBN
Tutorial para el blog: insertar iconos de redes sociales con códigos HTMLTutorial 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 descargarlas 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.


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


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)
Tutorial para el blog: insertar iconos de redes sociales con códigos HTML

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

Volver a la Portada de Logo Paperblog

Dossier Paperblog

Revistas