Come creare una impaginazione per le etichette di Blogger.

Come mostrare il widget delle etichette con una impaginazione sopra all'area del post.

Nei blog di Blogger le pagine delle etichette mostrano una serie fino a 20 elementi di post che abbiano quella data etichetta. Alla fine della pagina si può andare sul link Post più vecchi per visualizzare appunto i post meno recenti sempre con quella data etichetta. Le etichette possono essere mostrate tutte in un elenco o anche in una nuvola statica (la nuvola dinamica non funziona in tutti i blog e con tutti i browser perché usa il Flash) oppure possono anche essere selezionate.

Si possono sfogliare le etichette cliccando sui link mostrati nell'omonimo widget. Con questa personalizzazione modificheremo tale gadget in modo da invogliare i lettori a sfogliare tutti i nostri contenuti. In subordine potremo installare anche un secondo gadget delle Etichette. Quando un lettore arriverà sul nostro sito verrà visualizzato sopra all'area del post un link con una scritta del tipo "Inizia il tour tra le etichette". Chi ci cliccherà sopra visualizzerà una serie di numeri ciascuno di questi collegato a una singola etichetta. Cliccandoci sopra verranno visualizzati i post con quella data etichetta il cui nome sarà mostrato come tooltip quando il mouse punterà il numero associato.

Oltre ai numeri associati con il tooltip alle varie etichette ci saranno anche gli strumenti di navigazione per andare alla Ultima Etichetta, alle Etichette Successive, alle Etichette Precedenti e alla Prima Etichetta. Il procedimento di installazione è lo stesso sia che si abbia già un widget delle Etichette e si voglia mantenere, magari nella sidebar o nel footer, sia che non si abbia ancora.

Si va su Layout > Aggiungi un gadget > Base > Etichette quindi si va su Salva.

Sempre su Layout si trascina con il mouse il gadget sopra l'area del post (sezione main) quindi si va in alto su Salva disposizione per applicare il nuovo posizionamento.

Tale widget avrà ID Label1 se si tratta del primo di questo tipo oppure Label2 se fosse il secondo e così via. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca il codice del widget appena installato con Ctrl+F. Si dovrà cliccare sulle freccette nere poste a sinistra per visualizzarlo tutto. Inizierà con la riga <b:widget id='Label... e terminerà con la riga </b:widget>.

Dovremo cancellare tutto questo codice e sostituirlo con il seguente

<b:widget id='Label19' locked='false' title='Inizia il tour tra le etichette' type='Label' version='1' visible='true'>
              <b:includable id='main'>
    <div class='widget-content'>
      <ul>
        <!-- Filtro delle etichette -->
        <b:with value='data:labels where (l =&gt; l.count gt 0)' var='labelsFilter'>
        <!-- Etichette da mostrare -->
        <b:with value='10' var='nbr'>
          <b:loop index='i' values='data:labelsFilter' var='label'>
            <b:if cond='data:i == 0 and (data:labels none (l =&gt; l.name == data:blog.searchLabel) or not data:blog.searchLabel)'>
              <!-- Mostrare la prima etichetta in tutte le pagine escluso quelle filtrate -->
              <li><a expr:href='data:label.url' expr:title='data:title'><data:title/></a></li>
              <b:else/>
              <!-- Inizio Impaginazione -->
              <!-- Prima etichetta e Etichette Precedenti -->
              <b:with value='data:i - 1' var='prev'>
                <b:if cond='data:label.name == data:blog.searchLabel and data:prev gte 0'>
                  <b:if cond='data:prev gte (data:nbr / 2)'>
                    <li><a expr:href='data:labelsFilter[0].url' title='Prima Etichetta'>&amp;laquo;</a></li>
                  </b:if>
                  <li><a expr:href='data:labelsFilter[prev].url' title='Etichette Precedenti'>&amp;lsaquo;</a></li>
                </b:if>
              </b:with>
              <!-- Numerazione Etichette -->
              <b:if cond='data:label.name == data:blog.searchLabel'>
                <b:with value='data:nbr - data:i' var='choice1'>
                <b:with value='data:nbr / 2' var='choice2'>
                <b:with value='data:nbr - ((data:labelsFilter.size - 1) - data:i)' var='choice3'>
                <b:with value='data:i lte (data:nbr / 2) ? data:choice1 : (data:i gte data:labelsFilter.size - 1 - (data:nbr / 2) ? data:choice3 : data:choice2)' var='AtoB'>
                  <b:loop values='data:i - data:AtoB to data:i + data:AtoB' var='labelLimit'>
                    <b:if cond='data:labelLimit gte 0 and data:labelLimit lte data:labelsFilter.size - 1'>
                      <li expr:class='data:labelsFilter[labelLimit].name == data:blog.searchLabel ? &quot;selected&quot; : &quot;&quot;'><a expr:href='data:labelsFilter[labelLimit].url' expr:title='data:labelsFilter[labelLimit].name + &quot;&quot; + (data:showFreqNumbers ? &quot; (&quot; + data:labelsFilter[labelLimit].count + &quot;)&quot; : &quot;&quot;)'><b:eval expr='data:labelLimit + 1'/></a></li>
                    </b:if>
                  </b:loop>
                </b:with>
                </b:with>
                </b:with>
                </b:with>
              </b:if>
              <!-- Ultima etichetta e etichetta successiva -->
              <b:with value='data:i + 1' var='next'>
                <b:if cond='data:label.name == data:blog.searchLabel and data:next gte 0 and data:labelsFilter.size - 1 != data:i'>
                  <li><a expr:href='data:labelsFilter[next].url' title='Etichette Successive'>&amp;rsaquo;</a></li>
                  <b:if cond='data:next lte ((data:labelsFilter.size - 1) - (data:nbr / 2))'>
                    <b:with value='data:labelsFilter.size - 1' var='last'>
                      <li><a expr:href='data:labelsFilter[last].url' title='Ultima etichetta'>&amp;raquo;</a></li>
                    </b:with>
                  </b:if>
                </b:if>
              </b:with>
            </b:if>
          </b:loop>
        </b:with>
        </b:with>
      </ul>
      <b:include name='quickedit'/>
    </div>
    <b:if cond='data:widget.sectionId not in [&quot;crosscol&quot;,&quot;crosscol-overflow&quot;]'>
      <!-- STILE ANCHE IN VERTICALE -->
<style>
#<data:widget.instanceId/> ul, #<data:widget.instanceId/> ul li { margin: 0px; padding: 0px; list-style: none; }
#<data:widget.instanceId/> ul li { display: inline-block; }
#<data:widget.instanceId/> div ul {font-size:14px; font-weight:bold;}
#<data:widget.instanceId/> ul li a { display: inline-block; padding: 10px; }
#<data:widget.instanceId/> ul li a.selected { font-weight: bold; color: #000; }</style>
    </b:if>
  </b:includable>
            </b:widget>

in questo modo

Si salva il modello. Nel codice ho messo come ID Label19 per non avere problemi di sovrapposizione e può essere personalizzata la scritta iniziale colorata di blu. La parte del codice evidenziata di giallo serve per personalizzare il widget nei codici dei colori e nelle dimensioni.

Demo
Clicca qui

Concludo ricordando che tale widget può essere inserito anche verticalmente in una sidebar. 

Fonte | Soraya Lambrechts