Post en forma de sumarios (leer más) en dos pasos

Acabo de encontrar este SCRIPT en Quite Random y es sencillamente... cómo decirlo: ¡sencillo! Allí citan que el creador es BloggerSphera.

Sólo con dos cambios, podemos conseguir un blog estilo magazine. Incluye unos sumarios de las entradas e incorpora una imagen si el post tiene alguna. Por supuesto, incluye el consabido "leer más" y lo que es mejor, sin necesidad de incluir nada especial al crear tus entradas. Oséase... automático. Además, como no es muy largo se puede insertar directamente en la plantilla para no depender de servicios de almacenaje externos.

Quizás el único fallo es que necesita escalar la imagen para que todas se vean igualitas, en lugar de recortarlas que quizás sería lo óptimo. No obstante, el resultado me ha parecido muy bueno.

Y sin más preámbulo, el montaje del sistema:

Paso 1. Localizar el </head> y justo antes insertar este código que incluye el estilo y el SCRIPT.

<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.leermas {
}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.centrar-imagen {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<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 = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = sumario_img;
}
else {
imgtag = '<img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
sumario_noimg = 340;
sumario_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Paso 2. Busca la línea <p><data:post.body/></p> y la sustituyes por esto otro.

<b:if cond='data:blog.pageType != &quot;item&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>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Puedes ver el resultado con Vista Previa y si te gusta, guardarlo.

Con esto ya tienes algo bastante majo, pero puedes personalizarlo un poco con las clases que se nombran en primer lugar y con los últimos parámetros del código del SCRIPT:

• .leermas: Aspecto del enlace, como color, tamaño, tipo de letra fondo. También se puede añadir un HOVER.
• .post-thumbnail: Tal como está, la imagen flota a la derecha. Se puede cambiar a la izquierda.
• .centrar-imagen: Esta clase se usa cuando se escoge (más adelante) que la imagen no flote. En ese caso, la centra.
• var thumbnail_float: Valor TRUE para que flote. FALSE para que se centre encima del texto del sumario.
• sumario_noimg: Número de caracteres a mostrar para post sin imágenes.
• sumario_img: Idem para post con imágenes. Normalmente menor que en el anterior caso para que ocupen más o menos lo mismo.
• img_thumb_height: Altura de la imagen miniatura en pixels.
• img_thumb_width: Anchura de la imagen miniatura en pixels.

Colocando imágenes alargadas tipo banner al principio de los posts, puede resultar muy interesante poner la variable var thumbnail_float con el valor FALSE y un ancho grande (por ejemplo 400x90px), para que simule cabecera de post.

¿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