Cómo poner un menú horizontal con lo que tu quieras

27.5.15



Ya hace tiempo que te conté cómo puedes instalar un menú de páginas en tu blog.

Pero, ¿y si en el menú quieres poner lo que quieras y no sólo páginas estáticas?

Prepárate, porqué el tutorial de hoy es largo, pero muy interesante.

Luz, cámara, acción!


Primero de todo te recomiendo, bueno más bien es una obligación, que leas todo el tutorial entero y que sólo después empieces a hacer cualquier cambio.

Quedará muy bien en tu blog.

En el menú no sólo puedes poner páginas estáticas, las posibilidades que hay son infinitas.




¿Qué debo saber antes de empezar?


  1. Debes tener en cuenta que este tipo de menú no es compatible con cualquier otro menú que pongas debajo de la cabecera.

    Pero bueno, digo yo, si quieres poner este menú, supongo que no tendrás otro menú, no?

    O sea que no lo veo para nada grave.
  2. Reflexiona un momento antes de decidirte a utilizar este menú.

    Es estupendo de verdad, pero debes saber si lo necesita tu blog o no.
  3. La próxima semana te contaré como puedes añadir subpestañas a este mismo menú, pero no hoy.

    Sin prisa, pero sin pausa.
  4. Si decides hacerlo, tómate tu tiempo y hazlo todo de un tirón, no lo hagas a partes.

    Resérvate media hora o un poco más, para que quede todo bien y no dejes el trabajo a medias.


Pasos previos a la instalación del menú


Antes de empezar tienes que eliminar de tu plantilla HTML una parte del código que pone por defecto Blogger.

Si has creado tu plantilla con código directamente o te has descargado una plantilla que no has creado tu, puede ser que no encuentres este código.

De ser así no pasa nada, simplemente indica que tu código ya está preparado para poner el menú.

Y si tienes problemas no dudes en enviarme un email!




Sigue detalladamente las siguientes instrucciones


  1. Entra en Plantilla del menú lateral


  2. Pincha en Editar HTML


  3. A continuación presiona Control f (o Command f si estás en Mac) y te aparecerá la caja de búsqueda.


  4. Busca el siguiente código

    <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>



     Y cuando lo encuentres borra el código que está en lila. Sólo este trozo.


    Si te pones en el buscador y le das al "Enter" te aparecerán todas las veces que hay esta linea de código en tu código HTML. Tienes que borrar la parte lila tantas veces como lo encuentres en el código.

  5. Ahora tienes que buscar otro texto en la plantilla HTML donde te encuentras.


    /* Tabs ----------------------------------------------- */


  6. Cuando lo hayas encontrado, borra todo lo que hay debajo de él, hasta llegar a la próxima /* , es decir, todo lo que hace referencia a Tabs ().

    Tiene que ser un código de este estilo (a lo mejor no es exacto porqué has hecho modificaciones anteriores en tu plantilla)


    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
    }

    #layout .tabs-outer {
    overflow: visible;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;

    border-top: 1px solid $(tabs.border.color);

    }

    .tabs-cap-bottom {
    bottom: 0;
    }

    .tabs-inner .widget li a {
    display: inline-block;

    margin: 0;
    padding: .6em 1.5em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-top: 1px solid $(tabs.border.color);
    border-bottom: 1px solid $(tabs.border.color);
    border-$startSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li:last-child a {
    border-$endSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    color: $(tabs.selected.text.color);
    }
  7. En su lugar pega este código


    #crosscol ul {z-index: 200; padding:0 !important;}
    #crosscol li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}
    .tabs-outer {z-index:1;}


  8. No te olvides de guardar los cambios. En caso de no hacerlo, no habrá servido de nada lo que has hecho hasta ahora.



Poniendo el menú

  1. Entras en Diseño del menú lateral.


  2. Añades un gadget de HTML justo debajo de la cabecera de tu blog.





  3. No pongas título y en el recuadro blanco añade el siguiente código


    <div id='menuWrapper'>
      <div class='menu'>
        <ul>
           <li><a href="URL1">TITULO1</a> </li>
           <li><a href="URL2">TITULO2</a></li>
           <li><a href="URL3">TITULO3</a></li>
        </ul>   </div> </div>



    Donde pone URL tienes que añadir la URL de la página a donde quieras enviar a los lectores y en TITULO, el título correspondiente.

    Si en vez de 3 pestañas quieres añadir más, sólo tienes que poner tantas veces cómo quieras la línea de código siguiente (la tienes que poner a continuación de la última línea que ya tienes igual que esta)



           <li><a href="URL2">TITULO2</a></li>


  4. No te olvides de guardar los cambios realizados!




Personalizar el menú a tu gusto con CSS


  1. Entra en Plantilla del menú lateral de Blogger

  2. Pincha en Personalizar


  3. Accede a Avanzado --> Añadir CSS



  4. Pega, en el cuadro blanco, el código siguiente



    /* Menu horizontal
    ----------------------------------------------- */
    #menuWrapper {
    height:40px; /*Altura de la barra de menú */
    padding-left:30%; /*Espacio que hay entre la parte izquierda del menú y la primera pestaña*/
    background:#d4d0e3; /* Color de fondo */
    margin: 0 -60px 0 -40px; /* Márgenes de los lados del menú*/
    }

    .menu {
    width: 100%; /*Ancho del espacio que ocupan las pestañas dentro del menú*/
    float: left;
    text-align:center !important;
    font-size:15px; /* Tamaño de la fuente  de las pestañas*/
    }

    .menu ul {
    float:left;
    height:0px;
    list-style:none;
    margin:0px; /*Espacio entre el maren superior del menú y las pestañas*/
    }


    .menu li{
    float:left;
    }


    .menu li a{
    background-color:#14dede; /*Color del fondo de las pestañas*/
    color:#000000; /* Color de la fuente */
    display:block;
    line-height:35px; /*Altura de las pestañas*/
    margin:0px;
    padding:0px 25px; /* Espacio alrededor de las pestañas (superior e inferior, derecho e izquierda)*/
    text-align:center;
    text-decoration:none;
    }


    .menu li a:hover{ /*Cuando le pasas el cursor por encima*/
    height:40px; /*Altura de la sombra*/
    background: #8abecc; /* Color de las pestañas al pasar el cursor */
    color:#ffffff; /* Color del texto al pasar el cursor */
    text-decoration:none;
    }


    .menu li:hover ul{
    display:block;
    }

  5. Ahora sólo falta que personalices a tu gusto los elementos del código CSS anterior, para que tu nuevo menú quede bien bonito con el resto de tu blog.




Este menú te da muchas más libertades que el menú de páginas. Le puedes "linkar" lo que tu quieras o lo que necesites para tu menú.

No te pierdas el post de la próxima semana que te contaré como añadir subpestañas a este menú.

Que tengas una buena semana y déjate influenciar por los aires primaverales! :)

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.