3/22/2014

Lista de enlaces como menú desplegable


Cuando en tu blog haces referencia a diferentes páginas mediante el gadget "Lista de enlaces" puede que la lista se haga tan larga que te ocupe la totalidad de la página.
Esto ocurre con frecuencia en blogs de arte o fotografía donde se genera una lista agrupada por el nombre del artista y provee un link hacia la web del mismo o simplemente a la nota o post en el mismo blog.
Como nadie quiere tener ocupada la sidebar con una lista que ocupa todo el espacio, lo más recomendable es realizar un menú desplegable.
Si, ya sé que el gadget "Lista de enlaces" provee la opción de definir la cantidad de enlaces a mostrar, pero lamentablemente no aparece un botón que nos de la opción de "mostrar todos" o menos, como ocurre con el gadget "Lista de blogs".
Así que se me dio por experimentar un poco y aplicar a la lista de enlaces un menú desplegable.
Para ello debes entrar en el editor y buscar el gadget según el nombre que el mismo tenga. Para saberlo alcanza con ir a Diseño y colocar el cursor del mouse sobre el gadget sobre la palabra Editar. Al pie de página aparecerá el código que da nombre al gadget.


En base a eso buscalo en la plantilla y al expandir el artilugio verás las siguiente parte de código.

 <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>


Eso deberás reemplazarlo por el siguiente código.

<center><br/>
<select class='menu-links' onchange='location=this.options[this.selectedIndex].value;'>
  <option><h2>Listado desplegable de todos los artistas</h2></option>
<b:loop values='data:links' var='links'>
<option expr:value='data:links.target'><data:links.name/>
</option>
</b:loop>
</select>
</center>

Y listo, ya puedes verlo funcionar.



Con eso es suficiente, pero puedes cambiar el texto Listado desplegable de todos los artistas donde se indica y también puedes darle un poco de color para que se vea más acorde a la paleta de colores de tu página


Solo deberás pegar antes de
]]></b:skin> este código:
.menu-links{
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}
Ahí puedes cambiar los colores donde se indica en verde.

Suerte.

1 comentario:

Nota: solo los miembros de este blog pueden publicar comentarios.