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:

• Home
• ayuda blogger
• literatura
• cine
• música

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