La balise de section / The section tag : <b:section>

Blogger - La balise de section <b:section>

La balise <b:section> est un composant fondamental dans la structure des thèmes Blogger. Elle permet de définir des sections spécifiques du blog qui contiennent divers gadgets, facilitant ainsi une organisation modulaire du contenu.

La Syntaxe

XML

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>

</b:section>

Chaque balise <b:section> doit être positionnée dans la structure XML du thème, spécifiquement entre les balises <body></body>.
Une balise <b:section> ne peut contenir que des balises <b:widget>.
Les balises <b:section> ne doivent jamais être imbriquées les unes dans les autres.
Le thème doit contenir au moins une balise <b:section>, dont l'une doit impérativement avoir l'attribut preferred='true' pour indiquer la section principale.

Les Attributs

La balise <b:section> accepte plusieurs attributs qui définissent son comportement. Certains attributs sont obligatoires tandis que d'autres sont optionnels, offrant une grande flexibilité pour la configuration.

<b:section ads='TRUE|FALSE'
           class='CLASS_NAME'
           cond='TRUE|FALSE'
           growth='vertical|horizontal'
           id='SECTION_ID'
           maxwidgets='NUMBER'
           name='SECTION_NAME'
           preferred='YES|NO|TRUE|FALSE'
           showaddelement='YES|NO|TRUE|FALSE'
           tag='TAG_NAME'>

</b:section>

Attributs	Description	Classification	Préfixe `expr:`	Implémentation
`ads`	AdSense Spécifie si la section est réservée exclusivement aux annonces AdSense. Valeur : `true` ou `false`.	HTML classic	Interdit	Facultative
`id`	Identifiant Identifiant unique de la section, nécessaire pour la différenciation et la manipulation du DOM..	HTML classic	Interdit	Obligatoire
`class`	Classe Classe CSS utilisée pour styliser la section, facilitant la personnalisation par le biais des feuilles de style..	HTML classic	Interdit	Facultative
`name`	Nom de la section Affiché dans la mise en page. Si non spécifié, la valeur de l'attribut `id` est utilisé par défaut.	HTML classic	Autorisé	Facultative
`maxwidgets`	Limite de gadgets Le nombre maximum de gadgets que peut contenir la section. Lorsque le nombre maximum de gadgets est atteint, le bouton « Ajouter un gadget » (défini par l'attribut `showaddelement`), n'est plus disponible pour cette section dans la mise en page.	HTML classic	Interdit	Facultative
`preferred`	Section préférée Indique si la section est considérée comme la principale. Valeur : `yes` ou `no`.	HTML classic	Interdit	Facultative
`showaddelement`	Ajouter un gadget Affiche le bouton « Ajouter un gadget » tant que le nombre de gadgets n'a pas atteint la limite définie par l'attribut `maxwidgets`. Valeur : `yes` (par défaut) ou `no`.	HTML classic	Interdit	Facultative
`cond`	Condition d'exécution de la section La valeur attendue doit être boolean (`true` ou `false`). Elle peut être une valeur explicite, une donnée universelle ou une expression Blogger.	XHTML Blogger	Autorisé	Facultative
`tag`	Balise Spécifie le type de balise HTML qui remplacera la `<div>` par défaut dans le rendu final (`header`, `nav`, `article`, `aside`, `footer`, etc.).	HTML classic	Autorisé	Facultative
`growth`	Alignement du contenu Attribut abandonné. Indique l'alignement des gadgets dans la mise en page. Valeur : `vertical` (par défaut) ou `horizontal`.	HTML classic	Autorisé	Facultative

Rendu HTML de la Balise

Lors de l'interprétation du fichier XML, les balises <b:section> sont converties en HTML pour le rendu final du blog et de la mise en page. Voici les principales modifications qui surviennent :

La balise <b:section> est convertie en une balise <div> (si l'attribut tag n'a pas été mentionné).
La balise générée inclut les attributs class, id et name s'ils sont spécifiés dans le fichier XML.
L'attribut class de la balise inclut automatiquement la valeur section.
Si la section ne contient aucun gadget visible, la classe no-items est également ajoutée à l'attribut class.

XHTML Blogger

<b:section class='header' cond='data:view.isHomepage' growth='horizontal' id='header'  maxwidgets='1' name='Entête' showaddelement='yes' tag='header'>

</b:section>

Rendu HTML du blog

<header class='header section' id='header' name='Entête'>

</header>

Rendu HTML de l'UI (Mise en page)

<div class="header section" growth="horizontal" id="header" maxwidgets="1" name="Entête" showaddelement="yes">

</div>

Personnaliser l'affichage des sections dans l'UI

L'affichage des sections dans l'UI peut être stylisé en ajoutant des déclarations CSS dans la balise <b:template-skin> du fichier XML. Les cibles à déclarer doivent commencer par html body#layout.

Exemple de CSS

<b:template-skin>
  <![CDATA[
    /* Section */
    html body#layout div.section {
        background-color: red;
        border: 5px solid darkgray;
        border-radius: 25px;
    }
    /* Title section */
    html body#layout div.section h4 {
        color: #fff;
    }
    /* Add widget div */
    html body#layout .add_widget {
        border: 5px dotted darkorange;
        border-radius: 25px;
    }
    /* Add widget icon */
    html body#layout .add-icon {
        transform: rotate(-5deg);
        filter: sepia(100%);
        background-size: 32px;
    }
    /* Add widget link */
    html body#layout .add_widget a {
        color: orange;
        text-transform: uppercase;
        font-weight: bold;
    }
  ]]>
</b:template-skin>

La balise de section / The section tag : `<b:section>`

La Syntaxe

Les Attributs

Rendu HTML de la Balise

Personnaliser l'affichage des sections dans l'UI

Spotlight

La balise TITLE sur Blogger

Populaires cette semaine

Introduction : Les gadgets Blogger

Flux - Protocole des données Blogger

Ajouter des boutons à la barre de partage Blogger