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:
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:
<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;
}
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
Read more...
Que tengan una excelente semana.
Un abrazo
Jiss (:
https://entrelettras.blogspot.com/2017/10/tutorial-blogger-boton-de-leer-mas.html
![all-free-downoad.com-logo[5]](https://bp3.blogger.com/_QcADEK6HYak/SI320Z2ve6I/AAAAAAAAD9Y/zEOsIxfEhts/s400/Logotipo.png "Intercambios virtuales en la red, seriales y otros."){kind=small}
![all-free-downoad.com-logo[5]](https://www.deluxetemplates.net/wp-content/themes/newprivatetheme/images/logo.png "DeluxeTemplates.net página web es más conocido por las plantillas de Blogger, y recientemente se hizo muy conocido en WordPress comunidad con nuevos y exclusivos diseños el tema de WordPress. Todas las plantillas de Blogger y WordPress temas mencionados aquí son 100% exclusivo, diseñado y desarrollado por nosotros , 100% gratuito para uso personal o comercial, licenciado bajo la licencia Creative Commons. Todos nuestros temas son: - Diseño único y moderno. - Gratuito para uso personal o comercial, licenciado bajo licencia creative commons. - Actualizado, y apoyado siempre"){kind=logo}
