Entradas reducidas con thumbnail 3

Siguiendo con el tema de reducir entradas, visto en Parte 1 y Parte 2.

Al igual que la Parte 2, mostraremos la primera entrada, o la de arriba en su totalidad, sin reducir.

La diferencia sera que le agregué un botón el que abrirá y mostrará el total de la entrada en la parte de abajo del resumen.

Este botón al abrir cambiara por otro y una ves que se cierre volverá al mismo.

Para entender mejor ver el resultado.

Ejemplo 1.
Ejemplo 2.

¿Cómo se hace...?

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios.

Paso 1:

Justo arriba de </head> poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[

summary_noimg = 350;

summary_img = 350;

img_thumb_height = 125;

img_thumb_width = 125;

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:0 10px 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

if(img.length<1) {
imgtag = '<span style="float:left; padding:0 10px 0;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJIFQky0grzgxlEVQe6a43pn7Guw9MFdo1EK_SjVr7x2UPz5wAZXwSdPB_KLqCdF4sLbC1qA4kiT83Wu2DrhyFAZ-ooPnH9FjlWG54zMK0i3FgGekXYzmMCYtu3_DyUxGahNTQ5GPllLN/s1600/125x125-logo.png" 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;
}

function togglvku( targetId )
{
var state = 0;
var blockvkuname = "blockvku" + targetId;
var blockvkuimage = "blockvkucollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockvkuname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockvkuimage ).src = state ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFh4NRIf6vBYBxQ3ru2OkzZmDFnwV_cvX7EJkEZEfpfJEMBHV44yN5I9-_d3ikBm6f5UFHrQf8dxz3KLzhT0hswGWb9TzLedsKJPaMEZFc3exs5Kr2xeJBGASYDZGyQS3-BY-7Vq-I2JQ/s1600/cerrar.jpg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2FsDPG_DDl81YnGzCc-XmRAgSbGcMaKP72Zf80YizRIgBP3b9nJyEGDP1BHqEI5Y6AFC2Q0yCJRa_K10tpvJv5_v_Tg29sqbMRAV_MAoOdNVqQ22vhxv4w7s0i7P7l6WiszpDwcCrbs/s1600/abrir.jpg";
}
}
//]]>
</script>

Cambios que podemos hacer:

summary_noimg = 350;: Número de letras que se mostrará en el resumen con imagen única.
summary_img = 350;: Número de letras que se mostrará en el resumen con imagen reducida.
img_thumb_height = 125;: Altura de la imagen reducida.
img_thumb_width = 125;: Ancho de la imagen reducida.
.../125x125-logo.png: Imagen única que se mostrará al no tener la entrada una propia.
style="float:left; padding:0 10px 0;": Estilo de la imagen.

En el ejemplo la imagen tiene padding 10px a la derecha y 0px en los otros lados, y se mostrará a la izquierda.

Se puede personalizar o mostrar a la derecha cambiando left por right.

En rojo estan las imágenes del botón de abrir y cerrar.

Paso 2: (Opción 1)

Ahora tendremos que buscar <data:post.body/>

Y lo cambiaremos por el siguiente código:

<b:if cond='data:post.isFirstPost'>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='summarythumb' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div align='right' class='rmlink' style='clear:both;padding:0px;margin:0px'><a class='toggleresumenpost' expr:onclick='&quot;togglvku(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'><img expr:id='&quot;blockvkucollapse&quot; + data:post.id' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2FsDPG_DDl81YnGzCc-XmRAgSbGcMaKP72Zf80YizRIgBP3b9nJyEGDP1BHqEI5Y6AFC2Q0yCJRa_K10tpvJv5_v_Tg29sqbMRAV_MAoOdNVqQ22vhxv4w7s0i7P7l6WiszpDwcCrbs/s1600/abrir.jpg'/></a></div>
</b:if>
</b:if>

<b:if cond='data:post.isFirstPost'><data:post.body/>
<b:else/>
<div expr:id='&quot;blockvku&quot; + data:post.id' style='display: none;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'><data:post.body/></b:if>
</div></b:if>

Cambiar la imagen en rojo de abrir por la misma que pusimos en el código del paso 1.

Podemos personalizar el estilo del resumen con las clases summarythumb y/o rmlink.

Veremos los cambios y si todo esta bien guardamos la plantilla.

Por más detalles de cómo personalizar leer la parte 1:

Si quisieramos ocultar el contenido del footer de las entradas como en el ejemplo 2, en lugar del paso 2 hacer lo siguiente:

[+/-] Seguir leyendo...

Paso 2: (Opción 2)

Buscar <data:post.body/>

Y lo cambiaremos por el siguiente código:

<b:if cond='data:post.isFirstPost'>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='summarythumb' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div align='right' class='rmlink' style='clear:both;padding:0px;margin:0px'><a class='toggleresumenpost' expr:onclick='&quot;togglvku(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'><img expr:id='&quot;blockvkucollapse&quot; + data:post.id' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYxAR9EiWsVzj0wdkiL658IfLhOu0aAp4FbCVV3UWzztlGWfT0GJmZ4T82CoV60XVJF_bDK9YWv6KPCLtsri8E7CnqvMpiPT5rj39kqccfmBBlMe0X_mnLAHFigaTp5j1Mgulmw-yw38/s1600/abrir.png'/></a></div>
</b:if>
</b:if>

<b:if cond='data:post.isFirstPost'><data:post.body/>
<div class='post-footer'>

CONTENIDO DENTRO DEL DIV

</div>
</b:if>

Al igual que en el paso 2 (opción 1) cambiar la imagen del botón de abrir.

Un poco mas abajo encontrarán <div class='post-footer'>

Copiar todo el contenido dentro del div (varia según plantilla)

Y pegarlo en lugar de:

CONTENIDO DENTRO DEL DIV

Ahora la línea <div class='post-footer'> que ya anteriormente encontramos, reemplazarla por la siguiente línea:

<div class='post-footer' expr:id='&quot;blockvku&quot; + data:post.id' style='display: none;'><data:post.body/>

Veremos los cambios y si todo esta bien guardamos la plantilla.