Post Recenti con icona anteprima per Blogger

martedì 21 luglio 2009 Lascia un Commento

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[]).

36 commenti »

  • paomablog ha scritto:  

    Widget molto carino sei un grande complimenti !!!
    subito inserito nel mio blog perfettamente funzionante CIAO

  • sogno93 ha scritto:  

    questo gagdet mi piace moltissimo !!! sei proprio forte!!! l'ho inserito nel mio blog..mi piace!!!!!!!!!!!!!!

  • Carlitos ha scritto:  

    io l'ho inserito ma non mi da l'anteprima delle immagini dei post.. sbaglio kualcosa?

  • Jack Slater ha scritto:  

    Carlitos, controlla questa impostazione: Consenti Feed Blog -> Completo

  • learn html online ha scritto:  

    non ho altre da dire che sei un esperto di blogger

  • Ianez ha scritto:  

    Interessante grazie!!!

  • Unknown ha scritto:  

    bella questa! solo ke impegna un po di piu per carricarsi...mha...cmq carrina

  • Matteo ha scritto:  

    Ciao.. Come hai fatto ad inserire quella barretta per condividere i post?!?! Quella con scritta "Share is sexy" mi piacerebbe inserirbla anche nel mio blog.. Grazie ;)

  • Parole dal cuore ha scritto:  

    Salve, Mi chiamo Masimo, non so se ti farà piacere, io ho messo nel mio blog, www.gf-10.net, un link al tuo sito,in quanto dal tuo sito ho preso molte informazioni utili...Complimenti...saluti Max

  • Mauro ha scritto:  

    Un informazione, è possibile posizionare le anteprime anziché in senso verticale, in orizzontale?
    Grazie

  • webstalker ha scritto:   Questo commento è stato eliminato dall'autore.
  • webstalker ha scritto:  

    io quando vado a mettere il plugin mi smostra tutto il template.... HEKP :(

  • lambodream ha scritto:  

    ci ho provato ma ancora devo riuscirci comunque continuo a provare a installarlo intanto ti lascio il mio blog.
    http://worldgt1.blogspot.com/

  • dia ha scritto:  

    salve, anzitutto che grande scoperta questo sito, è davvero pieno di informazioni e guide preziose. Grazie.

    Scrivo qui sperando che tu o qualcun altro possa aiutarmi. Il problema (che ho già postato in un forum di bloggeristi) è questo:

    Il mio blog, raggiungibile all'indirizzo http://archerave111.blogspot.com/ da ieri sera soffre di una particolare anomalia che non ho mai riscontrato prima. Quando mi collego al blog, mentre questi carica tutti i dati contenuti nei post, dopo pochi secondi vengo ridiretta su un altro blog, che ha il seguente indirizzo: http://julia-89.blogspot.com/
    Lo stesso capita a chiunque provi ad entrarci.
    Io ho un antivirus funzionante, e tutto il resto (computer, adsl, ecc.) funziona.

    Ho provato a svuotare (non eliminare) gli ultimi post, pensando che uno o più di questi contenesse indirizzi o riferimenti particolari che potessero scatenare il problema, ma purtroppo non è servito.

    Ha senso pensare che questa ridirezione forzatasia una specie di "virus" ? Se sì, come si chiamano questi virus? Avete qualche informazioni con cui posso iniziare a fare qualche ricerca per risolvere il problema?

    grazie e ciao
    Diana

  • Jack Slater ha scritto:  

    Diana, sono stato per alcuni minuti sul tuo Blog e non ho notato questo problema.
    Tra l'altro non hai installato nè un modello particolare nè widgets sospetti. In ogni caso basterebbe rimuoverli.
    Potresti avere un virus sul PC. Fai altre prove su PC diversi.

  • Cosimo Borsci ha scritto:  

    L'ho inserito anch'io.
    nessun problema.
    grazie

  • zaghor ha scritto:  

    Ciao, non trovo il modulo per contattarti, ho visto che hai dei problemi nel menu in alto. Ti scrivo per invitarti al nuovo aggregatore specifico SEO, abbiamo appena aggiunto la sezione dedicata a blogger e il tuo contributo sarebbe prezioso per noi, ti lascio l'indirizzo dell'aggregatore http://mdrseo.com/aggregatore/ ti aspetto.

  • Unknown ha scritto:  

    Ciao, grandioso, vorrei togliere il conteggio dei commenti ai post, ho tolto la parola "comments" da text, ma come pensavo resta il numero del conteggio, posso eliminarlo del tutto?
    grazie sei grande

  • mimmo galletta ha scritto:  

    SEI UN GRANDE L'HO INSERITO NEL MIO BLOG GRAZIE, TI LASCIO L'INDIRIZZO DEL MIO BLOG, http://mimmogalletta.blogspot.com/

  • Marco ha scritto:  

    Gadget spettacolare!!!!
    Però volevo chiederti una cosa: è possibile togliere la scritta "widget by blogger tricks"?
    Vorrei mettere il titolo del blog al suo posto senza che mi si allunghi il riquadro.
    Puoi anche rispondermi alla mail se è meglio:
    superzot1970@libero.it
    Grazie

  • Niky ha scritto:  

    Bel Gadget peccato che il testo dei commenti recenti me li scrive minuscoli e non riesco a modificarlo, mi potresti dare una mano?

  • Tarta10 ha scritto:  

    Ciao.. non capisco una cosa.. dopo che ho preso la layout dov'è il pulsante aggiungi gadget?

  • Moving to Colorado Springs ha scritto:  

    Complimenti davvero per il widget! 'na figata...io l'ho installato qui (http://miglioreprestito.blogspot.com). Ciao ciao

  • Moving to Colorado Springs ha scritto:  

    Installato http://miglioreprestito.blogspot.com

  • Purgin ha scritto:  

    Molto carino complimenti e grazie per i consigli che ci suggerisci

  • Lisa ha scritto:  

    Ma è gratis giusto?

  • io ha scritto:  

    Molto interessante! Sai se è possibile modificare il widget facendo vedere l'anteprima di un link che ho intenzione di inserire? Stile posta un link su FaceBook?

  • olga ha scritto:  

    Ciao davvero utili i tuoi consigli! Grazie davvero! Volevo chiederti come faccio a cambiare il colore del titolo? Ci ho provato semplicemente sostituendo il codice del colore con un altro ma non mi cambia...in cosa sbaglio?

  • gallinella ha scritto:  

    Grazie mille per la dritta, l'ho inserito anche io su drublic.blogspot.com un blog che parla della mia squadra di fantacalcio.
    Adesso cerco altre chicche sul tuo fantastico blog :)

  • Alessia ha scritto:  

    Ciao grazie mille per il suggerimento, non avrei saputo come fare!! Ho inserito tutto bene l'unica cosa è che le immagini erano piccole e le ho ingrandite 60x60, ma non si vedono perfette!
    Grazie ancora e buona giornata!

  • Unknown ha scritto:  

    scusa per l'ignoranza, ma come faccio a configurare il widget???

  • Jack ha scritto:  

    Ciao,
    grazie per la dritta, volevo sapere se è possibile mettere l'elenco anche in orizzontale.
    Ho visto che molti siti mostrano sotto l'header l'elenco dei post recenti più interessanti e l'effetto finale non mi dispiace.

    Il mio sito è http://www.rideproudlivefree.com/

    Grazie, see you soon on the road
    Jack

  • Vincenzo ha scritto:  

    Anche io cerco il modo per aggiungere un widget con gli ultimi post (in orizzontale) sul sito http://tuttoxandroid.blogspot.it

  • Commenta!

    Lascia il tuo commento riguardo l'articolo!