Menú sencillo efecto onmouseover

Enlace 1 Enlace 2 Enlace 3 Enlace 4

Giovanna me decía si podíamos añadir un menú sencillo así que aquí va uno sencillo y vistoso a la vez. Nos situamos antes de ]]></b:skin> para añadir los estilos que son los siguientes.

#menu div.colormenu,
#menu div.colormenu a.menu {
font-family: sans-serif, Verdana, Arial;
font-size: 12pt;
color: white;
}
#menu div.colormenu {
text-align: left;
}
#menu div.colormenu a.menu {
background-color: #333;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.colormenu a.menu:hover {
background-color: #940f04;
}

Los colores los podemos modificar considerando que el color de fondo se muestra de la siguiente forma.
a.menu: tal y como lo vemos.
a.menu:hover: al pasar el cursor.

Si también queremos mostrar un color distinto al seleccionar el botón del menú podemos conseguirlo añadiendo a los estilos
#menu div.colormenu a.menu:active {
background-color:#ccc;
}

Ahora editamos un nuevo gadget escogiendo la opción HTML y en su interior añadimos lo siguiente:

<div id="menu"><div class="colormenu">
<a class="menu" href="#">Enlace 1</a>
<a class="menu" href="#">Enlace 2</a>
<a class="menu" href="#">Enlace 3</a>
<a class="menu" href="#">Enlace 4</a>
</div></div>

En lugar de texto Enlace 1 - 2- 3- 4 añadimos el texto que hará de enlace.
Donde el asterisco # lo sustituimos por la url del sitio que vamos a enlazar ya sea en el mismo blog o enlace externo.
Con "background" modificamos el color de fondo y el de fuente en "color"