Entradas resumidas y enmarcadas estilo revista

Disponemos de una amplia gama de plantillas para blogger, tanto diseñadas por los encargados de dicha plataforma como modificadas por verdaderos expertos en el diseño web.

Las plantillas tipo revista o conocidas también por el nombre magazine muestran una particularidad que ninguna otra posee y es que los artículos de la portada aparecen resumidos en pequeñas cajas, lo que nos recuerda al aspecto de un periódico.

A continuación puedes ver una imagen para que comprendas lo que voy a enseñarte en esta entrada.

Existen diversos métodos para conseguir una portada estilo revista. El primero de ellos y por tanto el que explicaré en este artículo utiliza el mismo script del que hicimos uso en el truco "Leer más en la portada de tu blog" y un par de condicionales (además del CSS necesario para decorar las casillas).

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <data:post.body/> y elimínala. Incluye este código en su lugar:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>blcnresummn1("summary<data:post.id/>");</script>
<span class='blcnleerms' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

El texto resaltado en el código (Leer más...) es el enlace que conducirá al artículo completo ya que en la casilla únicamente se podrá leer un resumen.

Puedes utilizar una imagen como enlace para 'continuar leyendo...', reemplazando la frase resaltada con esta línea:

<img src="URL DE LA IMAGEN"/>

Incluye la dirección de tu icono / imagen y listo.

Ahora busca la etiqueta </head> y justo encima añade estos bloques:

<script type='text/javascript'>
blcn_sinimagen = 200;
blcn_conimagen = 180;
blcn_alturaimagen = 60;
blcn_anchuraimagen = 60;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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 blcnresummn1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = blcn_sinimagen;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+blcn_anchuraimagen+'px" height="'+blcn_alturaimagen+'px"/></span>';
summ = blcn_conimagen;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#outer-wrapper {width:800px;}
#main-wrapper {width:570px;}
.post {margin-bottom:10px;font-family:Arial,helvetica,sans-serif;background:#F4F4F4;border:1px solid #CCCCCC;float:left;height:276px;margin-left:24px;overflow:hidden;padding:0 5px 5px;text-align:left;width:230px;}.post:hover {background:#F6F6F6;border:1px solid #DDDDDD;}
.column-center-outer {width:108%;}
.main-inner .fauxcolumn-right-outer {width:322px;}
h2.date-header {height:0px;visibility:hidden;display:none}
.post h3 {border-bottom:1px dotted #CCCCCC;color:#4A5C96;font-family:Arial,helvetica,sans-serif;font-size:15px;font-weight:normal;line-height:1.4em;margin:0.25em 0 8px;padding:0 0 4px;}
.post h3 a, .post h3 a:visited{color:#4A5C96;}
.blcnleerms a {color: #4A5C96;text-decoration:none;}
.post img, table.tr-caption-container {background:none repeat scroll 0 0 #FFFFFF;border:1px dotted #D1D1D1;margin-top:4px;padding:3px;}
.post-footer {border-top:1px dotted #CCCCCC;font-family:Arial,helvetica,sans-serif;
font-size:9px;padding-top:7px;text-transform:none;}
#blog-pager {clear:both;}</style>
</b:if>
</b:if>

En las primeras líneas de lo que acabas de incluir encontrarás valores con posible

blcn_sinimagen = 200; Número de carácteres a mostrar en el resumen cuando la entrada carece de imagen (200).

blcn_conimagen = 180; Número de carácteres a mostrar en el resumen cuando la entrada posee imagen (200).

blcn_alturaimagen = 60; La altura de la miniatura de imagen (60).

blcn_anchuraimagen = 60; La anchura de la miniatura de imagen (60).

Puedes modificar el color de fondo en los marcos editando #F4F4F4 e introduciendo el código de tu color favorito (utiliza la tabla de colores).

El número de entradas a mostrar en la portada del blog variará según la cifra que hayas incluido en el apartado Configuración - Formato - Mostrar un máximo de...