Personalizzare le Etichette con uno stile flat

In questo articolo vedremo come dare un look flat alle etichette esattamente come e vedete su questo blog.
Per iniziare, inseriamo il seguente codice html sul nostro sito, direttamente sul template da Modello > Modifica Html o utilizzando il gadget HTML/Javascript come suggerito in questo post. Da queste righe di codice assegneremo forme e colori alle etichette. Il colore varierà da rosso per le etichette con maggior numero di articoli, a verde.

<style type='text/css'>
/* ETICHETTE FLAT http://appuntiinternetecomputer.blogspot.it/ ---------------- */
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  color:#fff!important;
  }
 .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;}
.sidebar .label-size-5 a:hover {background:#c0392b}
</style>

Supponendo di avere già inserito i gadget "Etichette" nel nostro blog, selezioniamolo per la modifica.
Dalla finestra "Configura etichette" dobbiamo necessariamente selezionare la visualizzazione a "Nuvola" e deselezionare l'opzione "Mostra il numero di post per etichetta".
Possiamo scegliere se visualizzare l'ordinamento alfabetico o per numero di articoli.