Menu horizontal en blogger


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 en “Menu horizontal en blogger”

  1. 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

  2. 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

  3. 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!

  4. 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

  5. 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.

  6. 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

  7. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *