Leer mas con imagenes en miniatura (automatico)

Ah muchos nos a gustado la opcion leer mas, por eso les enseñare a colocar "leer mas" en vuestros blogs con imagenes en miniatura, exactamente como lo  ves en mi blogs.

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.

Para ponerlo en tu blog entra a Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios 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>

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>

Personalizacion

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" />

Tambien puedes ver este tipo de leer mas de ciudad blogger