Pubblicato il 25/04/11e aggiornato il

Come creare un menù verticale con tutte le etichette in un blog su Blogger.

Creare un menù verticale con tutte le etichette di Blogger da visualizzare nella sidebar
Ci sono diversi modi per visualizzare le etichette in un blog su Blogger. Ricordo il classico elenco verticale e la nuvola di etichette, entrambi offerti dalla piattaforma. C'è anche il widget Blogumus che è le mostra animate e che si muovono al passaggio del mouse ma che ha il difetto di non funzionare con tutti i modelli. In un singolo blog possiamo inserire anche più di un widget di etichette. In questo caso i gadget saranno univocamente individuati dal loro numero di ordine (Labels1, Labels2, ecc). Vediamo come realizzare un menù verticale con tutte le etichette presenti nel nostro blog e che mostri anche il numero di articoli in cui ciascuna di essa sia stata inserita. Per prima cosa bisogna aver installato il widget andando su Design > Aggiungi un gadget > Etichette
etichette blogger widget
Per essere sicuri di non fare confusione nel caso fosse presente un altro widget simile, diamogli un nome inequivoco come per esempio Etichette Menu. Clicchiamo su Salva e posizioniamo il widget dove più ci pare nella sidebar. Avrà l'aspetto classico dell'elenco verticale
aspetto widget etichette
Adesso andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Non bisogna espandere i modelli widget, quindi dobbiamo togliere la flag dal quadratino nel caso fosse presente. Cerchiamo questa linea di codice
<b:widget id='Label1' locked='false' title='Etichette menu' type='Label'/>
dove il numero d'ordine e il titolo evidenziati di rosso possono essere diversi
etichette blogger widget[4]
Sostituiamo tale linea con questo codice
<b:widget id='Label1' locked='false' title='Etichette Menu' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Seleziona etichetta</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<div style="font-size:60%;text-align:right;"><a href='http://goo.gl/3eMoz' target='_blank'>Get Widget</a></div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
in cui per i dati in rosso valgono le considerazioni fatte sopra e la frase in blu rappresenta quello che sarà visto nella prima riga del menu. Si salva il modello. Il widget sarà formato da una sola riga. Se si cliccherà nel campo Seleziona etichetta si aprirà il menù verticale
menu etichette widget blogger
Cliccando su un singolo elemento apriremo una pagina del tipo
http://nome-blog.blogspot.com/search/label/nome-etichetta
Questa personalizzazione è molto utile per chi ha nel blog molte etichette e vuole mostrarle ai visitatori in modo compatto. Una demo del funzionamento di questo gadget la potete vedere in alto a destra di questo post di prova.




37 commenti :

  1. ho una domanda..e c'entra poco che c'entra poco con il post. Vorrei saspere, come posso modificare i nome delle etichette e eventualmente cancellarne alcune per aggiungerne altre. graizee,

    RispondiElimina
  2. @BrilliDiLuce La lettura di questi due post dovrebbe esserti sufficiente
    http://www.ideepercomputeredinternet.com/2010/08/come-aggiungere-o-togliere-etichette.html
    http://www.ideepercomputeredinternet.com/2010/12/come-gestire-le-etichette-in-un-blog-di.html

    RispondiElimina
  3. Ciao parsifal, neanche il mio commento riguarda il post.
    Sono andato sul blog http://sidebar-multitab.blogspot.com/ e ho visto che nella sidebar c'è quel gadget con le foto, le slide, l'audio e i video.
    Siccome non c'era il classico install widget mi chiedevo se potevi darmi il link del tutorial per creare quel gadget.
    Grazie mille

    RispondiElimina
  4. @filippo99 Non si tratta di un widget ma è solo una immagine animata in GIF la puoi vedere qua
    https://lh4.googleusercontent.com/_nT13UtBmmiU/TXQbI2I000I/AAAAAAAASQM/xhcopJW-4l4/immagine-animata.gif
    Ci sono diverse applicazioni online in cui si possono creare a partire dai fotogrammi. Qui c'è un breve elenco
    http://www.ideepercomputeredinternet.com/2011/04/come-creare-e-modificare-immagini.html

    RispondiElimina
  5. grazie per la risposta solo che io intendevo un tutorial per creare quei pulsanti di navigazione.
    Poi aggiungerò le immagine e tutto il resto

    RispondiElimina
  6. @filippo99 Eccolo qui
    http://www.ideepercomputeredinternet.com/2011/03/come-dividere-una-sidebar-di-blogger-in.html

    RispondiElimina
  7. Grazie mille, lo ho aggiunto subito!

    RispondiElimina
  8. Ernesto, grazie, avevo proprio bisogno di una cosa del genere!!! Sei sempre impeccabile!

    RispondiElimina
  9. Grazie Ernesto!Ne avevo davvero bisogno con tutti gli argomenti che ho nelle etichette.ancora una volta il tuo è davvero ottimo lavoro.buon pomeriggio

    RispondiElimina
  10. ho risolto il problema con le moltissime etichette del mio blog di cucina, grazie come sempre ,buona domenica!

    RispondiElimina
  11. BUONGIORNO
    ho un problema.. allora quando clic su un etichette mi manda ad un URL con ''search/label/''
    Esempio
    www.NOMEDELBLOG/search/label/Applicazione%20online
    invece io voglio:: ( che finisce con html)
    www.NOMEDELBLOG/2010/08/Applicazione%20online.html

    RispondiElimina
    Risposte
    1. @fouad
      E' impossibile. Le pagine delle etichette hanno tutte la stessa struttura
      http://www.nomeblog/search/etichetta

      Elimina
  12. Grazie Ernesto! Indispensabile come sempre!!

    RispondiElimina
  13. Ciao Ernesto,
    io è già da un po' di tempo che utilizzo questo utilissimo menù a tendina, che fa risparmiare un sacco di spazio.
    Avrei una domanda: sto cercando di ottimizzare la homepage per una specifica keyword; in questo caso Google rileva anche le parole chiave all'interno di questo menù o essendo che compaiono solo cliccando sulla freccetta a discesa non vengono considerate?
    Ti ringrazio,
    Giuliana

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Google le rileva sicuramente però le parole chiave delle etichette non sono così importanti come sembra. Addirittura le pagine delle etichette non vengono neppure indicizzate. Nel file robots.txt c'è il comando Disallow: search. Quindi si tratta di una cosa a cui non farei troppo caso.

      Elimina
  14. E' vero, hai ragione, non ci avevo pensato ^^

    RispondiElimina
  15. Scusate la domanda stupida, ma quando provo a inserire l'elenco di etichette con il gadget di blogger, anche se nel layout me lo visualizza poi una volta aperta la pagina del blog, sia in anteprima che con una normale visualizzazione, non si vede nulla. Ho notato che tutti i gadget che non riesco a visualizzare sono contrassegnati con " Disponibile per visualizzazioni dinamiche", questo significa che sono visibili SOLO per le visualizzazioni dinamiche?O c'è un modo per aggirare la cosa? Grazie mille!

    RispondiElimina
    Risposte
    1. @Martina
      Le visualizzazioni dinamiche non c'entrano nulla. Deve esserci qualche altro problema.

      Elimina
    2. Essendo abbastanza ignorante in merito, non so proprio che fare..hai qualche idea? grazie davvero per la risposta, comunque, e scusa l'insistenza!

      Elimina
    3. @Martina
      Non mi viene in mente nulla di sicuro. Una supposizione che si può fare è che tali widget siano incompatibili con uno script che hai inserito nel modello. Potrebbe essere relativo a un menù o a un'altra personalizzazione.

      Elimina
  16. Ottimo e davvero utile come tutti i tutorial utili che ci regali ogni giorno.
    Appena installato sul mio sito, mi piace molto.
    Grazie Ernesto

    RispondiElimina
  17. Come creare un menù orizzontale si può realisa re e togliere alcune etichette

    RispondiElimina
    Risposte
    1. Puoi sempre provare. Con il widget di Blogger selezioni le etichette e poi imposti lo script
      @#

      Elimina
  18. Ciao Ernesto, innanzitutto grazie per l'ottimo lavoro che fai. Vado un po' "off topic", la domanda è: come faccio ad allineare le voci su un'unica colonna verticale di un semplice menu con etichette? Blogger me le mette di default una a fianco all'altra e se non ci stanno due voci va a capo, il tutto nel mio caso risulta un po' antiestetico. Per capirci il blog è questo: http://araldomedievale.blogspot.it/ GRAZIE

    RispondiElimina
    Risposte
    1. Invece di selezionare Nuvola puoi optare su Elenco nella configurazione delle etichette
      @#

      Elimina
    2. Comunque vedo che il widget a cui fai riferimento non è uno ufficiale di Blogger quindi non so aiutarti

      Elimina
  19. Gentile Ernesto, quando cerco di inserire il codice che fornisci in questo post per inserire il "seleziona etichetta" e salvo mi compare questa scritta: Errore di analisi XML, riga 2374, colonna 5: The element type "b:section-contents" must be terminated by the matching end-tag "". Cosa sbaglio? Grazie.

    RispondiElimina
    Risposte
    1. Con il nuovo modello di Blogger le cose funzionano diversamente. Questo post è stato pubblicato quando ancora c'era il vecchio modello. Puoi risolvere in due modi:
      1) Cliccare sulla sinistra della riga per visualizzare una freccetta nera. Questo significa che i widget sono nascosti e cancellando una riga cancelli tutto il codice
      2) Alternativamente puoi cancellare non solo quella riga ma tutto il codice quindi senza visualizzare la freccetta nera a sinistra. Lo devi cancellare a partire da
      <b:widget id='Label1' locked='false' title='Etichette menu' type='Label'/>
      fino a </b:widget>
      Ricordati sempre di salvare il template prima di procedere
      @#

      Elimina
  20. Grazie di cuore per la rapidità e chiarezza.

    RispondiElimina
  21. Vorrei chiederti ancora una cosa. C’è un modo per inserire l’invito di iscrizione alla newsletter nella pagina principale sopra il post anziché nella sidebar laterale? Grazie mille.

    RispondiElimina
    Risposte
    1. Il widget ufficiale di Blogger Iscriviti per email lo puoi trascinare con il mouse sopra all'area del post andando su Layout per poi salvare la disposizione. Per esempio in questo blog sta nel footer. Lo puoi portare ovunque
      @#

      Elimina
  22. Nel modello che ho adottato, a finestra, sopra il post c’è solo Cross-column e se lo trascino lì non mi dà il titolo “iscriviti alla newsletter”. Grazie delle tue risposte.

    RispondiElimina
  23. Domanda: perchè a voi compare "iscriviti" e a me submit?

    RispondiElimina
  24. Parlo del widget iscriviti per email

    RispondiElimina
  25. Per Stefano. Ho seguito le istruzioni di Ernesto nel post Personalizzare il widget Segui tramite Email (Follow by Email). A questo proposito chiedo a te Stefano come hai fatto a mettere "iscrizione alla newsletter" sopra il post e non nella sidebar nel tuo blog che, come sai, seguo. Grazie.

    RispondiElimina
  26. Il post da seguire è piuttosto vecchio ma funziona ancora
    http://www.ideepercomputeredinternet.com/2011/04/personalizzare-il-widget-segui-tramite.html
    @#

    RispondiElimina
  27. Per Gian Maria: ho fatto come ha detto Ernesto. L'ho portato sopra i post (in area "main"). Grazie a entrambi. P.S. Tutte le modifiche e i widget del mio sito sono dovuti alle capacità e alla cortesia di Ernesto

    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.