Para poner un menú horizontal con los enlaces que nos interesen.
1- Antes de ]]></b:skin> en el HTML de nuestra plantilla, colocamos esta porción de CSS:
#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #C0C0C0;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
background-color: #333399;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #CC3300;
color: white;
}
#navcontainer #active { border-left: 1px solid #fff;
}
Aquí es donde podemos cambiar los colores de nuestro menú, el tamaño del texto, la separación, etc.
2- Buscamos en nuestra plantilla esta línea de código:
<div id='content-wrapper'>
Y justo a continuación añadimos la parte del código que mostrará nuestro menú debajo de la cabecera del blog:
<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://jesgopru23.blogspot.com' id='current'>Inicio</a></li>
<li><a href='mailto:jesgo999@gmail.com'>Contacto</a></li>
</ul></div>
Estás en: Inicio > trucos > Menú horizontal
Menú horizontal
» Escribe tu comentario aquí:
Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>
» O utiliza el antiguo formulario
Los comentarios están siendo moderados y publicados lo antes posible.
Sin comentarios