Truco rápido para blogger: personalizar la plantilla con CSS dependiendo del tipo de página

En blogger hay muchas formas de personalizar las plantillas dependiendo del tipo de página.

La forma antigua

La forma más intuitiva sería los condicionales de blogger, que es lo que he ido viendo mucho. Es fácil, pero además de sobrecargar la página, te obliga a tener el CSS dentro de la plantilla:

<b:if cond='data:blog.pageType == "item"'>
	<style>
		/* Estilos para los posts individuales aquí */
	</style>
</b:if>
<!-- repite todas las veces necesarias con todos los condicionales -->

La solución

Puede que parezca un truco sencillo, pero no lo he visto en ningún sitio y me parece interesante y sobre todo muy eficiente. Se trata de reemplazar la etiqueta <body> o <body expr:class='"loading" + data:blog.mobileClass'> por lo siguiente (le puedes añadir tantos atributos data- como condicionales quieras):

<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType' expr:data-blog-url='data:blog.canonicalUrl' expr:data-home='data:blog.url == data:blog.homepageUrl'>

Uso

Tal y como está te permite hacer la comprobación via clases de qué tipo de página es, y de si es el home o no via el atributo data-home.

Olvídate de las reglas condicionales en el código, con esto podrás escribir algo así en tu CSS (ya sea dentro de <b:skin> o en un archivo externo):

/*Hacer que en la página principal los posts tengan fondo rojo*/
body[data-home="true"] .post {
    background: red;
}
/*En las páginas estáticas la sidebar estará oculta*/
.static_page .sidebar {
    display: none;
}
/* Y en los individuales haremos la fuente más grande */
.item .post {
    font-size: 1.1em
}
/*etc*/

Forma alternativa

De esta manera se puede añadir una clase para el home, y cualquier otra condición en vez de [data-home="true"], pero no es precisamente semántico. Sería usando el siguiente código debajo de la etiqueta de apertura del <body>:

&lt;div id=&quot;features&quot; class=&quot;<b:if cond='data:blog.url == data:blog.homepageUrl'>home<b:else/>no-home</b:if> <data:blog.pageType/>&quot;&gt;

Y el siguiente justo antes del cierre (</body>):