Menú horizontal por categorías

Hola a todos:

Supongo que habrá bastante gente que sabe acerca de Blogger y de cómo hacer sus cambios para personalizar su blog pero últimamente estoy intentando hacer cambios en el mío y se me han presentado algunas dudas.

Pensando que a los demás también les podrían surgir las mismas, he hecho este tutorial que espero que sea bastante sencillo y así podáis cambiar por vosotros mismos vuestro aspecto bloguero.

Lo primero que necesitamos es definir las etiquetas en la configuración de cada entrada, tal y como se ve en la imagen.  Cada entrada la podemos definir con varias etiquetas que vendrán separadas por comas en el campo de texto.

Y tendremos que hacer lo mismo para cada entrada ya publicada, definir sus etiquetas editando cada una de ellas.

El código del menú horizontal es de la siguiente forma:

<ul>

   <li>

      <a href='URL del enlace A'>Pestaña A</a>

   </li>

   <li>

      <a href='URL del enlace B'>Pestaña B</a>

   </li>

   <li>

      <a href='URL del enlace C'>Pestaña C</a>

   </li>

</ul>

     

Hay que recordar que este código es "tipo" y de pueden hacer tantas listas enlazadas como se quiera. Si te preguntas cómo hacer listas enlazadas, busca en este tutorial :)

¿Cómo se rellena ahora cada una de las URLs?

Nos tendremos que ir a nuestro blog y buscar las etiquetas.  Yo particularmente lo puse en un gadget por lo que será más sencillo a la hora de averiguar el link que contenga todas las entradas a cada etiqueta.  En la siquiente imagen vemos dicho gadget:

Y en mi blog aparece en la columna de la izquierda con el título de Etiquetas tal y como se ve en la imagen.

Posicionándonos dentro del gadget sobre la etiqueta de nuestro blog que queramos saber su url, pulsaremos sobre el botón derecho del ratón y nos saldrá una ventana de diálogo.  Copiaremos la url de la etiqueta tal y como muestra la figura (teniendo en cuenta que yo estoy usando Chrome), pulsando sobre la opción correspondiente.

Dependiendo del navegador que estemos utilizando, nos saldrán diferentes opciones. Aquí se detallan dependiendo del navegador la opción correcta:

• Chrome: Copiar dirección de enlace
• Internet Explorer: Copiar acceso directo
• Mozilla Firefox: Copiar la ruta del enlace

Teniendo ya la url de la etiqueta copiada, la pegaremos en nuestro código "tipo";  recordad que era de la forma:

<li>

   <a href='URL del enlace A'>Pestaña A</a>

</li>       

Por lo que ahora el código quedará de la forma:

<ul>

   <li>

   <a href='http://lascosasdefimo.blogspot.com.es/search/label/Broches'>Broches</a>

   </li>

</ul>

Ahora la pestaña Broches del menú horizontal de mi blog referenciará todas las entradas que contengan dicha etiqueta.

Para completar el menú, habrá que hacer lo mismo para cada una de las pestañas que se quiera tener  en el menú agregando otros enlaces y así configurarlo a su gusto.

Espero que os haya servido de ayuda.  Hasta otro día :)