7 de enero de 2015

Resumen Automático en las Entradas (Leer más)



Para aplicar en el blog de Blogger el Leer más automáticamente con imágenes en miniaturas, donde el script define cuantos caracteres aparecerán en la entrada del post de forma automática sin tener que definir que parte de la entrada aparecerá en la página principal del blog. También presenta la posibilidad de que aparezca la imagen reducida que se ha añadido en el post.


Pasos:


  • Ir a: Diseño ► Edición de HTML ►Presionar Ctrl + F y buscar lo siguiente:

<data:post.body/> 
Nota → el buscador marcara tres <data:post.body/>, generalmente se sustituye la segunda línea que se encuentra en el Html del blog, sino funciona probar con la tercer linea.


  • Eliminarla en su lugar pega este código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div expr:id='"portadarsmn" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>entradaresmn("portadarsmn<data:post.id/>");</script>
<span class='enlaceleerms' 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>


  • Ahora, buscar la etiqueta 
</head> 
pegar arriba el siguiente script:


<!--Resumen Automático -->
<script type='text/javascript'>
resumenno = 420;
resumensi = 340;
alturaimg = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function tred(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 entradaresmn(pID){
var div = document.getElementById(pID);
var imgn1 = "";
var img = div.getElementsByTagName("img");
var post = resumenno;
if(img.length>=1) {
imgn1 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+alturaimg+'px"/></span>';
post = resumensi;
}
var portadarsmn = imgn1 + '<div>' + tred(div.innerHTML,post) + '</div>';
div.innerHTML = portadarsmn;
}
//]]>
</script><!-- Fin Resumen Automático -->


  • Vista Previa para comprobar el resultado.  
  • Guardar tu plantilla.


Personalizar el enlace 'Leer más' 


Ir a Diseñador de plantillas ► Avanzado ► Añadir CSS ►Añadir código CSS personalizado


pega el código CSS y luego►Aplicar al blog.

.enlaceleerms {
border: 1px solid #cccccc;
padding: 4px;
background: #f4f4f4;
}


border, el borde con un grosor de 1 píxel, el estilo solid (ver más estilos de borde) y el color #cccccc (ver tabla de colores para cambiarlo).
padding indica la distancia que hay entre el texto y el marco (4 píxeles).
background el color de fondo.

  • Sustituir '' Leer más"  por cualquier otra.

Para poner una imagen en lugar de Leer más:


Ver la línea:

<a expr:href='data:post.url'> Leer más...</a>

y reemplazar el Leer más... por este código:

<img src='URL de la Imagen' />

Ver en  Blog de Prueba


2 comentarios:

Diseño por Blogger Sin Escalones Con la tecnología de Blogger.