Cómo 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 primer imagen 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.
Hay un script de Anhvo que permite poner el Leer más en todas las entradas de forma automática, y además de eso muestra la imagen en miniatura que tenemos en la entrada, la cual podemos configurar para que sea del tamaño que se desee.
Este método me parece de los mejores ya que no tenemos que hacer nada mas que escribir nuestras entradas y el script hace el trabajo sucio.
Antes de empezar para más seguridad haces una "copia de plantilla".
Para ponerlo en tu blog entra a Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:
<data:post.body/>
Sustituye esa etiqueta por este otro código:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Ahora pega antes de </head> lo siguiente:
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
Ojo, es posible que la primera etiqueta que hay que cambiar la tengas dos o más veces, si así fuera haz el cambio en una, si dando Vista Previa no ves que funcione entonces haz el cambio en la otra que tengas repetida y así sucesivamente.
Configuración:
Puedes configurar el tamaño de las imágenes y el número de caracteres a mostrar en el resumen de las entradas, eso se hace al inicio del script, es decir, en esta parte:
summary_noimg = 400; Número de caracteres cuando NO tiene una imagen
summary_img = 300; Número de caracteres cuando la entrada tiene una imagen
img_thumb_height = 125; Alto de la imagen en miniatura
img_thumb_width = 125; Ancho de la imagen en miniatura
Si quieres darle otro estilo al enlace de Leer más como un color de fondo, cambiar el color del texto, etc. entonces pega antes de ]]></b:skin> lo siguiente:
.rmlink {
float:right;
background: #04B4AE; /* Color de fondo */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.rmlink a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.rmlink:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}
También puedes cambiar el texto "Leer más..." por otro texto cambiando lo que está en turqueza en el primer código. Si prefieres usar una imagen en lugar de un texto entonces sustituye ese texto por el código de la imagen:
<img src="URL de la imagen" />
Como ves es sencillo de instalar, el script es corto así que no habrá problemas con el tiempo de carga de la página y lo mejor es que el "Leer más"se hará de forma automática en todas las entradas.
No hay comentarios :
Publicar un comentario