Entradas estilo magazine en Blogger

En esta oportunidad mostraré una forma de añadir fácilmente  entradas estilo magazine en Blogger.

Las entradas magazine sirven principalmente para mostrar una previa de las entradas como galería y ayudan para mejorar el orden y la estética del blog.


Como puedes apreciar en la imagen de la izquierda, cada entrada se previsualiza con la primera imagen del post.

Este tipo de entradas son excelentes para usar carátulas de DVD para ofrecer contenido como películas, juegos, etc.

Para ver mejor las entradas puedes hacer clic para maximizar, o bien, ver una muestra en este blog de pruebas.







¿Cómo añadir las entradas magazine en Blogger?

Debes saber bien que para que se vea correctamente deberás usar títulos cortos o de lo contrario la imagen se cortará y bajará, además que todas las entradas deberán tener imagen o de lo contrario aparecerá el espacio en blanco.

Paso 1: Reemplazando secciones:

En ''Diseño | Edición HTML'' marcaremos ''Expandir plantillas de artilugios'', buscaremos la siguiente sección:

<data:post.body/>

La reemplazaremos por el siguiente código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Paso 2: Añadiendo scripts:

Ahora busca la siguiente sección:

</head>

Arriba de ésta, pega el siguiente código:

<script type='text/javascript'>
summary_noimg = 1;
summary_img = 1;
img_thumb_height = 160;
img_thumb_width = 128;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post {
float:right;
height: 230px;
width: 200px;
margin: 5px;
color:#fff;
padding: 0px 5px 5px 5px;
overflow: hidden;
background: #fff;
}
.post h3 a {text-align:center;font-size:18px;line-height:1.3em;color: #5A606D;}
.post img {margin:0px auto;
}
.rmlink a {display:none;}
h2.date-header {height:0px;visibility:hidden;display:none}
.post-footer{display:none;}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>

Guarda los cambios y listo.

Importante:

• Vuelvo a reiterar que deberás añadir imágenes a todas las entradas o de lo contrario no funcionará bien. 
• Tampoco utilices títulos demasiado largos o las imágenes se moverán hacia abajo.