Leer más automático con imágenes en miniatura

Aunque hemos visto una forma de usar el Leer más con el método de expandir entradas e incluso ya Blogger tiene la opción de Leer más, estas opciones no son automatizadas, es decir, cada vez que se quiera usar el Leer más en una entrada se tiene que usar un código, además que no muestran los thumbnails, o sea las miniaturas de las imágenes de las entradas.

Hay un script de Anhvo que permite poner el Leer más en todas las entradas de forma automática, y además de eso muestra la imagen en miniatura que tenemos en la entrada, la cual podemos configurar para que sea del tamaño que se desee.

Este método me parece de los mejores ya que no tenemos que hacer nada mas que escribir nuestras entradas y el script hace el trabajo sucio.

Puedes verlo funcionando en Respondones, en la página principal se muestran las entradas resumidas con Leer más.

Para ponerlo en tu blog entra a Plantilla | Edición de HTML, y busca esta etiqueta:

<data:post.body/>

Sustituye esa etiqueta por este otro 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'><a expr:href='data:post.url'>Leer más...</a></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>

NOTA: La etiqueta <data:post.body/> en la mayoría de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las demás hasta que des con la indicada.

Ahora pega antes de </head> lo siguiente:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</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 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>

Ojo, es posible que la primera etiqueta que hay que cambiar la tengas dos o más veces, si así fuera haz el cambio en una, si dando Vista Previa no ves que funcione entonces haz el cambio en la otra que tengas repetida y así sucesivamente.

Configuración

Puedes configurar el tamaño de las imágenes y el número de caracteres a mostrar en el resumen de las entradas, eso se hace al inicio del script, es decir, en esta parte:

summary_noimg = 400; Número de caracteres cuando la entrada NO tiene una imagen
summary_img = 300; Número de caracteres cuando la entrada tiene una imagen
img_thumb_height = 125; Alto de la imagen en miniatura
img_thumb_width = 125; Ancho de la imagen en miniatura

Si quieres darle otro estilo al enlace de Leer más como un color de fondo, cambiar el color del texto, etc. entonces pega antes de ]]></b:skin> lo siguiente:

.rmlink {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.rmlink a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.rmlink:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}

También puedes cambiar el texto Leer más... por otro texto cambiando lo que está en color rojo en el primer código. Si prefieres usar una imagen en lugar de un texto entonces sustituye ese texto por el código de la imagen:

<img src="URL de la imagen" />

Como ves es sencillo de instalar, el script es corto así que no habrá problemas con el tiempo de carga de la página y lo mejor es que el Leer más se hará de forma automática en todas las entradas.

Fuentes