Personalizar los enlaces de un menú en Blogger

Hoy he recibido una consulta en los comentarios de este blog preguntando como se personalizan los enlaces de un menú de Blogger, y voy a darle respuesta con este artículo. Todo parte de que si queremos personalizar el menú de nuestro blog, los código HTML que encontrarás en los tutoriales serán siempre generales y no tendrán hechos los enlaces. A poco que lo pienses es lógico, este paso sólo puedes hacerlo tú o alguien que sepa dónde quieres que se dirijan los enlaces: páginas, artículos concretos, todos los artículos que tienen una etiqueta, o bien otra página Web.

1. Primer paso. Conocer la anatomía del código HTML de un link.

Ya se que no quieres aprender programación, sólo crear un menú, pero lo que te voy a explicar es muy sencillo. Un enlace tiene tres partes esenciales, la etiqueta <a>, el target (objetivo) y el anchor text (palabra o frase visible). La etiqueta marca donde empieza y termina el enlaces, el target es la dirección donde quieres ir y el anchor text son las palabras visibles. Para profundizar en el tema puedes mirar este artículo.

2. Segundo paso. Localiza los enlaces en el código HTML del menú.

Ahora que sabes cómo empieza y termina un enlace podrás localizarlos con facilidad en el código HTML. Cuando los encuentre fíjate en el target que tienen, que normalmente no llevará a ningún lugar.

3. Cambia el target. Si tienes claro donde tiene que llevarte al enlace, sólo tienes que ir a la página en cuestión. Copia la dirección URL de tu bara de navegación y pega la URL en el apartado de target.

Si quieres hacer un menú por temáticas, lo habitual es enlazar diferentes etiquetas. El enlace sería así. http://www.blogeninternet.com/search/label/etiqueta

4. Cambiar el Anchor text. Sólo tienes que borrar el texto que tenga y escribir la palabra que quieres que esté visible en el menú. Por ejemplo en un blog de cocina, es posible que en el anchor text tengamos palabras como "postres", "entrantes", "pescados", "carnes"...

Un ejemplo práctico de personalización de un menú de Blogger

Para que no queden dudas vamos a desarrollar lo que te he explicado, empleando para ello uno de los menús horizontales que tienes en este artículo (es el menú nº2).

1. Primer y segundo paso. Damos por supuesto que ya sabemos las partes del código HTML, Así que directamente vamos a buscar en el siguiente código del menú, donde están los enlaces.

<div style="text-align: center;">
<span style='-moz-border-radius: 5px; background-color:#f781f3; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 1</a></span>
<span style='-moz-border-radius: 5px; background-color:#58acfa; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 2</a></span>
<span style='-moz-border-radius: 5px; background-color:#81f79f; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 3</a></span>
 <span style='-moz-border-radius: 5px; background-color:#f78181; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 4</a></span>
<span style='-moz-border-radius: 5px; background-color:#f2f5a9; padding: 10px 30px 10px 30px;'>
<a href="http://tu_link_aqui.com">Enlace 5</a></span>
<br /><br /></div>

2. Cambiar el target del enlace. "http://tu-link-aqui-com" por el sitio donde queremos ir.

En este ejemplo el primer enlace apunta a la página principal y por ello sólo está escrito el dominio. El segundo enlace está apuntando a todos los artículos que tienen la etiqueta SEO, mientras que los dos últimos enlaces están dirigidos a dos páginas estáticas de Blogger. Y ya está, el "Enlace 5" se ha eliminado.

<div style="text-align: center;">
<span style='-moz-border-radius: 5px; background-color:#f781f3; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com">Enlace 1</a></span>
<span style='-moz-border-radius: 5px; background-color:#58acfa; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com/search/label/SEO">Enlace 2</a></span>
<span style='-moz-border-radius: 5px; background-color:#81f79f; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com/p/politica-de-privacidad.html">Enlace 3</a></span>
 <span style='-moz-border-radius: 5px; background-color:#f78181; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com/p/sobre-blog-en-internet.html">Enlace 4</a></span>
<br /><br /></div>


3. Cambiar el anchor text del enlace. Allí donde pone Enlace 1, Enlace 2 .... debes escribir las palabras que quieres que sean visibles.

<div style="text-align: center;">
<span style='-moz-border-radius: 5px; background-color:#f781f3; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com">Página principal</a></span>
<span style='-moz-border-radius: 5px; background-color:#58acfa; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com/search/label/SEO">Posicionamiento Web</a></span>
<span style='-moz-border-radius: 5px; background-color:#81f79f; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com/p/politica-de-privacidad.html">Política de Privacidad</a></span>
 <span style='-moz-border-radius: 5px; background-color:#f78181; padding: 10px 30px 10px 30px;'>
<a href="http://www.blogeninternet.com/p/sobre-blog-en-internet.html">Acerca de</a></span>
<br /><br /></div>

Y con esto ya tenemos los enlaces del menú 100% a nuestro gusto. Espero que con esta guía paso a paso quede claro cómo puedes personalizar los enlaces, porque la verdad no sabría explicarlo mejor. De todas formas si tienes alguna duda deja tu comentario. Si te ha resultado útil difunde este artículo a través de Facebook, Twitter o Google+.