Cómo colocar iconos de redes sociales personalizados en el blog vía HTML + iconos gratis

Hola a todos!

Hoy vengo con una entrada como nunca he hecho en este año y medio que llevo con el blog. Se trata de un post de recursos para el blog. Siempre me han parecido muy útiles las entradas de recursos de Maite de Made in my Home y he pensado que iba a poner mi granito de arena para ayudaros a "customizar" vuestro blog según vuestro gusto. Últimamente parece que un montón de bloggers se están incorporando a la tendencia de decorar sus blogs con iconos de las redes sociales personalizados. Sin ir más lejos, en este blog puedes encontrar cuatro iconos de purpurina para las redes sociales hechos por mí misma que, al pulsarlos, te llevan a mis diferentes redes.

Pues en el post de hoy voy a hacer dos cosas:
1) Proporcionaros unos iconos de redes sociales que he creado yo misma exclusivamente para vosotros, por si os interesa ponerlos en vuestros blogs.
2) Enseñaros cómo colocarlos correctamente en el blog para que queden más o menos como los de mi barra lateral.

Los iconos: 

Puedes descargar la imágen desde aquí.

Los he hecho en un tamaño bastante grande porque cada uno tiene su blog decorado de una manera diferente y a cada uno le pega una cosa. Si los quieres más pequeños o más grandes, no dudes en redimensionar la imágen con tu programa de retoque favorito (recomiendo photoshop, gimp o photoscape de los que yo conozco).
Como véis son tipo galáctico (estilo tumblr, como diría eLedeLaura). Por si no los reconocéis a simple vista, por orden son: Email, Facebook, Twitter, RSS para feeds, Instagram, Tumblr, Pinterest y Bloglovin. Me parece una selección bastante básica de redes sociales, un poco las que todo el mundo suele tener. No obstante, si necesitas algún icono que no esté aquí, sólo tienes que pedirlo y lo haré en exclusiva para ti.

Cómo colocarlos en el blog: 

Si eres novato en blogger o no eres nada amigo de los códigos HTML puede que te estés preguntando: "Vale, tengo los iconos guardados en el ordenador ¿Y ahora qué?". A lo mejor este tutorial es muy básico para algunos de vosotros, pero pienso que puede ser útil a otros. Ya me diréis en los comentarios si os interesan este tipo de cosas o las tenéis más que dominadas!

Lo primero que tienes que hacer es elegir los iconos que te gusten: no tienen porqué ser los míos, hay muchos gratis para descargar en internet pero a menudo falta el icono de instagram y/o el de pinterest, antes de decantarte por unos u otros, recuerda revisar que tengan un icono para cada red social que quieras anunciar en tu blog.

Ahora que tienes elegidos los iconos, vamos con el tutorial: 

1) Recortamos el icono que vayamos a utilizar con nuestro programa de retoque de imágenes preferido, yo he utilizado Photoscape porque me parece más cómodo que Photoshop para recortar. Si queremos cambiar el tamaño de la imagen también es el momento de hacerlo. Debes quedarte con el icono aislado tal y como quieres que aparezca en tu blog. Manten el formato png, es decir, no guardes la imagen en otro formato (jpg, mapa de bits...).

2) Es muy importante abrirte una cuenta en algún tipo de servidor que te permita subir imágenes y que cree una url para cada una de ellas. El mismo facebook puede hacer esto, pero es un engorro llenar tu página de facebook de iconos. Yo utilizo la página Imageshack y me funciona bien, de hecho es la que usaré para el tutorial. Antes de nada tienes que registrarte, lo cual es un poco coñazo, pero te va a ser muy útil para blogger en un futuro, estoy segura, y sólo tardarás un par de minutos, no seas vag@!

3) Una vez tienes tu cuenta, es hora de estrenarla! Al abrir la página verás esto (no olvides hacer login!):

4) La imagen tardará pocos segundos en subirse, una vez lo haga te aparecerá esto:

5) Cuando pulsemos en "Ver en tamaño completo" nos llevará aquí:

Guarda esta URL a buen recaudo, si es la primera vez que utilizas HTML incluso puedes pegarla en un documento de word, identificándola con lo que es para no perderla por ahí. En cualquier caso, no cierres esta pestaña por si tienes que volver a por la URL en algún otro momento.

6) Dejando esto aparte, entramos en Blogger, en la pestana "DISEÑO":

Pulsamos en Añadir un gadget donde queramos que aparezca, en este caso voy a añadirlo en la columna lateral.

7) En la ventana que nos aparecerá, elegimos crear un gadget de HTML:

8) Nos aparecerá un cuadro en blanco para escribir nuestro código. El modelo del código que tenemos que poner es este:

<a href="xxxxxxxxxxxxxxxxxxxxx"><img src="zzzzzzzzzzzzzzzz"></a>

Donde x será la página a la que queremos vincular nuestra imagen y z será la URL de la imagen (recordad que la URL es la dirección que previamente habíamos copiado de Imageshack). En mi caso el código sería así: 

Lo que va en la x es, en este caso, el enlace directo a mi cuenta de Pinterest y en la z la URL de la imagen que he sacado de Imageshack en el punto 5. 

De esta manera, al pinchar en este icono, el lector se verá dirigido a mi página de Pinterest. 

En la ventana del gadget, si pinchamos en "Formato RTF" podemos previsualizar cómo ha quedado nuestro icono. Cuando estés conforme, dale a "Guardar". 

9) Hecho esto, ya tenemos el icono colocadito en nuestro blog: 

Ahí lo veis. Él solito está un poco soso pero todos juntos quedarán mucho mejor. Si queremos vincular más de un icono con su respectiva página web, en la misma pestaña HTML repetimos el código base que hemos puesto antes, pero sustituyendo la X por la nueva web a la que queramos linkear y la Z por el nuevo icono (no se si me he explicado bien).

NOTA:

Para hacer el link del correo electrónico, donde pondríamos la web a la que queremos crear el hipervínculo (x), ponemos lo siguiente:

mailto:yyyyyyyyy

En este caso, y será vuestro correo electrónico. Haciendo esto, al pinchar sobre el icono se abrirá directamente una página de Outlook en la que aparecerá vuestro mail como remitente (es lo que aparece en el mío de la columna lateral si le dais).

Y así quedarían los iconos definitivamente, los he redimensionado con Photoscape (vale perfectamente Photoshop o Gimp) y luego los he subido con la técnica que os he enseñado antes.

Un par de consideraciones que te pueden interesar:

-En la ventana donde has escrito los códigos HTML (paso 8) puedes pulsar en Formato RTF para ver cómo quedarán los iconos. En esta pantalla, puedes pulsar espacios entre ellos si no quieres que queden tan juntos los unos de los otros como en la imagen de arriba.
-En esa misma ventana, si quieres que tus iconos queden centrados y no desplazados a la izquierda como en la captura de arriba, sólo tienes que escribir antes de los códigos HTML <center> y después de ellos </center>.

Eso es todo el tutorial, espero que se haya entendido bien porque la verdad es que mientras lo he redactado estaba un poco dispersa, así que ya me diréis. Si queréis una explicación más detallada de algo, en los comentarios me podéis preguntar todo lo que se os ocurra. 

Este tutorial lo podeís usar para cualquier otra imagen que queráis colocar en el blog, no sólo para iconos de este tipo!

¿Os han gustado los iconos? ¿Conocíais ya esta técnica para hacer imágenes con hipervínculo?