"Estimado visitante... He querido compartir contigo en este blog, lo que para mi en alguna ocasión me ha sido muy útil. A todos los bloggers que han contribuido a enriquecer mi experiencia y conocimiento como blogger, "muchas gracias"

Cómo poner un Botón de "Leer Más" Automático



¡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 (:

https://entrelettras.blogspot.com/2017/10/tutorial-blogger-boton-de-leer-mas.html

Labels: , , , , , ,
Suscribirse a: Enviar comentarios (Atom)
"Estimado visitante... He querido compartir contigo en este blog, lo que para mi en alguna ocasión me ha sido muy útil. A todos los bloggers que han contribuido a enriquecer mi experiencia y conocimiento como blogger, "muchas gracias"

  © Link Web Blog Links Bloggers by Facebook LWB 2012

Back to TOP- Volver al principio - pulsa para SUBIR