Gadgets Desplegables

Muchas me habéis preguntado/pedido que explique cómo se hacen los gadgets desplegables.
En algunos blogs los usan, son muy prácticos si tenemos muchas cosas en las barras laterales y queremos acortar espacio.
Por ejemplo el archivo yo lo tengo por meses en jerarquía, pero existe la opción en el mismo gadget de presentarlo en forma de desplegable:
Pero si queremos hacer nosotros uno desplegable para nuestras secciones o categorías tendremos que seguir estos pasos:
Vamos a Diseño y añadimos un gadget de HTML/Javascript, pegaremos este código:
 <table border="1" width="200px" align="center">
<tr>
<th>
<center>
TITULO DEL GADGET
</center>
</th>
</tr>
<tr>
<th>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 1
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 2
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
</th>
</tr>
</table> 
Para personalizarlo, solamente tendréis que cambiar lo que os he marcado en color Rosa y Azul.En Rosa, las categorías, ahí tendréis que poner el título de las categorías que presentaréis por ejemplo: Recetas de Postres
En azul están los títulos de cada enlace, por ejemplo: Tarta de ChocolateDonde dice URL en verde, solamente tendréis que poner la dirección/enlace a vuestra receta o el artículo que queréis que vuestros lectores vean al hacer click en ese título.
Si queréis añadir más Categorías/Secciones, solamentre tendréis que añadir todo este trozo:
<select class="desplegable" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" size="1" name="menu">
<option />CATEGORIA 2
<option value="" />- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="URL" />Título 1
<option value="URL" />Título 2
<option value="URL" />Título 3
<option value="URL" />Título 4
<option value="URL" />Título 5
</select>
Antes del </th>
Si lo que queréis es añadir títulos a una categoría solamente tendréis que añadir más de estas líneas:<option value="URL" />Título 5 <option value="URL" />Título 6
Antes del </select>
Para personalizar la tabla pues solamente tendréis que retocar esta parte del código, la primera línea:
<table border="1" width="200px" align="center">
Lo que va acompañado de px, es el ancho, ponedle el que necesitéis, align significa la alineación, en este caso centrado, si queréis ponerle colores pues ya sabéis utilizar el background (se lo añadís) o el border-color...etc...
Es muy facilito. Espero como siempre que os sea útil.Muah!!
¡Gracias por suscribirte! ❀Lireth❀