sábado, 26 de junio de 2010

Mostrar solo Fragmento de la Publicación

Resumen del post con leer más e imagen en miniatura.
El tener muchas cosas en el blog dificulta a la gente poder leer el contenido que realmente se quiere leer, para eso esta “leer más…” que da lugar a la libre elección de selección del contenido que se quiere leer o visualizar en nuestra pantalla.
Las opciones son varias para poner este script en nuestros blog`s como por ejemplo la que presta blogger en la que se pueden cortar las publicaciones para que posteriormente se tenga que elegir el “leer más” para continuar leyendo, pero lamentablemente esta opción no es automática ya que se debe ingresar de una forma “manual” por decirlo así. Para esos que quieren ahorrar espacio y dar una elección al lector de seleccionar que se quiere leer esta esta modificación para la plantilla de vuestro blog.
sshot-3
Ahora lo primero que haremos será:
1.- Ir a Diseño 
sshot-5
2.- Luego click en Edición HTML
sshot-2
3.- Marcar la casilla “Expandir Artilugios”
sshot-1
4.- Copias y buscas esto : <data:post.body/>
sshot-2
5.- Ahora borramos <data:post.body/> y lo reemplazamos por 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 class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</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>

6.- Buscamos esto: </head> y antes de esto copiamos y pegamos esto y LISTO!:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Si queremos modificar los colores lo corregimos a nuestro gusto en relación con lo siguiente:
summary_noimg = 400; Número de Letras o caracteres cuando la entrada NO tiene una imagen
summary_img = 300; Número de Letras o caracteres cuando la entrada tiene una imagen
img_thumb_height = 125; Alto de la imagen en miniatura
img_thumb_width = 125; Ancho de la imagen en miniatura

También puedes cambiar el texto de “Leer más…” sustituyéndolo por la frase que queramos o por la imagen que queramos modificando lo siguiente:
<img src="URL de la imagen" />

3 comentarios:

  1. Muy buen artículo, me ayudó a ordenar mi blog !!!

    ResponderBorrar
  2. lo hice y la verdad que quedo muy bien, pero no se como cambiar el color de la la frase "leer mas" me podes explicar un poquito mejor o darme mas detalles de como hacerlo???

    mira, te dejo mi blog para que veas como quedó!
    http://tumundoinsolito.blogspot.com/

    ResponderBorrar
  3. ok, ahora veo que las descripcion de la entrada sale con otra fuente y en negrita, como hago para cambiar eso??? agradeceria mucho tu ayuda..gracias!

    ResponderBorrar