Pubblicato il 20/03/14e aggiornato il

Widget che mostra tutti i post di Blogger in una sidebar.

Gadget per blog su Blogger che permette di mostrare ai visitatori tutti gli articoli che sono stati pubblicati e che possono essere navigati andando su Post successivi.
Quello che vado a presentare è un widget per Blogger che ritengo sia molto interessante perché permette ai visitatori di scorrere tutti gli articoli che sono stati pubblicati senza lasciare la pagina. Può sostituire in un colpo solo il classico gadget degli Ultimi Articoli, quello  della Mappa del sito con Miniature e quello degli Ultimi 1000 post pubblicati, tutto questo con una velocità di caricamento della pagina che non sembra particolarmente penalizzata.

Il lettore può cliccare su Post successivi e Post Precedenti per scorrere tutti i nostri contenuti e possiamo configurare anche quanti articoli debbano essere visibili per ogni schermata. Ciascun elemento è formato dal titolo del post, dalla miniatura della prima immagine presente e dallo snippet dell'articolo. Inoltre sono possibili personalizzazioni estetiche per quello che riguarda i colori e altri parametri.


widget-tutti-post-blogger
L'installazione è piuttosto semplice e il widget dovrebbe funzionare nella maggior parte dei modelli. Dopo aver salvato il template si va su Modello > Modifica HTML e, dopo aver cliccato sull'area del codice, si digita Ctrl+F e si cerca la riga </head>. Subito sopra a questa si incolla questo codice

<!-- Widget di tutti i post per Blogger - Inizio -->
<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}
#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(https://lh5.googleusercontent.com/-0dKuTXHaBgU/Uyn6y4kXYjI/AAAAAAAAmVU/qW-_OdYVqF0/s300-no/ajax_loader.gif) no-repeat 50% 50%;height:470px;border:1px solid #afe5f3;}
#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://demo-parsifal32.blogspot.com";
var characnumber = 90;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,characnumber) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'> Post precedenti</a>";
} else {
showblogfeed += "<span class='noactived previous'> Post precedenti</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Post successivi </a>";
} else {
showblogfeed += "<span class='noactived next'>Post successivi </span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>Inizio</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'></div>";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<!-- Widget di tutti i post per Blogger - Fine -->

Si salva il modello. Si va su Layout >  Aggiungi un gadget > HTML/Javascript, in Sezioni del sito si incolla il codice qui di seguito e si clicca su Salva.

<div id="el_box"></div>
<div id="navigazione"></div>

Per verificare il funzionamento di questo bel widget accedete alla pagina della Demo



I parametri delle personalizzazioni più importanti sono stati colorati. In questo breve elenco riporto quelli più significativi per adattare l'aspetto del widget a quello del blog su cui viene installato
  1. Post precedenti, Post successivi e Inizio possono essere sostituiti da altre espressioni
  2. I codici dei colori possono essere adattati al nostro layout. Ricordo che #afe5f3 è il colore di un singolo elemento quando viene puntato dal mouse
  3. La famiglia di font Georgia può essere cambiata in una o in tutte le sue occorrenze
  4. Ci sono due URL di immagini che riguardano la GIF di caricamento e l'indirizzo della immagine di default che viene mostrata quando non ve ne siano nel post.
  5. La miniatura ha dimensioni  height:70px e width:70px che possono essere cambiate
  6. var numfeed = 5; determina il numero di post da mostrare
  7. var urlblog = "http://demo-parsifal32.blogspot.com" è l'URL del blog e rappresenta il parametro più importante. Ricordarsi di usare il .com invece del localizzato .it
  8. var characnumber = 90; configura il numero dei caratteri da mostrare nello snippet.




25 commenti :

  1. Wow! È davvero un bel widget. :) Complimenti

    RispondiElimina
  2. Il problema è che in questi giorni blogger fa acqua ed è quindi impossibile fare ciò che tu descrivi perchè esce fuori tale dicitura:

    Spiacenti. Non ci è stato possibile completare la richiesta.

    Quando segnalerai questo errore all'assistenza di Blogger o nel gruppo di assistenza di Blogger, ricordati di:

    Descrivere l'operazione che stavi eseguendo quando si è verificato l'errore.
    Specificare il codice di errore riportato di seguito.

    bX-6mrczc

    Queste informazioni ci aiuteranno a individuare esattamente il problema e a risolverlo. Ci scusiamo per l'inconveniente.
    Esci

    Ciao buona giornata

    RispondiElimina
    Risposte
    1. Nel senso che non riesci a salvare il modello dopo che hai incollato il codice?
      @#

      Elimina
    2. Nel senso che non si può entrare nell'HTML e non sono solo io che ho questo problema. La cosa è stata segnalata nel forum di assistenza ma google non si è ancora deganta di rispondere e provvedere a risolvere il guaio.
      PS mi chiedo se i tuoi commentatori che seguono se ne sono accorti oppure no...
      Ciao attendiamo insieme che blogger/google si dia una mossa

      Elimina
  3. Ah... ho provato a inserire la seconda parte del codice in una pagina statica invece di un widget ed è una valida alternativa al classico archivio. :)

    RispondiElimina
  4. Sei una fonte inesauribili di aiuti e novità z tutti noi. Grazie Ernesto.
    Questo widget mi piace proprio. Prima o poi lo adotto, incrociando le dita :-D affinché vada tt per il meglio.
    A presto,
    Ele

    RispondiElimina
  5. Sarebbe perfetto per il mio blog di musica se al posto dell'ordine cronologico visualizzasse i post in ordine casuale.

    RispondiElimina
  6. bellissimo questo widget, ma si puo' ridurre la dimensione dello stesso in modo che mi stia nella colonna blog? grazie!

    RispondiElimina
    Risposte
    1. La larghezza non è impostata ma è del 100% quindi dovrebbe andare per tutte le larghezze. Eventualmente si possono ridurre anche le dimensioni delle miniature
      @#

      Elimina
  7. ernesto si possono scegliere i post da mostrare ?

    RispondiElimina
    Risposte
    1. Certamente. Basta che tu aggiunga una nuova etichetta ai post che vuoi mostrare e poi configurare il widget o la pagina statica proprio con quella etichetta
      @#

      Elimina
  8. Vedo che nella sidebar a destra sotto il box Ricerca Personalizzata hay dei bottoni dei principali social network. Mi puoi indirizzare al widget? Grazie

    RispondiElimina
  9. Ci sono di varie dimensioni
    http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html
    http://www.ideepercomputeredinternet.com/2013/03/3d-social-icons.html
    Leggi anche i commenti, ti potrebbero essere utili
    @#

    RispondiElimina
  10. Ciao Ernesto! E' possibile eliminare il titolo del post e l'inizio del contenuto lasciando solo le miniature (magari anche affiancandole)?
    So che hai creato un post in cui spiegavi proprio come ottenere un risultato del genere ma non riesco a utilizzare quel codice.

    RispondiElimina
    Risposte
    1. Tutto si tiene insieme quindi è molto complicato. Tanto per tentare prova a cancellare tutta questa riga
      <h6><a href='" + posturl + "'>" + posttitle + "</a></h6>
      lasciando solo uno spazio tra le virgolette " "
      @#

      Elimina
    2. Sparito il titolo. C'è modo di affiancare le varie miniature?
      Scusami per la scocciatura.

      Elimina
  11. No. Bisognerebbe cambiare tutto il javascript. Ti conviene cercare un widget più specifico
    @#

    RispondiElimina
  12. Salve, dopo avere installato il widget (credo correttamente) e salvo continuando la prova clicco su demo va tutto bene, ma quando vado per aprire il mio blog visualizzo i post della prova, scusate ancora l'ignoranza ma vorrei capire dove sbaglio?

    RispondiElimina
    Risposte
    1. Devi modificare l'indirizzo se vuoi vedere i post del tuo blog. Al posto di http://demo-parsifal32.blogspot.com devi mettere http://nome-del-tuo-blog.blogspot.com
      @#

      Elimina
    2. yesss thank you ci sono riuscito.

      Elimina
  13. Ciao.
    Molto interessante. Posso chiederti se è possibile far apparire anche la data di pubblicazione dei post (l'ora preferirei di no invece).

    RispondiElimina
    Risposte
    1. Con questo widget la data non si mostra
      @#

      Elimina
  14. Ciao! Le miniature rimangono sempre vuote, può essere perchè le foto sono state caricate con flickr? Se si, si può risolvere il problema? Grazie :)
    http://www.ilgattogoloso.com/p/blog-page_4.html

    RispondiElimina
    Risposte
    1. Sì è possibile che dipenda da questo. Altri hanno avuto il problema di non visualizzare le miniature nei widget con le immagini caricate su Flickr. Non si può risolvere a meno di non ripubblicare tutte le foto su Picasa o Google+
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.