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/AVvXsEjfCZmIjRQGWdKJ6ljuFMFhjqY7QvVN2qy6-lff4W7mTV0NItGKjSavdkaQFV56xy6xeP5z8JdqY0TO7WeUUpHa_pNZeNbqJ90-wUpaoqn4hLFuAIhxDuqFvbp9kgm5rZ_6Rb6iLtxftGZF/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/AVvXsEg8b-2H2oe0tU3nMxW-8PjV5i-uT6pJOumQac4jijHKL0b5o2e4NRh-GARuXG4BPEk4ipZW-24VvjuNgekM8wTNW7uBerst8fyn0J3jxeKYmufK3q5187YnVsjZCTMwSGtGv2mRjH4Ucho/s1600/cerrar.jpg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzf2VQUvvXMoyTM2B6VZzVCyoHIqEhAf2L9t_7w0vx2AlhnemUiYFGW-s_IHQ-ShB6n6v4JjV1ZEQg9D-M209g6g-Q07XnJXunW3ErfMEpTnYxujZqxcUQhoq5Jbh3YzT_wPYgWksft18/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/AVvXsEhzf2VQUvvXMoyTM2B6VZzVCyoHIqEhAf2L9t_7w0vx2AlhnemUiYFGW-s_IHQ-ShB6n6v4JjV1ZEQg9D-M209g6g-Q07XnJXunW3ErfMEpTnYxujZqxcUQhoq5Jbh3YzT_wPYgWksft18/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/AVvXsEjGOJeIapztgQ0DfcrH6bO8Y5y1ojU7Wn8a1t5VCzA8RRJcMg15eV5zOVBPiyzEpscB5saBvs-taPJxIIoM-qL-kRWLIvss6Uw2dhIB0jVhKRF__cMazbrjBTPGOCKgvzpdA6dost-qJaw/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.