Menú Horizontal Negro con Verde y CSS para el Blog o Página web

El menú que les mostraré hoy día es creado con puro CSS por CSSPlay, y lo pueden utilizar libremente en su blog o página web de uso personal, para los sitios con fines económicos se aceptan donaciones.

Este sencillo menú de lista de color negro, tiene un bonito efecto tipo luz de indicación al pasar el mouse por encima de cada elemento del menú. Una de las principales característica es que el menú mantiene su forma al cambiar de tamaño, ósea que lo pueden utilizar en cualquier plantilla. Pueden verlo funcionando en mi blog de pruebas.

Para ponerlo en tu blog ve a Diseño > Edición de HTML > con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código CSS:

[+/-] Ver / Ocultar Código CSS

dl#artist dt {
display:none;
}
dl#artist dd {
padding:0;
margin:0;
}
a.xmenu, a.xmenu:visited {
display:block;
width:5em;
height:3em;
background:#000;
text-decoration:none;
text-align:center;
color:#aaa;
float:left;
}
a.xmenu span, a.xmenu:visited span {
display:block;
width:3em;
height:0.5em;
border-top:0.5em solid #000;
border-left:1em solid #000;
border-right:1em solid #000;
border-bottom:0.5em solid #000;
background:#050;
overflow:hidden;
}
* html a.xmenu span, * html a.xmenu:visited span {
width:5em;
height:1.5em;
width:3em;
height:0.5em;
overflow:hidden;
}
a.xmenu:hover {
color:#ff0;
}
a.xmenu:hover span {
background:#0f0;
}

Ahora, ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código HTML:

<dl id="artist">
<dt>Artists menu</dt>
<dd>
<a class="xmenu" href="url-de-tu-enlace">
<span></span>
Nombre1
</a>
</dd>
<dd>
<a class="xmenu" href="url-de-tu-enlace">
<span></span>
Nombre2</a>
</dd>
<dd>
<a class="xmenu" href="url-de-tu-enlace">
<span></span>
Nombre3
</a>
</dd>
<dd>
<a class="xmenu" href="url-de-tu-enlace">
<span></span>
Nombre4
</a>
</dd>
<dd>
<a class="xmenu" href="url-de-tu-enlace">
<span></span>
Nombre5
</a>
</dd>
</dl>

Cambia lo que está en color rojo por el nombre de tu enlace, y lo que está en color azul por la dirección del enlace. Si lo que quieres es añadir más enlace sólo tienes que añadir el siguiente código justo antes de la etiqueta de sierre en el código html que se los dejo en color verde.

<dd>
<a class="xmenu" href="url-de-tu-enlace">
<span></span>
Nombre
</a>
</dd>

Pueden agregar tantos enlaces como quieran.