Lo que haremos
- Vamos a agregar el enlace de la página principal al gadget de las etiquetas (Inicio).
- Cambiaremos el código del gadget para destacar el enlace seleccionado, ya sea el de la página principal o los de las páginas de etiquetas, sin usar Javascript.
- Con el CSS del tutorial mencionado, le daremos a los enlaces del gadget de las etiquetas la apariencia de pestañas al estilo Google Play.
Ventajas
- Una vez hechos todos los cambios, no necesitarás editar/agregar ningún código HTML para añadir enlaces.
- El enlace seleccionado siempre destacará, independientemente de que se navegue entre las páginas de etiquetas (recuerda que la URL de éstas páginas cambia de forma dinámica). Puedes comprobar ésto desde mi blog, al navegar entre las páginas de etiquetas desde el gadget de etiquetas (Categorías).
- Podrás seleccionar cuáles etiquetas mostrar en el menú, editando ésto desde las opciones de configuración del gadget.
Bueno, vayamos al grano y veamos cómo crear el susodicho menú, y aunque no luce mucho ahí en la demostración, ya que está debajo de la demo del menú con iconos usando el gadget de lista de enlaces, puedes ver su funcionamiento.
Importante: Antes de empezar a personalizar el gadget de las etiquetas, es necesario habilitar una sección en la cabecera, para poner ahí el gadget de las etiquetas, ya que la sección que está debajo de la cabecera llamada crosscol, está diseñada pensando en el menú de navegación que traen consigo las plantillas nuevas de Blogger, y el CSS que ya tienen estropeará el resultado. Otra opción seria quitar dicho CSS.
En este caso lo que haremos, es habilitar otra sección y para ello vas a la edición de HTML de la plantilla, y buscas esta linea de código:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Luego, cambias "1" por "3", y "no" por "yes". Puse 3, para que se vea el area punteada en la sección, y puedas identificarla más fácilmente cuando estés en la sección de Diseño.
Cómo crear el Menú paso a paso
- Una vez habilitada una nueva sección en la cabecera, necesitamos agregar el gadget de etiquetas, desde "Diseño". Puedes arrastrarlo hasta ahí si ya lo tienes en la columna lateral o bien, agregarlo en "Añadir gadget". Tienes que configurarlo del siguiente modo: en "Editar" selecciona las etiquetas que quieres mostrar. En mostrar, selecciona la opción de "Lista" y no actives la casilla de "Mostrar cantidad de entradas por etiqueta".
- Luego, agregas el CSS yendo a Plantilla > Personalizar > Avanzado > Añadir CSS
#Label1 h2{display:none}
#Label1 ul {
overflow:hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 2px solid #3D3D3D;
}
#Label1 li {
float: left;
margin: 0 -15px -3px 0;
}
#Label1 li a {
float: left;
position: relative;
padding: 0 10px 0 14px;
height: 0;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-right: 30px solid transparent;
border-bottom: 30px solid #3D3D3D;
border-bottom-color: #777\9;
opacity: .3;
filter: alpha(opacity=30);
}
#Label1 li a:hover,
#Label1 li a:focus {
border-bottom-color: #2ac7e1;
opacity: 1;
filter: alpha(opacity=100);
}
#Label1 li a:focus {
outline: 0;
}
#Label1 li a.seleccionado {
z-index: 3;
border-bottom-color: #3d3d3d;
opacity: 1;
filter: alpha(opacity=100);
}
Nota: Las pestañas por defecto tienen transparencia, asi que puedes usar un fondo interesante y mejorar la presentación. - Después, vas a la edición de HTML de la la plantilla, expandes plantillas de artilugios y buscas el código del gadget de las etiquetas mismo que podrás identificar si lo buscas usando el título que le pusiste con la ayuda de Ctrl + F. Lo que nos interesa es esta parte:
<b:if cond='data:display == "list"'> <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
- En el código anterior, identifica las lineas que resalté de negrita y con fondo azul, y las cambias por éstas:
<b:if cond='data:display == "list"'>
<ul>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li><a class='seleccionado' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
</b:if>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
Con el código anterior, estamos agregando un enlace a la página principal (Inicio) y con una condicional de Blogger, destacamos dicho enlace cuando estemos en la página principal. Estamos agregando una clase que identificará al enlace seleccionado. Además, estamos cambiando la condicional en las páginas de etiquetas para que no se pierdan las propiedades declaradas en el CSS de la clase agregada para el enlace seleccionado. Puedes cambiar el texto "Inicio" de la página principal, por el que quieras. - Por último, verificas en vista previa que todo luzca bien, y si es así, guarda los cambios en Guardar plantilla.
Y ¡listo!, ya tienes un menú de navegación con pestañas usando el gadget de las etiquetas, al estilo Google Play ;D
Recomendaciones:
Se recomienda éste menú para blogs que usen algún tipo de resumen en las entradas, de ese modo será mas rápido navegar entre las páginas de etiquetas. O bien, personalizar las páginas de etiquetas para que éstas muestren algún tipo de resumen.
Compatibilidad
Este menú funciona en todos los navegadores incluyendo la antigua versión de Internet Explorer: IE7 (Internet Explorer 7).
Notas adicionales
- Si lo prefieres, puedes agregar el menú arriba de las entradas, y para ello deberás arrastrar el gadget y ponerlo arriba de la sección de las entradas del blog, en tal caso, no será necesario habilitar una sección adicional en la cabecera, como se mencionaba al principio.
- Si es el segundo gadget de etiquetas que usas, deberás cambiar #Label1 por #Label2 en el CSS (paso 2).
Espero que sea útil, y sigamos disfrutando de las fiestas ;)
No hay comentarios:
Publicar un comentario