Acabo de diseñar este original menu de navegacion vertical con un poco de codigo CSS3 y una imagen de fondo, ideal para ponerlo en la sidebar o barra lateral de un blog. Lo he llamado asi (Blur), porque como vereis, los enlaces tienen un efecto desenfocado. Al pasar el cursor sobre ellos, aparecen nitidos, con el texto 'iluminado' en un borde amarillo y se desplazan ligeramente a la derecha.Para ponerlo en tu blog, copia el siguiente codigo y añadelo en un gadget HTML. No te preocupes por el tamaño, ya que se adapta automaticamente a la anchura de tu sidebar. Sustituye lo que esta escrito en rojo por la direccion url de los enlaces y el texto que le quieras poner a cada uno. Si quieres añadir o quitar enlaces, basta con poner la linea <li><a href="URL">TEXTO</a></li> o quitarla tantas veces como quieras.
<div id="fondomenublur">
<div style="font-family:century gothic;font-size:30px;color:#cdcdcd;text-align:center;font-style: normal;border-bottom:4px solid #cdcdcd;">Menu</div>
<ul class="menublur"><br/>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
</ul>
<br/></div>
<style>
#fondomenublur {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC9WI_dENYIj0ZnFs9SYkrqHP1gcf60Dav0-WZH4TjYJCM5yXVH3YSLRjWHDmk4apgy2QrpX0durISYg3M2Aus2lI5jIrtSXoobH2srVLw_3TfVCESz9GoIhoLuK_Cm0hRnQJEtORXHTw/s505/fondo%2520menu%2520Blur%2520-%2520REDEANDO.jpg)repeat scroll 0 0 #000000;
font-family: helvetica,sans-serif;width:100%;
font-weight: bold;border:4px solid #cdcdcd;
font-style: italic;
}
.menublur li{
font-size: 28px;
display:block;
}
.menublur li a{
text-decoration:none;
text-transform:uppercase;
color:transparent !important;
text-shadow: 0px 0px 6px #ffffff;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.menublur li a:hover{
color:#FFF !important;
padding-left:20px;text-shadow: -1px 0 #FAD210, 0 1px #FAD210, 1px 0 #FAD210, 0 -1px #FAD210, -1px 1px 2px #FAD210 !important;
}
.menublur:hover li a{
text-shadow: 0px 0px 6px #666;
</style>
