Creare una mappa del blog per etichette su Blogger.

Creare una Mappa del sito di Blogger per Etichette con strumenti di navigazione da mostrare in una Pagina.

Google consiglia gli amministratori dei siti di inviare una o più sitemap agli Strumenti per Webmaster in modo da velocizzare l'indicizzazione degli stessi. Viene anche auspicato che anche i lettori abbiano la possibilità di sfogliare una mappa del sito per accedere con più efficacia alle informazioni.

Le mappe del sito per visitatori sono basate su degli script che sono spesso lenti a caricare e non hanno una grande immediatezza grafica. Qualche tempo fa ho presentato un widget che mostrava tutti i post pubblicati corredati della relativa miniatura. L'impatto grafico era decisamente migliore ma la lentezza nel caricamento rimaneva immutata .

Con questo post voglio illustrare un nuovo tipo di Sitemap con gli articoli suddivisi per etichetta. Le varie categorie vengono visualizzate sulla sinistra in un elenco verticale con cursore di scorrimento mentre i post di ciascuna etichetta vengono visualizzati sulla destra quando quando viene selezionata

Il posizionamento ideale per questa mappa del sito è in una pagina statica ma si può mettere anche in un post o in un widget HTML/Javascript. Per utilizzare una pagina statica si va su Bacheca > Pagine > Nuova Pagina > Pagina vuota e si seleziona HTML accanto a Scrivi

Nell'area centrale si incolla il seguente codice

<style type='text/css'>
#categorie{float:left;margin-right:20px;width:220px;height:400px;overflow-x:hidden;overflow-y:auto;line-height:18px}
#categorie ul{margin:0;border-top:1px solid #bbbbbb;padding:0}
#categorie ul li{list-style-type:none;margin:0;border-right:1px solid #bbbbbb;border-bottom:1px solid #bbbbbb;border-left:1px solid #bbbbbb;padding:0}
#categorie ul li a{display:block;padding:10px}
#categorie ul li a,#navigazione a{background:#fff;color:#cd2336;text-decoration:none}
#categorie ul li a,#navigazione a,#navigazione span{font-size:12px}
#categorie ul li a:hover,#navigazione a:hover{background:#bbbbbb;color:#fff}
#articoli{float:left;width:62%}
#articoli ul li{list-style-type:none}
#navigazione{padding:20px 0}
#navigazione a{margin-right:10px;border:1px solid #bbbbbb}
#navigazione a,#navigazione span{padding:5px 10px}
#navigazione span{float:right}
</style>
<div id='categorie'></div>
<div id='articoli'>
<script type='text/javaScript'>
var home_et='';num_et=10;cat_pre='Prec';cat_suc='Succ';
var nome_cat;var cat_in;var class_cat;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<num_et&&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_in+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navigazione">';if(cat_in>1){dw+='<a href="" onclick="show_post(\''+nome_cat+'\',\''+(cat_in-num_et)+'\',\''+class_cat+'\');return false">'+cat_pre+'</a>'}if((cat_in+num_et-1)<tt){dw+='<a href="" onclick="show_post(\''+nome_cat+'\',\''+(cat_in+num_et)+'\',\''+class_cat+'\');return false">'+cat_suc+'</a>'}dw+='<span>'+cat_in+' &ndash; '+(cat_in+i-1)+' / '+tt+'</span>';dw+='</div>';document.getElementById('articoli').innerHTML=dw+'<style type="text/css">.cat-'+class_cat+' a{background:#bbb!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',home_et+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+num_et+'&callback=show_post2');d.appendChild(e);nome_cat=a;cat_in=parseInt(b),class_cat=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';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">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('categorie').innerHTML=dw}document.write('<script type="text/javascript" src="'+home_et+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>

Si pubblica la pagina direttamente da HTML senza passare su Scrivi. I parametri più importanti da modificare sono stati colorati di rosso. Il tag num_et=10; serve per configurare il numero di post da visualizzare per ciascuna pagina e ciascuna etichetta. Per navigare tra tutte le pagine che si vengono a creare si utilizzano i bottoni Prec e Succ.

Nel caso in cui abbiate una area del layout piuttosto stretta può capitare che i post si visualizzino sotto l'elenco delle categorie. Si può ovviare diminuendo la percentuale del 62% a loro destinata, diminuendo la larghezza dell'elenco delle categorie (width:220px) oppure togliere la sidebar dalla pagina statica. Con questa Mappa del sito viene velocizzato notevolmente il caricamento della pagina.