Pubblicato il 21/01/19 - aggiornato il  | 8 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://lh5.googleusercontent.com/-0dKuTXHaBgU/Uyn6y4kXYjI/AAAAAAAAmVU/qW-_OdYVqF0/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://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/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.




8 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
  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

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