El gadget de etiquetas en forma de menú

Casi todas las semanas me preguntan cómo incluir un enlace hacia un grupo de entradas en un menú de Blogger, de tal forma que el contenido se vea organizado.

Para conseguir esto, antes es necesario ordenar los posts con etiquetas. El enlace de éstas mostrará un listado con el contenido correspondiente.

¿Y qué mejor que hacer uso del propio gadget de etiquetas ofrecido por Blogger para fabricar un menú de navegación?

A continuación puedes ver una imagen del resultado tanto en vertical como en horizontal:

Diseño > Edición de HTML > sin expandir artilugios

Localiza esta línea en tu plantilla:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Ahora, justo debajo añade uno de estos dos códigos:

Para el menú vertical:

<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {text-indent: 0;background: #FDF7A5;border: 2px solid #F9DB7B;margin-bottom: 4px;padding: 6px 8px;list-style: none outside none;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Para el menú horizontal:

<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {background: #FDF7A5;border: 2px solid #F9DB7B;float: left;list-style: none outside none;margin-bottom: 4px;margin-right: 6px;padding: 6px 8px;text-indent: 0;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Las líneas que destaco en color rojo pertenecen al color de fondo y al estilo del borde que presenta el menú.

background: #FDF7A5; Es el color de fondo. Haz uso de la tabla de colores para obtener el código de tu tonalidad favorita o utiliza una imagen de fondo personal, reemplazando la línea por esto:

background: url("URL IMAGEN") repeat scroll 0 0 transparent;

Inserta la dirección de la imagen en URL IMAGEN y listo.

border: 2px solid #F9DB7B; Es el aspecto del borde o marco. Modifica su grosor aumentando o disminuyendo la cifra 2. Para hacer uso de otro estilo, sustituye solid por los términos citados en este otro tutorial. Finalmente el color, #F9DB7B Con la tabla de colores podrás cambiarlo.

Guarda la plantilla y entra en Diseño > Elementos de la página para arrastrar el gadget de etiquetas hasta el lugar idóneo (bajo la cabecera para el horizontal o en la barra lateral para el vertical).

Notas:

- Para guardar los gadgets sin título revisa esta entrada.
- Accede a este artículo para eliminar el título del gadget pero conservarlo en el apartado de Diseño > Elementos de la página.
- Si tienes problemas para guardar los cambios, utiliza el buscador de tu navegador (presionando las teclas Ctrl y F) para dar con este término: Label74. Bastará con editarlo: Label75.