Menu horizontal en blogger

17

Posteado en


A pedido de un comentario de BDJMarcelo hoy les enseñare a crear un menu horizontal en blogger, es muy simple y facilita la navegacion del blog, simplemente buscamos en nuestra plantilla el codigo <head> y despues de eso agregamos el siguiente codigo
<style type='text/css'>
#menu{
width: 100%;
font-weight: bold;
font-size: 90%; }
#menu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 1px;
clear: both;
visibility: hidden; }
#menu ul{
border: 5px double #660000;
width: 99%;
background-color: #000000;
center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}
#menu ul li{
display: inline;
}
#menu ul li a{
color: #cccc66 ;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #660000;
}
#menu ul li a:hover{
background-color: #660000; center
center repeat-x;
}
</style>
Despues de que pegamos ese codigo nos vamos a
diseño->añadir un gadget->añadimos un gadget html y pegamos lo siguiente
<div id="menu">
<ul>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
</ul>
</div>

Y como se indica en el html agregamos el titulo de la pagina y la url a la que nos dirige y ya tendras tu menu de pestañas horizontal, recuerda ubicar el html abajo del header del blog.
Recuerden que no quedara igual al de mi blog porque yo edite el codigo css de acuerdo a el diseño de mi blog.

Via| igneoo

17 comentarios:

Muchísimas gracias Fabian...!!

Sos grande...!!!

Espero no molestar si tengo alguna duda... Chau y suerte con el blog que cada día está mejor...

mm esta bueno pero algunos no les aparece la opcion de añadir un gagder abajo de la cabecera y si tienes problemas con eso , solamante busca la siguiente linea en tu blog :



y los sustituyes por esto:

b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

y asi ya podras tener la opcion de añadir un gagdet en la parte superior , bueno nomas espero y les sirve y muy buen tutorial

Gracais por el aporte thelarios, buen tip para los que no pueden poner gadgets bajo la sidebar.
saludos!

ola, estoy practicando esto en un blog y me gustaria que me dijeras que tipo de modificaciojnes hiciste tu para que el menu de pestañas se pusiera en la imagen esa, por favor pork a parte de que a mi se me pone en el cuerpo del blog y no en la imagen de la cabecera, si quiero quitar la cabecera tampoco se.

Muchas gracias

MUCHAS GRACIAS,fenómeno.
¿Cómo hago para cambiarles el color?

busca el codigo
#menu ul li a{
color: #cccc66 ;
y en color le colocas el codigo de color html que quieras

MUCHAS GRACIAS AMIGO!

fue el unico how-to que me sirvio!

Excelente, gracias Fabian pero aclaro que debes complementar con lo dicho por tHeLaRiOs a quien agradezco también. Ya tengo mi menu y sinceramente fue lo unico que me sirvió.

Saludos!

Me encantó.
¡Gracias!
Por cierto, ¿cómo puedo poner una fuente mayor?
Es que me gustaría que se viera más grande el menú...

Mil gracias.

Para colocar una fuente de tamaño mayor debes buscar y cambiar el siguiente valor
font-size: 90%; }
ese porcentaje lo cambias por uno mayor como 100% y asi aumentara el tamaño de la letra.
Saludos

Gracias, Fabián, pero sólo consigo que aumente el recuadro, pero el tamaño de la fuente no, y eso que estoy modificando la font-size, no sé de qué puede ser, pero no te preocupes.
Muchas gracias por tu respuesta.

Hola, CHG Events que raro anteriormente me parece haber cambiado el tamaño de la fuente asi, lamento no haber podido ayudarte más :( igual si tienes otra duda avisas.
Saludos!

Este comentario ha sido eliminado por el autor.

Me ayudaste, Fabián, claro que sí... No sé que le pasará al blog... Igual, como soy novata, yo me lié...
Por cierto, Fabián, a ver si juntos conseguimos una nueva cosa para mi menú... A uno de los epígrafes, o sea, a una de las opciones del menú, ¿se le puede añadir un submenú o dos submenús que lleven a otros enlaces?
No sé si me he explicado bien.
Mil gracias, eres super rápido en la respuesta.
Muaaaaaaksssss

Creo que lo que buscas es lo que explican en esta direccion:
http://igneoo.blogspot.com/2009/05/como-hacer-un-menu-horizontal-con-sub.html
Saludos!

¡Muchas gracias, Fabián!
Lo voy a intentar y te cuento.
Gracias.
Saludos.

Man,me ha servido mucho. Pero tengo una duda. Ya puse categorias en la barra,(inicio,programas, peliculas,manuales)¿Cómo hago para colocar los enlaces a cada uno? es decir, cuando de clic en peliculas me mande a peliculas,cuando de clic en manuales me mande a manuales y asi. Y no a la misma página

Publicar un comentario

No dudes en dar tu opinion ni en preguntar, recuerda suscribirte a mi Feed