La balise de gadget / The gadget tag : <b:widget>

Blogger - La balise de gadget <b:widget>

La balise Blogger <b:widget> est un élément de mise en page, qui ne peut être contenu que dans une balise <b:section>. Cette balise renferme le code xml du gadget.

La Syntaxe

XML
<b:widget cond='true' id='Header1' locked='false' title='Blogger Code (Header)' type='Header'>

</b:widget>
  • La balise <b:widget> est insérée à l'intérieur d'une balise <b:section>, représentant un gadget particulier dans une section spécifique du blog.

  • Elle peut contenir des balises <b:includable> et <b:widget-settings> afin de définir les parties modulaires et les paramètres de configuration du widget.

  • Les balises <b:widget> ne doivent jamais être imbriquées les unes dans les autres.

Les Attributs

La balise <b:widget> accepte plusieurs attributs permettant de définir son comportement, dont certains sont requis, tandis que d'autres sont facultatifs.

<b:widget id='WIDGET_ID'
          cond='TRUE|FALSE'
          locked='TRUE|FALSE'
          version='1|2'
          title='WIDGET_TITLE'
          type='WIDGET_TYPE'>

</b:widget>
Attributs Description Classification Préfixe « expr: » Implantation
id

Identifiant du gadget

La valeur est composé du type de gadget suivi d'un numéro compris entre 1 et 999

Consultez l'introduction aux gadgets pour connaître le type de chaque gadget.

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Obligatoire
title

Le titre du gadget

Définissable via le panneau de configuration. Cet attribut est obligatoire, mais sa valeur peut être laissée vide.

Longueur maximale autorisée : 100 caractères.

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Obligatoire
type

Le type du gadget

Consultez l'introduction aux gadgets pour connaître les types disponibles.

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Obligatoire
mobile

Affichage Mobile

Définit l'affichage du gadget dans la vue mobile personnalisée :

  • yes : Le gadget s'affiche dans les versions mobile et web.

  • no : Le gadget s'affiche uniquement dans la version web.

  • only : Le gadget s'affiche uniquement dans la version mobile.

⚠️ Actif uniquement pour les gadgets de version 1.

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Facultative
locked

Verrouillage du gadget

Lorsqu'un gadget est verrouillé, l'utilisateur ne peut ni le supprimer ni le déplacer.

Cet attribut accepte également les valeurs yes ou no, équivalentes respectivement à true ou false.

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Facultative
cond

Condition d'exécution du gadget

La valeur attendue doit être boolean (true ou false).

Elle peut être une valeur explicite, une donnée universelle (ou issue du widget) ou une expression Blogger.

Classification : XHTML Blogger Préfixe « expr: » : Autorisé Implantation : Facultative
visible

Visibilité du gadget

true ou false.

Réglage permettant de rendre le gadget actif.

Si vrai, le gadget sera répertorié dans le dictionnaire universel data:widgets (Thèmes Version 3 et Gadget Version 2)

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Facultative
version

Numéro de version du gadget

Valeur 1 ou 2.

La valeur est définie automatiquement lors de l'intégration du gadget et dépend de la version du thème.

⚠️ Cet attribut peut ne pas apparaître dans le code XML, même si vous l'ajoutez manuellement.

Classification : HTML classic Préfixe « expr: » : Interdit Implantation : Automatique
pageType

Condition d'affichage

Utilisé dans les premiers thèmes pour afficher le widget sur les pages désignées, ce paramètre est aujourd'hui obsolète.

Obsolète Obsolète Obsolète

Rendu HTML de la Balise

Lors de l'analyse du fichier XML, les balises <b:widget> sont transformées en éléments HTML pour le rendu du blog. Voici les principales modifications effectuées :

  • La balise <b:widget> est convertie en une balise <div>.

  • L'attribut id est transféré à la balise <div>.

  • Un attribut class est ajouté à la balise <div>, incluant la valeur widget ainsi que le type du gadget.

  • L'attribut data-version est ajouté pour indiquer la version du gadget.

XHTML Blogger

<b:widget id='Header1' locked='true' title='Blogger Code (Header)' type='Header' version='2'>

</b:widget>

Rendu HTML du blog

<div class='widget Header' id='Header1' data-version='2'>

</div>

Rendu HTML de l'UI

<div class="widget Header locked-widget" data-version="2" id="Header1">
  <div class="widget-wrap1">
    <div class="widget-wrap2">
      <div class="widget-wrap3">
        <div class="widget-content visibility">
          <div class="layout-widget-state visible" title="Visible"></div>
          <div class="layout-title">Blogger Code PE (en-tête)</div>
          <div class="layout-widget-description" title="Titre et description du blog.">Gadget En-tête de la page</div>
          <a class="editlink icon" title="Modifier">Modifier</a>
        </div>
      </div>
    </div>
  </div>
</div>

Personnalisation de l'Affichage des Widgets dans l'UI

L'apparence des widgets dans l'interface de mise en page peut être personnalisée en ajoutant des règles CSS au sein de la balise <b:template-skin> du fichier XML. Les cibles doivent commencer par html body#layout pour que les styles soient appliqués correctement.

Exemple de CSS

<b:template-skin>
  <![CDATA[
    /* Widget */
    html body#layout .widget-content {
      background-color: #555;
    }

    /* Widget verrouillé */
    html body#layout .locked-widget .widget-content {
      background-color: #222;
    }

    /* Titre Widget */
    html body#layout .widget-content .layout-title {
      color: #fff;
    }

    /* Description Widget */
    html body#layout .widget-content .layout-widget-description {
      font-style: italic;
    }
  ]]>
</b:template-skin>

Spotlight

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

Populaires cette semaine

Foire aux questions Blogger (Novembre 2021)

Ajouter des boutons à la barre de partage Blogger