Gadget Libellés : Horizontal pack custom

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.

Comparaison du gadget, versions web et mobile, avant et après customisation

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 panneau de configuration du gadget Libellés

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 ?
Redirection
Paramètre max-results 20 articles ?
Affichage du gadget ?
Appareils

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: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: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

Spotlight

L'Éditeur XML de Thème Blogger : Quand le BackEnd Rencontre le FrontEnd

Populaires cette semaine

Ajouter des boutons à la barre de partage Blogger