Come mostrare tutti i post di una data etichetta in un widget o in una pagina statica di Blogger.

Come mostrare tutti gli articoli che sono stati pubblicati con una data etichetta in un widget o in una pagina statica di Blogger.

Recentemente ho pubblicato due articoli su come mostrare tutti i post del blog in un widget e su come invece visualizzarli in una pagina statica. Dai commenti pare che abbiano avuto un certo successo. Alcuni lettori mi hanno chiesto di adattare i due widget per mostrare non tutti gli articoli che sono stati pubblicati ma solo quelli con una determinata etichetta.

Innanzitutto facciamo un po' di chiarezza sulle etichette e sulle pagine relative. 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 la struttura nomeblog.blogspot.com/search/label/etichetta. Quando le etichette sono formate da due parole o hanno al loro interno un apostrofo o altri caratteri speciali prima di passare alla lettura del seguito del post occorre scoprire come sia stata modificata l'etichetta. Se questa è formata da una sola parola senza caratteri speciali rimarrà invariata ma se fosse formata da due parole il suo URL sarebbe il seguente

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

mentre se l'etichetta fosse l'articolo il suo URL sarebbe 

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

TUTTI I POST DI UNA ETICHETTA MOSTRATI IN UN WIDGET

Andate su Layout > Aggiungi un gadget > HTML/Javascript  e incollate 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: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://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/-/etichetta"+ 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>

Salvate e posizionate il widget. 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 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.
   
9. Al posto di etichetta va inserito il nome della etichetta di cui vogliamo mostrare i post. Nel caso di una etichetta di tipo particolare ricordarsi di quanto detto all'inizio dell'articolo.

 

I POST DI UNA ETICHETTA MOSTRATI IN UNA PAGINA STATICA 

L'aspetto della pagina statica sarà più o meno questo

in cui ho diviso lo screenshot in due parti per mostrarlo per intero. Nella parte finale ci sono i link per navigare tra tutti gli articoli del sito. Per l'installazione di questa Sitemap di una etichetta si clicca su Pagine > Nuova Pagina. Poi si va sulla destra e sotto Opzioni si mette la spunta a quella che impedisce i commenti (opzionale). Si va quindi sulla sinistra su HTML e 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 = "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/-/etichetta"+ 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 pubblica senza tornare su Scrivi. La demo seguente è stata realizzata usando i post con l'etichetta blogger di uno dei miei tanti blog di test

Le personalizzazioni più rilevanti 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.
10. Infine al posto di etichetta 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.