Cómo poner "leer más" con imagen en tu blog


Si quieres saber cómo poner en tu blog leer más con una imagen debes seguir los siguientes pasos:


1) Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código: <data:post.body/>

2) Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


Nota: Si queremos que en lugar de "Leer más" como texto veamos una imagen en su lugar, sustituiremos en el primer código Leer más por:


<img src="aquí-la-url-de-la-imagen" />





3) Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head> Justo antes de </head> colocamos este código:


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>




summary_noimg Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, cuando no hemos incluido imágenes en ella.

summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen.


Ejemplo del resultado final:



Ejemplo de blog con leer más con una imagen: Elgatodeltrastero

Visto en elescaparatederosa.

42 comentarios:

  1. Oye en el post sale:

    "Nota: Si queremos que en lugar de "Leer más" como texto veamos una imagen en su lugar, sustituiremos en el primer código Leer más por:"

    pero luego hay una imágen que no se puede ver...

    ResponderEliminar
  2. Disculpa Tejido en Telar, ya está arreglado.

    Un saludo y gracias por tu visita.

    ResponderEliminar
  3. Hola ¿que tal?,
    habría alguna posibilidad de que el texto te quedara justificado, es decir, completamente cuadrado.
    Gracias y un saludo.

    ResponderEliminar
  4. Hola Jairo. ¿No te aparece el texto centrado como en la imagen de ejemplo?

    Explicame un poco mas que es lo que buscas por favor.

    Un saludo.

    ResponderEliminar
  5. Hola de nuevo, a lo que me refería era lo siguiente:
    ¿Es posible que todos los renglones del texto tengan el mismo largo?, es una cuestión estética y en el ejemplo de la imagen no viene así. Cuando publico una entrada en el blog tiene esa opción, de echo cuando le doy a leer más y se me abre el texto, entoces si me viene los renglones justificado, ¿no se si me entiendes?.
    Gracias de nuevo.

    ResponderEliminar
  6. En el codigo del paso 3) tienes esto:

    summary_noimg Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, cuando no hemos incluido imágenes en ella.

    summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen.

    Si pones que haya menos caracteres debe quedarte mas centrado.

    ResponderEliminar
  7. Hola, según he probado con el codigo, en los posts de resúmen no me salen links, aunque si abro el post entero sí que me salen. Hay alguna manera de configurara para que en el resumen se puedan ver los vínculos y hacer click en ellos?

    Muchas gracias!

    ResponderEliminar
  8. Hola Ellen. Me temo que no se puede, ya que lo que aparece, tal y como dices, en sólo un resumen de las primeras palabras.

    Un saludo y gracias por tu visita.

    ResponderEliminar
  9. Okas grasias por el comsejo y que do bien en mi blog

    ResponderEliminar
  10. Gracias a ti Blog galaxy. ¡Bienvenido al blog!

    ResponderEliminar
  11. Pues hola, a mí no me ha resultado, damn!
    Cómo se supone que debía salir?

    ResponderEliminar
  12. Hola Juan Carlos. En esta entrada tienes una fotografía de ejemplo. Revisa los pasos porque tiene que funcionar sin problemas. Saludos.

    ResponderEliminar
  13. Por fin pude hacerlo, como a las 1500 veces pero quedo, ahora tengo una duda, el texto sale sin formato, por ejemplo, cuando voy a mi entrada por medio de "leer mas" me aparece mi texto con formato (letras de colores, justificado, centrado, etc) pero en la principal, antes de darle "leer mas" me aparece todo el texto de corrido sin ningun formato

    ¿como puedo solucionar esto?

    ResponderEliminar
  14. Hola "dijo". Exacto, debe aparecerte tal cual dices. Lo de los colores etc, no lo puedes modificar. Para lo único que sirve este "leer más" para poner una pequeña introducción que la puedes modificar según las especificaciones que puse arriba.

    ResponderEliminar
  15. ahhhh, oyep, y hay algun "leer mas" que me permita poner la introducción con formato?

    ResponderEliminar
  16. Sí. En este blog encontrarás varios "leer más". Por favor emplea el buscador situado arriba a la derecha.

    De todas formas, te dejo el enlace para que lo veas: http://www.quierocrearunblog.com/2009/09/actualizacion-blogger-ahora-con-leer.html

    Saludos y gracias por tu visita y por comentar.

    ResponderEliminar
  17. grandeeeeeeeeeeeeee!!

    Estoy flipando!! Gracias a ti, mi blog ya no es lo que era!! Sigue así y mil gracias por trabajar de forma gratuita para los demás.

    Grande de verdad, grandeeeeeeeeeeeeeeee!!!

    ResponderEliminar
  18. Aporto que deben cambiar esto para modificar el porte de la imagen

    img_thumb_height = 100;
    img_thumb_width = 120;

    Donde "img_thumb_height = 100;" Es el alto
    Donde "img_thumb_width = 120;" El Ancho

    ResponderEliminar
  19. Hola:

    Alfin logre hacer esto.. Te agradezco.

    Una pregunta.! existe alguna forma de agrandar mas la parte del texto que muestra.

    Nuevamente te lo agradezco

    ResponderEliminar
  20. @elquegrita. Gracias amigo.

    @Alfre2Flores. Gracias por el aporte. Te voy a contratar para mi blog jaja. Un saludo compañero ;)

    @joven_noble. Hola, sí puedes hacerlo. Está explicado en la entrada: "summary_img Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada, acompañando a la miniatura de la imagen." Espero que te sirva, un saludo.

    ResponderEliminar
  21. muchísimas gracias..me salvaste muchas horas de seguir buscando.
    saludos

    ResponderEliminar
  22. Hola, lo primero quiero felicitarte por la web, es una excelente fuente de recursos.

    He aplicado este tutorial y me gusta mucho el resultado en mi blog, quedan las entradas muy bien organizadas con su foto, su introducción y el "Leer más" de enlace... y aquí viene mi duda:

    ¿Existe alguna forma de hacer que "Leer más" no afecte a las páginas de la opción "Lista de páginas"? Me refiero a aquellas que podemos poner mediante un menu en la parte superior del blog: Home, about...

    Gracias.

    Un saludo

    ResponderEliminar
  23. Hola Jbenayas, la verdad es que no sabría cómo modificar el script para hacer lo que me pides, de hecho no sé si podría hacerse en Blogger.

    Lo lamento, un saludo. Gracias a ti.

    ResponderEliminar
  24. Hola, yo estoy creando un blog que se trata de "Trailers".

    Lo que yo quiero hacer es lo siguiente, tener una pantalla principal en donde presente las peliculas con un cartel para cada una de ellas y a travez de un enlace dirigirlas a su determinada informacion junto con su video trailer.

    eso es lo que no se como hacer separar pelicula por pelicula, espero que me puedas ayudar!!!

    ResponderEliminar
  25. Bro en mi blog ahi tres

    pruebo con uno y otro y no funciona

    ResponderEliminar
  26. Ya logre ponerlo.. pero ahora solo me aparecen 3 entradas en la pag principal y yo tengo seleccionado para 10 entradas....
    Alguna solucion

    ResponderEliminar
  27. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  28. perdona y si no encuentro la linea
    < data: post. body / > ??

    ResponderEliminar
  29. Hola!!

    Quería preguntar si es posible solo dejar una imagen antes, osea que no me aparezca texto, sino solamente que una imagen de ese post en particular lleve al post completo... y pues el texto lo cambiaría por "ver mas" o algo por el estilo. La cosa es que al reducir a cero los caracteres siguen saliendo alrededor de 5 o 6...No es posible quitarlos todos. Es para un fotoblog.

    Gracias!!

    ResponderEliminar
  30. hola .. me funciona perfecto .. solo que el texto sale por debajo de la imagen .. que podra ser??? es en una plantilla hecha en blogger .. ya lo habia aplicado en una plantilla externa y si salia bien .. pero en la plantilla sencilla de blogger sale el texto abajo .. ????? ayuda por favor...

    ResponderEliminar
  31. hola si me funciono a la primera
    pero una pregunta como hago para
    que cuando ponga en el menu en mis pestañas salga una entrada de tamaño original y la otras en tamaño miniatura(como lo que pusiste alla arriba)

    ResponderEliminar
  32. Hola que tal. Me ha servido mucho esta página y pude lograr lo que quería de hacer las entradas más cortas y poner "Leer más...".

    Pero lo tuve que quitar temporalmente, debido a que cuando hago ésto, no sólo se aplica a mis estradas, sino que también se aplica a todas las páginas de mi blog (cosa que no quiero sino sólo a las entradas), además el link que aparece en éstas de "leer más..." me lleva a la misma página donde está la misma información de donde provengo, en pocas palabras no avanzo, es como un ciclo, Lo que hace imposible que pueda visualizar el contenido completo de la página que quiero ver.

    Bueno me gustaría que me ayudaras por favor.

    ¿Cómo lo hago? ¿Qué le pongo o le quito al código?

    ResponderEliminar
  33. Hola te felicito por el post la explicaciòn es exelente y me salio en la primer prueba, aunque tengo una consulta para hacerte. Ay alguna forma de q me salga la imagen arriba y el texto junto al leer mas abajo de esa foto te agradeceria mucho la respuesta saludos desde argentina.

    ResponderEliminar
  34. oie munchas gracias muy buena tuto
    saludos dela banda de http://wrestling-alterno.blogspot.com/
    salu2

    ResponderEliminar
  35. Que tal, gracia por el tip , pero cuando pongo más páginas, me lleva a una pequeña reseña de la
    página pero al hacer clic pareciera que me lo refresca nadamás, que puedo hacer?

    ResponderEliminar
  36. HOLA TENGO UN PROBLEMA CON ESTO DE LEER MAS INGRESO TODO EL CODIGO TAL COMO DICES PERO AL MIRAR ..EN LAS ENTRADAS FUNCIONA BN PERO TABN ME LAS HACE EN MIS PAG INDIVIDUALES QUE DEBO HACER GRACIAS..

    ResponderEliminar
  37. muy buen post el unico de ayuda de los 26 de visite

    Gracias

    ResponderEliminar
  38. hola una consulta yo hice todo lo que dijistes...
    al final muestras una imagen donde dice asi te va a quedar pero a mi no me queda asi en lugar de leer mas me sale un cuadradito sin nunguna imagen y justo en ese cuadrado hay que darle clic para que se vea la continuacion de lo que he escrito como hago, y como subo la imagen por fa ayudame.

    ResponderEliminar
  39. Hola,

    Ayer introduje este código en mi blog y al quitarlo se me duplicaron los posts. No sé si he podido dejar algo puesto. ¿Me puede ayudar?

    Sophie Carmo

    www.sophiecarmo.com

    ResponderEliminar