Si crees que las etiquetas de tu blog están ocupando demasiado espacio en
tu blog, ya que cuentas con muchas categorías, este tutorial es para ti. Te enseñaré
como mostrar tus etiquetas en un menú desplegable, para que puedas ahorrar
espacio en tu blog. Las etiquetas se mostrarán como estas:
Y reemplázalo con este:
Puedes modificar
la parte que dice “Selecciona una
categoría”, por el nombre que tu le quieras dar, y si no te gusta que
se muestre el número de entradas de la etiqueta, basta con eliminar la línea de
color naranja.
¡Y listo!, con eso ya tienes un menú desplegable para tus entradas. Y si deseas darle color al menú, busca el código:
.menu-etiquetas {
Para esto debes tener la Gadget “Etiquetas” añadido a tu blog, ya con eso
ingresa en el escritorio de Blogger, vas a plantilla,
y ciclas el botón “Editar HTML”.
Una vez
allí, expandes la expandes el código (puedes hacerlo clicando la opción “Expandir
plantillas de artilugios” ó clicar las flechas negras a la izquierda del código
donde están los números de línea)
Busca el siguiente código.
<ul>
<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'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<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'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
Y reemplázalo con este:
<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select><select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
¡Y listo!, con eso ya tienes un menú desplegable para tus entradas. Y si deseas darle color al menú, busca el código:
]]></b:skin>
Y pegas
justo antes de este, el siguiente:
.menu-etiquetas {
background-color:
#CEE3F6; /* Modifica el color de fondo */
color:
#000000; /* Modifica el color del texto */
}
Ahora si deseas hacer categorías, añades el gadget “Etiquetas”
y seleccionas las etiquetas que deseas mostrar, como lo ves en la siguiente
imagen:
Y sigues los mismos pasos, anteriores. Repites esto como
cuantas categorías desees.
