La balise de gadget / The gadget tag : <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>

Les autres balises

• <b:attr>
• <b:class>
• <b:comment>
• <b:defaultmarkups>
<b:defaultmarkup>
• <b:eval>
• <b:if>
<b:elseif>
<b:else>
• <b:includable>
<b:include>
• <b:loop>
• <b:message>
<b:param>
• <b:section>
• <b:skin>
<b:template-skin>
• <b:switch>
<b:case>
<b:default>
• <b:tag>
• <b:template-script>
• <b:widget>
• <b:widget-settings>
<b:widget-setting>
• <b:with>
• <data:foo>
• <![CDATA[]]>

Retourner à l'introduction