Pubblicato il 22/03/14e aggiornato il

Mappa con miniature di tutti i post pubblicati da inserire in una pagina statica di Blogger.

Como mostrare tutti i post del blog su Blogger in una pagina statica con miniature, titoli, snippet e i link per la navigazione.
Dopo aver letto un commento a calce del widget di Tutti i post per Blogger mi è venuto in mente di provare a creare con lo stesso javascript una pagina statica che mostri tutti gli articoli che si sono pubblicati e che il lettore potrà scorrere facilmente. Si tratta di una alternativa anche migliore della classica Mappa del Sito con miniature, della Sitemap per etichette o dell'Elenco dei post per categoria
Il widget è completamente personalizzabile e ho provato a testarlo anche in un blog a Visualizzazione Dinamica in cui però non ha funzionato. Per installarlo non occorre modificare il template ma basta incollare il codice nell'Editor della pagina statica.
Si accede alla Bacheca e si va su Pagine > Nuova Pagina

pagina-statica   

Si aprirà l'Editor delle pagine e dovremo andare a destra su Opzioni e mettere la flag per Non consentire commenti.  Dopo averlo fatto bisogna ricordarsi di andare su Completato.

opzioni-pagina-statica

Si va poi a sinistra su HTML che si trova accanto a Scrivi. Nel campo sottostante si incolla il codice dopo aver digitato un titolo che ricordo si vedrà nel menù delle pagine statiche.

codice-pagina-statica-sitemap

Si va direttamente su Pubblica senza passare da Scrivi. Il codice da incollare è il seguente

<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:950px;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 = 10;
var startfeed = 0;
var urlblog = "http://nuovo-blog-di-prova.blogspot.com";
var characnumber = 200;
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>
<div id="el_box"></div>
<div id="navigazione"></div>

Per verificare il funzionamento di questa personalizzazione date uno sguardo alla demo



Essendo stata settata la larghezza al 100% questa dovrebbe adattarsi automaticamente alle dimensioni del vostro layout. Le personalizzazioni più importanti sono le seguenti:
  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 colorati di viola 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 = 10; determina il numero di post da mostrare
  7. var urlblog = "http://nuovo-blog-di-prova.blogspot.com" è l'URL del blog e rappresenta il parametro più importante. Ricordarsi di usare il .com invece del localizzato .it
  8. var characnumber = 200; configura il numero dei caratteri da mostrare nello snippet.
  9. height:950px; è stata settata per 10 elementi ed è l'altezza del widget quando si clicca su Post precedenti o Post Successivi. Se si vogliono mostrare più o meno di 10 elementi è opportuno aumentare o diminuire il valore dell'altezza.
mappa-sito-lettori-miniature
Si tratta di un widget semplice, efficace e anche esteticamente valido.




29 commenti :

  1. Crea un bell'effetto, no? Lieta di esserti stata utile. :)

    RispondiElimina
  2. Sembra troppo bello e semplice per essere vero! Più tardi lo provo, intanto grazie mille! :)

    RispondiElimina
  3. Funziona molto bene, veramente bello. Forse è meno utile di quello più avanzato, con i sistemi di filtraggio per etichette che avevi postato mesi fa, ma l'effetto estetico è migliore ed è anche più semplice da utilizzare! :)

    RispondiElimina
  4. come si può fare un filtraggio per etichette? grazie

    RispondiElimina
    Risposte
    1. ok sicuramente! il vostro sito è spettacolare!

      Elimina
  5. esempio ultimi post per un data etichetta..

    RispondiElimina
  6. Ho provato, ma la pagina rimane solo con il GIF di caricamento e non mostra i post. Dove sbaglio?

    RispondiElimina
    Risposte
    1. Hai pubblicato da HTML senza passare per Scrivi? Perché andando su Scrivi Blogger modifica il codice
      @#

      Elimina
    2. Era un problema del modello. Avevo prima provato con un mio blog di prova ma non funzionava. Ora ho inserito questa pagina in uno dei miei blog "ufficiali" e non ci sono problemi. Scusami, non avevo pensato a questo. Grazie come sempre!

      Elimina
  7. Ciao Ernesto. Ho un problema, in sostanza per la maggior parte dei posts mi mette l'immagine di default come se non trovasse altre immagini quando invece sono presenti. Come risolvo? Grazie in anticipo.

    RispondiElimina
    Risposte
    1. Le immagini le carichi su Flickr? Oppure le carichi normalmente su Blogger? Se si tratta del secondo caso allora il problema potrebbe essere la Descrizione di Ricerca. Attiva questa opzione
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      Poi prova a pubblkicare un nuovo post. Dovrebbe essere tutto OK.
      @#

      Elimina
  8. Ernesto
    posso chiederti aiuto?
    ha funzionato (in due blog che ho) per quasi un anno, poi ha smesso.
    ho provato a cancellare il codice, riscriverlo ex novo, ho controllato che il tuo continua a funzionare, insomma non capisco proprio come farlo funzionare di nuovo

    l'indirizzo è http://www.energiacreativa.org/p/archivio.html
    Grazie,
    Paola

    RispondiElimina
    Risposte
    1. Oltre alla demo che funziona ho provato a incollare il codice così com'è in una pagina statica e ha funzionato perfettamente. Prova a procedere in questo modo:
      1) Incolla il codice così com'è in una pagina statica in Modalità HTML e pubblica senza tornare su Scrivi
      2) Se non funziona non c'è nulla da fare. Deve essere nata una qualche incompatibilità con il tuo template. Se invece funziona passa al punto 3)
      3) Se il codice così com'è funziona allora significa che sbagli qualcosa. Prima di pubblicare prova a andare su Opzioni e metti la spunta a Premi su Invio per le interruzioni di riga e su Mostra HTML letteralmente
      @#

      Elimina
    2. Gentilissimo
      si, - visto che non son passata da scrivi -anche io ho pensato ad un incompatibilità. ma lo strano è che è accaduto su entrambi i blog, di cui non cambio ormai più il template da tanto tempo.
      grazie comunque per tutto il tuo lavoro e le dritte continue

      Elimina
  9. Ciao Ernesto
    fantastico questo widget , l' ho messo ma la grafica non và bene .... sicuramente ho sbagliato io a modificare qualcosa.
    Può vedere tu stesso ma non sò come farti sapere l' url del mio blog dato che non si può inserire nel commento com'è scritto a fine articolo
    Mi puoi dire che cosa non và e semmai aiutarmi a migliorare ?
    Sei un fenomeno come sempre !!!
    Ciao e Grazie !!!

    RispondiElimina
    Risposte
    1. Vorrei sapere dove sta scritto che non si può incollare l'URL del blog. C'è scritto "Non inserire link cliccabili" cioè dei link in cui si possa cliccare sopra per andare in un'altra pagina. È una cosa chiarissima. Come ho già avuto modo di dire in altri post e commenti bisognerebbe all'inizio postare il codice così come è per vedere se le cose funzionano e solo successivamente passare alla personalizzazione. Se le cose non andassero bene già con il mio codice allora si deve soprassedere e passare a una alternativa
      @#

      Elimina
  10. Molto utile! È possibile mettere i numerini delle pagine in basso al posto del semplice "Precedente" e "Successivo"?

    RispondiElimina
    Risposte
    1. Puoi cambiare le espressioni Post Precedenti e post Successivi ma non numerare le pagine
      @#

      Elimina
  11. A me piace molto questo effetto, ma avendo creato i miei post come tabelle al posto del testo vedo parte del codice html e non si caricano nemmeno le immagini... È possibile risolvere il problema?

    RispondiElimina
    Risposte
    1. Non mi pare ci sia solo un problema ma diversi. Non ti so dire con certezza. Per tabelle cosa intendi immagini con descrizione? Dovrebbe funzionare lo stesso. Quello che puoi fare è agire sui parametri per esempio diminuire il numero dei caratteri o ridimensionare la grandezza delle miniature. Non so se basterà :(
      @#

      Elimina
    2. Non proprio, sono come delle schede di lettura, una colonna a destra con le indicazioni sul libro (compresa la copertina) e sulla sinistra la recensione...
      Proverò a modificare qualche parametro allora, grazie!

      Elimina
  12. Grazie come sempre. Questo widget molto bello mi dà problemi: sotto il titolo dei post compare una scritta Internet explorer false false… (gli stessi che mi dava la newsletter, ora risolti inserendo l’url prescelto da feedburner per il mio blog). E’ possibile che anche in questo caso l'errore che mi segnala sia legato a feedburner?

    RispondiElimina
    Risposte
    1. Usi ancora Internet Explorer? Guarda che tra un po' verrà ritirato. In Windows 10 c'è già il nuovo browser. No, non penso dipenda da Feedburner in ogni caso in questo widget bisogna inserire l'URL del post e non dei feed
      @#

      Elimina
  13. mentre se volessi realizzare una cosa del genere, ma a griglia? ho già la home page così, e mi piacerebbe che anche i menù avessero lo stesso aspetto. come si può fare?
    grazie mille
    miriam

    RispondiElimina
    Risposte
    1. A griglia avevo un widget di questo genere ma ha smesso di funzionare
      @#

      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.