Come mostrare tutti i post in una pagina statica di Blogger.

Come creare una mappa del sito di Blogger per pubblicare in una pagina statica tutti i titoli dei post con miniatura.

L'espressione Sitemap può essere tradotta in italiano come Mappa del sito e ha due significati piuttosto diversi a seconda che si parli di Sitemap per i motori di ricerca e per i lettori. Nelle linee guida di Google è infatti espressamente richiesto che lo webmaster crei non solo una Sitemap per la ricerca ma anche una Mappa del sito a beneficio degli utenti per favorirne la navigazione.

La sitemap per i motori di ricerca viene creata automaticamente da Blogger ma può essere integrata manualmente in Search Console.  La pubblicazione di una Mappa del sito per i visitatori può essere fatta in molti modi. Ricordo tra l'altro di aver già presentato una mappa del sito con miniature e una mappa del sito divisa per etichette. In questo post vedremo come creare una mappa del sito da pubblicare in una pagina statica di Blogger che presenti tutti i post finora pubblicati divisi in schermate di 30 ciascuna con relativi titolo, incipit e miniatura.

Alla fine dell'elenco si vedono le tre voci Post Precedenti, Inizio e Post Successivi per passare alla visualizzazione di un'altra schermata dei 30 post precedenti, di quelli successivi o per tornare all'inizio. L'aspetto della pagina statica sarà simile a questo

Ovviamente il link Post Precedenti sarà attivo solo se si è già cliccato almeno una volta su Post Successivi. Ho già inserito questo script nella pagina statica della Mappa del Sito. Per la installazione si va su Bacheca -> Pagine -> Nuova Pagina. Si digita il titolo della pagina quindi in Modalità HTML si incolla questo codice

<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:#1FE0C9;}
.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:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgveUjuT1c_W6pCxGy8pliggQFbehnv_abosujXiUW2Haig-05AartVJ6Zjke7Q6wef8JqyUE_m9mLaoWkGPVtIcnr8TNqseNBD81RtYa1sOzjqPL1jHOiS9S2FjDNW3j8lLwohQ9ggvBk/s128/loading51.gif) no-repeat 50% 50%;height:2850px;border:1px solid #1FE0C9;}
#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 = 30;
var startfeed = 0;
var urlblog = "http://www.ideepercomputeredinternet.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/AVvXsEgdKE2MKVcHM2V7pJSYmzmLlRwglpw1z0oDgNFOfkzQG9da8w1NYZD-Rd2YJOxW1soUdLa7_8Diacq-piRKQYHrP8t4WGHZ0SpUT-GJtnxnupVfEoxycxbG9nsVNmGLRwB_UjLeWiFbK9U/s172/no-image.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>

Si va su Pubblica come al solito. Se si decide di cambiare qualcosa nel codice dobbiamo farlo a parte magari con un programma come Notepad++ per poi incollarlo di nuovo e ripubblicarlo tutto insieme. La larghezza è settata al 100% quindi dovrebbe prendere tutto lo spazio disponibile. La Demo che ho pubblicato online mostra 10 post per schermata con altezza di 950 pixel.

Demo
Clicca qui

Le altre personalizzazioni più importanti sono le seguenti:

1. Post precedenti, Post successivi e Inizio possono essere sostituiti da altre espressioni
2. I codici dei colori e la famiglia di font possono essere adattati al nostro layout.
3. #1FE0C9 è il colore dell'elemento quando ci si passa sopra con il mouse
4. Gli URL delle immagini rappresentano la immagine di default che viene mostrata come miniatura qualora non ce ne fossero nel post e l'immagine del loading di caricamento.
5. La miniatura ha dimensioni  height:70px e width:70px e possono essere personalizzate
6. var numfeed = 30; determina il numero di post da mostrare in ogni schermata
7. var urlblog = http://www.ideepercomputeredinternet.com è l'URL del sito
8. var characnumber = 200; determina il numero dei caratteri da mostrare nello snippet.
9. height:2850px; è stata settata per 30 elementi ed è l'altezza del widget quando si clicca su Post precedenti o Post Successivi. Se si vogliono mostrare più o meno di 30 elementi per schermata è opportuno aumentare o diminuire il valore dell'altezza.