Quando si scrive un articolo su Blogger (Blogspot), si può inserire l'intervallo. Esso serve a mostrare nella Homepage la dicitura Continua a leggere, che serve a non appesantire la pagina e a rendere più agevole la lettura.
Siccome esistono bloggatori così pigri (come me d'altronde) che si seccano ad indicare l'esatta posizione in cui tagliare il post. Non ho potuto far altro che cercare un metodo per semplificarmi la vita. Per fortuna che il web ci è amico e sono riuscito a trovare anche di meglio. Difatti usando questo codice apparirà in automatico la miniatura della prima immagine presente nell'articolo e poi l'inizio dell'articolo che stavamo scrivendo.
Questo metodo è automatico per tutti i post di blogger ma non per le pagine statiche. Inoltre se inserite l'intervallo manualmente, questo in automatico per quel singolo articolo non avrà valore a scapito di quello che avete inserito voi.
Anche io sto usando questo metodo. Il risultato sarà simile a questo (ed è personalizzabile):
Esso serve principalmente per allineare la thumbnail, cioè l'immagine del post, in posizione allineata a sinistra della descrizione. Per cambiargli posizione dovete modificare la parola "left" in "center" per averla centrale o "right" per averla allineata a destra. Per piccoli aggiustamenti vi basterà variare i valori numerici relativi alla lunghezza del testo in presenza o in assenza dell'immagine, e infine la dimensione dell'immagine del post.
Il passo successivo è quello di cercare quest'altro codice <data:post.body/> e poi andarlo a sostituire con quello presente qui in basso.
Vi avviso che nel modello potrebbero esserne presenti più di uno, ma solamente uno di questi dovrete rimpiazzare al fine di far funzionare il riassunto automatico e non guastare il tema.
Siccome esistono bloggatori così pigri (come me d'altronde) che si seccano ad indicare l'esatta posizione in cui tagliare il post. Non ho potuto far altro che cercare un metodo per semplificarmi la vita. Per fortuna che il web ci è amico e sono riuscito a trovare anche di meglio. Difatti usando questo codice apparirà in automatico la miniatura della prima immagine presente nell'articolo e poi l'inizio dell'articolo che stavamo scrivendo.
Questo metodo è automatico per tutti i post di blogger ma non per le pagine statiche. Inoltre se inserite l'intervallo manualmente, questo in automatico per quel singolo articolo non avrà valore a scapito di quello che avete inserito voi.
Anche io sto usando questo metodo. Il risultato sarà simile a questo (ed è personalizzabile):
Come si procede
Andate su Modello > Modifica HTML e cercate il tag </head> , poi immediatamente prima dovrete incollare questo codice script:<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Esso serve principalmente per allineare la thumbnail, cioè l'immagine del post, in posizione allineata a sinistra della descrizione. Per cambiargli posizione dovete modificare la parola "left" in "center" per averla centrale o "right" per averla allineata a destra. Per piccoli aggiustamenti vi basterà variare i valori numerici relativi alla lunghezza del testo in presenza o in assenza dell'immagine, e infine la dimensione dell'immagine del post.
Il passo successivo è quello di cercare quest'altro codice <data:post.body/> e poi andarlo a sostituire con quello presente qui in basso.
<b:if cond='data:blog.pageType != "static_page"'>
<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/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Continua a leggere »</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>
Vi avviso che nel modello potrebbero esserne presenti più di uno, ma solamente uno di questi dovrete rimpiazzare al fine di far funzionare il riassunto automatico e non guastare il tema.
