jueves, 12 de agosto de 2010

Resumir los post de tu blog

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

2 comentarios:

Anónimo dijo...

hola. Acabo de incluír el resume a mi blog. Se ve perfectamente pero en enlace "leer más" no lleva al post completo. no sé si me puedes ayudar. gracias.

Xosé Renato Núñez da Silva dijo...

ahh, este el blog: http://jr-vilabela.blogspot.com

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones