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

   

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.

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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKFUKHXvDe-SMDcnC5HOwloE1n8hPGSz645UfL_gEokdlNyNXJbHKRrBSRxetWugwUOlR7Chjto-43tBT3O65VITXBixB0bn40m2mXUlrFCiPrHannRT5LVnb1NS9FoODgJ_mxJoqzAY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHZ5rV0LqGJo0FpwIubmiO6Ig8jVFMIyKMrcZGenGxB9q-LNd1lMRBgnFZvrCSkhtSAmClplDVrOfNz-rMu3bZTiKGkrKRTb4P8twgle3NXmmSj-uG_uaKigT0sQZFWDxlpWk-SvnpDw/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.

Si tratta di un widget semplice, efficace e anche esteticamente valido.