El otro día buscando un menú que no fuese muy complicado de poner me tropecé con este en el blog de Gema, bueno con este en concreto no, este está ya muy retocado por mi (espero que no le moleste a nadie) era uno parecido, total que lo coloqué en un blog y ahí está, queda bastante bien.
Si quieres llevártelo vamos a empezar.
Entramos en Diseño, Editar HTML y buscamos ]]></b:skin> y una vez localizado ponemos justo encima este código:
#navigation {
margin-:100px; /* Margen izquierdo */
top:25px; /* Margen superior */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#fff2cc; /* color de fondo */
border-bottom:3px solid #990000; /* Línea inferior *
color:#FFFFFF; /* Color de texto */
display:inline-block;
font-size:10px; /* Tamaño de fuente */
font-weight:normal;
margin-right:1px;
padding:2px 8px 2px; /* Anchura y altura de las pestañas */
text-decoration:none;
text-transform:uppercase; /* Letra mayúscula */
text-shadow:0 1px 1px #CDCDCD ;/* Sombra texto */
}
#navigation a:hover {
border-bottom:3px solid #000000; /* Linea inferior al pasar el cursor (hover) */
color:#990000; /* Color al pasar el cursor (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Color linea inferior fija (Home) */
color:#05C7C0; /* Color texto fijo (Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
margin-:100px; /* Margen izquierdo */
top:25px; /* Margen superior */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#fff2cc; /* color de fondo */
border-bottom:3px solid #990000; /* Línea inferior *
color:#FFFFFF; /* Color de texto */
display:inline-block;
font-size:10px; /* Tamaño de fuente */
font-weight:normal;
margin-right:1px;
padding:2px 8px 2px; /* Anchura y altura de las pestañas */
text-decoration:none;
text-transform:uppercase; /* Letra mayúscula */
text-shadow:0 1px 1px #CDCDCD ;/* Sombra texto */
}
#navigation a:hover {
border-bottom:3px solid #000000; /* Linea inferior al pasar el cursor (hover) */
color:#990000; /* Color al pasar el cursor (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Color linea inferior fija (Home) */
color:#05C7C0; /* Color texto fijo (Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
En color Azul lo que puedes modificar a tu gusto.
Guardamos la plantilla y nos vamos a Diseño, Añadir un gadget y abrimos un HTML javascript, ahí pegamos lo siguiente:
<div align="left">
<div id='navigation'>
<ul>
<li><a href='URL PAGINA'>HOME</a></li>
<li><a href='URL PAGINA'>TITULO</a></li>
<li><a href='URL PAGINA'>TITULO</a>
<li><a href='URL PAGINA'>TITULO</a></li>
<li><a href='URL PAGINA'>TITULO</a></li>
<li><a href='URL PAGINA'>TITULO</a></li>
</li></ul></div></div>
<div id='navigation'>
<ul>
<li><a href='URL PAGINA'>HOME</a></li>
<li><a href='URL PAGINA'>TITULO</a></li>
<li><a href='URL PAGINA'>TITULO</a>
<li><a href='URL PAGINA'>TITULO</a></li>
<li><a href='URL PAGINA'>TITULO</a></li>
<li><a href='URL PAGINA'>TITULO</a></li>
</li></ul></div></div>
Listo, ya tienes el menú. Si tienes alguna duda deja un comentario.
Publicar un comentario