Leer más (con imagen)

Uno de los trucos que más he buscado para mis blogs es el que reduce las entradas largas con un botón que diga "Leer más".

De las muchas webs que enseñan cómo hacerlo, la única que me ha funcionado es la que postea Wixus Blogger.

Me ha funcionado tanto en las plantillas predeterminadas de blogger como en la de mi blog navideño que he descargado de otro servidor.

Una vez que coloques este truco, cada nueva entrada que postees tendrá el botón, no es necesario que lo coloques nuevamente.

ACLARACIÓN: Este truco sólo funcionará en la página principal del blog.

Cómo Hacerlo

• Ve a:  Diseño - Edición de HTML - Expandir plantillas de artilugios
• Busca este código (puedes hacerlo pulsando Ctrl+f): 

<data:post.body/>

• Sustitúyelo por este:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src="URL DE LA IMAGEN" /></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

• Una vez realizado esto sustituimos la parte que está en azul por la URL de la imagen que querramos que aparezca.
• Después buscamos </head> y antes de esto pegamos 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>

• Haz una vista previa y si todo está en orden guarda los cambios.

Wixus blogger deja una serie de imágenes que puedes utilizar libremente. Haz clic aquí para ver imágenes