Una de las posibilidades que más me ha costado implementar en mis blog, es el típico “leer más”, porque no encontraba una opción que fuera sencilla de aplicar y mantener limpios los resultados. Quiero decir, todas pasan por incluir manualmente en la entrada una etiqueta “div class” o “spam class” separando la parte visible de la oculta, y me provocaban errores en el diseño de sangrados, alineaciones, etc.
Durante bastante tiempo la opción que usé fue colocar scrollbars en todas las entradas. Limitando su longitud, poniendo justo después de .post { las dimensiones fijadas y la opción de scrollbar automático. Quedaría así:
.post {
height:600px;
overflow:auto;
}
Esto resultó una buena técnica, pero complicaba mucho moverse por el blog con la ruleta del ratón, y estéticamente no era brillante porque, entonces tenía una sola sidebar, y en la derecha de la pantalla quedaban dos scrollbar casi amontonadas.
Cuando necesité colocar una segunda sidebar el efecto era aun peor, así que me puse a buscar otras opciones y, definitivamente, he optado por olvidarme de esta técnica y instalar el sistema de sumarios que encontré en Oloblogger. Es sencillo de instalar y sobre todo, totalmente automático. Además reduce la longitud de la página principal del blog y se puede afinar según el diseño de tu blog. Ya lo adapte para que la imagen en miniatura también fuera enlace a la entrada.
Justo antes de la etiqueta </head> colocar el siguiente código que incluye el script y el CSS necesario.
<!-- 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,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/></a>';
summ = sumario_img;
}
else {
imgtag = '<a style="background:none;" href="'+enlacetitulo+'"><img class="centrar-imagen" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></a></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>
Luego tendremos que localizar la línea <p><data:post.body/></p> o similar dependiendo de la plantilla original de tu blog y sustituirla por el código siguiente:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>","<data:post.url/>");</script>
<a class='leermas' expr:href='data:post.url'>Leer más »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
Solo nos quedará personalizarlo a nuestro gusto ajustando las variables según las necesidades de nuestro blog.
