Tutorial blogger: ¿cómo poner un botón de "Leer Más" automático?

16 oct 2017



¡Hola! Ya saben que me encanta eso de cambiar el diseño del blog, y probar una cosa y otra hasta encontrar lo que me gusta. Después de la larga pagusa que hice en el blog decidí volver con un nuevo diseño, y quería algo diferente, así que decidí poner el "leer más" o "seguir leyendo" que tan a menudo veía en otros blogs o páginas web.

La forma clásica que trae blogger, la que yo conocía, consiste en insertar un salto de línea que divide la entrada y que en ese punto pone el jump-link o el enlace de leer más que viene por defecto, y eso está bien: fácil y rápido. Pero me di cuenta de que eso aplica solamente para las entradas a las que yo ponga el salto de línea de forma manual, y eso no me gustó nada porque implicaría: uno, editar TODAS las entradas de mi blog hasta el momento; o dos, dejar una parte sin el enlace de leer más. Así que me puse a buscar, y en esta página encontré un tutorial muy bueno para solucionar el problema al cual hice unas pequeñas modificaciones, de forma que, al aplicarlo a mi blog, todas las entradas -las pasadas y las futuras- quedaron automáticamente con el enlace de leer más. Y, por supuesto, he decidido compartirles la forma, por si desean aplicarla:

Antes que nada, hacemos una copia de seguridad de nuestra plantilla, por si acaso. Para esto vamos a PLANTILLA → Crear/Restablecer copia de seguridad → Descargar plantilla completa. Y listo. Después de esto seleccionamos donde dice EDITAR HTML, buscamos (CTRL + F simultáneamente) la etiqueta <head> y justo debajo ponemos el código siguiente:


<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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="100%" height="auto"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Después buscamos <b:includable id='post' var='post'>. Un poco más abajo está la etiqueta <data:post.body/>. Una vez la ubiquemos, vamos a reemplazarla por el código siguiente:

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

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

<div class='rmlink' id="leer-mas-automatico">
<a expr:href='data:post.url'>LEER MÁS</a>
</div>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
Y luego, buscamos ]]></b:skin> y justo antes ponemos este código:

#leer-mas-automatico {
margin-top: 20px;
}

#leer-mas-automatico a, #leer-mas-automatico a:visited {
display: block;
padding: 10px;
font: normal 12px arial; /*tamaño y tipografía del texto*/
color: #fff; /*color del texto*/
background: #000; /*color del fondo*/
text-align: center; /*alineación del texto*/
letter-spacing: 3px; /*espacio entre los caracteres*/
}

#leer-mas-automatico a:hover{
color: #000; /*color del texto al pasar el cursor*/
background: #eee; /*color de fondo al pasar el cursor*/
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   transition: all 0.4s linear;
}

Para terminar, después de lo anterior personalizamos el código a nuestro gusto: En el primer y segundo código hay unas líneas a color, dependiendo de lo que queramos, las editaremos. Más o menos así:

  • summary_noimg = 430; el 430 indica el número de caracteres que se mostrarán de la entrada por encima del enlace de leer más. Esto solamente cuando la entrada no tiene una imagen.
  • summary_img = 340; En este caso, es lo mismo, pero cuando la imagen tiene una entrada.
  • float:left Indica la alineación de la imagen. Si queremos que quede en el centro, en vez de left le ponemos center; y si queremos que quede a la derecha, le ponemos right.
  • padding:0px 10px 5px 0px; Indica los márgenes o el espacio de la imagen respecto a la entrada.
  • width="100% ;Indica el tamaño de la imagen. El 100% indica que el ancho de la imagen será igual al ancho de la entrada. Si la queremos más pequeña, sencillamente pondremos un número menor.
  • LEER MAS: Podemos cambiar esto por la frase que queramos. Para personalizarlo a nuestro gusto, editamos el tercer código conforme a lo que dice, y listo.

Muy bien, después de esto pinchamos el botón de GUARDAR TEMA y listo, ya tendremos todas las entradas de nuestro blog con un enlace de leer más automático. Espero que les sea de ayuda este tutorial. Cualquier duda que tengan, en los comentarios ;) estaré leyéndolos.

Que tengan una excelente semana.
Un abrazo

Jiss (:

6 comentarios

  1. Hola! Queria saber si es posible ponerlo manual? Es decir, si en algunas entradas puedo decirdir donde cortar y que salga el "leer mas".
    Gracias...

    ResponderEliminar
    Respuestas
    1. Ah! Tengo instalado el tema Amalie y al parecer tiene esa opción como bloqueada, porque he intentado poner el botón y no me funciona.

      Eliminar
    2. Hola, amiga!

      Sabes que Blogger trae una opción por defecto, la cual se trata de un salto de línea que, dependiendo dónde lo que pongas, oculta el resto del contenido de la entrada, pero no es automático. La opción que está ahí mostrará sólo el número de caracteres que pongas (en la parte de summary_img = 340), pero el texto aparecerá sin formato. Aún así intentaré buscar una manera; si la encuentro te aviso ;)

      Eliminar
  2. Muchas gracias por tus tutoriales, son muy fáciles de seguir y me han ayudado muchísimo con el diseño de mi blog!

    ResponderEliminar
  3. Gracias amigo genial información bien

    ResponderEliminar

¡Suscríbete! Recibe todos los posts en tu e-mail.