giovedì 17 giugno 2010

Script automatico "Leggi tutto..." per Blogger


Se avete un blog su piattaforma blogger sicuramente vi sarete chiesti come fare in modo che i post in home appaiono come una breve preview e un pulsante "Leggi tutto...", insomma come inserire un sommario in home page. Dopo aver provato invano vari scripts reperiti in rete, finalmente ne ho trovato uno che funziona, e lo condivido con voi. La fonte originale è in inglese e include una errata corridge; io l'o tradotta inserendo il codice corretto.

Ecco come si installa:


Per sicurezza fate un backup del vostro template prima di modificarlo.

Entrate in blogger con vostro account e andate in Design > Modifica html nella vostra Bacheca, ora spuntate l'opzione "Espandi i modelli widget" (è fondamentale questo passaggio).

Per trovare una linea di codice nel Browser digitate Control+F e apparirà una barra di ricerca in basso. Trovate il tag di chiusura </head> e copiate le linee di codice seguente immediatamente prima di esso.




<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</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){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

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;

}



var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}



//]]>

</script>




Da notare che nel codice precedente possiamo cambiare le dimenzioni dell'immagine da visualizzare cambiando questi valori:


img_thumb_height = 100;

img_thumb_width = 120;


Ora trovate il codice <data:post.body/> nel vostro template e sostituitelo con il seguente codice:



<b:if cond='data:blog.pageType == "static_page"'><br/>

<data:post.body/>

<b:else/>



<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/>");

</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href="data:post.url">Leggi tutto..</a></span>



</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>




Ecco fatto! Ora cliccate su preview e poi salvate.
Ovviamente se cambiate il modello dovete rifare tutto daccapo.

Credits: www.anshuldudeja.com

4 commenti:

  1. Lo cercavo da anni, ora provo se funziona!

    RispondiElimina
  2. Grazie! Quest'articolo è stato molto utile. Ti va di sostenerci a vicenda sulla piattaforma blogspot? il mio sito è questo www.unoweb.blogspot.com . Fammi sapere, Alessandro.

    RispondiElimina