resumir entradas blogger 'leer mas'

Publicado el 07 febrero 2013 por Loquendo Manzano

leer mas! así se le puede llamar a la forma de abreviar los textos de las entradas o post de nuestro blog de blogger, esta manera de presentar los post es una de las mas perseguidas por los fanáticos blogger y administradores de blogs y paginas profesionales, ya que esta resume las entradas para poder ver mas y elegir mas fácil la que nos interese.

Ahora para poder tener este truco primero por precaución crear un respaldo, descargate la plantilla!
Bien ahora que tienes tu respaldo podemos continuar: dirígete a tu plantilla editar html marca la casilla expandir plantilla de artilugios y busca esta linea, mas facil oprimiendo Ctrl + f

<data:post.body/>


eliminala y en su lugar pega esto
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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'>Continue leyendo</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
bien ahora lo siguiente es pegar este codigo antes de </head>


<script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ; summary_noimg = 600; summary_img = 600; img_thumb_height = 200; img_thumb_width = 200; </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) { 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>


Y eso es todo y bien si en tu entrada hay una imagen la mostrara, la primera y si no hay imagen solo muestra el texto. talves si quieres cambiar el tamaño de las imágenes y textos cambia los códigos en color azul, estos son los parámetros que debes cambiar, height el el alto de la imagen y width el ancho.


img_thumb_height = 200;
img_thumb_width = 200;


y para definir cuanto texto quieran mostrar solo cambien este atributo

summary_img = 600;

ahora si no quieres tener el "continué leyendo" en color verde y poner una imagen en su lugar simplemente reemplaza-lo por este código, y que la imagen sea pequeña!

<img src="URL de la imagen" border="0" />


y listo espero les ayude