Widget delle Etichette multicolore per Blogger.

Come installare un widget delle etichette multicolore su Blogger.

Sulla falsariga del widget dei Post più popolari con effetto multicolore si può realizzare anche un gadget dello stesso tipo per le Etichette di Blogger. Quando si va su Layout > Aggiungi un gadget > Etichette si crea un widget con ID Label1; se poi se ne crea un altro questo avrà ID Label2 e così via. Il gadget che vado a presentare è formato da una serie di rettangoli arrotondati posti in verticale e può quindi essere usato per determinate etichette particolarmente importanti per il nostro sito che poi saranno selezionate in un secondo tempo.

Per prima cosa dobbiamo verificare se abbiamo già il widget delle etichette e quanti ne abbiamo. Si va su Modello > Modifica HTML > Procedi e si clicca su F3 o su Ctrl+F. Nel campo che si apre in alto su Chrome e Internet Explorer o in basso su Firefox incolliamo Label1 per vedere se fosse presente. Se ci fosse già proviamo a cercare Label2. Se ci fosse anche questo andiamo con Label3 e così via.

Poniamo che già Label2 non sia presente nel template. Si cerca allora la riga ]]></b:skin> e, subito sopra, si incolla questo codice di CSS

/* Etichette Colorate */
#Label2 ul li a:hover{color:#ffffff;text-decoration:none}
#Label2 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #191919; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#Label2 ul li:first-child:after,
#Label2 ul li:first-child + li:after,
#Label2 ul li:first-child + li + li:after,
#Label2 ul li:first-child + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li + li + li:after,
#Label2 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#Label2 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#Label2 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#Label2 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#Label2 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Label2 ul li:first-child + li + li + li + li + li:after{content:"6"}
#Label2 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#Label2 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#Label2 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#Label2 ul li:first-child + li + li + li + li:after{content:"5"}
#Label2 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#Label2 ul li:first-child + li + li + li:after{content:"4"}
#Label2 ul li:first-child + li + li{background:#ffde4c;width:90%}
#Label2 ul li:first-child + li + li:after{content:"3"}
#Label2 ul li:first-child + li{background:#ff764c; width:90%}
#Label2 ul li:first-child + li:after{content:"2"}
#Label2 ul li:first-child{background:#ff4c54 ;width:90%}
#Label2 ul li:first-child:after{content:"1"}
#Label2 ul{margin:0;padding:0px 0;list-style-type:none}
#Label2 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Si salva il modello. Se non avessimo ancora inserito il gadget delle Etichette al posto di Label2 dovremmo mettere Label1 come ampiamente illustrato in precedenza. Tutti i codici esadecimali dei colori possono essere personalizzati a piacimento per ottenere un risultato come questo

Con Internet Explorer non saranno visti gli arrotondamenti come invece accade con gli altri browser. Si potranno selezionare fino a un massimo di 9 etichette. Andiamo adesso su Layout > Aggiungi un gadget > Etichette e posizioniamo il widget in una sidebar. Dobbiamo selezionare un massimo di 9 etichette

 

Si mette la spunta su Etichette selezionate quindi si va su Modifica e si scelgono le etichette da mostrare. Si va su Completato quindi su Salva. In Ordinamento si può mettere la flag a Per frequenza invece che In ordine alfabetico per mostrare per prime le etichette più comuni. In basso sarà visibile tra parantesi anche il numero di articoli in cui è presente la data etichetta. Avrà un aspetto ereditato da quello del blog. Tale numero si può anche togliere con questo procedimento. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca Label2 o quello che è e si scorre il codice fino a trovare la riga

<span dir='ltr'>(<data:label.count/>)</span>

L'espressione in rosso rappresenta il numero delle etichette. Si può togliere da solo oppure insieme a tutta la riga. Si possono inserire anche altre espressioni per ottenere questo risultato

Basta sostituire (<data:label.count/>) con il seguente codice

(<b:if cond='data:showFreqNumbers == 0'>
articolo
<b:else/>
<b:if cond='data:label.count == 1'>
1 articolo <b:else/>
<data:label.count/> articoli
</b:if>
</b:if>)

dove al posto di articolo/i possono essere messe altre parole.