jueves, 26 de agosto de 2010

Hacer menu horizontal para blog



Hace unos meses os mostrábamos algunos menús que podíais agregar para vuestro blog de manera fácil y rápida: Menú acordeón y 

MENU DESPLEGABLE EN TU BLOG

Pues bien, hoy os volvemos a presentar un nuevo menú de navegación horizontal, un poquitín más complejo, pero muy sencillo de implementar.


Para agregarlo solo debes seguir los siguientes pasos:

1. Añadimos un nuevo Elemento HTML encima de la zona de entradas y en él ponemos el siguiente código:






<div id="menuhorizontal">
<ul id="menuh">
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>
</ul>
</div>
<style type="text/css">
#menuh {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
}
#menuh li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Trebuchet MS", Arial, Verdana;
    margin: 0;
    padding: 0;
}
#menuh a {
    background: #333 url( ) bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
}
#menuh a:hover {
    background: #2580a2 url( ) bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }
</style>

2. Guardamos el Gadget y modificamos la siguiente parte, cambiando la almohadilla (#) por la url del enlace, y la parte en Rojo, por el texto que deseamos que aparezca en el menú:
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>
3. También podemos agregar más botones al menú adjuntando una nueva línea de código después de las ya presentes:
<li><a href="#">Otro título más</a></li>
En caso de querer realizar esta última acción, es recomendable sustituir la cifra coloreada de verde (50%) por un número mayor.
Y de esta forma ya dispondremos de un elegante y vistoso menú en nuestro blog para mejorar así un poco su aspecto :)
Saludos!



8 comentarios:

Anónimo dijo...

muchas gracias por el menu quedo buenisimo

De todo para los blogger dijo...

Gracias a ti
Saludos

Amanscur dijo...

Ohhhhh, porfin encontre algo simple y bueno, probe con varios y todos tenian algun problema complejo, este quedo bueno. Solo tengo una consulta: sabes cuando amplio la cantidad de pestañas y me hace una segunda hilera la ultima pestaña de la primera fila se agrupa (sino le alcanza espacio) y estpo hace que quede un espacio no muy agradable entre la primera y segunda fila ¿como lo puedo arreglar?, ojala me puedas ayudar con esto, de todos modos muchas gracias....

De todo para los blogger dijo...

Hola Amanscur te dejo este otro menú también muy fácil de poner y seguro que te funciona mejor.
ya me contaras,, dime cual es tu blog puedes poner el enlace
Gracias a ti y saludos

http://www.trucosblogs.com/2010/10/menu-horizontal-simple-facil-y-vistoso.html

Anónimo dijo...

muchas gracias, me sirve el menu

De todo para los blogger dijo...

Gracias a ti

daniel dijo...

disculpa mi ignorancia, tengo un blog de futbol, cuando este creado el menu horizontal, por ejemplo si en uno de ellos pongo "equipo" como hago para insertar los nombres del equipo para que cuando hagan clic en el enlace salgan los nombres , gracias

Marta Benedicti dijo...

¿Como hago para centrar el menú? He estado probando con algunos comandos pero no me han funcionado. Gracias por ayudarme.

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones