Cómo poner iconos de redes sociales en sidebar (Blogger)

La entrada de hoy es un sencillo tutorial para poder colocar en nuestra sidebar (o barra lateral), los iconos de las redes sociales que usamos habitualmente, para que así sea más fácil para nuestros seguidores estar en contacto con nosotras/os.

En realidad no es nada complicado, e incluso el código que os voy a poner podría valer para cualquier imagen que queráis añadir en un gadget de HTML.

Lo primero que deberemos hacer es tener los iconos que queramos colocar subidos a un hosting de imágenes, tipo imageshack o el mismo picasa. Intentad que todos los iconos tengan el mismo tamaño base, ya que sino quedarán unos más grandes que otros. De todas formas, en el código os dejaré un parámetro de X pixeles para que podáis cambiarlo fácilmente y sin tener que redimensionar las imágenes mediante un editor. Si no tenéis iconos, buscad en Google "social media icons", por ejemplo, que hay para aburrir!!

Cuando ya tengamos las imágenes subidas al servidor, nos metemos en el escritorio de blogger y accedemos al apartado "diseño" del blog, añadimos un nuevo gadget y elegimos el de HTML/Javascript

Dentro de éste, escribiremos el título del gadget (si queremos que lo tenga) y añadiremos el siguiente código para añadir nuestro primer icono. En este caso empezaremos con Facebook, pero puede ser cualquiera

<a href='URL PAGINA FACEBOOK' target='_blank'><img src='URL IMAGEN ICONO FACEBOOK' width= '48px' title='FACEBOOK' /></a>

Os he marcado en morado dónde tenéis que poner la URL de la página a la que queréis que vaya al hacer clic en el icono (en este caso de la Facebook), y la URL de la imagen del icono que queréis poner. Solo debéis sustituirlas por las que correspondan.

En rojo véis marcado el tamaño de la imagen, en este caso 48 pixeles. Lo podéis cambiar para que sean más grandes o pequeños a vuestro gusto.

En azul está marcado el título, que no es necesario ponerlo, pero cuando pongamos varios códigos, así sabremos cuál es cuál fácilmente.

Una vez hayáis rellenado el código y lo guardéis, deberá salir el primer icono. Para poner más, sólo deberéis copiar el mismo código a continuación del primero y rellenarlo con la siguiente red social que queráis añadir.

Notas:

• Si queréis que os queden centrados, poned antes del primer código <center> y al final del último código </center>. Ésto hará que queden centrados en la sidebar, en vez de a un lado.
• Si ponéis muchos iconos, es posible que no os quepan todos en una sola línea (depende del tamaño de éstos y del ancho de la sidebar)
• Si queréis poner un icono del e-mail, donde tengáis que poner la URL del email, tenéis que ponerlo así 'mailto:fulanito@mimail.com'

Y eso es todo. Espero que os haya servido a las que queráis hacerlo. Sé que muchas sabéis, pero hago este tipo de post porque alguna me los ha pedido. Yo no soy entendida en estos temas, siempre os digo que busco la información por google. Si queréis aprender sobre estos temas, os recomiendo seguir blogs como el de Mama quiero ser blogger, donde aprenderéis muchísimo.

Que tengáis buen día, y no os peguéis mucho con el HTML :P

Sígueme en

Twitter - Facebook - Instagram

Imagen | 17thAvenueDesigns