Condicionales Blogger

El uso de condicionales es una de las mejores soluciones para paliar en lo posible la autopaginación impuesta por Blogger. Esta entrada es solo una explicación generalizada de lo que he hecho en mi plantilla, pero creo que servirá para entender el concepto del uso de condicionales y como favorecen la velocidad de carga de un blog.

La idea es usarlos para:

.- En portada solo mostrar un primer post abreviado.
.- Para el resto de entradas, mostraremos solo el titulo de las mismas.
.- No mostraremos la sidebar.
.- En las páginas de archivos y etiquetas haremos lo mismo, solo mostrar el titulo de las entradas.
.- Para darle otra imagen a esos listados, veremos como asignar un icono o imagen a cada titulo de entrada, de forma automática, según la categoría o etiqueta.
.- También veremos como ampliar las páginas estáticas, sin mostrar la sidebar.

Nuestras entradas están formadas por el titulo (H3), el cuerpo de la entrada (post-body) y el pie de la misma (footer)

<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='clear'/>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Nota: No toméis esta estructura como base porque esta modificada, solo sirve de ejemplo para que entendáis como se representan las entradas en vuestro HTML.

Condicionales para pagina principal, paginas de archivos y etiquetas.

Ya hemos indicado que solo vamos a definir un primer post que se muestra parcialmente y el resto de entadas mostraremos solo el titulo. Como tratamos de evitar el sobrepeso de la pagina, incorporamos solo lo necesario, prescindimos del footer, básicamente para el primer post y para el resto solo nos quedamos con el titulo. Un dato, todos nuestro cambio, incorporando condicionales, se efectuaran a partir (debajo) de <b:includable id="post" var="post">.

Definimos el primer post

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost'>
<div class='firstpost'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Leer mas[...]</a>
</div>
</b:if>
</div>
</div>
<div class='clear'/>
</b:if>
</b:if>

Con esto hemos dicho, que si estamos en nuestra página principal, el primer post mostrara el titulo, la entrada y que podemos usar la entrada resumida.

Definimos ahora las entradas para archivos y etiquetas.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;NOMBRE DE LA ETIQUETA&quot;'>
<img alt='' src='URL DE LA IMAGEN O ICONO ASOCIADO A LA ETIQUETA'/>
</b:if>

... ESTE CONDICIONAL DEBERA REPETIRSE POR CADA ETIQUETA A LA QUE QUERAMOS ASIGNAR AUTOMATICAMENTE UN ICONO O IMAGEN ...

</b:loop>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>
</b:if>

Hemos indicado que si las entradas no son paginas estáticas o individuales, mostraremos solo el titulo y además les hemos asignado una imagen o icono automático según su etiqueta.

Condicional para páginas individuales.

Aquí vamos a mostrarlo todo así que mantenemos el código original

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='clear'/>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:if>

Mantenemos la entrada completa, el pie de entrada, etc.

Condicionales para páginas estáticas.

Aquí nos quedamos solo con el titulo y la entrada, aplicando estilo directamente.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper{width:940px;}
.post{width:920px; }
.post-body{width:890px; padding: 10px;font-size: 120%;}
</style>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
<div class='clear'/>
</b:if>

Esconder la sidebar.

Podríamos aplicarlo con estilo es decir, indicando sidebar-wrapper { display:none;} , pero yo he optado por otra solución, usando el condicional solo para entradas individuales.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...AQUI VAN LOS DISTINTOS WIDGETS...
</b:section>
</div>
</b:if>

La gran ventaja de esto es que la sidebar solo se carga en las páginas individuales, no se esconde, con lo cual quitamos peso en las demás páginas. Pero tiene un inconveniente, deja de mostrarse la sidebar en la página de añadir elementos, por lo que si sois de los que vais modificando mucho vuestra sidebar, os resultara engorroso hacerlo. Yo no suelo cambiarla, pero si necesitáis editarla desde esa pagina, con solo quitar el condicional momentáneamente, podréis verla y luego solo tendréis que volverlo a añadir.

Por ultimo, se que esta explicación es generalista, hay que tener algunos conocimientos para aplicarla, pero espero que sirva de base para que se saquen plantillas mas livianas. A cada una de estas partes se le puede dar el aspecto que uno desee, creando clases en el CSS y aplicándolo detrás de cada condicional. Podemos mostrar la plantilla tal cual lo he hecho yo, o estilo magazine, etc...
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también