Menú vertical Neo

Trás haberos presentado el menú vertical Acua hace ya bastante tiempo, pensé en empezar a construír menús horizontales.

Desde hace unos días estuve ideando otro menú vertical ya que, según los comentarios que tuvo el artículo sobre la instalación del menú acua, resultaba muy atractivo y a su vez, útil.

De aspecto más elegante, el menú Neo puede introducirse en tu blog con unos sencillos pasos.

DEMO

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> e inserta este bloque de CSS encima:

<style>
#blmenu_neo {height:214px;width: 200px;margin: 10px;}
#blmenu_neo ul {list-style: none;margin: 0;padding: 0;}
#blmenu_neo li a {height: 32px;voice-family: "\"}\"";voice-family: inherit;height: 22px;text-decoration: none;}
#blmenu_neo img {border: none;}
#blmenu_neo li a:link, #blmenu_neo li a:visited {color: #000000;display: block; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNbPDkYpjNsBinQdnVjbYe_UvxAql_TN_S4s0sRj1THWu8IRMZHj1gUXNY5QAL-fFm7arnRur_Ovt5TN1e0kTd3g8w2KNB6YnpXD3HBtFeajS4NWmdntssnTSrrl_LhfDehiZBcbi5B4o/s320/blneo.png") repeat scroll 0 63px transparent;padding: 7px 0 0 30px;}
#blmenu_neo li{margin-top: -30px;}
#blmenu_neo li a:hover, #blmenu_neo li #actual {color: #000000; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNbPDkYpjNsBinQdnVjbYe_UvxAql_TN_S4s0sRj1THWu8IRMZHj1gUXNY5QAL-fFm7arnRur_Ovt5TN1e0kTd3g8w2KNB6YnpXD3HBtFeajS4NWmdntssnTSrrl_LhfDehiZBcbi5B4o/s320/blneo.png") repeat scroll 0 -34px transparent;padding: 7px 0 0 30px;}
</style>

Guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código:

<div id="blmenu_neo"><ul>
<li><a id="actual" href="URL PAGINA INICIO">Inicio</a></li>
<li><a href="URL DE LA PAGINA">TITULO DEL ENLACE</a></li>
<li><a href="URL DE LA PAGINA">TITULO DEL ENLACE</a></li>
<li><a href="URL DE LA PAGINA">TITULO DEL ENLACE</a></li>
<li><a href="URL DE LA PAGINA">TITULO DEL ENLACE</a></li>
<li><a href="URL DE LA PAGINA">TITULO DEL ENLACE</a></li>
</ul>
</div>

Reemplaza en cada caso URL DE LA PAGINA por la dirección del enlace y TITULO DEL ENLACE por el téxto que aparecerá en la casilla.

Si deseas añadir más enlaces al menú, utiliza líneas como esta:

<li><a href="URL DE LA PAGINA">TITULO DEL ENLACE</a></li>

Y agrégalas siempre antes del cierre </ul>.

Por el contrario, para reducir el número de enlaces elimina alguna de dichas líneas.

Guarda el gadget para terminar y obtener así el menú Neo.