Primero, vamos a Edición HTML en nuestra plantilla y justo después de <head> y agregamos el siguiente código:
<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
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>
Luego, vamos a agregar "Elementos de página", "Agragar un Gadget HTML" donde queramos que aparezca nuestro menú horizontal, y copiamos el siguiente códgio:
<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 listo, ya tenemos nuestro Menú Horizontal en blogger.
No te pierdas: Cómo diferenciar la primer entrada en blogger
Entradas
28 comentarios:
Hola sabes, no me queda horizontal... me queda solamente vertical y me desconfigura la página...
Ok, me fijo a ver que pasa, tal vez es un problema en el código.
No probaste hacerlo en otro blog? en una plantilla limpia?
Gracias, funcionó de maravilla al primer intento...!!!
Salu2
Muchas gracias, me alegra mucho que hayas funcionado, es un truco bastante simple, generalemente no suele haber problemas.!
saludos!
Funcion´, gracias. ?¿como podria hacer submenus que salgan ed cada pestaña en este mismo tipo de menu?.
Hola, solo hay que agregar debajo del segundo código unas lineas, no es muy dificil, pero para que veas como se hace uno en forma completa, aquí te dejo un post:
http://igneoo.blogspot.com/2009/05/como-hacer-un-menu-horizontal-con-sub.html
cualquier duda consultame. saludos
verderamente y sin lugar a dudas la aportaciones de esta pagina a los usuarios es increible
gracia por la ayuda
Muchísimas gracias!!!!
Es fantástico pero... cómo hago para que no salga el borde rojo?? que salga negro o sin borde. Gracias¡¡¡
Hola Anyolin, eso se cambia modificando el Syle, busca:
#660000;
ese es el código de ese color rojo oscuro, podés cambiarlo por el que mas te guste. Lo mismo que el tamaño del borde, en el ejemplo está como doble (double) y con 5px, un poco grande tal vez.
saludos!
Muchas gracias por tu ayuda
GRACIAS POR EL MENU ME FUNCIONA CORRECTAMENTE, PERO NO SE COMO ENLAZAR CONTENIDOS A CADA POSICION DEL MENU, GRACIAS DE ANTEMANO
Hola Vicente, lo que tenés que hacer es colocar la url de la página en el segundo código, donde dice "aquí-url"
<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>
Me olvidaba, donde dice "texto" va el nombre que aparece en el menú, como "inicio" "sobre mi" etc
muchas gracias
pero esto quiere decir que en cada opcion de menu hay que crear un blog donde colgar la informacion, ¿ y si fuese un archivo pdf o un doc como se hace ?
gracias de antemano
No, no hace falta crear un blog nuevo para canda enlace.
El enlace puede ir a cualquier lugar, puede ser dentro de la página, por ejemplo a una entrada determinda, puede ir a unta etiqueta, a una imagen, a otra web. Si querés enlazar un PDF, ponés la dirección del PDF, y listo.
HOLA, ME AYUDo MUCHO TU TUTORIAL
SI QUIEREN PASARSE POR MI BLOG DE CINE ONLINE
www.cinedifusion.blogspot.com
MUCHAS GRACIAS
Hola ¿como estas?
Mira tengo un pequeño problema con el truco,es que lo quiero usar para crear el menù de etiquetas en mi blog, pero al ir al enlace no se muestran las notas¿sabes porquè puede ser?
lo demàs quedò bien ,pero justo lo màs importante no me sale¿ podrias ayudarme?
Gracias!!
Hola!!!
Me sirvió de maravilla :)
gracias!!
Hola!!! Preguntas: cómo cambio el color? y cómo hago para ubicar cada entrada en los items del menú? donde coloco el enlace? cómo sería? gracias!
Hola a todos ¡¡muy bueno!! esto es algo que llevo mucho tiempo intentado encontrar, justo esto, pero si se quiere añadir una imagen personalizada a cada uno de los enlaces de forma que parezca un boton con la imagen a nuestra eleccion ¿como se hace?
Hola Ignacio tengo el mismo problema que vicente no se donde subir el texto para cada menu, no se lo del enlace me gustaria que me ayudaras en eso, aui dejo mis datos para contactarnos adrianceron.encuentroandino@hotmail.com mi blog es www.encuentroandino.blogspot.com a demas me gustarai saber si me pudedes ayudar en montar mi programa de radio en este blog.... muchas gracias
HOLA, EL CODIGO ME FUNCIONO.GRACIAS
Gracias, funcionó perfect!
¿Cómo cambio la letra de Impact por otra? Gracias aun así, me sirvió de mucho!
hola!! oye y como hago que un post se vea tanto en la pagina principal como en una de estas pestañas??y que el post se vea en la pestaña como en la pagina principal... gracias
Que tal Ignacio. Gracias por compartir tus conocimientos. Tengo una pregunta. Como puedo hacer para que los submenús de un menú principal se expandan ya sea para la izquierda o para la derecha dependiendo del tamaño de la pantalla de la computadora. Te dejo mi blog para que mires cual es el problema que tengo: encuentralocerca.blogspot.com
Muchas gracias.
Publicar un comentario
Muchas Gracias por tu comentario.