miércoles, 3 de agosto de 2011

Mostrar una cabecera diferente en las entradas del blog

En la entrada anterior vimos cómo mostrar una cabecera diferente en cada página de etiquetas, y algunos han preguntado si puede hacerse lo mismo pero con las entradas, es decir, que en la portada se muestre la cabecera de siempre, pero al ingresar a las entradas se muestre otra cabecera.

El procedimiento aquí es mucho más sencillo y menos complicado que el anterior pues sólo haremos dos condiciones. Uno que hará que la primera cabecera no se muestre en las entradas y otro para que la segunda cabecera sólo sea visible al ingresar a las entradas individuales.

Puedes ver un ejemplo en este blog de pruebas, al ingresar en algún post verás que la cabecera ha cambiado.

Lo primero que haremos será entrar en Diseño | Edición de HTML y SIN expandir los artilugios buscamos 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'/>

Con eso ya tenemos las dos cabeceras que necesitamos, ahora vamos a condicionarlas.
Para ello agrega antes de </head> lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#Header1 {display:none;}
body#layout #Header1 {display:block !important;}
</style>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Header2 {display:none;}
body#layout #Header2 {display:block !important;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#Header2 {display:none;}
</style>
</b:if>

Y listo. Por último entra en Diseño | Elementos de la página y verás las dos cabeceras, la primera es la que se muestra en la portada, y la segunda la que se mostrará en las entradas individuales.


Ahí puedes darle click en Editar para cambiarle la imagen que quieras. Fue rápido ¿no?
Es una forma sencilla de mostrar una cabecera diferente en las entradas del blog.

No hay comentarios:

Publicar un comentario