jueves, 7 de abril de 2011

Menú CSS simple para Blogger

Este menú css es bastante simple y no necesita configuraciones complicadas, sólo añadir o quitar los enlaces y añadir las urls correspondientes con el título.

Ejemplo del menú CSS:


Paso 1: Añadiendo el menú:

Primero, vamos a ''Diseño/Edición HTML'' marcamos ''Expandir plantillas de artilugios'', y buscamos la siguiente línea:
<div id='content-wrapper'>

Debajo de ésta, pegaremos el siguiente código:

 <ul class='menu ayudabloggers'>
<li><a href='URL1' title=''>Enlace Uno</a></li>
<li><a href='URL2' title=''>Enlace Dos</a></li>
<li><a href='URL3' title=''>Enlace Tres</a></li>
<li><a href='URL4' title=''>Enlace Cuatro</a></li>
<li><a href='URL5' title=''>Enlace Cinco</a></li>
<li><a href='URL 6' title=''>Enlace Seis</a></li>
</ul>
Paso 2: Agregando estilos:

Ahora buscamos la siguiente zona:
]]></b:skin>
Sobre ésta, pegamos el siguiente código:
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #dadada;    /* color del borde */
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;    /* orientación del menú */
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#fff; /* color del texto */
text-decoration:none;
height:24px;    /* alto del menu */
padding:9px 15px 0;
font-size:14px;    /*Tamaño de fuentes*/
}
ul.menu li a:hover,.current {
color:#000;  /*color de texto al pasar por encima */
text-decoration:none;
}
ul.menu .current a {
color:#fff;    /* color de texto */
font-weight:700;
}
ul.menu.ayudabloggers{
background-color:#000;    /* color de fondo */
}
ul.menu.ayudabloggers li a:hover, .menu.ayudabloggers li.current {
background-color:#dadada;    /* color de fondo al pasar el mouse */
}


Previsualizamos los cambios y si es satisfactorio, guardamos la plantilla:


Consideraciones:
  • Puedes situar el menú en donde quieras, por defecto se situará entre la cabecera y las entradas.
  • Recuerda que puedes personalizar el menú con colores, bordes, etc.
  • Si deseas agregar otro enlace, simplemente añade esta línea:
<li><a href='URLEXTRA' title=''>Enlace Extra</a></li>
Deberás situarla antes de </ul> del primer código.

No hay comentarios:

Publicar un comentario