Resumir los post de tu blog

  • agosto 12, 2010
Blogger??SPhera nos proporciona una idea de VN Weblog Guide resumir los post autom??ticamente cosa que antes nos ve??amos obligados a hacer manualmente en post anteriores cuando a??ad??amos alg??n sistema de «leer m??s», una vez realizamos los cambios no tendremos que preocuparnos de nada. Eso si.. el resultado lo veremos en todos los post.
Estar??a bien si antes de seguir descargamos una copia de la plantilla, lo que haremos es muy sencillo pero as?? tendremos m??s tranquilidad.


Nos situamos en plantilla Edici??n de HTML y marcamos para expandir la plantilla de artilugios. Buscamos </head> y justo antes a??adimos lo siguiente:





<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
//<![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) {
if(thumbnail_mode == "float") {
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;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Lo que sigue a continuaci??n nos permite modificar la forma de mostrar los post resumidos y lo podemos hacer una vez terminamos todos los cambios, de esa forma podemos ver en vista previa el resultado de lo que vamos haciendo. Ser??a algo as??:


?? Donde dice var thumbnail_mode = «float» ; podemos ubicar la imagen en miniatura.
Con float la imagen se ubica a la izquierda. Si lo sustituimos por no-float la imagen se sit??a en la parte superior del pots y a continuaci??n el resto del post.


«Cualquier cambio que hagamos s??lo afectar?? la imagen que mostramos en los post resumidos, es decir la miniatura, una vez visualizamos el post completo la imagen se muestra en el tama??o y ubicaci??n escogida por nosotros«

?? En summary_noimg = 230 ; escogemos el n??mero de caracteres en los post resumidos que NO contienen im??genes.


?? En summary_img = 140; ser?? el n??mero de caracteres cuyos post contienen im??genes.


?? Adjudicamos altura a la imagen en img_thumb_height = 100;


?? La anchura la modificamos en img_thumb_width = 100;


Buscamos ahora lo siguiente:

<div class=’post-body entry-content’>
<data:post.body/>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


Y lo sustituimos por:

<div class=’post-body entry-content’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id=’showlink’><a expr:href=’data:post.url’> Texto para expandir el post </a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


??Sustituimos Texto para expandir el post por el texto que har?? de v??nculo para mostrar el post en su totalidad.
??Tambi??n podemos a??adir una imagen en lugar del texto si a??adimos:
<img src=»url-imagen» />


?? Si deseamos a??adir unos estilos a ese texto podemos hacerlo con la etiqueta span. 
<span style=’color:#000;font-size:14px;’> Texto para expandir el post</span> 
Ah?? mismo podemos modificar el color de letra, tama??o y fondo.


Fuente – gemablog-.blogspot.com


Importantes para – Blogs trucos y web :


Los famosos y los dominios .es
Ser primero te garantiza un tercio de los visitantes de una busqueda de google
Pon un contador, en tu blog HACER BLOG
A??adir Entradas Relacionadas a tu blog

No Comments Found

Deja un comentario