Agregar miniaturas y resumen del post automáticamente en Blogger

Entrada más reciente Entrada antigua

Agregar miniaturas y resumen del post automáticamente en Blogger

Se ha agregado un cambio para que no muestre el vínculo en páginas estáticas.

Entre los nuevos apartados de códigos implementados a este blog está el resumen automático en portada y generación de miniaturas al vuelo, esto es que el blog, después de cierto numero de palabras agrega un vinculo de Leer más o Más información, si hay un post más pequeño a las palabras requeridas, el vínculo no aparece.

Para agregarlo debemos entrar a nuestra plantilla de Blogger, asegurándose que Expandir plantillas de artilugios este marcado.

Ubicamos ]]></b:skin> y justo después pegamos el siguiente código:

<!-- En esta sección no se mostrará el código en las páginas estáticas y los post -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
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><style type='css/text'>/* propiedades generales */

.rmlink{

border:none;clear:both;

margin:10px 0 0;

padding:0;

text-align:center;

}

.rmlink a, .rmlink a:hover{text-decoration:none;}

.rmlink a{text-weight:bold;

display:block;margin:0;

padding:6px 0;

color:#fff;

background: #ff4300;

border: 1px solid #000;

}

.rmlink a:hover

{

color:#fff;

background: #000;

}</style></b:if></b:if>

Ahora ubicamos la etiqueta <data:post.body/> y la reemplazamos por el siguiente código:

<!-- rmlink condicionales de paginas estáticas e interiores -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<!-- rmlink condicionales negativas -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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> <div class='rmlink'><a expr:href='data:post.url'>Leer artículo</a></div><div class='clear'/>
</b:if>
</b:if>

<!-- rmlink fin -->

Yo no he modificado el código, trabaja perfectamente sin configurar, pero si desean modificarlo editen las siguiente propiedades del Script que puso antes de </head> las medidas son en pixeles, no agregue la unidad:

• summary_noimg = 430; El número de palabras que aparecen cuando no hay imágenes en el artículo.
• summary_img = 340; El numero de palabras del resumen cuando hay imágenes en el artículo.
• img_thumb_height = 100; Corresponde al valor alto de la miniatura
  img_thumb_width = 120; Corresponde al valor ancho de la miniatura

Basado en la versión de vietwebguide.com, este artículo ha sido corregido y simplificado.

de