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


Famag Kiradober No se responsabiliza, si no realizaste correctamente la inserción del código, para más detalles específicos, puedes visitar el siguiente enlace:

Para ponerlo ve a Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca lo siguiente:

-------------------------------------------------------------------------------------

------------------------------------------------------------------------------------

Sustituyelo por este otro código:

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

Sustituye  lo que esta en azul por la dirección donde se encuentra alojada la imagen. 

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>

Guarda los cambios y listo, tus entradas tendrán "Leer más automotico con imagen en miniatura". 

Configuracion:
Se puede cambiar el tamaño de las imagenes y el numero de caracteres en el resumen de las entradas, al inicio del código anterior y marcado en color rojo, explicacion:
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; Altura de la imagen en miniatura.
img_thumb_width = 125; Ancho de la imagen en miniatura.

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

Fuente:  wixusblogger

Fecha:04/01/2017

Publicado por: