/* ANUNCIO4 */

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


Leer más automático es un truco muy útil para los blogs con entradas largas que decean reducirlas (Solo en la pagina principal), aquí mostrare como hacerlo con una imagen.

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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src="URL DE LA IMAGEN" /></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>
 Sustituye  lo que esta en azul por la dirección donde se encuentra alojada la imagen.

Ahora pega antes de </head> lo siguiente:
<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>


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.
Guarda los cambios y listo, tus entradas tendrán "Leer más automotico con imagen en miniatura".

Te dejo un enlace con algunas imagenes con la URL, listas para empezar a utilizarlas, recuerda que se modifica el código marcado en azul (El que esta al inicio de esta entrada).

8 comentarios:

Muy interesante tu entrada sobre leer más. me ha gustado lo implementaré en alguno de mis Blogs. Gracias por seguirme. un saludo cordial WB

te amo wixus eres una ostia... haceme un hijox.x.x..x eres el mejor............................

Me agrada que te guste, saludos!

Una pregunta, se puede hacer que el texto que se ve aparezca en negrita?
Saludos.

@Coloush 16 Si pero es aplicable al boton texto: http://wixusblogger.blogspot.com/2011/01/leer-mas-automatico-con-imagen-en_26.html
El truco es poner <b> Leer más» </b>

hola hola!
por fin se pudo poner el Leer mas con imagen!!pero el problema ahora es el siguiente:
ke poteo canciones y pongo el reproductor del zippyshare...
y desde ke puse el leer mas con imagen! ya no sale el reproductor..
solo salen los codigos del script.....
hay alguna solucion??????

Muchísimas gracias *O* Ya lo he implantado en mi blog ^^ Gracias otra vez por el aporte

Dónde está el no lo encuentro... esta en post___*?

Publicar un comentario