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='2' 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 #000000;
border-top: 2px solid #000000;
background: #990000;
}
.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: left;
padding: 4px 15px;
text-decoration: none;
color: #ffffff;
border-right: 2px solid #000000;
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 href="http://www.kozmica.com" title="Kozmica.com">Inicio</a></li>
<li><a href="http://www.kozmica.com" title="Informacion">Acerca
de</a></li>
<li><a href="http://www.kozmica.com" title="Contáctame">Contacto</a></li>
</ul>
<br left” style="”clear:"/>
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 href="http://www.kozmica.com" title="Contáctame">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 href="http://www.kozmica.com/2008/04/sobre-m.html" title="Conóceme">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.
muy buen truco...en unos dias lo implemento y te aviso como me fue
ResponderEliminarsaludos
Esto va a hacer muy felices a algunos bloggeros :)
ResponderEliminar¿Y no tienes plantillas para wordpress.com?? :)
ResponderEliminarPor fin!
ResponderEliminarLa explicacion esta muy precisa y muy bien explicada... tan bien que lo hice perfectamente. Pero creo que te falto explicar como ELIMINAR la barra vieja!
Cuando pases por mi blog y veas como me quedo NO TE RIAS!
Seguramente sabras como darle la ubicacion correcta xD
Gracias, gracias y muchas gracias por esto y por todo lo demas, ya lo dije y lo repito: Tenes muy buena redaccion y haces de las cosas complejas algo simple.
Muchas gracias, Koz ;D
Kako: estoy segura que lo dijiste por mi... jajaja Besitos.
Para ver los codigos de los colores yo sugieron Photoshop :D... jajaja... Buen tutorial ;)...
ResponderEliminarSaludos
Hartas gracias!
ResponderEliminarMuchas gracias ya lo implemente en mi sitio.
ResponderEliminarhttp://cdobregonnet.blogspot.com/2008/08/blog-kozmica.html
Exelente aporte.
Chessco
http://enobregon.cdobregon.net
UUUUUUyyyy muy bueno Kozmica, te estuve molestando por correo con lo de mis feeds, pero bueno ya puse uno nuevo, los otros no los elimine, ahi estan pero me cree uno con mi nuevo dominio :D
ResponderEliminarAdemás seguí este tutorial que te felicito, está muy bueno, sin palabras, me saco el sombrero.
Hice todo en 1 día, compre dominio, le puse el dominio a mi blog, lo remodele, etc etc jeje estoy muy cansado, así que es hora de descanzar mañana sigo retocando algunas cosas que me faltan :P
Saludos...
Estoy escribiendo un post sobre mi arduo trabajo de 1 día.
ResponderEliminarEspero veas mi blog y des una opinión o crítica, y el que se anime tambien que me haga, un comentario sobre mi blog y su diseño.
Esta es la entrada para que digan que les parece mi blog:
http://www.nivmar.com/2008/08/todo-en-1-da-d.html
Opinen sobre mi diseño :D
muy buen tutorial...
ResponderEliminartengo dos dudas:
1) el primer elemento siempre me queda mal
2) me queda un espacio vacio en el final
te agradeceria si pudieras publicar la solucion
gracias
Tambien saca el tutorial de como vectorizar nuestro rostros!!!!!!!!!!
ResponderEliminarimpresionante!!! la verdad es que sos muy buen guia en esto!! no puedo creer que me salió de una, gracias!!!
ResponderEliminaramigo no me sale muy bien no se donde pegar exactamente gracias por la ayuda
ResponderEliminarok, me salio perfecto, solo una cosilla, se puede cambiar el tamaño de esta barra de menu?, es que lo quiero hacer más ancho
ResponderEliminarSaludos
Te agradezco mucho este metodo tan sencillo. No sabria decirte el tiempo que llevaba buscando esto, y al final apareciste tú como un milagro. GGGGGracias y salu2.
ResponderEliminar