Pubblicato il 26/02/13e aggiornato il

Come personalizzare la nuvola di etichette di Blogger.

Come personalizzare la nuvola delle etichette di Blogger con effetto hover colorato e transizione.
Il widget delle etichette di Blogger è certamente uno dei più utilizzati tra quelli ufficiali. Per aggiungerlo si va su Layout > Aggiungi un gadget > Etichette. Sono disponibili gli stili di Elenco e di Nuvola, l'ordinamento per alfabeto o per frequenza e infine possono anche essere selezionate solo le etichette che si vogliono mostrare ai visitatori. E' anche disponibile l'opzione per mostrare il numero di post in cui sia stata inserita una certa etichetta. La gestione delle etichette di Blogger è un aspetto importante anche se non fondamentale di un sito. Con le etichette si può creare anche un menù verticale a scorrimento. Uno dei gadget più amati in questo contesto è quello della nuvola animata delle etichette che però può essere utilizzato solo selezionandone un numero inferiore a 30.

In questo post vediamo come si possa personalizzare la nuvola di etichette così come proposta da Blogger. Ovviamente bisogna avere il widget già installato. Si va su Bacheca > Layout > Aggiungi un gadget > Etichette, si seleziona l'opzione Nuvola senza mostrare il numero di post e si va su Salva

etichette-widget-blogger
Si posiziona il widget con il mouse si va su Salva. Dopo aver fatto una copia di backup del template si clicca su Modello > Modifica HTML > Procedi e si cerca la riga  </head>. Subito sopra si incolla il seguente codice dopo averlo personalizzato come illustrato più in basso

<style type='text/css'>
.Label a{
padding-left:5px;
background:#000;
padding:0 5px;
color:#fff !important;
border-radius:10px;
-moz-border-radius:10px;
height:20px;
line-height:20px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .2s ease-in-out !important; 10px 10px;
float:left;
margin-left:3px;
margin-top:3px;
font-size:12px; }
.Label a:hover{
color:#000 !important;
font-weight:bold;
background:#ff4; }
< /style>

Si salva il modello. I codici dei colori sono stati postati in rosso così come le dimensioni dei font e dell'altezza della riga. I più esperti possono avventurarsi anche a modificare gli altri parametri presenti nel codice. La riga colorata di viola trasforma tutte le etichette in lettere maiuscole e può essere tralasciata a chi non piacesse questa opzione. L'animazione della singola etichetta quando si passa sopra con il mouse è provocata dalla riga colorata di blu che fa diventare il testo in grassetto. Ecco come si presenta questo widget

etichette-personalizzate

Per vederlo in azione aprite la demo che ho postato in rete



Si può anche settare il numero di decimi di secondi della transizione in -webkit-transition:all .2s che però si può osservare solo con i browser che la supportano.




14 commenti :

  1. Personalizzazione molto bella, complimenti. L'ho applicata nel mio blog cambiandone il colore di sfondo e finora non ho riscontrato problemi con Firefox, Chrome, IE e Opera.

    Ah... nel codice ti sono sfuggiti un paio di refusi: important;t al posto di important e pxt al posto di px.

    RispondiElimina
    Risposte
    1. @# Elena,
      Grazie di avermi avvertito. In questi giorni faccio le cose un po' troppo di fretta :P

      Elimina
    2. Ah... ho notato una cosa strana con questa personalizzazione del widget.

      Nel mio blog (modello Simple) quando clicco su un'etichetta e apro la pagina corrispondente, l'etichetta "attiva" finisce in fondo all'elenco e torna al suo aspetto originario.

      Nel tuo blog demo addirittura cambia il modo in cui si visualizza il widget: diventa un elenco.

      Ho provato a usare Firebug, ma non riesco a capire dove modificare il css.

      Elimina
    3. @# Elena P.
      Nel mio blog non diventa un elenco :) Si tratta solo di un widget simile che ho nascosto appositamente in quella pagina di demo per mostrare quello modificato. Quando si clicca sopra a una etichetta nel mio test si apre la pagina relativa e se si torna indietro è tutto OK

      Elimina
    4. Ah... ok. Comunque rimane quel particolare dell'etichetta attiva in fondo all'elenco. Ho capito perché succede (non è un link bensì un testo normale), ma non riesco a capire come modificarlo.

      Elimina
    5. @#
      Dopo che mi hai detto che c'erano due strafalcioni mi sembra di aver ripulito il codice

      Elimina
    6. Non proccuparti. Il tuo codice va benissimo. Credo occorra modificare un'altra classe nel css, ma ancora devo capire quale.

      Faccio un esempio: se qui sul tuo sito clicchi sull'etichetta Blogger, apri la pagina http://www.ideepercomputeredinternet.com/search/label/blogger. Controllando il widget, noterai che Blogger diventa un testo non cliccabile (in nero).

      Ecco... non riesco a capire perché con questa personalizzazione del widget, l'etichetta visitata in quel momento finisca in fondo all'elenco. Se vuoi, ti mando uno screen della schermata.

      Elimina
    7. Update: forse ho trovato il bandolo della matassa. Al posto di

      .Label a e .Label a:hover

      prova a modificare .label-size, .label-size a e .label-size a:hover

      L'etichetta selezionata sembra rimanere al suo posto senza finire in fondo all'elenco.

      Elimina
    8. @# Prendo assolutamente per buono il tuo lavoro anche perché sono oberato di impegni :)

      Elimina
  2. Salve, volevo sapere se era invece possibile inserire le "etichette calde", come le chiamo io. In pratica se c'era un modo per inserire in un widget le etichette più lette, mi tornerebbe molto utile per capire e far capire ai visitatori quali sono gli "argomenti caldi" del sito.

    Dovrebbe funzionare per numero di visite in un tot di tempo (tipo una settimana), non come numero di etichette. Spero di essermi spiegato bene, mi rendo conto che è un'idea un pò particolare.

    Ringrazio in anticipo e faccio i complimenti al sito, da anni una fonte preziosissima di consigli ;)

    RispondiElimina
    Risposte
    1. Non credo ci sia un sistema per determinare in modo automatico le etichette con i post più visitati e se esiste non lo conosco
      @#

      Elimina
  3. Grazie mille, mi sono trovata davvero bene e ho personalizzato a piacimento colori e dimensioni!!

    RispondiElimina
  4. Se si vuole usare la modalità "elenco" e non "nuvola", è possibile rimuovere il pallino di elenco puntato che si crea automaticamente? Perché vorrei allinearle a destra, ma si crea un brutto spazio.

    RispondiElimina
    Risposte
    1. @# Sì si può togliere. Basta incollare questa riga
      #Label1 ul {list-style:none;}
      nel modello prima della riga
      ]]></b:skin>

      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.