Jazy Css Menu

Un bonito menú vertical con efecto hover que podemos agregar a nuestro blog.

DEMO:

• home
• perfil
• contacto
• feed

Ahora vamos a ver cómo conseguirlo.

1.§ Lo primero que tenemos que hacer es alojar estas dos imágenes; pueden alojarlas en Imageshack, Photobucket,etc. Dan click derecho sobre las imágenes, luego en "Guardar imagen como" y las suben a su alojamiento favorito.

Imagen 1

Imagen 2


2.§ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegaremos el siguiente código:

#gpmenu{
background:#fff;
width:140px;
}
#gpmenu ul{
list-style:none;
}
#gpmenu li{
list-style:none;
margin:3px 0;
}
#gpmenu li a{
list-style:none;
background:#8faf39 url(aquí-url-imagen1) no-repeat;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
text-decoration:none;
display:block;
height:35px;
line-height:35px;
padding:0 0 0 20px;
}
#gpmenu li a:hover{
background:#da4a70 url(aquí-url-imagen2) no-repeat;
color:#fff;
text-decoration:none;
}
}

3.§ Reemplazamos lo que está resaltado en naranja y damos click a guardar.

4.§ Vamos a Diseño- Elementos de la página- Añadir un gadget y escogemos HTML/Javascript.
5.§ En el nuevo gadget pegamos lo siguiente:

<ul id="gpmenu">
<li>
<span>
<a href="URL-DEL-ENLACE">Home
</a>
</span>
</li>

<li>
<span>
<a href="URL-DEL-ENLACE">Perfil
</a>
</span>
</li>

<li>
<span>
<a href="URL-DEL-ENLACE">Contacto
</a>
</span>
</li>

<li>
<span>
<a href="URL-DEL-ENLACE">Feed
</a>
</span>
</li>
</ul>

» Cambiamos donde dice URL-DEL-ENLACE y por los enlaces que deseemos; también podemos agregar o quitar pestañas.
Finalmente damos click en Guardar.

Visto en: Dynamic Drive