martedì 1 dicembre 2015

Tutorial Blogger: come cambiare stile all'elenco etichette.

Le etichette sono indispensabili per facilitare la ricerca agli utenti, in modo che possano trovare facilmente gli articoli di una determinata categoria. Usandole nel modo corretto il blog diventerà più piacevole per gli utenti, i quali sfoglieranno più pagine se riescono a trovare ciò che cercano in poco tempo e di conseguenza otterrete un certo vantaggio sui motori di ricerca.

Con questo post imparerete a personalizzare lo stile dell'elenco delle etichette.
 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.





 Dopo aver fatto una copia di backup del template si clicca su Modello > Modifica HTML > e con Ctrl+f cerchiamo rapidamente la seguente linea:  ]]></b:skin>.
Proprio appena sopra di essa incolliamo il codice riportato qui sotto: 
.Label a {
   padding-left:5px;
   background: #000; /*  Colore di sfondo singola etichetta */
   padding:0 5px;
   color: #fff !important; /* Colore del testo */
  border-radius: 10px;
   -moz-border-radius: 10px;
   height: 20px; /* Altezza della riga */
   line-height: 20px; /* Spazio interlinea */
   text-transform: uppercase; /* Trasforma tutte le lettere in maiuscole */
   text-decoration: none;
   border: none !important;
   -webkit-transition: all .2s ease-in-out !important; 10px 10px;
   float: left;
   margin-left: 3px; /* Margine sinistro */
   margin-top: 3px; /* Margine superiore */
   font-size: 12px; /* Misura del font */}

.Label a:hover {
   color: #000 !important; /* Colore testo al passaggio del mouse */
   font-weight: bold; /* Grassetto */
   background: #ff4; /* Colore sfondo al passaggio del mouse */}

Questo è il risultato:
I codice 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.
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. 

Nessun commento :

Posta un commento

Related Posts Plugin for WordPress, Blogger...