Poner botón leer más automático con imagen miniatura en Blogger (método 2)


Algunos fragmentos tomados gentilmente de ciudadblogger
 
Hace ya un tiempo atrás expliqué como agregar el botón leer más, pero, de forma manual aunque es muy fácil lograrlo, para ello seguiremos el siguiente tutorial:

¿No quieres leer? no te preocupes, tenemos 
lo mismo pero en vídeo 



Estructuralmente el truco se verá reflejado similar a la imagen anterior, con algunos pasos.

1. Dirigirnos a Blogger > Edición HTML > y buscamos este código:


<data:post.body/>

Nota: Generalmente esta etiqueta suele aparecer dos o 3 veces, en la mayoría de casos es la segunda encontrada, sin embargo si esta no funciona recomiendo que prueben con cada una.



La eliminamos y en su lugar pondremos el siguiente código completo:

<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' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&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>

 2. Lo siguiente será buscar </head> y antes de esta etiqueta pegamos lo siguiente:

 <script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;

</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigiWqD4NowV1aWaThp-k-Du3Nf9yDuSl5cPeC4_yGorPCXZJelhEXSm5dFemh4VfwKjR-K7VbJhc5eMmvMDUqV4Qi5EKv-Fehg0BO9QNRVd4gZz8OJWyURBQgwe66BVeo7Ib0MEtaGXKs/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

La parte color naranja:

summary_txt = 410; Indica el número de caracteres en el resumen de la entrada.
img_thumb_width = 120; Es el ancho que tendrá la imagen en miniatura..


La parte color azul:

Indica el link de la imagen por defecto cuando el post no tiene imagen alguno se mostrará dicha imagen, para cambiar la imagen sólo cambien el link subiendo la nueva imagen a un servidor y estuvo.

Es todo en este post hasta la próxima Bloggers......

48 comentarios:

  1. Excelente, me sirivió a la perfección muchisimas gracias

    ResponderBorrar
    Respuestas
    1. Hola TaUrO De nada un gusto que te sirviera este post para más contenido de calidad puedes seguirnos en blogger. :)

      Saludos desde Colombia,

      Borrar
  2. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  3. Me funcionó en un blog pero en el otro no pasa nada. Realmente no tengo idea de cómo resolverlo :)

    ResponderBorrar
    Respuestas
    1. Hola Lorena Ledesma Qué tal, mira necesitaría que por favor me proporcionaras el link de tu blog en el cual no funciona y posiblemente pueda brindarte ayuda !!

      Borrar
  4. wow me funciono no se cuantas veces lo hice pero ninguno me funcionaba hasta q llege a tu pagina gracias por post

    ResponderBorrar
  5. Hola me funciona muy bien pero no sé porque no me aparece el Leer más te agradecería por miles1 si me ayudas !
    te paso la página http://digitalnewscientifica.blogspot.pe/

    ResponderBorrar
    Respuestas
    1. Hola Yasmina Guerrero ME alegra que te funcione en cierta parte, sin embargo es un poco raro el hecho de que no te salga el leer más, prueba optimizando el tamaño de div CSS de la posición del botón quizá allí se arregle y se muestre.

      Saludos,

      Borrar
  6. ¡Muchas gracias!

    Recuerdo haber hecho esto hace tiempo pero por alguna razón lo olvidé por completo. Terminé con un dolor de cabeza porque no encontraba un método que funcionara (me encontraba turoriales de hace 5 años lol). Y este me ha funcionado perfecto.

    ResponderBorrar
  7. Hola buen día, a mi me funcionó muy bien pero quisiera saber si se le puede cambiar el tamaño y la fuente del resumen, saludos

    ResponderBorrar
    Respuestas
    1. Trabjándole un poco al CSS en el script integrado justo en este fragmento...

      style='font-size:13px; text-align:justify;'

      Saludos,

      Borrar
  8. hola, tendrás algún tutorial de como poner solo una imagen como entrada? :)

    ResponderBorrar
    Respuestas
    1. Hola Biizarruz no comprendo muy bien lo de imagen como entrada ya qque todas las entradas al editarlas nos dejan poner imágenes quedo atento a tu explicación mejor...

      Saludos,

      Borrar
  9. disculpa por no explicarme bien, me refiero a entradas parecidas a estas http://2.bp.blogspot.com/-XFK6zG2Se7w/UrpUTXpr6OI/AAAAAAAAAeo/zv1hifH81V0/s1600/plantilla+series+blogger+gratis.png

    ResponderBorrar
    Respuestas
    1. De acuerdo ya entiendo si se puede no tengo un post de como se hace, pero,considería que es más fácil que busques una plantilla para blogger que traiga el efecto que quieres son más que todo pplantillas para películas o videojuegos en blogger...

      Saludos,

      Borrar
  10. Muchas gracias bros. me sirvió mucho tu tutorial.

    ResponderBorrar
  11. Hola Andrés, buenas tardes.
    Llevo un par de días haciendo pruebas porque tenía ganas de hacer esto en mi blog. Resulta que si lo hago en el blog que tengo de pruebas, me funciona a la perfección, pero en el "de verdad" solo me salen las miniaturas de 2 post. He comprobado y tengo configurado para que se vean 10, osea que no es el problema. Qué puedo estar haciendo mal?
    Mi blog es www.viajesyrutas.es
    Un saludo y gracias de antemano
    Carmen

    ResponderBorrar
    Respuestas
    1. Hola Carmen, es relativo podrías pasarme el link del blog original, por otra parte no sé si sea el que me pusiste ahí, pero, viajes y rutas allí usas una plantilla predefinida por blogger o te la descargaste de algún sitio y la subiste eso también influye...

      Saludos,

      Borrar
  12. Hola Andrés,
    Lo primero es darte las gracias por tomarte la molestia de resonderme!
    El link de mi blog es ese que te he puesto ahí y es de blogger, no me lo descargué de ningún sitio. Es una plantilla denominada "Sencillo".
    Un saludo
    Carmen

    ResponderBorrar
    Respuestas
    1. De acuerdo Carmen veamos primero intenta de nuevo debes estar segura que hiciste todo tal cual según este post los indica recuerda que hay códigos que al buscarlos en tu plantilla pueden estar repetidos se buscan con la función "crtl + f" las teclas, bueno dado el caso sino mejora te recomiendo hacer un respaldo de seguridad de tu plantilla e instalar de forma independiente otra plantilla personalizada cargala (Una cualquiera) y realiza lo mismo si te funciona bien 10/10 pues el problema es de tu anterior plantilla si no te funciona no te preocupes que con el respaldo que hiciste de tu plantilla actual sólo la vuelves a cargar y listo te queda como la tenías sin ningún problema... Serían esas dos opciones para ir descartando...

      Un Saludo,

      Borrar
  13. Debe de ser problema de algún cambio que he hecho en mi plantilla de blogger en algun momento, porque con otra plantilla funciona perfectamente. Así que no veo manera de arreglarlo. Me sale 3 veces y para que funcione tengo que cambiarlo en el 2º y en el 3º, pero la miniatura solo se me repite en dos ocasiones. Voy a seguir inténtándolo a ver si doy con el fallo.
    Gracias por tu ayuda!
    Un saludo
    Carmen

    ResponderBorrar
    Respuestas
    1. Hola Andrés, te escribo para comentarte que resolví el problema. Eso me pasaba porque mis entradas son demasiado largas, con lo que aunque salga en automático, tengo que meter el corte igual a mano en lo post. Un saludo y gracias de nuevo

      Borrar
    2. HOla Carmen que bien que lo solucionaras....

      Un saludo,

      Borrar
  14. He probado tu tutorial en mi blog y no sale nada ¿Alguna suggerencia? Este es el blog http://picturesofanobsession.blogspot.com.es/ :)

    ResponderBorrar
    Respuestas
    1. Hiciste bien el paso 1 es el paso por el cual a algunos no les sirve... el tutorial sigue vigente aún quizá alguna función mal puesta cualquier duda puedes escribir....

      Un Saludo,

      Borrar
  15. Hola, ¡muchas gracias por tu aportación! Me funciono muy bien

    Tan solo tengo una duda, ¿Cómo puedo cambiar las imágenes en cada post que realice? (Es decir,que en cada post haya una imagen diferente)

    Realice unas pruebas y cuando publico más de una entrada me sale la misma imagen.

    Espero haberme dado a entender, espero tu respuesta.

    ResponderBorrar
    Respuestas
    1. Hola Yamiki lamento la tardanza este mes no he estado al tanto del blog...

      A qué te refieres con imagen diferente? el código lee y muestra la primer imagen que se muestre en tu entrada esa es la que toma...

      Saludos,

      Borrar
  16. ¡Hola! He probado el tutorial y me sale perfecto pero me gustaría saber si se puede personalizar el "Leer más", añadirle un borde y darle más espaciado entre el Leer más y el texto.

    ¡Gracias!

    ResponderBorrar
    Respuestas
    1. Hola de nuevo XD He podido darle estilo al "Leer más" pero no consigo que haya más espacio entre el texto y el botoncito (he usado margin-top y margin-bottom para probar si uno de los dos iba pero nada :/) ¿Sabes cómo podría hacerlo?

      Borrar
    2. Hola Cristina, ¿Cuál es la URL de tu blog? donde implementaste la modificación al estilo.

      Saludos,

      Borrar
  17. me funciono pero quisiera saber como se hace para que no quede tanto espacio sobrante en el cuadro

    ResponderBorrar
    Respuestas
    1. Hola Combo Break, Gracias por comentar si dominas CSS podrás ajustar los estilos de este código a gusto.

      Saludos,

      Borrar
  18. gracias probe muchos tutoriales pero el unico que me sirvio fue el tuyo!!

    ResponderBorrar
  19. Te queria hacer una consulta, en la pagina principal me sale el resumen de tres entradas solamente, se puede hacer que salgan mas??

    ResponderBorrar
    Respuestas
    1. Hola Leo, ¿Cuál es la URL de tu blog? y cuántas entradas tienes en la configuración de blogger en tu blog para mostrar en la página principal.

      Saludos,

      Borrar
  20. Hola Andres, esta es la url de mi blog https://triunfaonline.blogspot.com/ y actualemente tengo 5 entradas, me salen tres en la pagina principal y las otras en entradas mas antiguas

    ResponderBorrar
    Respuestas
    1. Hola solo veo 5 entradas en todo tu blog y no veo más contenido, no sé si comprendiste mi segunda pregunta ajeno a la cantidad de entradas que según veo es 5 cuántas entradas tienes configuradas para mostrar por pagina principal o cuando le den click a entradas anteriores, pero bueno, también tendría algo que ver el diseño de tu plantilla.... Lo de la configuración lo haces en:

      1. Blogger.com
      2. Configuración
      3. Entradas, comentarios y elementos compartidos.
      4. Entradas > Mostrar un máximo de | | Pones tu número..

      Quedo al tanto saludos,

      Borrar
  21. Hola Andres ; en la configuracion tengo para que se vean 7 entredas , por eso me parece extraño que aparezcan solo 3 en la pagina principal

    ResponderBorrar
    Respuestas
    1. Hola Leo, lamento la tardía respuesta ¿Aún necesitas ayuda?

      Saludos,

      Borrar
  22. Hola! Me fue perfecto. Muchas gracias por compartir.
    Una duda: cómo puedo hacer para que las palabras que tengo en cursiva o en negrita en el cuerpo de la entrada se mantengan igual en la entrada corta. Entiendo que sería modificándolo aquí:

    style='font-size:14px; text-align:left;'

    Un ejemplo: https://filmfilia.blogspot.com/2015/06/hablar-2015.html (La primera palabra, "Hablar" aparece en cursiva en el cuerpo de la entrada, pero no en la vista corta antes de dar a "Seguir leyendo".

    Pero no sé cómo hacerlo. A ver si me puedes ayudar. Muchas gracias :)

    ResponderBorrar
    Respuestas
    1. Hola Lara, lamento la tardía respuesta aún necesitas ayuda?

      Saludos,

      Borrar
    2. Buenas! Sí, aún me serviría si sabes cómo solucionarlo. Muchas gracias! :)

      Borrar

ESTAMOS EN: