Gadget Libellés V1 : Custom vertical pack

Transformer la traditionnelle liste à puces en une liste déroulante ou en une liste numérotée. Paramétrer des réglages de quantité, choisir le nombre de résultats à afficher, etc...
Ce développement reprend, sans détérioration, toutes les fonctions basiques du gadget Libellés destiné à un emplacement vertical (colonne).
Choix de conditions d'affichage,
Activation possible pour la version mobile personnalisée.
etc...
Compatible uniquement avec les Thèmes Version 1 et 2.

Présentation du développement

Ce développement customise le gadget original "Libellés" de Blogger.
Il permet de remplacer la traditionnelle liste à puces par une liste déroulante ou numérotée. Dans le panneau de configuration du gadget, vous aurez toujours la possibilité de basculer vers un affichage mode "nuage".

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

Les autres réglages du panneau de configuration restent inchangés. L'ordre de tri et la sélection manuelle de libellés ne seront pas affectés, sauf si vous êtes trop restrictif avec les réglages dans le générateur. Donc, prudence et restez logique dans vos choix. :)

Le gadget est destiné à un emplacement vertical (Colonne). Pour obtenir un gadget adapté pour un emplacement horizontal comme pour le gadget "pages", rendez-vous sur cette publication : Gadget Libellés [Horizontal pack custom].

Notes de mise à jour

• Découpage du gadget en plusieurs inclusions (avril 2014).
• Ajout des filtres via les opérateurs Lambda (mai 2016).
• Correction pour les libellés contenant des caractères spéciaux (mai 2016).
• Déplacement des conditions d'affichage dans la balise <b:widget> (mars 2018).
• Remplacement des anciens booléens par les booléans du dictionnaire view (mars 2018).
• Reconstruction de l'url des libellés dans une inclusion unique (mars 2018).
• Affichage du titre <h2> uniquement si la liste n'est pas déroulante (mars 2018).
• Correction de l'attribut selected dans la liste déroulante lorsque le libellé courant n'existe pas (mars 2018).
• Titre alternatif dans la liste déroulante si le gadget ne contient pas de titre (mars 2018).
• Filtres Lambda regroupés et déplacés dans l'inclusion principale (mars 2018).

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	Choix du type de liste Liste déroulante Liste à puces (Réglage Blogger) Liste numérotée ? Libellés avec plus de 0 article ? Nbre max. de libellés Tous ?
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='Label602' locked='false' mobile='no' title='Libellés' type='Label'>
  <b:includable id='main'>
<!-- Labels Gadget (Custom vertical pack) - XML version for Blogger blogs
     Layouts Version : 1 / 2
     Gadget Version : 1
     Update : March 2018
     Author: Soraya Lambrechts
     Ref.: http://goo.gl/yP0h1Z -->
    <b:with value='true' var='isCustomList'>
      <b:if cond='data:title and not data:isCustomList'><h2><data:title/></h2></b:if>
      <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
        <b:with value='data:labels' var='labels'>
          <b:include expr:name='data:isCustomList ? "listcustom" : data:display'/>
          <b:include name='quickedit'/>
        </b:with>
      </div>
    </b:with>
  </b:includable>
  <b:includable id='labelUrl'>
    <b:attr expr:value='(data:blog.searchUrl params { label: data:label.name }).escaped' expr:name='data:isHref ? "href" : "value"'/>
  </b:includable>
  <b:includable id='list'>
    <b:tag expr:name='true ? "ul" : "ol"'>
      <b:loop values='data:labels' var='label'>
        <b:with value='data:view.search.label.escaped == data:label.name' var='isCurrent'>
          <li>
            <b:tag expr:name='data:isCurrent ? "span" : "a"' expr:dir='data:blog.languageDirection'>
              <b:include cond='not data:isCurrent' data='{ isHref: true }' name='labelUrl'/>
              <data:label.name/>
            </b:tag>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:with>
      </b:loop>
    </b:tag>
  </b:includable>
  <b:includable id='listcustom'>
    <select onchange='var bc=this.selectedIndex; this.selectedIndex=0; window.location=this.options[bc].value'>
      <option disabled='disabled'>
        <b:attr cond='data:labels none (l => data:view.search.label.escaped == l.name)' value='selected' name='selected'/>
        <b:eval expr='data:title ?: data:messages.labels'/>
      </option>
      <b:loop values='data:labels' var='label'>
        <b:with value='data:view.search.label.escaped == data:label.name' var='isCurrent'>
          <option>
            <b:attr cond='data:isCurrent' value='selected' name='selected'/>
            <b:attr cond='data:isCurrent' value='disabled' name='disabled'/>
            <b:include cond='not data:isCurrent' data='{ isHref: false }' name='labelUrl'/>
            <data:label.name/> <b:if cond='data:showFreqNumbers'>(<data:label.count/>)</b:if>
          </option>
        </b:with>
      </b:loop>
    </select>
  </b:includable>
  <b:includable id='cloud'>
    <b:loop values='data:labels' var='label'>
      <b:with value='data:view.search.label.escaped == data:label.name' var='isCurrent'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:tag expr:name='data:isCurrent ? "span" : "a"' expr:dir='data:blog.languageDirection'>
            <b:include cond='not data:isCurrent' data='{ isHref: true }' name='labelUrl'/>
            <data:label.name/>
          </b:tag>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:with>
    </b:loop>
  </b:includable>
</b:widget>

Où recopier ce code ?
Le code doit être ajouté dans l'éditeur XML du thème :

• Tableau de bord
• Théme
• Modifier le code HTML

Recopiez le code au-dessus de :

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

Lorsque le thème sera enregistré, le gadget sera positionné juste au-dessus du gadget des articles. Pour le déplacer dans une autre colonne, rendez-vous dans le volet "Mise en page".

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

Customiser les gadgets Blogger

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