lunes, 1 de agosto de 2011

Mostrar una cabecera diferente en las etiquetas

Me preguntaba el otro día pixeltuxpan si era posible mostrar una cabecera distinta por cada etiqueta del blog. La respuesta es sí, aunque no sé si haya un método más fácil pero este es el único que se me ocurre por ahora. Se trata de usar las condicionales para elegir dónde ocultar elementos del blog.

Lo que haremos será agregar una cabecera adicional por cada etiqueta que tengamos y la condicionaremos para que sólo se muestre ahí.
Puedes ver un ejemplo en este blog de pruebas; en la portada verás la cabecera estándar, pero si navegas por las etiquetas del blog (Deportes, Juegos, Música) verás que aparece una cabecera diferente en cada una de esas páginas de etiquetas.

Así que mostraremos una cabecera distinta en cada página de etiquetas del blog. Pero en la portada, entradas, páginas independientes y páginas de archivo se verá la misma cabecera de siempre que usas en el blog.

Empecemos, primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea:
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
Justo debajo de ella agrega esta línea:
<b:widget id='Header2' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
Agrega una línea como esa por cada etiqueta que tengas, sólo deberás cambiar el ID de la cabecera (lo que está en color rojo), por ejemplo, si agregas una más sería Header3, luego Header4, y así consecutivamente. Nunca deberán repetirse los IDs.
Por ejemplo, si hubieses agregado tres cabeceras entonces se vería así:
<b:widget id='Header2' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
<b:widget id='Header3' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
<b:widget id='Header4' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Con eso ya tendrás todas las cabeceras de tus etiquetas. Entra en Diseño | Elementos de la página y verás todas las cabeceras que has agregado. Dale click en Editar a cada una de ellas y agrega la imagen que tendrá cada cabecera.

Cuando termines de asignarle su imagen a las cabeceras regresa a Diseño | Edición de HTML. Ahí vamos a condicionar que la cabecera del blog general se oculte en esas etiquetas. Eso lo hacemos agregando antes de </head> lo siguiente:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
#Header1 {
display: none;
}
</style>
</b:if>
</b:if>
</b:if>
</b:if>
Ahora debajo de ese código agrega este:
<b:if cond='data:blog.url != &quot;URL de la etiqueta UNO&quot;'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>
Agrega un código como este último por cada etiqueta que tengas, y del mismo modo cambia los IDs de las cabeceras (Header3, Header4, etc.). También pon donde se indica la URL de la etiqueta. Nuevamente supongamos que fueron tres cabeceras las que añadiste, entonces se vería así:
<b:if cond='data:blog.url != &quot;URL de la etiqueta UNO&quot;'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != &quot;URL de la etiqueta DOS&quot;'>
<style type='text/css'>
#Header3 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != &quot;URL de la etiqueta TRES&quot;'>
<style type='text/css'>
#Header4 {
display: none;
}
</style>
</b:if>


Recuerda que deberás pegar un código como ese por cada etiqueta que tengas, y en cada uno de ellos añadir la URL de la etiqueta de cada una.

Y listo, cuando termines podrás ver que en la portada de tu blog tienes la cabecera de siempre, pero si ingresas a la página de una etiqueta tendrás la cabecera que elegiste para esa categoría.

Cuando hayas terminado verás que en los Elementos de la página sólo aparece el gadget de la cabecera original. Si después quisieras editar las otras cabeceras entonces tendrás que quitar momentáneamente el código que pusimos antes de </head>, eso las mostrará todas de vuelta, edítalas y regresa el código de nuevo a su lugar.

Los que tienen muchas etiquetas en su blog seguro ya salieron corriendo pero los que se quedaron seguro podrán complementar este "truco" con el de mostrar una descripción en las etiquetas del blog.

No hay comentarios:

Publicar un comentario