Estilo revista (magazine) simplificado

El estilo revista o magazine es el que convierte vuestra página principal y todas aquellas distintas de los posts individuales, en un amplio escaparate de vuestro blog. Básicamente se trata de mostrar el título de los posts y un breve resumen de ellos, a modo de sumario. Viene a ser como el truco de los posts comprimidos, pero con un aspecto más compacto. Esto permite visualizar de una tacada muchos más artículos. No confundir con el Leer Más.

La plantilla actual de Pizcos es un claro ejemplo en funcionamiento de este estilo. Si quereis confeccionar una buena plantilla con estilo revista, mejor os acercais a ver las explicaciones de Post resumidos de Pizcos o las de Jugando con los posts (Magazine) de J.Miur. Allí podreis encontrar unos muy buenos tutoriales para construir paso a paso una plantilla con el estilo en cuestión.


Sin embargo, puede que no quieras complicarte mucho y te conformes con algo más básico, pero casi igual de eficaz. El truco que se explica a continuación, sirve para no tener que modificar apenas nuestra plantilla.

Lo he probado con diversos modelos y funciona correctamente en todos, aunque probablemente algunas plantillas muy personalizadas y sobre todo, con muchos efectos gráficos, requerirán modificaciones adicionales. Pero bueno, si has sido capaz de hacer una plantilla de este último tipo, supongo que no será mayor problema arreglar lo que descuadre.

Advertencia: Esta es la típica chapuza de un servidor para trabajar poco. Si quieres un resultado más profesional, se recomienda acudir a los enlaces anteriormente citados.

TRES PASOS:

1. Expandir Plantillas de Artilugios y crear la clase .resumen. Para ello insertamos el siguiente código justo antes de ]]></b:skin>. El formato de esta clase, es en lo que se basa prácticamente todo el truco.

.resumen {
float:left;
display:block;
margin:0px 0px 5px 5px;
padding:0px 5px 5px 0px;
width:190px;
height:240px;
overflow:hidden;
font-size:12px;
font-style:italic;
text-align:center;
color:#000000;
background:url(http://i252.photobucket.com/albums/hh27/olomansan/fondomagazine.jpg);
}
.resumen img {
width:80%;
}

2. Insertar en el LOOP principal, una condición para que este estilo se utilice sólo en páginas distinas de posts individuales. Las líneas que hay que insertar, están en color verde:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<!-- <b:include data='top' name='status-message'/>-->
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='resumen'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>
</div>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:if>
</b:loop>
<data:adEnd/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='clear: both;'/>
</b:if>

</div>

<!-- navigation -->
<b:include name='nextprev'/>
etc

3. Escoger en Configuración-->Formato-->Mostrar, un número de entradas que cuadre con las columnas que hayamos creado (según el width). Por ejemplo, para tres columnas escoger un múltiplo de tres: 9, 12, 15, etc...

¡Plantilla modificada! VISTA PREVIA y si te gusta GUARDAR

---

Los atributos de la clase .resumen, se pueden configurar al gusto para conseguir distintos resultados. También influye la plantilla base que, como comentábamos, no se toca para que los posts individuales sigan teniendo el diseño original. Algunos ejemplos:

Plantilla Tic-Tac cambiando width:140px; y el fondo con un color plano en lugar de la imagen, background:#eeeeee;...


Una Dots Dark con margin:30px 10px 0px 0px; padding:5px 5px 5px 5px; color:#71BEC2;
border:1px solid #71bec2; y sin background...


Black mínima ensanchada a 900px con el código tal y como aquí se indica...


Rounders con width:150px, sin ningún tipo de background...


Harbor: width:150px; height:300px; background:url(http://www1.blogblog.com/harbor/rocks_left.jpg) bottom center no-repeat;...


Plantilla 565: margin:10px 10px 0px 0px; padding:5px 5px 0px 60px; width:130px;color:#000000;background:url(http://i252.photobucket.com/albums/hh27/olomansan/blocsepia1200x35.gif) repeat-y left top;...


En este último ejemplo, se ha dejado la fecha fuera del fondo, cambiando un poco la primera parte del código nuevo insertado en el LOOP.

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='resumen'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>

Un buen fondo para los sumarios, es lo que más realza este estilo. Teniendo en cuenta los colores y formas de vuestro blog, podeis conseguir efectos muy chulos como el del ejemplo de la Black Minima.

Como siempre digo... echadle imaginación.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter