26/11/12

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?


56 comentarios:

  1. ¡Una entrada muy útil! Yo lo incorporé hace poquito en mi blog (en el último retoque que hice), por lo que me hubiera venido bien. Pero seguro que le sirve a un montón de gente que no sabe cómo hacerlo. Los botones te han quedado genial.
    ¡Un beso!

    ResponderEliminar
    Respuestas
    1. ¡Ah y muchas gracias por nombrarme! Me alegro de que te parezcan útiles esas entradas. ¡Habrá más!

      Eliminar
    2. Me fijé en que los habías puesto en tu blog tú también! La verdad es que es más cómodo que promocionar tus redes sociales de otras maneras... Yo estoy a ver si me hago unos nuevos, que estos los hice para probar! También estoy pensando abrir una página de Facebook o un Twitter del blog, ya veré! Me alegro de que publiques nuevas entradas de recursos, ya sabes lo fanática que soy de cambiar el aspecto al blog cada dos días!

      Eliminar
  2. Adivina quien los tiene puestos en su blog ya hahaha. Llevaba días buscando cómo hacerlo porque no tenía ni idea. Es totalmente estilo Tumblr y encima pega con el encabezado de mi blog ¡Mil gracias!:)
    Un besazo.
    http://coolkidscantdiie.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No sabes cómo me alegro de que alguien use mis creaciones! ^^ La verdad es que son totalmente de tu estilo. Me alegro mucho de que te haya servido el tutorial

      Eliminar
  3. Me viene genial!! Gracias por compartirlo :O Que maja!
    Voy a probar. Besotes.

    ResponderEliminar
    Respuestas
    1. Si? Me encanta que te sea de ayuda! Ahora me paso por tu blog a ver si al final los has puesto por ahí ^u^

      Eliminar
  4. Yo hace poco los he puesto en mi blog, y no sabía hacerlo, pero busqué un tutorial donde solo tenía que copiar y pegar el enlace. Los míos son normalitos, los clásicos y los tengo en pequeño.besos

    ResponderEliminar
    Respuestas
    1. Los discretos de toda la vida nunca fallan, pero ya sabes que en mi blog no cabe la discreción, todo tiene que ser recargadísimo jajaja yo quería poneros un tutorial para que pudiérais elegir los que más os gustasen de internet :)

      Eliminar
  5. Hola Irene!!!!!
    Solamente decirte que ¡¡¡mil gracias por tu tutorial!!! Había buscado muchas veces cómo poner los botones de las redes sociales, y en ningún sitio más claro y fácil como en el tuyo :D ¡¡enhorabuena!!!

    ResponderEliminar
    Respuestas
    1. Me encanta leer eso! Me alegro mucho de haberte podido ayudar, preciosos iconos en forma de polaroid por cierto :D

      Eliminar
  6. Holaaa!! Acabo de conocerte y ya te adoro!!!! Llevo días buscando la manera de hacer esto y no encontraba la ayuda que necesitaba!!!

    Acabo de empezar en este mundillo y estoy totalmente pez!!! Seguro que de ti aprenderé muchas cosas. Te sigo!

    Te gustaría hacerte seguidora de esta novata? Necesito un poco de apoyo!!! :-)

    Gracias por tu ayuda ¡¡Enhorabuena por tu blog!!

    ResponderEliminar
  7. hola!!
    Tengo un pequeño problema. Hice todos los pasos que indicaste pero creo que al unir los codigos de los diferentes iconos hago algo mal. Hice los pasos indicados para el primer icono que en mi caso es el de twitter. El siguiente, de facebook, lo hago de la misma manera pero lo incluyo unido al codigo html anterior. Es decir, yo quiero meter 3 iconos y para cada uno hago los pasos que están en esta página y los pongo unos seguidos de los otros en el cuadro html. De esta manera puedo ver la imagen de los tres en mi página pero solo da la opción de hacer click en el último, que es el de instagram. Cómo puedo solucionar esto¿ Tengo que unirlos de otra manera¿

    ResponderEliminar
  8. No sabía como hacerlo y me has salvado!!!! eres una genia!! te quiero :) me quedaré por aquí para ver que más cositas chulas tienes.
    Beso

    ResponderEliminar
    Respuestas
    1. Muchísimas gracias por el comentario! No me llegó la notificación al correo y por eso no he contestado antes! Me encantan tus iconos a juego con tu blog, de hecho la combinación de colores de tu blog me gusta mucho :)

      Eliminar
  9. Muchísimas gracias!!!!. No te imaginas la de tiempo que llevaba intentando juntar mis iconos en un mismo gadget, pero me liaba un montón con los tutoriales. El tuyo está muy clarito y me has ayudado un montón, <3 Gracias!!!!

    Rosario.
    http://entrelazosyabalorios.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Me alegro mucho de que te haya servido el tutorial! Me acabo de pasar por tu blog y te han quedado monísimos, qué iconos tan cucos ^^

      Eliminar
  10. Ya los he puesto en mi blog... Muchas gracias!!!!

    ResponderEliminar
    Respuestas
    1. Me alegro de que te sirviera el tutorial ^^ Muchas gracias por pasarte por el blog y dejar tu comentario!

      Eliminar
  11. Hola! ..casi no me lo puedo creer que lo haya conseguido.. después de los sarpullidos que me salian siempre cuando veia el termino..url, html..
    Vale!, lo entiendo, ha salido pero tengo un problema, me sale demasiado grande, incluso poniendo el tamaño miniatura.. ¿como lo hago?.. muchas gracias!!.

    Pillet

    ResponderEliminar
    Respuestas
    1. Te dejo un comentario en tu blog, perdón por haber tardado!

      Eliminar
  12. El post es genial! Estoy intentando averiguar con que programa has creado los iconos! Me gustaría personalizarlos yo misma! :) Me quedo por aquí, que me ha encantaado tu blog!!

    Un besito!

    ResponderEliminar
    Respuestas
    1. Hola Myriam! Pues la verdad es que hice estos iconos con Picmonkey 100%, es un programa online (no necesita descarga) que recomiendo a cualquier blogger para el diseño de su blog! Photoscape es otro programa que también va genial para hacer collages y cositas de diseño! Espero haberte ayudado! :)

      Eliminar
  13. Hola lo explicaste muy bien, pero mi problema es que subí la imagen a faceboock, y en mi blog no me aparece la imagen, solo un recuadro blanco, crees que deveria subirla a Imageshack

    ResponderEliminar
  14. Ya solucione el problema, subí la imagen a Imageshack, gracias.

    ResponderEliminar
    Respuestas
    1. Perdona por no haber podido contestarte a tiempo :( aunque la verdad nunca he subido fotos png a facebook así que no tengo ni idea y no hubiera podido ayudarte mucho...

      Eliminar
  15. ¡Hola guapísima! ¡Wow! Muchas gracias por el post.

    Llevaba tiempo que quería ponerlo en mi Blog pero no tenía ni idea de hacerlo. Con la del e-mail y la de rss no me ha quedado muy claro. Por cierto, ¡los diseños de galaxia son super chulos!
    Pasate por mi Blog si quieres y les echas un vistazo para ver como me han quedado :) http://welcometoleikasworld.blogspot.com.es/

    Y otra cosa (perdona lo pesada que soy jaja) ¿como puedo personalizarme mi barra menú del Blog? Es que en vez de tener lo que tengo quería algo con imágenes, más o menos como lo que tienes tú, pero distinto. ¡A ver si me puedes ayudar!

    ¡Muchas gracias! Tu blog está genial :)

    ResponderEliminar
    Respuestas
    1. Te escribo un mail contestando a todas tus preguntas! :)

      Eliminar
  16. Llevo días intentando poner los iconos así y no había forma.
    Muchas gracias!!!

    Ana
    http://cocinitas-na.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Genial! Me alegro de que te haya servido de algo!

      Eliminar
  17. Genial, muy útil, para alguien que va comenzando como yo, una gran herramienta gracias Irene!

    ResponderEliminar
    Respuestas
    1. Qué bien! Me encanta haberte podido ayudar!

      Eliminar
  18. Muchas gracias me sirvió de mucho :3

    ResponderEliminar
    Respuestas
    1. Si? genial! No sabes cómo me gusta leer eso!

      Eliminar
  19. Muchísimas gracias, me has ayudado muchísimo. Aquí te dejo mi blog para que veas el resultado.
    Besitos

    http://imparmakeup.blogspot.com.es/

    ResponderEliminar
  20. Me encantó! Lo explicas de manera muy sencilla, por cierto amé tu blog!

    ResponderEliminar
    Respuestas
    1. Muchas gracias! Qué comentario tan dulce ^^ Me encanta haberte podido ayudar!

      Eliminar
  21. Me encantan los íconos, he seguido todos los pasos que has indicado, me bajado el programa para recortar, luego el imageshack..todo igual..y cuando tengo todo el código echo le doy a guardar y me sale en blanco en el blog..no aparece nada..he probado mil veces... sabes porqué puede ser??? :(

    Gracias!

    http://blancalittlethings.blogspot.com

    ResponderEliminar
  22. Por fin un sitio donde se explican bien las cosas.
    Mil gracias.Me estaba volviendo mico para hacerlo.


    http://blogmicajondesastre.blogspot.com.es/

    ResponderEliminar
  23. hola muchas gracias no tiene ni idea de cuanto he buscado unos iconos que fueran de galaxia me encantaron <3 y aparte lo explicaste super bien puedes hacer mas tutos asi :3 espero y puedas darte una vuelta por mi blog
    http://rkelkhglkhuypyltr.blogspot.mx/

    ResponderEliminar
  24. bueno gracias solo necesitaba las terminaciones para colocar el link de descarga gratuita para ver q tal me quedo visita mi web:
    barsenrivadineira.blogspot.com
    jajajaja me sirvio de mucho tu ayuda gracias!!

    ResponderEliminar
  25. Hola! acabo de empezar con mi blog y la verdad que tu entrada me ha resultado muy util! asique Gracias!

    http://bymdv.blogspot.com.es/

    ResponderEliminar
  26. Que genial explicación!! Hay otros Blogs pero en ninguno lo han explicado tan bien como tu gracias a tí ya tengo iconos más chulos jeje www.elsombrerodemarypoppins.blogspot.com

    ResponderEliminar
  27. Un tutorial genial!!! Mil gracias!!!


    Un besito


    ResponderEliminar
  28. Muchas gracias por el post! Es el más claro que he encontrado y ya lo he puesto en práctica. Muy sencillo y muy bien explicado!

    ResponderEliminar
  29. hola irene soy administradora de la pagina de facebook mi trabajo y queremos agregarle iconos de otras redes sociales que tambien tenemos como twitter y linkedin a la foto de portada hemos visto que muchos famoso lo tienen pero no sabemos como hacerlo necesitamos tu ayuda...

    ResponderEliminar
  30. hola irene soy administradora de la pagina de facebook mi trabajo y queremos agregarle iconos de otras redes sociales que tambien tenemos como twitter y linkedin a la foto de portada hemos visto que muchos famoso lo tienen pero no sabemos como hacerlo necesitamos tu ayuda...

    ResponderEliminar
    Respuestas
    1. Hola leticia, no entiendo muy bien tu pregunta. Aquí explico cómo poner iconos de redes sociales en la portada del blog, quieres poner los iconos en facebook? Un besito!

      Eliminar
  31. Wow!! Que gran explicación, me sirvió mucho, ya estoy trabajando en poner mis botones, espero quede muy padre, gracias!!!!

    ResponderEliminar
  32. me ha sido muy util!!!
    Me parece genial tu blog, ¿te gustaria seguirme?
    Pasatee ♥
    http://lepetitsouriree.blogspot.com.es/

    ResponderEliminar
  33. No he usado los tuyos, porq no va con mi blog, pero te digo que fue este tutorial el que me funciono... Super sencillo... Mil gracias... Mira: www.tparalocos.blogspot.com

    ResponderEliminar
  34. Me ha salido bien, el único problema es que cuando me redirecciona no lo hace en una pestaña diferente sino en la misma
    :( Como puedo arreglar eso? me ayudas por favor!!
    Muchísimas gracias!

    Besitos♥

    ResponderEliminar