Gadget Libellés [Horizontal pack custom]

La catégorie Développements doit faire l'objet d'une révision. Le contenu de cette page n'est peut-être plus à jour.

!!! RAPPEL !!! Seuls les partenaires de Blogger-Code-PE disposent d'une licence spécifique sur notre propriété intellectuelle. Si vous n'êtes pas partenaire, vous n'êtes pas autorisé à recopier, à reproduire ou à traduire le contenu de ce blog sur un support public (blog, site web, forum, livre, e-book, etc...), ce qui inclut, sauf mention contraire, les textes, les codes, les listes des données, les illustrations, les syntaxes, les tableaux, etc... La violation de ces règles est passible de poursuites judiciaires. Conditions d'utilisation du blog.

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).