#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Catalogspot plantilla blogger
Como se creó Google
Menú Material Desing
 Menú JQuery con iconos
Como podemos cambiar la direccion de la pantalla de nuestro PC?
Menu CSS
Generador Tooltip
Listas para las entradas de mi blog
Plantilla Holiday
Como agregar WhatsApp a tu blog o sitio web.
Formulas basicas en Excel  Suma y resta
 Blockquote HTML y CSS

Etiquetas en forma de menú desplegable


Si tenemos muchas etiquetas esta es una forma para que no nos ocupen mucho en nuestro blog.
Sólo necesitas entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este código:
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>

Elimínalo y en su lugar pega esto:

<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>

Con eso será suficiente. Puedes cambiar el texto Selecciona una categoría donde se indica. Si quieres que no se muestren el número de entradas que tiene cada etiqueta elimina lo que está en color azul.


También puedes darle un poco de color para que se vea más o menos de esta forma:


Selecciona una categoría


Si lo quieres así sigue el mismo procedimiento, pero adicionalmente deberás pegar antes de

]]></b:skin> este código:

.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}










Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso


Enlace Datos de Miltrucosblogger

Publicar un comentario

0 Comentarios