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

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

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.