Widget delle Etichette Popolari per Blogger.

Come installare il gadget delle Etichette più popolari cioè di quelle che sono presenti nel maggior numero di articoli con un layout originale.

Dopo aver illustrato come installare il gadget della Nuvola di Etichette passo a presentare un gadget sicuramente originale che ho denominato delle Etichette Popolari.  Ci sono etichette che sono presenti solo in pochi post mentre altre di articoli che le contengono ne possono avere decine se non centinaia. L'obiettivo di questo post è quello di mostrare solo le Etichette più presenti in un layout particolare che mostra anche il numero di articoli di ciascuna.

Questo widget l'ho visto nel blog vietnamita DuyPham che spesso ha idee davvero geniali. Come per tutte le personalizzazioni che coinvolgono il modello bisogna preventivamente salvare il template andando su Modello > Backup/Ripristino > Scarica modello completo. È stato scelto di visualizzare le 5 etichette con più post ma questo numero potrà essere modificato a piacere. L'aspetto del widget inserito in una sidebar potrà essere modificato anche nei colori e sarà simile al seguente

con il numero di articoli relativi a ciascuna categoria. Si va su Modello > Modifica HTML e si clicca sulla freccetta nera accanto alla sezione b:skin intorno alla 14-esima riga. Tramite Ctrl+F si cerca nel codice ]]></b:skin> e, subito sopra, si incolla questo nuovo CSS

/***** Etichette Popolari *****/
.Label ul{margin:0!important;padding:0!important;list-style-type:none!important}
.Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important}
.Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none}
.Label ul li a:hover{color:#fff!important;text-decoration:none}
.Label ul li a:hover:after{background:#ff4e47}
.Label ul li a:before{content:&#39;&#39;;position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent}
.Label ul li a:after{content:&#39;&#39;;position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px}
.Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}

Si salva il modello. Successivamente si va su Layout > Aggiungi un gadget > Base > Etichette



Nella finestra che si apre si configura il widget in questo modo



scegliendo il titolo a piacere ma selezionando le opzioni Tutte le etichette, ordinate per frequenza, visualizzate in elenco e che mostrino il numero di post per etichetta. Si va su Salva per terminare quindi si torna su Modello > Modifica HTML e si cerca il blocco di codice seguente

<b:loop values='data:labels' var='label'>
  <li>
    <b:if cond='data:blog.url == data:label.url'>
      <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
      <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
      <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
  </li>
</b:loop>

che dovrà essere cancellato e sostituito con quest'altro

<b:loop index='i' values='data:labels' var='label'>
  <b:if cond='data:i &lt; 5'>
    <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li>
  </b:if>
</b:loop>

dove il numero 5 indica il numero di etichette da mostrare.



Si salva il modello.

Quando si passa con il mouse sopra al widget si vedrà il puntino bianco diventare rosso. In fase di personalizzazione ulteriore consiglio di provare a modificare solo i codici dei colori.