lunes, 16 de junio de 2014

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="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" 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......

30 comentarios:

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

    ResponderEliminar
    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,

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

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

    ResponderEliminar
    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 !!

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

    ResponderEliminar
    Respuestas
    1. Hola Victoria Suárez Me alegra que te sirva...

      Saludos,

      Eliminar
  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/

    ResponderEliminar
    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,

      Eliminar
  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.

    ResponderEliminar
    Respuestas
    1. Hola Seiren es con gusto, me alegra que te sirva....

      Muchos saludos,

      Eliminar
  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

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

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

      Saludos,

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

    ResponderEliminar
    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,

      Eliminar
  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

    ResponderEliminar
    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,

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

    ResponderEliminar
  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

    ResponderEliminar
    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,

      Eliminar
  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

    ResponderEliminar
    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,

      Eliminar
  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

    ResponderEliminar
    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

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

      Un saludo,

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

    ResponderEliminar
    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,

      Eliminar
  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.

    ResponderEliminar
    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,

      Eliminar

SÍGUENOS EN: