En la entrada de hoy les explicaré como hacer para que las entradas de la página principal del blog se muestren con un "Leer más" automático y con una miniatura de imagen. Más específicamente, lo que mostraremos será el título de la entrada, luego un pequeño resumen de la entrada con el número de caracteres que nosotros seleccionemos y una miniatura de imagen, que será la miniatura de la primerimagen que colguemos en el post. Luego de la imagen y el resumen del post, aparecerá un enlace que dice "Leer más", el cual al ser tocado nos llevará al artículo. El artículo se mostrará tal y cual ustedes lo redactaron. Un ejemplo:
[1] Vamos a Diseño > Edición de HTML y marcamos la casilla Expandir plantilla de artilugios. Luego buscamos este código:
<data:post.body/>
[2] Vamos a sustituir el código anteriormente encontrado por lo siguiente:
<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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más »</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
[3] Ahora pegaremos el siguiente script antes de </head>:
<script type='text/javascript'>
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="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}//]]>
</script>
[4] Opcional: Si quieres, puedes agregarle estilos CSS al enlaces de "Leer más". Para eso pegaremos el siguiente código antes de ]]</b:skin>. Dejé las instrucciones en el código para que entiendan bien qué modificar:
.rmlink {
font-size:90%; /* tamaño de la fuente */
font-weight: bold; /* ancho de la fuente */
text-transform: uppercase; /* transformacion del texto, en este caso mayuscula */
padding-top: 10px; /* espacio entre el enlace y el texto */
}
.rmlink a {
color: #228b22; /* color del enlace */
}
.rmlink a:hover {
color: #9acd32; /* color del enlace al pasar el cursor */
text-decoration: underline; /* decoracion del enlace al pasar el cursor, en este caso subrayado */
}
Modificaciones:
Código del paso [2]:
- Si quieres sustituir el "Leer más" por una imagen, modificá lo que está en rojo por <img src="Url imagen"/>, en donde dice Url imagen pegas la url de tu imagen.
- Si quieres que el "Leer más" se ubique a la izquierda modificá el código en verde porstyle='float:left'.
Código del paso [3]:
- summary_noimg: El número de caracteres que se mostrarán en el resumen del texto en caso de no haber una imagen en la entrada.
- summary_img: El número de caracteres que se mostrarán en el resumen del texto en caso de haber una imagen en la entrada.
- img_thumb_height: Es el número de la altura de la miniatura de imagen.
- img_thumb_width: Es el número del ancho de la miniatura de imagen.
