/* ANUNCIO4 */

Leer más automatico con imagen en miniatura (Botón texto)

leer mas automatico para blogger

Anteriormente vimos el truco de Leer más automático con Botón de imagen, muy útil para los blogs con entradas largas que decean reducirlas (Solo en la pagina principal), aquí mostrare como hacerlo con un estilo botón como el de la imagen de arriba.

Para ponerlo ve a Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca lo siguiente:
<data:post.body/>
 Sustituyelo por este otro código:
<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>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>Leer más»</a>
</div>
</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>
 Y pega antes de </head> lo siguiente:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 150;
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) { 
  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>


Configuracion:
 Se puede cambiar el tamaño de las imagenes y el numero de caracteres en el resumen de las entradas, al inicio del código anterior y marcado en color rojo, explicacion:
summary_noimg = 400; Número de caracteres cuando la entrada no tiene una imagen.
summary_img = 300; Número de caracteres cuando la entrada tiene una imagen.
img_thumb_height = 125; Altura de la imagen en miniatura.
img_thumb_width = 125; Ancho de la imagen en miniatura.
 Ahora para darle el estilo pega antes de ]]></b:skin> lo siguiente:
.readmore-wrap{margin-bottom:15px;float:right}
a.readmore{color:#fff;background:#444;padding:6px 14px;font-size:12px;line-height:12px;display:block;text-decoration:none}
a.readmore:hover{color:#fff;background:#00619A;text-decoration:none}
 Guarda los cambios y listo, tus entradas tendrán "Leer más automotico con imagen en miniatura".

8 comentarios:

muchas gracias!
Usaba otro truco, con blogger iba bien, pero al comprarle un dominio no funcionaba, este en cambio va fantastico.

alguien me podria ayudar, no encuentro ya le di mil vistas a la plantilla y no lo encuentro, tambien presione crtl+f para buscarlo y tampoco lo encuentro. no sale nada. agradeceria mucho su ayuda

disculpa, pero poner esto no hace q se quite lo de "mas informacion"
porq kiero quitarla pero no se como, me podrian ayudar?

estoy utilizando la nueva interfaz de blogger, ya me pase a la anterior le di en html, pero no puedo encontrar: ??? me perdí algun paso? hay forma de hacerlo con la interfaz nueva? saludos. gracias

Wao muchas gracias me silvio de mucho...

oye amigo no se me pone la opcion de leer mas, ya ise todo pero no sale

holaa e pusto los codes en mi plantilla pero no sale Leer más con miniatura de imágen me podia mirar haber por que?grasia

Publicar un comentario