Menú CSS fucsia con efecto hover


Y hoy les voy a enseñar a instalar en sus blogs este menú que me gustó mucho por su efecto hover,que consiste en que nos permite definir un aspecto determinado cuando situamos el cursor sobre cada link. Cómo funciona el menú? pueden verlo a continuación:



Les gustó? Pues empecemos.

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


Una vez que tengamos alojadas la imagenes,hacemos lo siguiente:

♠ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegamos lo siguiente:

#menu{
width:195px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
width:195px;
height:30px;
margin:5px 0;
display:block;
}
#menu li a{
list-style:none;
display:block;
color:#cc6699;
font-weight:bold;
text-transform:uppercase;
font-size:13px;
text-decoration:none;
line-height:30px;
text-indent:15px;
}
#menu li a:hover{

background:url(aquí-url-imagen2) no-repeat;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(aquí-url-imagen1) repeat-x left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
}
#menu li a.current, #menu li a:hover.current{

background:url(aquí-url-imagen1) repeat-x left;
color:#fff;
text-decoration:none;
}


♠ Colocamos las imágenes donde indica el código y damos click en Guardar plantilla.

Ahora, para armar los enlaces, hacemos lo siguiente:

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

<ul id="menu">
<li .current>
<span>
<a href="URL-DEL-ENLACE" class="current">Home
</a>
</span>
</li>

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

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

<li>
<span>
<a href="URL-DEL-ENLACE">Enlace 2
</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.

Si tienen alguna duda, me avisan para poder ayudarles.

► Visto en: Dynamic Drive

11 opinaron:

Adrián Aratan

Vaya qué maravilla; ahora comprendo que no se nada sobre el diseño de blogs :(

Pero este menú me ha gustado mucho ; además, creo que voy a crearme un blog en blogger.

Por cierto, una duda, puedo alternar las imágenes, osea usar la imagen 2 en lugar de la 1 y la 1 en lugar de la dos, osea invertirlas?

Saludos :D

Responder
Jéssica YK

Poco a poco se aprende y sería muy bueno que crerara un blog en blogger, además es más sencillo manejar el diseño.

En cuanto a tu pregunta, claro, puedes alternar las imágenes como desees.

Saludos

Responder
juan carlos

Un menú muy bonito :)

Responder
Genial

Me parece muy útil, pero me da un poco de "temor" meterme con el código HTML de la plantilla.

Pero lo que si me gustaría hacer es agregar una nueva columna a mi blog, tal vez puedas ayudarme.

Besitos

Responder
Jéssica YK

» juan carlos: gracias por la visita :)

» Genial: no es tan difícil modificar la plantilla con un poco de práctica te darás cuenta.
En cuanto a la segunda columna, mira aqui

Responder
Yessmi

Pero qué bueno, me encanta. Eres una genio, lo explicas muy bien y con tus indicaciones se puede aprender fácilmente :)

Besos

Responder
Jéssica YK

Yessmi: Gracias por el cumplido, pero con la práctica tu también puedes aprender más e incluso enseñar a los demás.

Saludos

Responder
Isa A.

Madre mia, me encnta pero buah no se ni como empezar con el editor en HTML...

yo intento ordenar y poner 'bonito' el blog, pero no puedo ;) me cuesta mucho :(( y mira que me paso tiempo eh... U.u
Uf aun asi thanks!.

Me encntao tu blog :)

Responder
Jéssica YK

Isa A.: con la práctica se vuelve sencillo y no es tan complicado como parece; de cualquier forma, si deseas instalar este menú, intentalo, y si tienes alguna pregunta, házmela saber para ayudarte ;)

S@lu2

Responder
Una tal Mary...

Muy bueno el tutorial! De hecho, ya está el menú en mi blog, pero tengo una duda aver si puedes ayudarme con ella o enseñarme la direccion de algun tutorial sobre ello. Es lo siguiente:

En el menú (después de Home y Mi Perfil) me gustaría poner enlaces a los post pero ordenados por sus correspondientes etiquetas, espero que me entiendas. jeje
Había pensado en poner el gadget de etiquetas y de ahi coger las urls para sustituirlas en el menú en su lugar correspondiente, pero no me gustaría tener el gadget de etiquetas además del menú.

Bueno que ya me alargué demasiado, jeje, gracias por adelantado y por el tutorial!

Saludos!

Responder
Una tal Mary...

Bueno, ya solucioné mi problema, al final era una tontería! jeje
Gracias de todos modos. =)

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