Jazy Css Menu


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

DEMO:


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

8 opinaron:

G

Me encantó el menú, parece sencillo de instalar en el blog.

Voy a probarlo

Responder
squirrel

Se ve genial y el efecto al pasar el mouse es espectacular

Responder
Adrián Aratan

El menú se ve muy bueno, voy a probar a ver qué tal va :)

Responder
Yessmi

Ya lo instalé en mi blog y quedó muy bien :)

Besos

Responder
juan carlos

El menú está genial, lástima que no se café , pero de cualuier forma lo probaré :)

Responder
Genial

Muy bueno, lo aplicaré

Responder
La inquisidora

Está genial el menú :) los colores muy buenos.

Responder
Graciela

Tesoro el que tengo es con colores, con imagenes no sabía como hacerlo, ahora siiii!!!

Buen fin de semana, disfruta, besos :D

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio