Poner botón leer más automático con imagen miniatura en Blogger (método 2)

Algunos fragmentos tomados gentilmente de ciudadblogger

 

Hace ya un tiempo atrás expliqué como agregar el botón leer más, pero, de forma manual aunque es muy fácil lograrlo, para ello seguiremos el siguiente tutorial:

¿No quieres leer? no te preocupes, tenemos 

lo mismo pero en vídeo 

Estructuralmente el truco se verá reflejado similar a la imagen anterior, con algunos pasos.

1. Dirigirnos a Blogger > Edición HTML > y buscamos este código:

<data:post.body/>

Nota: Generalmente esta etiqueta suele aparecer dos o 3 veces, en la mayoría de casos es la segunda encontrada, sin embargo si esta no funciona recomiendo que prueben con cada una.

La eliminamos y en su lugar pondremos el siguiente código completo:

<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' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&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>

 2. Lo siguiente será buscar </head> y antes de esta etiqueta pegamos lo siguiente:

 <script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigiWqD4NowV1aWaThp-k-Du3Nf9yDuSl5cPeC4_yGorPCXZJelhEXSm5dFemh4VfwKjR-K7VbJhc5eMmvMDUqV4Qi5EKv-Fehg0BO9QNRVd4gZz8OJWyURBQgwe66BVeo7Ib0MEtaGXKs/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

La parte color naranja:

summary_txt = 410; Indica el número de caracteres en el resumen de la entrada.
img_thumb_width = 120; Es el ancho que tendrá la imagen en miniatura..

La parte color azul:

Indica el link de la imagen por defecto cuando el post no tiene imagen alguno se mostrará dicha imagen, para cambiar la imagen sólo cambien el link subiendo la nueva imagen a un servidor y estuvo.

Es todo en este post hasta la próxima Bloggers......