Blogger: mostrare in una pagina tutti i post con una data etichetta

Come creare un widget per una pagina di Blogger che mostri tutti i post che abbiano una data etichetta con titolo, miniatura e snippet e che siano navigabili

In questi ultimi giorni ho ricevuto diverse richieste su come mostrare i post di una data etichetta in una pagina statica di Blogger. L'obiettivo di questo genere di personalizzazione sarebbe quello  di creare un menù avente come voci le più importanti etichette del nostro sito su Blogger.

In questo modo il navigatore potrà scorrere titoli, miniature e incipit dei post a cui abbiamo aggiunto quella determinata etichetta. Il codice che vado a proporre funzionerà con i vecchi modelli di Blogger ma anche con i più recenti Temi Responsive. Si tratta di un javascript di un widget, adattato a questo scopo, che mostra invece tutti i post del blog in una sidebar.

Prima di passare alla illustrazione del codice è il caso di fissare l'attenzione su come funzionano le etichette di Blogger. In Blogger è possibile creare etichette di una parola, di due o più parole, con lettere minuscole, con lettere maiuscole, con accenti e perfino con apostrofi.  Si tratta di elementi case sensitive nel senso che per esempio l'etichetta Blogger sarà diversa dall'etichetta blogger la quale a sua volta lo sarà da BLOGGER.

Cliccando sul nome di una etichetta, nel footer del blog o nell'apposito widget delle etichette, verrà aperta una pagina con un indirizzo che ha questa struttura nomeblog.blogspot.com/search/label/etichetta.

Se l'etichetta è formata da una sola parola, senza caratteri speciali, rimarrà invariata, ma se fosse formata da due parole il suo indirizzo diventerebbe con questa struttura

nomeblog.blogspot.com/search/label/due%20parole

mentre se l'etichetta avesse un apostrofo, p.e. fosse l'articolo, il suo URL diventerebbe

nomeblog.blogspot.com/search/label/l%27articolo

In sostanza gli spazi vengono sostituiti dalla stringa %20 mentre gli apostrofi da %27. Per il corretto funzionamento del gadget da inserire in una pagina statica è bene evitare vocali accentate e caratteri speciali perché non si può dire in anticipo se il javascript funzionerà o meno. Lo screenshot di test è relativo a un Tema Contempo.

Detto questo si va sulla Bacheca di Blogger in Pagine -> Nuova Pagina e, in 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:#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 = "https://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/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/-/blogger"+ 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 quindi su Pubblica, senza tornare su Scrivi, per impedire a Blogger di inserire link che potrebbero compromettere il javascript. Ho pubblicato una Demo con i post di questo blog aventi etichetta blogger.

Demo Clicca qui

Ecco un elenco delle personalizzazioni più importanti da introdurre nel codice:

1. Post precedenti, Post successivi e Inizio possono essere sostituiti da altre espressioni.
2. I codici dei colori possono essere adattati allo stile nostro layout. Ricordo che #afe5f3 è il colore di sfondo di un singolo riquadro quando viene puntato dal cursore
3. La famiglia di font Georgia può essere cambiata in una o in tutte le sue occorrenze
4. Ci sono due URL diretti di immagini che riguardano la GIF di loading e l'indirizzo della immagine di default che viene mostrata quando non ve ne siano nel post. Si possono sostituire con altri URL.
5. La miniatura dei post ha dimensioni  height:70px e width:70px che possono essere cambiate
6. var numfeed = 10; determina il numero di post da mostrare per ogni schermata
7. var urlblog = "https://www.ideepercomputeredinternet.com" è l'URL del blog che va inserito e che può anche diverso dall'URL  del blog in cui viene pubblicata questa pagina statica
8. var characnumber = 200; determina il numero dei caratteri da mostrare nello snippet
9. height:950px; è l'altezza del riquadro ed è stata settata per 10 elementi, che rimane invariata 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 del gadget.
10. Infine al posto di blogger digitare il nome della etichetta di cui vogliamo mostrare tutti i post. Nel caso di una etichetta formata da due parole, o di tipo particolare, rileggersi la prima parte del post.

Vi consiglio di incollare in una pagina di Blogger il codice così com'è. Se lo copiate bene dovrebbe funzionare. Passate poi alle modifiche in un momento successivo, solo dopo aver verificato la compatibilità con il vostro Tema.