Post Recenti con icona anteprima per Blogger
martedì 21 luglio 2009
36
commenti
In questa guida vi mostrerò come inserire un widget che visualizza i Post Recenti con a fianco una miniatura corrispondente alla prima immagine che avete pubblicato nel post.
Ecco un esempio di cosa otterrete:
Come si vede dall'esempio, questo widget visualizza automaticamente gli ultimi 5 post presenti sul vostro Blog Blogger, e genera automaticamente l'anteprima delle immagini contenute in ciascun post. Inoltre è presente il conteggio del numero di commenti presenti su ciascun post.
Il widget è stato creato dall'autore di BloggerTricks.com sul cui blog troverete le spiegazioni in inglese.
Installazione del Widget Post Recenti con immagine
Assicuriamoci di aver abilitato i feed Rss per il nostro Blog e di averli impostati in modo da rendere disponibile gli interi post (non una anteprima). Per fare ciò andiamo in Impostazioni -> Feed Sito e selezioniamo Consenti Feed Blog -> Completo.Passiamo all'installazione del widget.
1: Andiamo in Layout -> Aggiungi Gadget -> Html/Javascript
2: Copiamo e incolliamo il codice seguente
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NOMEBLOG.blogspot.com/";
</script>
<script type="text/javascript">
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 showrecentposts(json){
document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');
j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
for(var i=0;i<numposts;i++){
var entry=json.feed.entry[i];
var posttitle=entry.title.$t;
var pcm;var posturl;
if(i==json.feed.entry.length)break;
for(var k=0;k<entry.link.length;k++){
if(entry.link[k].rel=='alternate'){
posturl=entry.link[k].href;
break;
}
}
for(var k=0;k<entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){
pcm=entry.link[k].title.split(" ")[0];
break;
}
}
if("content"in entry){
var postcontent=entry.content.$t;
}
else if("summary"in entry){
var postcontent=entry.summary.$t;
}else var postcontent="";
postdate=entry.published.$t;
if(j>imgr.length-1) j=0;
img[i]=imgr[j];
s=postcontent;
a=s.indexOf("<img");
b=s.indexOf("src=\"",a);
c=s.indexOf("\"",b+5);
d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';
var month=[1,2,3,4,5,6,7,8,9,10,11,12];
var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day=postdate.split("-")[2].substring(0,2);
var m=postdate.split("-")[1];
var y=postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]){
m=month2[u2];
break;
}
}
var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";
posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;
var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';
if(summaryPost==0){
trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';
}
document.write(trtd);
j++;
}
document.write('</table>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
3: Prima di salvare passiamo alla configurazione del widget per adattarlo al nostro blog.
Configurazione del Widget
Di seguito la lista dei parametri da modificare. Quelli di default vanno abbastanza bene, l'unica cosa che dovete necessariamente modificare è il parametro home_page, inserendo l'indirizzo del vostro Blog.boxwidth - larghezza del widget
cellspacing - spaziatura tra le celle
borderColor - Colore del bordo
thumbwidth & thumbheight - larghezza e altezza delle immagini visualizzate
fntsize - Larghezza del carattere
acolor - Colore del titolo
aBold - grassetto nel titolo (true o false)
numposts - Quanti post vuoi mostrare
home_page : http://NOMEBLOG.blogspot.com/ (cambialo con il nome del tuo blog)
Se avete post che non contengono immagini al loro interno, verrà visualizzata una immagine casuale (se volete personalizzarle basta inserirle tra quelle specificate in imgr[]). Leggi l'articolo
Esplora gli articoli
Segui o condividi!