"Leer más" con imagen en miniatura

Este es un genial truco con el que haras que tu blog cargue mucho mas rapido ya que mostraras solo una pequeña parte de las entradas del blog y es el famoso "Leer más" pero a diferencia del que ofrece blogger este es automatico y no tienes que aplicarlo uno a uno en cada entrada..

Pasos

1. Vamos a Edicion HTML,marcamos la opcion "Expadir plantillas de artilugio" y buscamo el siguiente codigo

<data:post.body/>

2. Una vez localizado el anterior codigo lo eliminamos y pegamos este otro

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

3. Ahora busacamos el codigo </head> y arriba de este pegamos el siguiente codigo

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

4. Bueno esto es opcional por si queremos darle estilo al "Leer mas"

Buscamos el codigo ]]></b:skin> y antes de este pegamos 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;
}

Al terminar el truco se vera asi o parecido dependiendo de tu plantilla.

Es de tener en cuenta que si tiene aplicado el leer mas de Blogger y quieres aplicar este tienes que quitar el de Blogger. 

Via/Ciudad Blogger