BRAYANROCKER: Entradas con Imágenes en miniatura, descripcion y con Leer más automático「✔ Tutoriales Blogger」

Cómo personalizar pie de entradas en tu blog blogger tutorial configurar la vista inicial del blog: párrafo más miniatura en blogger, Leer más automático con imágenes en miniatura y descripcion, ademas de cambiar Leer mas por una imagen o Mostrar sólo primer párrafo o texto diferente en la portada de Blogger.

Para ponerlo en tu blog entra a Plantilla | Edición de HTML, y busca esta etiqueta:

<data:post.body/>

Sustituye esa etiqueta 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' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</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 == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

NOTA: La etiqueta <data:post.body/> en la mayoría de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las demás hasta que des con la indicada.

Ahora pega antes o arriba de </head> lo siguiente:

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

<script type='text/javascript'>
//<![CDATA[
// Script modificado por brayanrocker
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/AVvXsEjy8fcz9QX7-6PcVMZr0LBAUs7WKQw95a-DmGRKwroniMEVWzkk97YwZepcHN7FyLMCrq2ysf6x5l_cRkPMdDRvl0AHRgEoS4aMX_HbD2_CaNl4RYikVmNL13s94zcgMnzeO-2w7KIg9kVkL_QTF6LYqmPesB1gyIlgb-NhgwCMQG0QDS-ArV4Jga6M/w131-h102/Nuevo%20Post%20BrayanRocker.png" 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>

Ojo, es posible que la primera etiqueta que hay que cambiar la tengas dos o más veces, si así fuera haz el cambio en una, si dando Vista Previa no ves que funcione entonces haz el cambio en la otra que tengas repetida y así sucesivamente.

Un poco más abajo está una URL en color azul, esa es la imagen que se mostrará en el resumen cuando la entrada no tenga una imagen, y será esta:

Parametros que puedes Configurar.
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: