Tutorial: Cómo Crear un Menú con Imágenes en la Sidebar (Blogger)

Hola a todos!

Hoy os traigo un sencillo tutorial que algunas me pedísteis al subir a instagram una foto del nuevo menú del blog (podéis verlo en la sidebar) (el tutorial es más sencillo de hacer que de explicar xD)

El procedimiento es muy sencillo, ya que no requiere saber mucho html (además de que os dejaré el código para que copiéis y peguéis).

Lo primero que debemos hacer es crear (o buscar) las imágenes que queréis poner para vuestro menú. En mi caso las creé con Photoshop, usando de ancho 10px (pixeles) menos que el ancho de la sidebar, ya que ésta tiene unos márgenes internos. Podéis usar cualquier imagen que sea menor que el ancho de la sidebar.


Lo siguiente que hice fue subirlas a un servidor. En mi caso http://imageshack.us/ , pero podéis usar cualquiera que os venga bien, incluso el mismo picasa, que es dónde se suben vuestras fotos del blog.

Una vez subidas las imágenes nos vamos a blogger, al apartado diseño y añadimos un gadget en la sidebar seleccionando el de HTML.

Le ponemos un nombre, si queremos (yo le puse menú), y añadimos un código para poder añadir una imágen y vincularla a un enlace, de esta forma, se verá la imagen que hayamos decidido y al pulsar en ella, nos llevará a la página seleccionada.

-CÓDIGO:
<center><a href="LINK DE LA PÁGINA" target="_blank"><img src="LINK DE LA IMAGEN" /></a></center>

Os explico un poco el código:

• El "Center" a principio y final es para que la imagen quede centrada en la sidebar. Si no la queréis centrar, podéis quitarlo tanto al principio como al final junto con los < > y la barra inclinada.
• Donde pone "link de la página" debéis de poner el link al que queréis que lleve la imagen, ya sea una página (pestaña) del blog, una página externa o una etiqueta. Debéis quitar ese texto, y SOLO ESE TEXTO, y poner la URL dentro de las comillas.
• En el caso de que queráis poner un e-mail en vez de una página, deberéis poner dentro de las comillas "mailto:email" , por ejemplo el mío sería "mailto:aroundsandy@gmail.com" en donde pone "Link de la página"
• Donde pone "link de la imagen" deberéis poner la dirección directa a la imagen que queréis que aparezca en el menú. Cuando digo directa quiero decir aquella en la que si la ponemos en la barra de direcciones, sólo nos muestra la imagen en su tamaño real (no minimizado, o algo parecido).

Y eso sería todo. De esta forma os aparecería la primera imagen de vuestro menú. Que queréis poner otra debajo?, copiáis el código, lo pegáis debajo del que ya tenéis y cambiáis los links, tanto de la imagen como de la página, y así sucesivamente.

Si tenéis alguna duda, dejádmela en los comentarios y si hace falta, hacemos otro tutorial de lo que sea (siempre que yo sepa jeje)

Espero haber ayudado a las que queríais hacerlo.

Nos vemos en la próxima entrada!
xx