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.

 

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

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.