Pubblicato il 13/01/13e aggiornato il

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

sitemap-etichetta

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

pagina-statica-html



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.




22 commenti :

  1. Molto bella questa personalizzazione. Complimenti! :)

    Il caricamento della pagina è più rapido rispetto alla mappa per categorie di Abu Farhan?

    RispondiElimina
    Risposte
    1. @ Bastet...
      Che il caricamento sia più rapido si può apprezzare anche ad occhio. Andrebbe testato su un blog con molti articoli per vedere fino a quanti feed riesce ad acquisire.

      Elimina
    2. L'ho inserito in un blog di prova e ti rinnovo i complimenti perché è davvero fantastico. Si può inserire in una pagina statica senza sidebar e farla diventare home con i reindirizzamenti personalizzati. Così si ha subito la lista dei post pubblicati.

      Elimina
  2. Ciao Ernesto, l'ho provato sul mio blog in una pagina statica, il caricamento è effettivamente veloce. Ho però l'esigenza di mettere in ordine a mio piacimento la colonna di sinistra con le etichette, è possibile?? se si come??

    RispondiElimina
  3. @ Bastet...
    Potrebbe essere una idea usare la pagina come home

    @Tiziana M.
    Le etichette sono in ordine alfabetico. Al limite potresti mettere una A o un simbolo prima delle etichette che vorresti nei primi posti

    RispondiElimina
  4. Come si fa a far diventare una pagina statica come home?
    Grazie

    RispondiElimina
    Risposte
    1. @PierangeloAverara
      Fai un redirect 302
      http://www.ideepercomputeredinternet.com/2012/03/come-fare-un-redirect-302-con-blogger.html

      Elimina
  5. Salve Ernesto, grazie per lo splendido widget! sarebbe possibile inserire solo determinate etichette e non tutte quelle presenti sul blog?

    RispondiElimina
    Risposte
    1. Tutto è possibile ma la vedo difficile
      R @

      Elimina
  6. Ernesto grazie.
    Anche io, come Tiziana M, ti chiedo come fare per avere le etichette in ordine alfabetico. Hai scritto che le etichette sono già in ordine alfabetico ma io vedo anche le tue della pagina di prova non in ordine alfabetico. Mi puoi spiegare. Grazie ancora

    RispondiElimina
    Risposte
    1. Non mi ero accorto del fatto che il widget sembra ordini le etichette in modo casuale. Non so che tipo di ordinamento possa essere. Si potrebbe provare a cambiare la data di pubblicazione di un post o aggiungere una nuova etichetta per vedere se si riesce a capire se la cosa è casuale o se esiste una regola.

      Elimina
    2. Grazie, se riuscirò a capire te lo scrivo. Magari posso provare ad aggiungere un'etichetta. Ciao

      Elimina
  7. Le etichette sembrano seguire l'ordine alfabetico dei post contenuti. Cerco di spiegarmi meglio con un esempio.

    Nel blog sono presenti cinque post (A, B, C, D, E) suddivisi in tre categorie (Etichetta1, Etichetta2, Etichetta3). A e B appartengono a Etichetta2, C a Etichetta1, D ed E a Etichetta3. Quindi nella colonna di sx l'elenco sarà: Etichetta2, Etichetta1 ed Etichetta3.

    A me sembra funzioni così; correggimi se sbaglio. :)

    RispondiElimina
    Risposte
    1. @ Prendo per buone le tue affermazioni non solo perché non ho tempo e voglia di controllare. In questo modo si potrebbe modificare l'ordine delle etichette solo modificando l'ordine alfabetico dei post. E' un lavoretto non da poco :)

      Elimina
  8. Ciao Ernesto!

    Volevo chiederti se fosse possibile una piccola modifica allo script: visualizzare i post non in ordine alfabetico bensì in ordine cronologico (dal più recente al più vecchio, as usual).

    Perché Google Webmaster Tools mi segna errore "[indirizzo blog]/feeds/posts/default/-/" e questo compare solo in home dove ho inserito la mappa.

    RispondiElimina
    Risposte
    1. @# E' un tema che era già stato affrontato. Leggi i commenti precedenti. Per la modifica che chiedi onestamente non saprei come fare :) Gli Errori degli Strumenti per Webmaster sono spesso assurdi e impropri, questo mi pare uno di questi casi.

      Elimina
    2. Quindi non c'è da preoccuparsi.

      Grazie :)

      Elimina
  9. Sono davvero stordita, scusami tanto. :(

    L'elenco dei post sulla dx è già in ordine cronologico. Era a questo che mi riferivo. Quindi... ritiro tutto quel che ti ho chiesto prima: il gadget è perfetto così. :)

    RispondiElimina
  10. Buongiorno! Io ho un problema..ho provato a dare un'occhiata e a fare prove ma proprio non ci riesco!! :(
    Vorrei che in ogni singola etichetta del mio blog di cucina ci fosse un indice di tutte le ricette specifiche a quella data etichetta! Ora se ad esempio si clicca su PRIMI, viene fuori tutti i post e giustamente il visitatore deve scorrersi tutto il blog per vedere le ricette, invece a me piacerebbe che ci fossi in cima subito un indice e poi sotto le ricette!! Come si fa? Io non ci riesco! Il mio blog è www.ricettedirosalba.blogspot.com.
    Grazie mille datemi una mano per favore!!!

    RispondiElimina
    Risposte
    1. Non è che si possano avere tutte le personalizzazioni che si desiderano :)
      Magari fosse così semlice. Se non ti va bene questa soluzione prova con quest'altra
      http://www.ideepercomputeredinternet.com/2013/11/blogger-sitemap.html

      @#

      Elimina
    2. Ha ragione :) ! Provo con quest'altra soluzione! Intanto grazie

      Elimina

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.