Resumen de post con thumbnail para estilo revista


Vamos a empezar con los post que nos ayudarán a convertir nuestro blog a un theme (plantilla) con estilo revista...Y con lo primero que iniciaremos, será agregar un script que ayudará a que los post se muestren resumidos, de forma uniforme, y que, además, incluya thumbails. Para que te hagas una idea, puedes ver la DEMO en uno de mis blogs de pruebas.

Según Wikipedia: Los thumbnails son versiones reducidas de imágenes, usadas para ayudar a su organización y reconocimiento. En la era de las imágenes digitales, los motores de búsqueda visuales y los programas para organizar imágenes normalmente hacen uso de los thumbnails, así como los sistemas operativos y entornos de escritorio recientes: Microsoft Windows, Mac OS X, KDE y GNOME.

Con este script, lograremos insertar en nuestro blog post resumidos y también las imágenes (siempre el post tenga imágenes) se verán como thumbails, es decir, se mostrará una imagen de un tamaño más pequeño que la original, pero cuando habramos el post completo, la imagen se verá de un tamaño completo.

1.§ Para empezar, vamos a Diseño - Edición de HTML y damos click a Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscaremos </head> y antes de éste pegaremos el siguiente script:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 360;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

Explicación:
» summary_noimg es el número de letras que se mostrarás si es que el post no tiene imágenes .
» summary_img es el número de letras que se mostrarás si el post tiene imágenes .
» img_thumb_height es el alto de la imagen reducida (thumbnail).
» img_thumb_width es el ancho de la imagen reducida (thumbnail).

3.§ Ahora, buscaremos <data:post.body/>. He visto que en algunas plantillas el código está asi: <p><data:post.body/></p>, en cualquiera de los dos casos, borraremos el código y en su lugar pegaremos el siguiente:

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer la entrada completa »</a></span>

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

4.§ Podremos cambiar "Leer la entrada completa »" por otro texto o por alguna imagen. Damos click a guardar y listo.

Una nota adicional: el script funciona muy bien en Opera, Safari, Firefox e Internet Explorer 8.

► Ver DEMO

En el siguiente post, veremos cómo hacer dos columnas de post para seguir perfeccionando nuestra plantilla estilo revista (magazine).

► Referencia: vietwebguide.com

15 opinaron:

G

Me encantó el tutorial; ahora mismo voya a crear un nuevo blog y empezarlos a converitr como estilo revista, quiero hacer un blog sobre música.

Por cierto, gracias por mencionarme en el blog de DEMO, pero sabes que puedes usar las imágenes de mi blog :)

Besos

Responder
squirrel

Vaya no podré esperar hasta la siguiente entrada, las espero ansiosamente porque me interesa mucho esto de los blogs estilo revista :D

Responder
Adrián Aratan

Que venga pronto el siguiente post :)

Responder
Jéssica YK

» G: sé va a ver muy bonito tu nuevo blog con una plantilla estilo revista y hecho por ti :)
Gracias a ti por permitirme usar tus imágenes.

» squirrel: espero publicarla pronto :)

» Adrián Aratan: vendrá pronto.

S@lu2

Responder
Eduardo

Simplemente BRILLANTE.
Mil gracias y felicitaciones por tu blog.

Responder
Jéssica YK

Eduardo: gracias por tus palabras. Por favor, la próxima vez que comentes, trata de tener habilitado tu perfil o deja un enlace a tu blog para que pueda visitarte :)

S@lu2

Responder
Anónimo

standards sake perpetually broadcasters mijksdr malaise dead inception lepro giac renege
semelokertes marchimundui

Responder
Nuria Cortés

¿Y esto sirve cuando en el post en vez de imágenes hay vídeos? Esto me vendría muy bien a mí!!! Muchas gracias por tu blog, es fantástico!!

Responder
Jéssica YK

Nuria Cortés:
No entiendo muy bien tu pregunta; ¿te refieres a que si el video también se pondría tipo thumbnails?

Si me aclaras tu pregunta podré ayudarte :)

S@lu2

Responder
Nuria Cortés

Sí, me refiero que en la mini entrada tipo magazine apareciera el vídeo en pequeño junto a un poco de texto... Más o menos como aparece, por ejemplo, en el facebook. Vamos, como lo que tu has explicado pero con un vídeo en vez de una imagen. Muchas gracias!!

Nuria

Responder
Jéssica YK

Nuria Cortés:

En ese caso, no sirve cuando es un vídeo. Lo que la mayoría hace es incluir una imagen en el post donde está el video para que sea esa imagen la que se muestre.
Es decir, deberías de incluir una imagen y un video, o sino una imagen.

S@lu2

Responder
Diverso Magazine

Eres lo maximooooooooooooooo !!!!!!!!!
Tenia meses buscando la manera de hacer esto tan facil y tan bello que has colocado. Muchisimas gracias porque gracias a ti logre hacer justo lo que queria para mi pagina web.
abrazos desde venezuela
www.diversomagazine.com

Responder
Diverso Magazine

Bueno, cante victoria muy pronto. Lamentablemente solo me permite un maximo de 6 entradas en la primera pagina, a pesar de cambiarle el numero de entradas a 7 o 15, solo llega a 6 sin ninguna razon que pueda resolver.
Pero gracias de todas maneras

Responder
Jéssica YK

» Diverso Magazine:
Es extraño; yo probé ese script, hace tiempo en mi blog y funcionaba bien con más de 15 entradas.
Pero, depende de cada plantilla.

S@lu2

Responder
Sergio Ravello C.

Hola , me preguntaba si me podrias aconsejar para hacer que mis entradas se vean asi como en este blog http://mirai-blogger-template.blogspot.com/ en ese estilo Magazine , agradeceria mucho si me lo averiguaras ..

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio