Éditeur XML 2013 : Fonctionnement

Le nouvel éditeur XML de Blogger a débarqué dans votre interface le 10 avril 2013.
Faisons le point sur les nombreuses fonctionnalités qui ont été intégrées.

Remarque :

Cette fiche traite de fonctionnalités intégrées dans l'UI-2010 (à la retraite depuis 2021). Nous attendons les prochaines évolutions de l'UI-2020 pour mettre à jour le contenu.

Boutons des vues

Deux boutons sont regroupés et permettent de basculer d'une vue à une autre.

Capture UI-2010

La vue par défaut qui s'affiche lorsqu'on accède à l'éditeur est la vue du code HTML du modèle. Si vous basculez sur une autre vue, il suffit de cliquer sur le bouton "Modifier le modèle" pour revenir à cette vue.

Capture UI-2010

L'autre vue, permet d'afficher une prévisualisation du blog. Cet affichage tient compte des modifications que vous avez apportées dans le code HTML, même si vous n'avez pas enregistré.

Capture UI-2010

Bouton accéder au gadget

C'est l'une des fonctionnalités que vous utiliserez le plus souvent. Ce bouton permet de pointer directement sur le code du gadget que vous sélectionnez dans la liste.

Capture UI-2010

Les noms des gadgets mentionnés dans la liste, sont en fait, les identifiants des gadgets.

Introduction aux gadgets Blogger

Déploiement des codes et numérotation des lignes

Fini de cocher "Développer les modèles des gadgets". Cette fonctionnalité a disparue.

A la place, apparaît la numérotation des lignes et une fonctionnalité de déploiement.

Les petites flèches ► situées sur la gauche, indiquent que la balise contient du contenu. En cliquant dessus, vous développez le contenu.

Capture UI-2010

Capture UI-2010

Par défaut, les contenus qui ne sont pas déployés, sont les balises <b:skin/> et <b:template-skin/> (habillage CSS), <b:widget/> (Les gadgets) et <b:includable/> (Inclusions des gadgets).

Il est également possible de refermer les autres balises en cliquant sur son numéro de ligne.

Couleurs des codes

Les couleurs représentent des parties spécifiques du code XML.

Couleurs	Éléments
Vert foncé	Balises HTML Standards
Vert clair	Balises HTML spécifiques à Blogger
Bleu foncé	Attributs contenus dans les balises HTML
Bleu clair	Attributs d'expressions Blogger
Marron foncé	Valeurs des attributs
Marron clair	Valeurs des attributs, spécifiques à Blogger
Rouge	Erreur
Brun	Commentaires <!-- -->

Fonction recherche intégrée

Une petite boîte de recherche a été intégrée dans l'éditeur

Pour l'activer, cliquez dans la zone de l'éditeur et ensuite appuyez sur les touches de votre clavier : CTRL + F.
Vous n'avez plus qu'a écrire les occurrences et utiliser CTRL + MAJ + F ou ENTER.

Les codes trouvés se déploieront et seront mis en surbrillance.

Capture UI-2010

Annuler les modifications

Si vous avez effectué des modifications sans avoir sauvegardé, le bouton d'annulation restaurera le code du modèle tel qu'il était à la dernière sauvegarde.

Capture UI-2010

Rétablir les paramètres par défaut des modèles des gadgets

Cette fonctionnalité rétabli le contenu original des gadgets. C'est en quelque sorte, un rafraîchissement qui permet à Blogger de vous envoyer les dernières mises à jour.

Capture UI-2010

La grande nouveauté provient du fait, qu'il est désormais possible de rétablir le contenu par défaut, gadget par gadget.

Capture UI-2010

Avant de rétablir un gadget, assurez-vous d'avoir effectué une sauvegarde de votre thème.

• UI-2020
• Thème
• Menu Personnaliser
• Sauvegarder

Notez qu'il est possible de réinitialiser le thème des gadgets, inclusion par inclusion. Pour se faire, repérez le code HTML d'un gadget. Aidez-vous du bouton "Accéder au widget".

Déployez-le ( ► Flèche noire à gauche) pour découvrir une ou plusieurs inclusions.

Capture UI-2010

Supprimez les inclusions que vous voulez rétablir par défaut.

<b:includable id='INCLUDE_ID'></b:includable>

Capture UI-2010

Enregistrez votre thème. Quittez et revenez dans l'éditeur.

En recherchant à nouveau votre gadget, vous constaterez que les inclusions que vous avez supprimées sont réapparues et réinitialisées.

A noter que si vous voulez supprimer une inclusion que vous n'utilisez pas ou qui n'est pas raccordée, vous ne devez pas la supprimer, mais la refermée :

<b:includable id='feedLinks' var='post'></b:includable>

<b:includable id='feedLinks' var='post'/>

Mettre en forme le thème

Ce bouton permet d'aligner le balisage.

Capture UI-2010

Par exemple, vous avez écrit un code de cette manière :

<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a></span>

En mettant en forme, vous obtiendrez :

<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
    <span itemprop='name'>
      <data:post.author/>
    </span>
  </a>
</span>

Ajouter / Supprimer des gadgets

Dans le code XML, vous pouvez ajouter manuellement des gadgets dans les <b:section>...</b:section>

Si vous connaissez l'identifiant et le type du gadget, vous pouvez l'ajouter comme suit :

<b:widget id='LinkList1' locked='false' title='Titre du gadget' type='LinkList'/>

A l'enregistrement, Blogger se chargera de généré le contenu du gadget.

Pour le supprimer, vous faites l'opération inverse.

<b:widget id='LinkList1' locked='false' title='Titre du gadget' type='LinkList'></b:widget>

b:skin - Où sont les CSS ?

Les CSS que vous avez ajoutés sont toujours là.

Déployez la balise <b:skin></b:skin>.

Dans cette balise, vous retrouverez les définitions des variables CSS et les CSS.

Construire un nouveau thème dans l'éditeur

Vous voulez construire un thème Blogger à partir d'une feuille blanche ?
Vous avez déjà une bonne maîtrise en HTML et CSS ? C'est un bon départ.
Vous comprenez le langage XML de Blogger ? C'est parfait.
Vous êtes donc prêt à vous lancer ce nouveau défi.
Le code ci-dessous est le minimum requis pour débuter l'écriture d'un nouveau modèle.

Le doctype, ainsi que les balises habituelles <html>, <head> et <body> sont requises, comme pour la structure d'une page web standard.

Du côté des balises XML Blogger, les balises de mises en pages sont obligatoires :

• <b:skin>

  La balise d'habillage qui renferme les définitions des variables ou/et les fichiers CSS.
  La balise doit être contenue dans <head/>.
  La balise <style/> ne doit pas être mentionnée.

• <b:section/>

  Zone déterminant un groupe de gadgets.
  Il faut au minimum, 1 balise b:section qui autorise l'ajout de gadgets (paramètre : showaddelement='yes').
  La balise doit être contenu dans <body/>.

• <b:widget/>

  Balise gadget.
  1 gadget, de préférence celui qui contient les articles : Blog1.
  Les <b:widget/> doivent être contenu dans une <b:section/>.

Code XML Minimum

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <!-- DÉBUT DE L'ENTÊTE -->

    <!-- EMPLACEMENT 1 : BALISES META, LINKS, FICHIERS JS, ETC -->

    <b:skin><![CDATA[

      /* EMPLACEMENT CSS */

    ]]></b:skin>

    <!-- EMPLACEMENT 2 : BALISES META, LINKS, FICHIERS JS, ETC -->

    <!-- FIN DE L'ENTÊTE -->
  </head>
  <body>
    <!-- DÉBUT STRUCTURE HTML -->

    <!-- AU MOINS 1 B:SECTION & 1 B:WIDGET REQUIS -->
    <b:section class='main' id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>
    </b:section>

    <!-- FIN STRUCTURE HTML -->
  </body>
</html>

Gérer son blog

• Les membres d'un blog
• Syndication
• Confidentialité et contenu pour adultes
• Outils de sauvegarde et suppression du blog
• Les identifiants de contenu Blogger
• Les statistiques Blogger
• Langue et horodatage
• Le profil Blogger
• La liste de lecture
• Analytics et Search Console
• L'outil de conception de thèmes
• L'éditeur XML

Retourner à l'introduction