Este tutorialito, es para hacer una barra de menú en blogger como la mía, ya van varias veces que me preguntan cómo hacerlo, y pues aquí les va mi guía. Antes de empezar guarda un backup de tu plantilla por si algo sale mal la puedas recuperar sin problemas.
El objetivo es lograr algo como esto para tu blog:
Para empezar, tienes que tener la opción de añadir más elementos de página en la sección del header, así:
Blogger no nos lo permite por default, pero eso se resuelve fácil, vas a editar HTML de tu plantilla y buscas lo siguiente:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Donde cambiarás maxwidgets a 2 y showaddelement a yes. Quedando así:
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
Eso va a permitirnos añadir otro elemento arriba o bajo el header.
Lo que sigue es pegar un código en la plantilla para el menú. Esto lo vas a pegar antes de <head>
<style type='text/css'>
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: #990000;
}
.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: left;
padding: 4px 15px;
text-decoration: none;
color: white;
border-right: 2px solid black;
outline: none;
}
.barrademenu li a:hover {
color: #ffffff;
background: #000000;
outline: none;
}
</style>
En ese código se incluye el estilo que va a tener el menú, puedes alterarle los colores si quieres que son los numeros de 6 dígitos (#000000, ver links al final del post), o usando nombres comunes de colores en inglés (white, blue, pink). Con el código así como está obtienes un menú igual al mio. Trata de jugar con los colores para crear uno que vaya con tu diseño.
Ya que pegaste el código, guardas los cambios y vas a agregar elementos de página, agregas un nuevo gadget tipo HTML/Javascript y en el vas a pegar lo siguiente:
<ul class="barrademenu">
<li><a title="Kozmica.com" href="http://www.kozmica.com">Inicio</a></li>
<li><a title="Informacion" href="http://www.kozmica.com">Acerca
de</a></li>
<li><a title="Contáctame" href="http://www.kozmica.com">Contacto</a></li>
</ul>
Claro que cambias la dirección a la de tu blog. Con eso te saldrán 3 “pestañas” o espacios en el menú, para agregar una más sólo es necesario agregar otro de estos:
<li><a title="Contáctame" href="http://www.kozmica.com">Otro menu</a></li>
¡Genial!
Si has hecho todo correctamente hasta ahora tendrás una barra de menú que se ve muy bien, sólo hay un último detalle, todos los enlaces dirigen a el inicio del blog, ¿cómo agregar las secciones?
En blogger no se puede hacer una página estática, pero podemos simular una con una entrada vieja en nuestro blog. ¿Cómo?, puedes editar entradas viejas transformándolas en el Acerca de, Contacto y demás o puedes crear una nueva entrada para cada sección y cambiarle la fecha hacia atrás para que no aparezca en la portada cuando la publiques.
La fecha la cambias clickeando en Opciones de entrada e introduces la fecha y hora que desees.
Es buena idea guardar los posts de las secciones antes de tus primeras entradas (puedes revisar la fecha que esas tienen) así cuando alguien esté navegando por tu blog no se topará con los post del menú entre el contenido. También puedes elegir entre permitir o no comentarios.
Ya que hayas creado tus entradas puedes empezar a añadir el acceso a ellas desde el recién agregado menú. Lo que tienes que hacer es colocar la dirección de cada post que hiciste de secciones en el código del menú. Por ejemplo, mi sección de Sobre mí así se ve el código en mi menú:
<li><a title="Conóceme" href="http://www.kozmica.com/2008/04/sobre-m.html">Sobre mí</a></li>
Creas tantas entradas y espacios de menú como necesites.
NOTAS:
Para buscar y encontrar algo fácilmente en la plantilla usa Control+F.
Cualquier duda, cosita en la que no me haya explicado bien o no funcione me comentas aquí mismo.
Te puede servir:
Web Color Chart / Para cambiar los colores del menú, no olvides el # antes de el código del color.
HTML color codes / Otra web con códigos de color
