lunes, 29 de octubre de 2007

Menú horizontal blogger beta

Este menú horizontal es muy vistoso, lo he tomado prestado del blog de nuestro buen amigo César.
Para añadirlo a nuestro blog nos situaremos en Plantilla/Edición HTML.
Después de <head> /añadiremos lo siguiente:


<style type='text/css'>
#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#chromemenu 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*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #cccc66 ;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #660000;
}

#chromemenu ul li a:hover{
background-color: #660000; center
center repeat-x;
}

</style>


(en esta parte de código es donde podemos cambiar el color del menú)


Una vez guardados los cambios nos dirigimos a; Añadir un elemento de página/HTML Javascript donde añadiremos lo siguiente:


<div id="chromemenu">
<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>

(En esta parte es donde podemos añadir los enlaces y el texto que será visible)




Extraido de Gemablog

11 comentarios:

Buho dijo...

ya hice todo el procedimiento pero
cuando cliqueo en alguna opcion del
manu no pasa nada.... Y en la barra de estado de IE, solo me aparace lo siguiente: Http://www.blogger.com/ "cualquier link" Si me puden ayudar muchas gracias

Paty Díaz dijo...

muchas gracias por la información""

Jorge Pizarro dijo...

Muy buen tutorial, me ha servido de mucho.

Mirad el ejemplo:

http://videos-mtb.blogspot.com

Saludos

Javier Medina dijo...

Muy bueno, me funciona perfectamente, además es mucho más sencillo que otras técnicas.
Saludos (http://javiercomputersblog.blogspot.com)

Anónimo dijo...

muchas gracias. Me sirvio mucho.

soytambero dijo...

Muchas gracias, me re sirvio.

Maggie S. Sullivan dijo...

ola!! veras, ya he hecho lo del código, pero en el gadget HTML, en la parte en la que hay que poner la url no sé que poner. Si me mandases un correo te estaría muy agradecida :)
bss
marie_unsuenio@hotmail.com

Mar dijo...

Hola, gracias! Pero... ¿cómo cambio el color?

VersatiLRADIO dijo...

cOMO PUEDO AGREGAR URL MENU QUE ESTAS RECOMENDANDO YA QUE CUANDO LE DOY CLICK AL MENOS ME SALE ASI http://versatilradio.blogspot.com/aquí-url NO SE QUE HACER PLEASE HELPME!!!

Irene Yui dijo...

Y si quiero poner mas URL como lo hago?
Porque por mas que ponga mas URL solo me sale la primera que pongo

La Terra dijo...

Hola
Gracias por tu aportación.
He probado el menú que muestras y bien; el único problema es que me ha desaparecido el fondo (imagen)del blog.¿Se te ocurre algo? Thanks