Pubblicato il 13/01/13 - aggiornato il  | 38 commenti :

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.


38 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
  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
  11. Bene, era esattamente ciò di cui avevo bisogno. Peccato che gli argomenti sotto alle etichette non siano in ordine alfabetico e questo rende un po' caotica la ricerca da parte degli utenti. C'è una soluzione? Grazie. Silvana

    RispondiElimina
    Risposte
    1. Prova quest'altra mappa del sito per utenti
      http://www.ideepercomputeredinternet.com/2017/01/mappa-sito-lettori-blogger-etichette-ricerca.html
      che ha anche una funzione di ricerca
      @#

      Elimina
    2. Grazie mille, Ernesto, l'avevo già provata, ma non riesco a farla funzionare. Non so perchè, ma dopo la scelta della categoria i post non appaiono. C'è solo la riga "Post precedenti" e nient'altro (provato e riprovato). Comunque, preferisco la prima soluzione per le mie esigenze. Il problema è quello che ti ho detto: tanti argomenti e la mancanza di un ordine alfabetico. In generale, sembra che Blogger non ami "l'alfabeto", perchè non c'è un modo di ordinare i contenuti in questo senso, ne' per noi e ne' per gli altri. Se dovessi avere altre idee, fammelo sapere. Ciao

      Elimina
  12. Ciao Ernesto, ho trovato quest'altra soluzione per quello che cercavo..
    http://www.ideepercomputeredinternet.com/2015/03/mappa-sito-blogger-etichette-miniature.html
    ..e ti ho mandato un commento nel post relativo. Grazie. Silvana

    RispondiElimina
  13. Ciao Ernesto, ti chiedo "perdono" per quello che sto per chiederti, visto che l'ho già visto scritto qui sopra più volte:
    Gli argomenti non sono in ordine alfabetico, ma ho scoperto che NON sono in ordine casuale: al primo posto c'é l'etichetta con più post, all'ultimo quella con meno.
    Quindi oserei dire sono in ordine di "grandezza".
    Non è che per caso nel frattempo hai trovato la soluzione per alfabetizzarlo?

    Grazie mille e buona serata
    Ckay
    PS. scusa, scusa, scusa, scusa ;-)

    RispondiElimina
    Risposte
    1. No. Con sincerità non posso mettermi a studiare una cosa senza avere la certezza di risolvere il problema.
      @#

      Elimina
    2. Capisco, grazie comunque. I tuoi post sono molto utili e stupendi.
      Auguri di buona Pasqua

      Elimina
  14. Ciao Ernesto,
    vorrei creare delle pagine statiche dove si convoglino i post di determinate etichette.
    Non riesco in nessun modo..

    RispondiElimina
    Risposte
    1. Ti posso linkare alcuni post che ho creato sul tema
      https://www.ideepercomputeredinternet.com/2016/10/mappa-sito-blogger-lettori.html
      https://www.ideepercomputeredinternet.com/2016/07/mappa-sito-blogger-miniature.html
      https://www.ideepercomputeredinternet.com/2014/12/blogger-mappa-sito-etichette.html
      https://www.ideepercomputeredinternet.com/2015/03/mappa-sito-blogger-etichette-miniature.html
      https://www.ideepercomputeredinternet.com/2013/11/elenco-post-etichetta-pagina-statica-blogger.html
      Guarda se c'è qualche codice che ti funziona
      @#

      Elimina
  15. ciao Ernesto, ho usato questa tua mappa per mettere le etichette in una pagina e funziona davvero bene. L'unica cosa che non riesco a risolvere è che quando passo da una pagina a questa che ho creato per le etichette, c'è uno scatto in orizzontale di qualche pixel prima che la pagina torni a posto, non so se sono riuscita a spiegare bene, cosa può essere? Grazie

    RispondiElimina
    Risposte
    1. Purtroppo non ti so aiutare. Non mi occupo più di Blogger da quando hanno rilasciato i nuovi template che non sono personalizzabili.
      @#

      Elimina
    2. Non usi più la piattaforma blogger? Posso chiederti cosa usi al posto di blogger? A quali template ti riferisci? A quelli responsive? Grazie

      Elimina
    3. Uso sempre Blogger. Sarebbe complicato cambiare. Non pubblico più post che riguardano Blogger perché dopo che sono stati rilasciati i Temi Contempo, Emporio, ecc... ogni personalizzazione è riferibile solo a un modello e non a tutti come invece accadeva prima visto che i loro codici sono molto diversi gli uni dagli altri.
      @#

      Elimina
  16. Ho capito grazie. Però trovo che le tue personalizzazioni spesso si adattano anche a tutti gli altri temi ai quali ti riferisci. Buon proseguimento Ernesto

    RispondiElimina
    Risposte
    1. Probabilmente perché hai modello vecchio tipo. Con i nuovi sono più le volte che i codici non funzionano 🤔
      @#

      Elimina
    2. no, funzionano anche con i nuovi... qualche volta con piccoli accorgimenti....

      Elimina

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