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>):

&lt;/div&gt;&lt;!-- #features --&gt;

La única diferencia sería usar los selectores .home y .no-home en vez de [data-home="true"] y [data-home="false"].

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

  1. Bitacoras.com
  2. Imagen de Andres Ardila el dijo:

    Man las condicionales no nos obligan a tener el css dentro de la plantilla, yo las tengo externas si a eso te refieres xD, aparte de eso esta muy bueno el truco, pero de esta forma cargaríamos código CSS innecesario? digo porque cargaríamos tanto el css de la página principal como el de las entradas individuales o como seria que me perdí xDD

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí, cargarías todo el CSS de una vez. Si lo pones en la plantilla el navegador lo descargará cada vez que visite la página, pero si lo tienes en un link externo (aunque en principio el tamaño del archivo sea un poco mayor) el navegador lo almacenará en su caché, así que sólo lo descargará una vez (por lo que al final acaba cargando más rápido).

      Además, de esta manera es mucho más fácil editar el CSS, ya que estará todo junto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.