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

17 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

SÍGUENOS EN: