Pubblicato il 21/01/19 - aggiornato il  | 22 commenti :

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.

blogger-post-etichetta






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.


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.


22 commenti :

  1. Ciao, come sempre consigli utilissimi. Sarebbe interessante se si adattase anche sulle pagine mobile. Sul telefono non viene ridimensionato.

    RispondiElimina
    Risposte
    1. Si dovrebbe adattare anche da mobile perché c'è il dato della larghezza
      width:100%
      che è in percentuale e non in valore assoluto. Però in effetti non succede come si vede anche dalla demo
      http://quirktools.com/screenfly/#u=https%3A//design-prova.blogspot.com/p/post-con-etichetta-blogger.html%3Fm%3D1&w=800&h=480&a=24&s=1
      Non ne ho capito la ragione :(
      @#

      Elimina
    2. ciao Ernesto,Ormai per me il tuo sito è un must.Ti seguo ma da quando non c'è più google+ non riesco seguirti su un social,hai un account social in ui pubblichi come facevi su google+?

      Elimina
    3. Se apri qualsiasi pagina di questo sito da desktop, nella sidebar c'è il widget Segui il blog con i link per scegliere come seguirlo.
      1) Lettore del widget dei lettori fissi con la Bacheca di Blogger
      2) Mettendo Mi Piace alla Pagina Facebook per post e commenti
      3) Seguirmi sul Canale Youtube o su Twitter
      4) Seguire l'account Twitter del sito per avere i link di tutti i post e dei commenti dell'autore
      5) Iscriversi ai feed per scorrere i titoli in un lettore tipo Feedly
      6) Unirsi al Canale Telegram. Questo sistema è quello più efficiente visto che nel canale vengono ripubblicati in tempo reale non solo i post pubblicati ma anche tutti i commenti dell'autore
      @#

      Elimina
  2. FANTASTICO come sempre
    L'unica cosa è che la pagina con lo script è un pò lenta a caricare

    RispondiElimina
  3. Ciao seguo i tuoi articoli per Blogger. Ho provato a inserire il codice di cui sopra così come ha descritto seguendo le tue indicazioni. Senza fare variazioni, se vado in anteprima mi esce esattamente la tua demo. Se cambio il sito nel varblog da "https://www.ideepercomputeredinternet.com" a "https://www.aroundmemm.blogspot.com" sparisce tutto ed esce solo una pagina bianca. Cambio anche l'etichetta da "blogger" a "Puglia" che è quella che mi interessa. In cosa sbaglio?

    RispondiElimina
    Risposte
    1. Le etichette sono case sensitive. Non è che invece di Puglia l'etichetta è puglia? Prova con un'altra etichetta del tuo sito. Se il codice copiato così com'è funziona o hai sbagliato a incollare l'URL della home o il nome della etichetta
      @#

      Elimina
    2. ciao anch'io ho il tuo stesso problema, mica tu l'hai risolto? grazie

      Elimina
    3. Quando fai una modifica del codice, aggiorna sempre da HTML senza tornare su Scrivi
      @#

      Elimina
  4. Un'altra cosa. Invece di guardare l'anteprima salva effettivamente il widget. Se non va dopo lo potrai sempre eliminare. Talvolta le anteprime non funzionano
    @#

    RispondiElimina
  5. Grazie mille. L'ho provato subito per una mia pagina (in allestimento perchè ho attivato da poco il blog "postitravel.com") e funziona quasi alla perfezione anche su mobile. Davvero fondamentale è stata poi l'introduzione sulle etichette, infatti per la mia pagina (POSTi d'Autore) ho inserito sia %20 per lo spazio che %27 per l'apostrofo. Grazie...a presto

    RispondiElimina
  6. Ciao Ernesto, grazie mille del post utilissimo. Volevo chiderti se fosse possibile aumentare la qualità delle immagini che vengono mostrate in anteprima. Sarebbe davvero molto utile perchè per ora la risoluzione lascia un po' a desiderare.
    Grazie, Eleonora

    RispondiElimina
    Risposte
    1. Le miniature dei post vengono rilevate con questa stringa
      postimg = entry.media$thumbnail.url;
      Non sono in grado di dire se esiste una stringa diversa con una risoluzione migliore e se esiste non la conosco 😒
      @#

      Elimina
    2. Ciao, io ho risolto sostituendo la stringa: "entry.media$thumbnail.url" con "entry.media$thumbnail.url.replace(/\/s72\-c\//,'/s300/')" (cambiare il valore 300 a piacere)

      Elimina
  7. Ciao, sono confusa :(
    Ho creato una nuova etichetta e una nuova pagina nel blog.
    Poi ho attaccato due vecchi post a quella etichetta ma adesso come faccio a collegare la nuova pagina con la nuova etichetta? :)

    RispondiElimina
    Risposte
    1. Non capisco cosa intendi per collegare. Tutte le pagine delle etichette hanno un indirizzo come questo
      https://www.fiftyshadesfashion.com/search/label/Fashion
      dove al posto di Fashion deve mettere il nome della nuova etichetta. Se apri questa pagina vedrai tutti i post con quella etichetta. POi questo URL lo puoi aggiungere nel menù delle pagine che però non hai. C'è solo la Home. Per creare un menù orizzontale delle pagine leggi questo post
      https://www.ideepercomputeredinternet.com/2015/03/blogger-menu-etichette-pagine.html
      Se poi vuoi personalizzarlo leggi quest'altro post
      https://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html
      @#

      Elimina
  8. ciao, due domande, la prima le foto delle miniatura mi sembrano sfocate mentre nel post sono a posto sai per caso come migliorarle? La seconda domanda è possibile inserire leggi tutto o continua a leggere? grazie per la disponibilità. Ciao.

    RispondiElimina
    Risposte
    1. Le uniche personalizzazioni che possono essere fatte sono elencate in calce al post. La miniatura non mi sembra sfuocata. Viene mostrata tramite il tag
      entry.media$thumbnail.url;
      che non vedo come si potrebbe personalizzare 😑
      @#

      Elimina
  9. Ciao, ho provato a mettere lo stesso codice due volte nella stessa pagina in modo di avere due elenchi con la stessa categoria di attrazione turistica ma luoghi diversi, cambiando numero di post e dimensione. Ma si vede solo un elenco, mentre il secondo no. Hai qualche suggerimento? Grazie ciao.

    RispondiElimina
    Risposte
    1. Non si può fare. Non si può ripetere lo stesso script nella stessa pagina. Puoi però incollarlo in un'altra pagina cambiando la sola etichetta
      @#

      Elimina
    2. ok, grazie della conferma, speravo di non dover pubblicare diversi post.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy