Riassunto automatico dei post di Blogger


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):



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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 != &quot;static_page&quot;'>
<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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Continua a leggere &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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.


15 commenti :

  1. Risposte
    1. Nel mio modello sono presente due righe "data-post-body", in una delle due non funziona se sostituisci il codice nell'altra si. Comunque questa regola vale per la maggior parte dei temi di blogger, alcuni però non riconoscono questo codice, mi riferisco a quei temi presi da internet.

      Elimina
  2. Risposte
    1. E' la stessa abbreviazione che uso io però io ho un tema standard di Blogger se ne usi uno di quelli scaricabili potrebbe non funzionare. Come spiegato nel mio commento precedente è possibile che abbiate più di una riga che si chiama "data-post-body". Dovete fare a tentativi, se non funziona con la prima, premete Ctrl+Z ed annullate l'ultima operazione e la sostituite con la seconda o terza riga uguale. Vedrai che funzionerà.

      Elimina
  3. io non la trovo questa data:post.body come faccio?? e cosa vuol dire "espandete i modelli widget"? help me grazie!!

    RispondiElimina
    Risposte
    1. Quel "espandete i modelli widget" si riferisce a una cosa funzione di Blogger che adesso è stata tolta. Ricordo che per cercare un codice bisogna usare la ricerca interna (del modello e non del browser) digitando CTRL + F. Se non lo trovi è probabile che questo codice da cercare, nel tuo tema, l'hanno chiamato in modo diverso.

      Elimina
  4. Ciao, ottimo post.Tutto funziona alla meraviglia ma c'è un piccolo problema: io già usavo l'intervallo, lo inserivo manualmente, e ora nei post mi compare il doppio link "continua a leggere".
    C'è un modo per togliere tutti gli intervalli messi in precedenza?

    RispondiElimina
    Risposte
    1. io non ho provato ma forse quello manualmente si può togliere inserendo il css:
      .jump-link {display: none;}

      Elimina
    2. Immaginavo qualcosa del genere. Lo dovrei quindi inserire in mezzo al primo codice?

      Elimina
    3. Puoi usare uno dei due metodi che trovi in questa guida per aggiungere il css:
      https://www.scuolissima.com/2014/08/come-aggiungere-codice-css-blogger.html

      Elimina
  5. Ho trovato una specie di bug.
    In pratica quando nel titolo è presente una o più parole tra virgolette, l'articolo non viene più riassunto ma pubblicato per intero sulla homepage con il "continua a leggere" che rimane comunque alla fine.
    Anche a te capita?

    RispondiElimina
    Risposte
    1. sì l'ho notato anche sul mio blog ma è talmente nascosto che difficilmente si nota ma non sapevo fosse per colpa delle virgolette.

      Elimina
  6. Secondo te c'è possibilità di correggere l'errore modificando il codice oppure tocca tenerlo così?

    RispondiElimina
    Risposte
    1. L'unica soluzione che conosco è quella di sostituire nel titolo le virgolette classiche ("testo di prova") con queste altre “testo di prova”.

      Elimina
  7. Beh, ho trovato una soluzione se ti può interessare. In pratica anziché mettere una doppia virgoletta si mettono due virgolette singole.
    Occupa forse più pixel ma il risultato grafico è lo stesso e il post viene riassunto. Ciao e buon week end!

    RispondiElimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".