ThéorieFonctionnalitésÉditeurs

Éditeur HTML 2013 : Fonctionnement


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Fonctions éditeur HTML
Le nouvel éditeur HTML de Blogger a débarqué dans votre interface le 10 avril dernier.
Faisons le point sur les nombreuses fonctionnalités qui ont été intégrées.

Boutons des vues

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


Boutons des vues


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.


Accéder au code HTML


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é.


Prévisualisation


Haut de page


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.


Accéder aux gadgets


Les noms des gadgets mentionnés dans la liste, sont en fait, les identifiants des gadgets. Pour en savoir plus, je vous renvoie sur cette fiche : Composition d'un gadget Blogger. A consulter en particulier, le paragraphe : Identifiants et types des gadgets.


Haut de page


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èchessituées sur la gauche, indiquent que la balise contient du contenu. En cliquant dessus, vous développez le contenu.


Déployer un gadget


Résultat du déploiement du gadget


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.


Haut de page


Couleurs des codes

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

Couleurs Éléments
Vert foncéBalises HTML Standards
Vert clairBalises HTML spécifiques à Blogger
Bleu foncéAttributs contenus dans les balises HTML
Bleu clairAttributs spécifiques à Blogger contenus dans les balises HTML
Marron foncéValeurs des attributs
Marron clairValeurs des attributs, spécifiques à Blogger
RougeErreur
BrunCommentaires <!-- -->


Haut de page


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.


Rechercher dans le code du modèle


Haut de page


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.


Annuler les modifications


Haut de page


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.


Restaurer les codes des gadgets originaux


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


Restaurer les codes des gadgets originaux


A noter aussi que désormais, lorsque vous sélectionnez un nouveau modèle, le contenu des gadgets ne sont plus rétablis par défaut.


Haut de page


Mettre en forme le modèle

Ce bouton permet d'aligner le balisage.


Mettre en forme le code HTML


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>


Haut de page


Ajouter / Supprimer des gadgets

Dans le code HTML, 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>


Haut de page


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.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire