Gadget Libellés : Horizontal pack custom

Ajouter des options supplémentaires au gadget Libellés et l'adapter exclusivement pour un affichage horizontal.
Ce développement est prévu uniquement pour un affichage des libellés en onglets, comme le gadget Pages. Il reprend une grande partie des fonctions basiques du gadget Libellés.
Vous aurez le choix entre diverses options supplémentaires comme appliquer des conditions d'affichage, autoriser l'affichage dans la version mobile personnalisée, créer des critères de sélection des libellés, etc...

Présentation du développement

Ce développement customise le gadget original "Libellés" de Blogger.
Il s'adapte automatiquement en onglets (dans la version web) et en liste déroulante (dans la version mobile personnalisée) lorsque celui-ci est positionné en-dessous de l'entête.

Si votre blog contient un nombre élevé de libellés, le générateur ci-dessous vous offre des options pour limiter la quantité de 2 manières.

1. Soit, en limitant le nombre total de libellés à afficher.
2. Soit, en sélectionnant automatiquement les libellés qui ont un certain nombre d'articles

Le développement n'ayant pas été prévu pour être affiché en liste verticale, le réglage du type d'affichage dans le panneau de configuration du gadget est indisponible.
Quant aux autres réglages, l'affichage du nombre d'articles, l'ordre de tri et la sélection manuelle de libellés ne seront pas affectés, sauf si vous êtes trop restrictif dans les réglages du générateur. Donc, prudence et restez logique dans vos choix. :)

Le développement convient à tous les modèles issus de la bibliothèque officielle de Blogger (sauf les modèles dynamiques).
Pour les modèles personnalisés, cette configuration html est requise :

Configuration HTML

<div class='tabs-inner'>
  <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

    <!-- WIDGET CODE HERE -->

  </b:section>
</div>

Le gadget est destiné à un emplacement horizontal (Onglets). Pour obtenir un gadget adapté pour un emplacement vertical (liste), rendez-vous sur cette publication : Gadget Libellés [Vertical pack custom].

Installation du gadget

Choisissez d'abord les paramètres. Les codes ci-dessous varieront en fonction de vos choix.

Paramètres du gadget	N° Identifiant ? Titre
Contenu	Lien vers "Accueil" ? Quantité de libellés Sans restriction Libellés avec plus de X articles Les X premiers libellés ? Libellés avec plus de 1 article ? Nbre max. de libellés 5 libellés ?
Redirection	Paramètre max-results 20 articles ?
Affichage du gadget ?	Articles Pages autonomes Index Archive Pages 404 Uniquement à la page d'accueil Appareils Uniquement la version web Uniquement la version mobile personnalisée Version web + Version mobile personnalisée

Le code du gadget

<b:widget id='Label601' locked='false' mobile='no' title='Libellés' type='Label'>
  <b:includable id='main'>
<!-- Gadget Labels (Horizontal pack custom) - Blogger Config.
     Ref.: http://goo.gl/24SmfV -->
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <b:include expr:name='data:blog.isMobile ? &quot;horizontalMobile&quot; : &quot;horizontalWeb&quot;'/>
    <b:include name='quickedit'/>
  </b:includable>
  <b:includable id='horizontalWeb'>
    <div class='widget-content list-label-widget-content'>
      <ul>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <li class='selected'><a expr:href='data:blog.homepageUrl'>Home</a></li>
          <b:else/>
          <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        </b:if>
        <b:loop index='labelCount' values='data:labels' var='label'>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <li class='selected'><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'><small dir='ltr'>(<data:label.count/>)</small></b:if></a></li>
            <b:else/>
            <li><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><b:if cond='data:showFreqNumbers'><small dir='ltr'>(<data:label.count/>)</small></b:if></a></li>
          </b:if>
        </b:loop>
      </ul>
    </div>
  </b:includable>
  <b:includable id='horizontalMobile'>
    <div class='PageList'>
      <div class='widget-content'>
        <select onchange='var bc=this.selectedIndex; this.selectedIndex=0; window.location=this.options[bc].value'>
          <b:if cond='data:blog.searchLabel'>
            <option disabled=''><data:title/></option>
            <b:else/>
            <option disabled='' selected=''><data:title/></option>
          </b:if>
          <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <option disabled='' selected=''>Accueil</option>
            <b:else/>
            <option expr:value='data:blog.homepageUrl'>Accueil</option>
          </b:if>
          <b:loop index='labelCount' values='data:labels' var='label'>
              <b:if cond='data:blog.searchLabel == data:label.name'>
                <option disabled='' selected=''>
                  <data:label.name/>
                  <b:if cond='data:showFreqNumbers'><span dir='ltr'>(<data:label.count/>)</span></b:if>
                </option>
                <b:else/>
                <option expr:value='data:label.url'>
                  <data:label.name/>
                  <b:if cond='data:showFreqNumbers'><span dir='ltr'>(<data:label.count/>)</span></b:if>
                </option>
              </b:if>
          </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      </div>
    </div>
  </b:includable>
</b:widget>

Où recopier ce code ?

Le code doit être ajouté dans l'éditeur HTML du modèle :

• Tableau de bord
• Modèle
• Modifier le code HTML

Recopiez le code au-dessus de :

<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

Lorsque le modèle sera enregistré, le gadget sera positionné juste au-dessus du gadget des articles.
Pour que le gadget s'adapte correctement en onglets, rendez-vous dans le volet "Mise en page".

• Tableau de bord
• Mise en page
• Glisser/Déposer gadget "Libellés"

Glissez/déposez le gadget sous l'entête (à l'emplacement réservé habituellement au gadget Pages).

Customiser les gadgets Blogger

• Articles recommandés
• Gadget Inscription personnalisé
• Gadget Libellés - Horizontal Custom pack
• Gadget Libellés - Vertical Custom pack