Pubblicato il 24/09/14e aggiornato il

Elenco di tutti i post di Blogger per etichette.

Come mostrare una mappa del sito (Sitemap) per i lettori organizzata per etichette che mostri tutti i titoli degli articoli a lato di una singola etichetta.
Seguendo la falsariga dell'articolo su come realizzare una Mappa del sito per etichette ecco come con una naturale evoluzione si possano elencare tutti i post pubblicati da un sito organizzati in etichette. Le varie categorie saranno visibili in una colonna sulla sinistra e cliccando sopra a una di queste si visualizzeranno i titoli dei post relativi. Nel caso in cui il numero degli articoli riferiti a una singola etichetta siano superiori al numero di post configurato si visualizzeranno dei bottoni di navigazione per scorrere tutti gli elementi. 

Il widget può essere installato in una pagina statica senza modificare il modello. Inoltre funziona con tutti i principali browser e ha anche una buona velocità di caricamento anche per blog come questo con migliaia di articoli già pubblicati. Saranno visualizzate tutte le etichette e non se ne può nascondere qualcuna come accade nel gadget ufficiale di Blogger. Avere un elenco di tutti i post a beneficio dei lettori (Sitemap) è anche un importante fattore SEO.

mappa-etichette-articoli 
Per la sua installazione si va su Bacheca > Pagine > Nuova pagina. Dopo aver digitato un Titolo nell'Editor della pagina si va su HTML che si trova accanto a Scrivi

mappa-sito-etichette-blogger

Nel corpo del post va incollato il seguente codice

<style>#elenco-etichette{float:left;margin:20px 5% 20px 0;width:27%;height:700px;margin-top:-2px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}
#elenco-etichette ul{margin:0;border-top:0px solid #ccc;padding:0}
#elenco-etichette ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#elenco-etichette ul li a{display:block;padding:10px;border-bottom:1px solid #ccc;}
#elenco-etichette ul li:last-child a{border-bottom:none;}
#elenco-etichette ul li a,#link-nav a{background:#fff;color:#de24b0;text-decoration:none}
#elenco-etichette ul li a,#link-nav a,#link-nav span{font-size:14px}
#elenco-etichette ul li a:hover,#link-nav a:hover{background:#17a493;color:#fff}
#elenco-post{float:left;width:67%;line-height:1.5em}
#elenco-post ul li{list-style-type:none;margin-left:-40px}
#link-nav{padding:20px 0}
#link-nav a{margin-right:10px;border:1px solid #ccc}
#link-nav a,#link-nav span{padding:5px 10px}
#link-nav span{float:right}
@media screen and (max-width:800px){
#elenco-etichette{width:35%;}
#elenco-post{width:59%;}
}
@media screen and (max-width:560px){
#elenco-etichette{width:100%;margin:20px 0}
#elenco-post{width:100%;}
}</style>
<div id='elenco-etichette'></div>
<div id='elenco-post'>
<script type='text/javaScript'>
var cat_home='http://www.ideepercomputeredinternet.com';cat_numb=16;cat_pre='Precedente';cat_nex='Seguente';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="link-nav">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('elenco-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#17a493!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('elenco-etichette').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Si pubblica direttamente da HTML senza andare prima su Scrivi. Le personalizzazioni riguardano l'indirizzo del sito da sostituire a quello di questo blog, il numero dei post da mostrare in ogni schermata (16), il testo dei pulsanti Precedente e Seguente e l'altezza del widget (700px).
Si possono anche modificare le percentuali dell'area occupata dalla colonna delle etichette e quella occupata dal titolo dei post. È sottinteso che cliccando su ciascun titolo si apre la pagina relativa. Per quello che riguarda i codici dei colori riporto quelli più importanti
  1. #ccc è il colore dei bordi (vedi stile dei bordi)
  2. #de24b0 è il colore dei titoli
  3. #17a493 è il colore di sfondo quando si passa con il mouse sopra a una etichetta e #fff è il colore del testo. I tag background:#17a493!important;color:#fff!important servono per lo sfondo e il colore del testo della etichetta attiva che possono essere diversi da quelli hover.
Ho anche inserito questo widget nella pagina della Mappa del Sito per Etichette.




31 commenti :

  1. Ciao Ernesto! ti seguo sempre con piacere.
    Ho appena provato questo widget sul mio blog (piattaforma Blogger) e non funziona!
    quando apro la pagina mi mostra solo il bordo e si vede il frame ma il contenuto non c'è!!!
    Provato sia con Chrome che con Firefox e Opera!

    RispondiElimina
    Risposte
    1. È successo anche a me. Prova a reinstallarlo incollando il codice senza altri elementi e a pubblicarlo senza andare su Scrivi. Se poi vuoi aggiungere altri elementi ricordati sempre si ricopiare sempre il codice perché Blogger lo modifica automaticamente e smette di funzionare. La prima volta prova con il mio codice così com'è.
      @#

      Elimina
    2. hai aggiunto un punto da qualche parte???

      ora funziona ;)

      Grazie!

      Elimina
    3. Ehm...
      funziona, funziona... ma il riquadro della navigazione coi post mi compaiono sotto all'elenco delle etichette!
      è più carino oltre che fruibile se compare a destra come nel tuo esempio!

      come si fà? ci provo ma combino solo casini :)

      Elimina
    4. mi rispondo da solo sorry, è un problema di percentuali di larghezza! :-P

      Elimina
    5. Esatto. Sono stato basso visto che la somma è ampiamente sotto il 100% però in certi modelli bisogna stare ancora più bassi
      @#

      Elimina
  2. Ciao ernesto stesso problema pure io...ho provato ad incollare il tuo codice ma l'interno è bianco e sivedono solo i contorni

    RispondiElimina
    Risposte
    1. Ho testato e infatti il codice stranamante non funzionava. L'ho ricopiato e ora funziona :)
      Onestamente non so perché visto che mi pare lo stesso. Prova adesso e dovrebbe andare. Ricordati di pubblicare da HTML e non da Scrivi
      @#

      Elimina
  3. Ciao Ernesto. L'elenco è molto bello e funzionale, però non posso modificare nulla. Ogni volta che ci ho provato, per l'altezza del widget e soprattutto per il colore delle etichette, lo spazio riservato a queste ultime è rimasto bianco. Ho provato diverse volte a disinstallare e reinstallare (direttamente in html), ma non c'è stato niente da fare.

    RispondiElimina
    Risposte
    1. Se leggi i commenti precedenti vedi che è una cosa comune. Ti consiglio di modificare il codice in un file tipo blocco note per poi postarlo e pubblicarlo senza ulteriori modifiche. Anche io avevo ricopiato il codice nel post e stranamente non funzionava nonostante fosse lo stesso :P
      @#

      Elimina
    2. Il problema credo sia dell'Editor di Blogger che in automatico modifica alcuni tag
      @#

      Elimina
  4. Se si volesse utilizzare questo codice in una pagina statica di Wordpress
    credi che si sia da modificare qualcosa?

    Grazie

    RispondiElimina
  5. Mitico Ernesto! Grazie mille. L'ho appena messo anche sul mio blog e funziona benissimo.
    ... tranne che.... ma questo è dovuto alla mia ignoranza in materia:
    una mia etichetta conteneva un apostrovo (dell'amicizia) mentre un'altra etichetta conteneva una barretta (spelta/farro).
    Ebbene, cliccando su queste due etichette, la lista di destra no appariva. Riguardando attentamente tutte le altre etichette mi sono accorta che erano le uniche due con appostrofo o barretta.
    Correggendo il nome dell'etichetta e riinstallando il codice ha funzonato a meraviglia.
    Grazie ancora per tutti i tuoi magnifici tutorial
    Cari saluti

    RispondiElimina
    Risposte
    1. Apostrofo! Ecco ora l ho scritto giusto...pietá, era tardi... Lasciamo perdere il resto del testo...addio grammatica & co.
      Bisognerebbe andare a letto prima...😱

      Elimina
  6. Ciao ernesto, ho provato ad inserire questo codice sulla pagine del mio blog ma senza risultati, ovvero non vedo nulla. Ho sostituito anche il link con il mio chiaramente ma senza risultati, cosa ho sbagliato?
    Una info ancora, hai scritto che va incollato modalità html e non bisogna ritornare su Scrivi, quindi come posso aggiungere del testo nella stessa pagina prima di questo codice? Volevo ottenere il risultato che c'è nella pagina del tuo sito "mappa del sito per categorie in ordine".
    Grazie.

    Ti lascio link del mio blog se vuoi dare un'occhiata tripdeimangiatori.blogspot.com

    RispondiElimina
    Risposte
    1. Procedi in questo modo.
      1) Pubblica la pagina solo con il codice qui presente senza modificare nulla e guarda se funziona
      2) Se funziona allora dipende dalla sostiruzione del nome del blog, ricordati di usare il .com e non il .it
      3) Se vuoi aggiungere del testo è meglio se lo fai all'inizio e se il codice lo incolli come ultima azione prima della pubblicazione
      @#

      Elimina
    2. Ok ho riprovato ed adesso funziona bene. Se voglio aggiungere del testo allora mi co sigla di aggiungerlo all'inizio, ma in modalità SCRIVI poi passo in HTML ed aggiungo il codice, giusto? Nel testo volevo mettere anche un link a questa pagina, un ringraziamento per le mille idee e spunti che prendo dal tuo blog

      Elimina
  7. Ciao. Ho appena pubblicato il tuo widget e funziona da favola (http://www.iltesorodisiena.net/p/pagina-di-prova.html). Avrei una domanda: è possibile sostituire l'ordinamento numerico degli articoli con dei punti elenco? Ho molti post che iniziano con una data e così si fa un po' confusione.
    Grazie comunque !!!!
    Mauro

    RispondiElimina
    Risposte
    1. @# Nel codice ci sono due occorrenze di
      list-style-type:none;
      Prova a sostituirle con
      list-style:disc;
      per vedere che succede. Non ho testato quindi può darsi che funzioni oppure no. Alternativamente prova anche con
      list-style:disc !important;
      e list-style-type: disc !important;
      Eventualmente leggiti anche questo post
      http://www.ideepercomputeredinternet.com/2014/07/css-elenchi-stile-html.html
      tanto per capire di cosa si tratta
      @#

      Elimina
    2. Funziona !!! Sei un grande !
      Un saluto
      Mauro

      Elimina
    3. In realtà mi pareva funzionasse ... appaiono i punti elenco che però si sommano alla numerazione precedente ...
      Sei un grande lo stesso .-)
      Mauro

      Elimina
    4. È probabile che tu abbia sostituito correttamente solo una delle due occorrenze. Controlla. Ci deve essere anche il punto è virgola
      @#

      Elimina
    5. #elenco-etichette ul li{list-style:disc;margin:0;border-right:1px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
      #elenco-post ul li{list-style:disc;margin-left:-40px}
      Credo sia giusto. Ho provato anche con le altre ipotesi alternative che, però, danno il medesimo risultato.

      Elimina
    6. Hai sostituito bene. Allora mi spiace ma non mi viene in mente altro per risolvere :(
      @#

      Elimina
    7. Ti ringrazio lo stesso. Va bene anche così ... funziona che è una meraviglia.
      Un saluto
      Mauro

      Elimina
  8. Ciao Ernesto, come ti ho detto nel commento di ieri sono riuscita ad aggiustare la grafica, ma mi rimane solo un ultimo dubbio che spero tu possa risolvere. Posso ordinare i post in ordine alfabetico come succede già anche per le etichette? Grazie ancora, Elena

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.