Come personalizzare lo stile dell'elenco delle etichette di Blogger

Per impostazione predefinita, Blogger permette di organizzare i post classificandoli per etichette. L'utilizzo delle etichette è indispensabile per facilitare la ricerca agli utenti in modo che possano trovare articoli pertinenti a quella specifica categoria. Usandole adeguatamente il blog diventerà più user-friendly, cioè gli utenti sfoglieranno più pagine se riescono a trovare ciò che cercano in poco tempo e di conseguenza otterrete un certo vantaggio sui motori di ricerca. Inoltre è possibile mostrare le etichette nella barra laterale come gadget nel blog in formato lista o nuvola per abbellire il blog. Con questo articolo imparerete a personalizzare lo stile dell'elenco delle etichette, prima di continuare a leggere il tutorial è indispensabile che sappiate già aggiungere o eliminare le etichette per togliere quelle che sono superflue.


Il risultato finale sarà il seguente, cioè dei pulsanti neri che diventano gialli ogni volta che si passa sopra di essi con il mouse:

Per eseguire questa personalizzazione dovete andare su Modello > Modifica HTML e prima del tag </head> dovete aggiungere questo codice:

<style type='text/css'>
.Label a{
padding-left:5px;
font-weight: bold;
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;
background:#ff4; }
< /style>

Ovviamente come per ogni codice css può essere modificato a proprio piacimento, è possibile incrementare la dimensione e lo stile del font, lo sfondo, il colore ecc.

Ad esempio:
font-weight: bold; --> per cambiare il font del carattere.
text-transform:uppercase; --> eliminare questa riga per eliminare il testo stampatello.
color:#fff !important; --> è il colore del testo bianco quando non è selezionato.

Se volete modificare i pulsanti con il mouse posizionato sopra di essi dovete aggiungere css fra le parentesi graffe presenti dopo .Label a:hover.

Da notare che questo gadget funziona solamente se viene selezionato un numero di etichette inferiore a 30.