Come accorciare i post con il read more

Buon sabato a tutti . Spero di fare cosa gradita a chi
qualche giorno fa mi ha chiesto come si fa ad "accorciare" tramite read
more i post su blogger. Intanto perchè attivare questa funzione? Perchè
renderà il tuo blog più veloce nel caricamento, più post in home page
che potranno essere aperti semplicemente cliccando su "read more..." o
se lo preferite al italiana "continua a leggere".   Visto che sarà
necessaria qualche modifica al html del blog, consiglio vivamente di
effettuare il backup nel caso qualcosa vada storto ^_^ potete ripristinare l'ultima versione prima delle eventuali modifiche.  



Fatto il backup? Allora possiamo procedere...

1. click su DESIGN

2. click su MODELLO

3. click su Modifica HTML

4. click CTRL+F da tastiera e nella casellina di ricerca che si apre scrivi </head>

Ora seleziona e copia il seguente codice e poi incolla sopra </head>

<script type='text/javascript'><br />summary_noimg = 300;<br />summary_img = 300;<br />img_thumb_height = 120;<br />img_thumb_width = 120; <br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br /><br />function removeHtmlTag(strx,chop){ <br /> if(strx.indexOf("<")!=-1)<br /> {<br /> var s = strx.split("<"); <br /> for(var i=0;i<s.length;i++){ <br /> if(s[i].indexOf(">")!=-1){ <br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); <br /> } <br /> } <br /> strx = s.join(""); <br /> }<br /> chop = (chop < strx.length-1) ? chop : strx.length-2; <br /> while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; <br /> strx = strx.substring(0,chop-1); <br /> return strx+'...'; <br />}<br /><br />function createSummaryAndThumb(pID){<br /> var div = document.getElementById(pID);<br /> var imgtag = "";<br /> var img = div.getElementsByTagName("img");<br /> var summ = summary_noimg;<br /> if(img.length>=1) { <br /> 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>';<br /> summ = summary_img;<br /> }<br /> <br /> var summary = imgtag + '<div><br />' + removeHtmlTag(div.innerHTML,summ) + '</div><br />';<br /> div.innerHTML = summary;<br />}<br /><br />//]]><br /></script>



Prima di salvare, clicca su Anteprima modello e assicurati di aver copiato correttamente il codice. Se non ti si visualizza nessu tipo di errore, allora procedi cliccando SALVA MODELLO.



Per chi lo desidera è possibile modificare i valori del codice:



summary_noimg = 430; questo codice indica il n. di caratteri  nel post se quel post non contiene immagini. 430 è il valore di default, può essere modificato in base alle proprie esigenze di template

summary_img = 340; Se il post contiene immagini, questo valore deciderà quanti caratteri divranno essere mostrati nel post tenendo conto della presenza del immagine. Modificare il numero di caratteri da visualizzare in base alle proprie template



img_thumb_height = 100; questo tag decide l'altezza della miniatura mostrata nel post. Variare il numero 100 per soddisfare il vostro modello. 



img_thumb_width = 120; Questo tag decide la larghezza dell'immagine miniature da visualizzare. idem come precedente



Ora copia il codice seguente, click CTRL+F da tastiera nella finestra modifica html e nella casellina di ricerca che si apre incolla:



<data:post.body/> 

Una volta trovato il codice, sostituisci con il codice che lascio di seguito:

<b:if cond='data:blog.pageType != "static_page"'><br /><b:if cond='data:blog.pageType != "item"'><br /><div expr:id='"summary" + data:post.id'><br /><data:post.body/></div><br /><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /><div class='readmore-wrap'><br /><span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span><br /></div><br /></b:if><br /></b:if><br /><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br /><br /><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Controlla con anteprima modello se non ci sono errori nel codice e poi salva.

Ora ricarica il tuo blog e il "continua a leggere" è installato.

Se qualcosa non è chiaro e hai bisogno di aiuto, utilizza il contatto webmaster a fondo a pag. A presto, con buone nuove!