Hace tiempo os hablé de como colocar un menú en forma de pestañas en el blog, pues bien, de la misma manera podemos conseguir añadir un menú de botones en horizontal con nuestras etiquetas para colocar en la sidebar.
Antes de empezar es imprescindible tener etiquetadas nuestras entradas.
Aunque hay varios modelos de menús para aplicar a nuestras etiquetas, para el ejemplo voy a usar el "menu4", más tarde os diré como colocar los otros modelos disponibles.
[1] Nos situamos en la parte de diseño, pestaña "Edición HTML" y sin expandir artilugios localizamos la etiqueta ]]></b:skin> y justo sobre ella pegamos esta porción de código:
| #menu4 li{margin:0; padding:0 0 .25em 0; text-indent:0px; line-height:1.5em; } |
Ahora justo sobre ese trozo de código que acabamos de pegar, colocamos el resto del CSS para el menú:
| /*- Menu 4--------------------------- */#menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(http://photos1.blogger.com/blogger2/3729/970792021505273 /1600/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600 /menu4.gif) 0 -32px; padding: 8px 0 0 10px; } |
[2] Guardamos los cambios y en la parte de Diseño añadimos un nuevo elemento Etiquetas (si ya lo teníamos añadido antes, este paso no hará falta).
[3] Volvemos ahora a "Edición HTML" y expandimos los artilugios, tendremos que localizar el widget de "Etiquetas" que acabamos de añadir.
Si le hemos puesto título (que podremos retirar más tarde) nos será mucho más fácil, en cualquier caso, el código que hemos de localizar será algo como esto:
[3] Volvemos ahora a "Edición HTML" y expandimos los artilugios, tendremos que localizar el widget de "Etiquetas" que acabamos de añadir.
Si le hemos puesto título (que podremos retirar más tarde) nos será mucho más fácil, en cualquier caso, el código que hemos de localizar será algo como esto:
| <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'><b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'& gt; <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> <span dir='ltr'>(<data:label.count/ >)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> |
Tendremos que cambiar todo ese código por este otro:
| <b:widget id='Label1' locked='false' title='' type='Label'><b:includable id='main'> <div id='menu4'> <ul> <li><a expr:href='data:blog.homepageUrl'><span> Inicio</span></a></li> <b:loop values='data:labels' var='label'> <li><a expr:href='data:label.url'>< span><data: label.name/></span></a></li> </b:loop> </ul> <!-- <b:include name='quickedit'/> --> </div> </b:includable> </b:widget> |
Modificaciones
Como veis en la imagen de ejemplo, el menú está encabezado por la etiqueta Inicio que nos llevará directamente a la página principal del blog, aunque yo considero que es muy útil, pudiera ser que algunos no quisieran mostrarla en el menú, así que para prescindir de ella borraremos en el último código añadido, esta línea:
| <li><a expr:href='data:blog.homepageUrl'><span>Inicio</span> </a></li> |
Más modelos de menús
En la página de ejemplo de Hoctro's Place podéis ver el código y los ejemplos en imagen de los distintos menús (14 menús).
Para colocar uno de los que hay allí, solo tenéis que cambiar el código CSS por el del menú que escojáis, sin olvidaros de cambiar "menu4" por "menuX" en el primer trozo de código que se coloca, así como en el último (los he puesto en negrita).
.jpg)
.jpg)
.jpg)
