04 agosto 2011

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

Sencillo Menú con Pestañas

Hoy vamos a crear un menú de navegación con pestañas, usando el gadget de lista de enlaces, y vamos a hacer que el enlace seleccionado luzca diferente, igual que pasa con el enlace seleccionado, del gadget de páginas estáticas.



Este menú puedes incluir cualquier enlace, ya sea de páginas estáticas o de las entradas, y solo necesitaremos agregar todos los enlaces manualmente.


Cómo poner el Menú


Antes de empezar, hay que cambiar el máximo de widgets que se muestran en la cabecera o header, para poder agregar ahí el gadget de "Lista de enlaces" de nuestro menú, ya que si ponemos el menú en la sección del crosscol, puede resultar problemático en la nuevas plantillas, ya que éstas traen algunos estilos para esa sección que puede afectar el resultado.

Para lograrlo, necesitas ir a Editar HTML, y buscar con la ayuda de "Ctrl + F", esta linea:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Luego, cambias el 1 por: 3, y no por yes, verificas en vista previa, y si todo luce bien, guarda los cambios.

Después, para tener más precisión en la separación de los widgets de la cabecera, ya que ahora se mostrarán dos, usamos este CSS que pegamos en el campo de añadir CSS personalizado, yendo a Diseño > Diseñador de plantillas > Avanzado > Añadir CSS:


#header .widget {
margin:7px 0; /*el margen de los widgets de la cabecera que puedes cambiar si quieres*/
padding:0;
}


Guarda los cambios en Aplicar al blog. Después de éso, ya se puede poner ahí en la cabecera, el gadget de "Lista de Enlaces" y puedes arrastrarlo para ponerlo debajo de la cabecera o encima de ésta.

Ahora, hagamos nuestro menú con pestañas...

Paso 1: Desde el escritorio, ve a Diseño > Diseñador de Plantillas > Avanzado > Añadir CSS

Añadir CSS


Paso 2: En el campo, pega lo siguiente:

/* Menú de Navegación horizontal con pestañas*/
#LinkList1 {
margin: 0;
padding: 0;
width: 100%;
border-bottom: 9px solid #3bb5d8; /* El borde debajo del menú*/
}
#LinkList1 h2 {
display: none; /* Ocultamos el título del widget*/
}
#LinkList1 ul{
background: none;
height: 30px;
margin: 0;
padding: 0;
width: 100%;
clear: both;
}
#LinkList1 ul li {
float: left;
margin: 0 3px 0 0;
padding: 0;
border: none; /*para eliminar el borde en ciertas plantillas*/
list-style: none;
font-size: 16px; /* tamaño de la fuente */
}
#LinkList1 li a {
float: left;
display: block;
height: 30px;
margin: 0;
padding: 0 5px;
background-color: #b0e2f0;/* El color de las pestañas*/
text-align: center;
color: #3b3a3a; /* El color de los enlaces */
line-height: 200%;
text-decoration: none;
/* Esquinas redondeadas en diferentes navegadores, no en IE8 o versiones anteriores, opcional */
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
text-shadow: 1px 1px 0px #fff; /* Efecto texto hundido no en IE y es opcional */
}
#LinkList1 a:hover {
background-color: #64d1f0;
}
#LinkList1 li.seleccionado a {
background-color: #3bb5d8; /*El color de las pestaña seleccionada*/
color: #fff; /*El color de la fuente*/
font-weight: bold;
text-shadow: 1px 1px 1px #777;/*sombra en el texto no en IE y es opcional*/
}


Paso 3: Luego, da enter después de una llave de cierre "}", para que sea interpretado lo que pegaste, y después, guarda los cambios en Aplicar al blog.

Nota: Puedes eliminar los comentarios agregados en el código CSS, es decir, aquellos que están entre: /*....*/, de ese modo haces más ligero el código. También puedes comprimirlo, usando una herramienta para comprimir CSS.

Paso 4:  Ve a "Diseño" y agrega todos los enlaces que necesites, usando el gadget de "Lista de enlaces":

Configuracion del widget de lista de enlaces

En las opciones de configuración, puedes incluir "Inicio", agregando la URL de nuestro blog, así como también podemos cambiar el orden de los enlaces.


Paso 5: Ya que termines de agregar los enlaces, arrastras el gadget hacia la cabecera, y lo pones debajo de ésta:



Paso 6: Ahora tendrás que cambiar un poco el código del gadget, para que funcione el estilo "diferente" de el enlace seleccionado, y para ello, vas a  Editar HTML, haces click dentro del recuadro donde esta el código cuidando no mover nada, y con la ayuda de "Ctrl + F", buscas el título que le pusiste al gadget, y un poco más abajo veras esto:
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>


Cambias lo que está resaltado de rojo, por lo siguiente;  nótese que quedará dentro de <ul>....</ul>
<b:loop values='data:links' var='link'> <b:if cond='data:blog.url == data:link.target'><li class='seleccionado'><a expr:href='data:link.target'><data:link.name/></a></li><b:else/> <li><a expr:href='data:link.target'><data:link.name/></a></li></b:if></b:loop>


Paso 7: Verifica en vista previa, y si todo luce bien, guarda los cambios.

Hecho lo anterior, el enlace seleccionado se verá diferente, y se identificará como enlace seleccionado, al igual que pasa con el enlace seleccionado, del gadget de páginas estáticas.

Otras opciones para poner el Menú


Es posible crear una sección nueva en la cabecera, y que quedará, entre la sección de la cabecera (donde dice cabecera, en los elementos de la página) y la sección identifica por Blogger como "crosscol". Para ello, necesitamos ir a la edición de HTML de la plantilla, y luego, con la ayuda de ctrl F, buscamos: </header>, inmediatamente después, pegamos el siguiente código:

<div id='contenedor-menu'> <b:section class='sec-menu' id='sec-menu' maxwidgets='1' showaddelement='yes'/></div>

Y el CSS básico, que pegamos en el campo de añadir CSS personalizado, yendo a Diseño ► Diseñador de plantillas ► Avanzado ►Añadir CSS:


/* Sección para el Menú de Navegación*/
#contenedor-menu {
width: 980px; /*el ancho de la sección*/
height: 40px; /*altura*/
margin: 10px 0;
padding: 0;overflow: hidden;
clear: both;
}
#sec-menu{
width: 100%;
margin: 0;
padding: 0;
}


También, si la queremos en la parte superior de la página (antes del título) entonces pueden probar ponerlo, antes de: <header>Otra opción, es arrastrarlo y ponerlo arriba del main o columna principal (arriba de las entradas).

Notas:
  • La ventaja de hacer el menú con el gadget de lista de enlaces, es que podemos editar los enlaces o poner otros cuando necesitemos, sin ingresar de nuevo a la edición de HTML de la plantilla.
  • Puedes cambiar los colores a tu gusto y necesidad, cuidando  que el borde de #LinkList1 coincida con el color del enlace seleccionado: #LinkList1 li.seleccionado a , para que este tenga sentido.
  • En las plantillas de terceros, habrá que tener cuidado en donde ponerlo, pues dependerá del diseño que se adapte facilmente.
  • Todo es CSS válido, excepto por algunas las lineas de CSS3.

Conclusiones:
Un menú facilita la navegación, y por lo tanto le da usabilidad a nuestro sitio, no importa si es vertical u horizontal, lo importante es que sea visible y se encuentre fácil,  para que nuestros usuarios puedan navegar en nuestro sitio de una manera cómoda e intuitiva.

Actualizado 05/10/2012

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.