Post resumidos en Blogger


Me he demorado en postear, si, definitivamente, pero fiel a mi estilo de solo postear lo mejor en cuanto a trucos pues traigo uno verdadéramente increible.

Siempre se critica a Blogger por todo, últimamente, por no tener ni siquiera unos malditos 5 mb de alojamiento propio, los cuales serían suficientes para alojar nuestros scripts y así no estar peregrinando entre hostings ya que nos tratan peor que Judios en épocas de inquisición religiosa (ni mis antepasados caminaron tanto), y nos botan discriminativa y prejuiciosamente de todos los hostings existentes (todo script es un riesgo de seguridad), ya que pasamos de hostfile a Googlepages luego a Skydrive y ahora... bueno, yo me fui a geocities aunque veo que la mayoría se han ido a Javascrip host, otros aun están en el desierto, dando vueltas.

Igual no me importa, por pereza o vagancia, los scripts que he ofrecido casi siempre han sido de pegar en la plantilla y nada mas (siempre me pesó estarlos hosteando, Dios sabe por que hace las cosas y por que me hizo vago entonces), a continuación les dejo uno transformado por mi para estos fines, obtenido del blog de Gema.

Pero una de las críticas más importantes es cuando se lo compara con Wordpress y se descubre que Blogger no puede hacer plugins, pero este hack que presentaré a continuación hace las mismas funciones que cualquier plugin, es más, yo que he jugado con plantillas en Wordpress les aseguro que hace exáctamente lo mismo que el mas especializado plugin de Leer mas...

Comenzamos... pega esto dentro de <head> y </head>:


<script type='text/javascript'>
//<![CDATA[
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
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) {
if(thumbnail_mode == "float") {
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;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


En, summary_noimg = 500; pones la cantidad de palabras que quieres que se muesten cuando no hay imágenes, yo puse 500 por defecto y en summary_img = 300; pones la cantidad de palabras a aparecer cuando si hay imágenes, yo puse 300 por defecto, en img_thumb_height = 100; y en img_thumb_width = 100; pones el tamaño que quieres que tengan las imágenes, recuerda que height es alto y width es ancho.

Buscas ahora lo siguiente, pon control + f y pon <div class='post-body entry-content'>, recuerda que no siempre puede estar especificado de esa forma, por eso busca todo el bloque de código:


<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Y lo remplazas por esto:


<div class='post-body entry-content'>
<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 id='showlink'><a expr:href='data:post.url'> Texto para expandir el post </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Sustituyes "Texto para expandir el post" por lo que quieres que sirva como vínculo para mostrar el post en su totalidad.

También puedes añadir una imagen en lugar del texto si añades:
<img src="url-imagen" />

Este script si que está de lujo, yo lo utilizo mucho en mis otros blogs, me ha solucionado y facilitado mi vida Blogger en múltiples formas, gracias Gema por el aporte, disfrútenlo.





No comments yet