28 aprile 2011

Menù a tendina verticale colorato con le etichette di Blogger.

Dopo aver presentato il menù verticale con le etichette, mi è stato chiesto se fosse possibile personalizzarne l'aspetto per renderlo più intonato ai colori del blog. 

La cosa è fattibilissima e, per maggiore chiarezza, ripercorrerò tutte le tappe della creazione di questo menù

In sostanza si tratta di trasformare il widget delle Etichette di Blogger in un menù a tendina. Se avete già installato il gadget andate al passaggio successivo, se invece ancora non lo avete messo sul blog, cliccate su Design > Aggiungi un gadget > Etichette

widget etichette blogger
Nella finestra successiva date un nome univoco al widget in modo da non confonderlo con un altro che potreste avere nel modello
menu etichette blogger
Nella prova che ho fatto l'ho chiamato Menu Etichette. Cliccate su Salva. Se adesso aprite il blog, vedrete un elenco più o meno lungo di tutte le etichette che avete aggiunto nei post. L'obiettivo è di far diventare questo elenco un menù a tendina simile a questo
menù a tendina verticale con etichette di blogger
I colori come vedremo possono essere personalizzati. Si può anche vedere online una demo del menù verticale a tendina con etichette. Adesso dovete andare su Design > Modifica HTML e salvare il modello completo per un eventuale backup di ripristino. Non si devono espandere i modelli widget. Cliccando su F3 o Ctrl+F si cerca una riga simile a questa
 <b:widget id='Label1' locked='false' title='Menu Etichette' type='Label'/>
dove il numero d'ordine e il titolo del widget potranno anche essere diversi.
menu etichette tendina blogger
 Si cancella detta linea e si sostituisce con il seguente codice
<b:widget id='Label3' locked='false' title='Menu Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select class='menu-etichette' onchange='location=this.options[this.selectedIndex].value;'>
<option>Scegli 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/PjyA8' target='_blank'>Get Widget</a>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Per il numero del widget e il suo titolo dovete sostituire quelli presenti nel vostro template. L'espressione Scegli etichetta sarà la prima voce del menù e può essere sostituita con un'altra. Evitate per quanto possibile parole accentate e soprattutto apostrofi che possono essere interpretati come HTML. Adesso cercate la riga
]]></b:skin>
e, immediatamente sopra, incollate questo CSS
.menu-etichette {
width:100%; /* Larghezza del menu */
background-color: #FDBCB7; /* Colore dello sfondo */
color: #003366; /* Colore del testo */
}
Il significato dei parametri è illustrato a fianco di ciascuno di essi. Possono essere modificati per dare al menù delle etichette gli stessi colori del blog. La larghezza 100% significa che il menù prende tutto lo spazio disponibile nella sidebar. Se invece si inserisse in un altro punto del layout più ampio, come per esempio sopra all'area del post, potremo diminuire la percentuale. Alternativamente si può anche inserire la dimensione in pixel ( Es: width:300px; ). Finalmente si salva il modello e si guarda che aspetto ha il menù. Chi avesse delle difficoltà con gli altri parametri, può consultare i post sui codici dei colori e sui software PF Color Tool e Color Picker per acquisire il codice dei colori visibili sullo schermo del computer. Ad ogni voce del menù, corrisponderà una pagina di questo genere
http://mio-blog.blogspot.com/search/label/etichetta
Aggiornamento: Se si vogliono eliminare i numeri tra parentesi che indicano il numero di post per ogni etichetta per avere un menù che abbia questo aspetto
menù a tendina delle etichette di blogger
basta eliminare la riga (<data:label.count/>). Si possono mettere i numeri anche tra parentesi quadre sostituendola con quest'altra [<data:label.count/>] o ancora inserire al suo posto questa riga [<data:label.count/> post] per avere un effetto di questo genere
menù verticale di etichette di blogger
Naturalmente ci si può sbizzarrire come si vuole inserendo anche altre espressioni o anche delle icone.



24 commenti :

  1. Buona idea hai avuto di costruire un blog che spiega meglio alcune interfaccie caratteristiche di Google e sui gadget. Grazie dei suggerimenti dati in bocca al lupo Silvia

    RispondiElimina
  2. mi sono accorto che oggi non è possibile commentare nei miei blog con nome o anonimo o url ecc.ecc. ma solo con profilo blogger ... ne sai qualcosa??
    è molto strano io non uso nemmeno la captcha e consento il commento spuntando "chiunque" e moderazione "mai"
    è passeggera la cosa o è una nuova strategia di google??

    RispondiElimina
  3. @Tex Willer
    Credo sia un bug momentaneo di Blogger, stanno mettendo a punto la nuova Bacheca...

    @Silvia
    Grazie a te di seguirmi

    RispondiElimina
  4. Perfetto. Mi è stato utilissimo. Grazie!
    http://universalautori.blogspot.com

    RispondiElimina
  5. Fantastico! Leggero e non invasivo! Approved!

    RispondiElimina
  6. CIAO
    come faccio ad andare direttamente alla pagina con html.
    senza passare prima da quella con /search/label/ ..
    grazie

    RispondiElimina
    Risposte
    1. @jack #blogger
      Basta che tu clicca sopra al titolo del post

      Elimina
  7. Ciao Ernesto, volevo sapere se esisteva un metodo infallibile per aumentare visite al tuo blog, e quindi anche i commenti. Però io cerco un metodo rapito, magari che funzioni in poche orette. Cosa puoi consigliarmi? Grazie in anticipo

    RispondiElimina
    Risposte
    1. @DavideSimeone
      Se lo conoscessi, lo avrei già applicato al mio blog :D. No, non credo ci sia una ricetta sicura, rapida ancora meno.

      Elimina
  8. ciao!
    Come posso inserire un menu a tendina, a comparsa automatica, solo a "info.pratiques" su questo blog:
    http://afasyros.blogspot.com/?
    Vorrei mettere dei link paragrafi della pagina statica: es. OSPEDALE, POMPIERI,...
    il menu l'ho preso qui da te ma non ricordo dove.

    RispondiElimina
    Risposte
    1. @Amicale...
      Tutti i menù sono stati elencati in questa pagina
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      a parte gli ultimi che comunque puoi trovare qui
      http://www.ideepercomputeredinternet.com/search/label/menu

      Elimina
  9. GRAZIE ERNESTO, UTILISSIMO!
    http://sweetandthatsit.blogspot.ch
    (tra l'altro, blogger sta cambiando tutti i .com con .xx (provenienza del blog) per motivi di legge. Infatti ho scoperto oggi che il mio non è più un .com ma .ch ... Vive la Suisse :-) )

    Cari saluti

    RispondiElimina
  10. Ciao.
    Ho un piccolo quesito, questo è il mio blog http://matteoscrugli.blogspot.it/, sono ancora un principiante, sotto l'intestazione potrai notare un menu con le scritte home, etichette etc... se vai con il mouse su etichette puoi notare che si apre un menù a tendina con le etichette, però quei link li ho dovuti mettere io.
    Insomma sapresti dirmi come fare il menu a tendina etichette dove AUTOMATICAMENTE di crea dei sottolink automatici per ogni etichetta? senza che ogni volta gli debba mettere il il nome dell'etichetta da ricercare.
    Grazie in anticipo :).

    RispondiElimina
    Risposte
    1. @MatteoScrugli
      Tu hai scaricato da internet un modello e lo hai applicato al blog. Con il modello che hai scelto puoi solo inserire manualmente le altre etichette che desideri mostrare. Su Blogger non si possono creare delle gerarchie di etichette nel senso che non ci sono sottoetichette.

      Elimina
    2. non esiste un alternativa simile a questa http://www.ideepercomputeredinternet.com/2011/04/menu-tendina-verticale-colorato-con-le.html dove anzi che premerci sopra con il mouse per visualizzare le etichette basta che ci passi sopra con il mouse? se si allora potrei spostarlo dove voglio e affiancarlo al mio menù... Grazie ancora!

      Elimina
    3. @MatteoScrugli
      Esistono moltissime alternative. Leggi questi post
      http://www.ideepercomputeredinternet.com/2011/03/i-migliori-menu-per-blogger.html
      ma bisogna vedere se sono compatibili con il tuo modello

      Elimina
    4. Grazie per la tua disponibilità, sei stato utilissimo!
      Saluti.

      Elimina
    5. Ciao Ernesto,
      siccome sono un po' pignola ( ;D ) vorrei sapere se posso ulteriormente "abbellire" il menu a tendina...cambiando con colori più consoni al mio blog i seguenti elementi: 1) il colore azzurro della categoria selezionata; 2) il colore celeste della barra di scorrimento; 3) quella righina bianca intorno a "Choose your favourite category". Mi piacerebbe anche centrare i titoli delle categorie...ma se non si può pazienza! Grazie.

      Elimina
    6. @ RobertaR
      I colori personalizzabili sono colorati di rosso nel secondo codice. Gli altri colori sono ereditati dal tuo blog e dal tuo browser.
      P.S. "Choose your favourite category" dove lo hai trovato? Forse si tratta di un altro widget :P

      Elimina
    7. "Choose..." l'ho messo io al posto di "Scegli etichetta" perché ho il blog in inglese...mai e poi mai chiederei a un esperto di modificarmi il codice creato da un altro! :P
      In sostanza, non posso personalizzare ulteriormente? almeno mettere "Averia Sans Libre" (che ho nei widget) come font? Grazie.

      Elimina
    8. @ RobertaR.
      I font dovrebbero essere ereditati dal blog. Comunque prova a mettere questo nuova riga CSS

      font-family:Averia Sans Libre;

      o quello che è. Guarda nel tuo modello

      Elimina
  11. Dopo vari esperimenti ho provato ad aggiungere al tuo secondo codice (sotto la riga dedicata al colore del testo) queste 3 righe (la prima viene da un tuo codice per sostituire i fonts che avevo già usato altrove):

    font-family: 'Averia Sans Libre', cursive !important;
    font-size:100%;
    text-align:center;

    e sono riuscita sia a centrare e ingrandire, sia a piazzare il mio font. Spero sia utile ad altri pign...ehm, perfezionisti ;D

    P.S.: se inserivo il font direttamente nel CSS non me lo prendeva...ho dovuto togliere tutto il codice e rimetterlo da capo nell'HTML con in più quelle 3 righe.

    RispondiElimina
  12. ciao Ernesto, se adesso volessi eliminarlo, mi basta eliminare il widget dal layout?
    L'ho già eliminato, e adesso non trovo più nemmeno il codice prima di: ]]>

    RispondiElimina
  13. Dovresti provare a togliere anche quello ma se non ci riesci poco male
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.