Menú Madmenu

Hey babies! He visto que desde febrero no subo ningún menú y eso me parece fatal, con lo chulos y versátiles que pueden llegar a ser, vamos que los hay para todos los gustos, así que hoy traigo uno bastante minimalista a mi parecer y es Madmenu.

P R E V I E W 1

P R E V I E W 2

1. Vamos a Tema > Personalizar > Editar HTML y antes de ]]></b:skin> añadimos el siguiente código:

.madmenu {
display : block;
text-align: center;
text-indent: 5px;
text-decoration: none;
font-size: 14px; /* tamaño fuente */
font-weight: normal; 
font-family: Georgia; /* fuente */
font-style: italic; /* estilo fuente */
letter-spacing: 0; /* espacio dentre letras */
border-bottom: 1px solid #e0e8d8; /* borde inferior */
background-repeat: no-repeat;
vertical-align: middle;
line-height: 18px;
margin-bottom: 1px;
padding-left : 10px;
}

.madmenu:hover {
display: block;
text-decoration: none;
vertical-align: middle;
line-height: 18px;
border-bottom: 1px solid #e0e8d8; /* borde inferior */
padding-left: 10px;
}

Todo lo que está en negrita se puede cambiar a gusto.

2. Ahora vamos a Diseño y añadimos un gadget HTML/Javascript donde ponemos el siguiente código:

<div style="float: left; width: 44%">
<a href="LINK" class="madmenu">TEXTO</a>
<a href="LINK" class="madmenu">TEXTO</a>
</div>
<div style="float: right; width: 56%">
<a href="LINK" class="madmenu">TEXTO</a>
<a href="LINK" class="madmenu">TEXTO</a>
</div>
<div style="clear: both"></div>

Y, en este caso, señalado, es decir LINK y TEXTO se puede cambiar además de poder agregarse más.