Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Ajouter une nouvelle zone de gadgets sur Blogger

Dans ce nouveau tutoriel, je vais vous expliquer comment ajouter une nouvelle zone de gadgets sur votre blog !

Ajouter une nouvelle zone de gadgets sur Blogger

Si vous avez lu mon tutoriel sur la page d'accueil statique, vous allez reconnaître le code pour créer cette zone de gadgets. En effet, nous avons créé une zone de gadgets pour créer la page d'accueil statique.

Dans ce tutoriel, je vais vous expliquer comment créer n'importe qu'elle zone de gadget, et vous donner les emplacements clés de votre thème pour l'ajouter où vous le souhaitez ;)

Sommaire

  1. Faire une sauvegarde de son blog
  2. Les codes pour créer les zones de gadgets
    1. Zone de gadgets avec 1 seule colonne
    2. Zone de gadgets avec 2 colonnes
    3. Zone de gadgets avec 3 colonnes
  3. Où coller les codes des nouvelles zones ?
    1. Avant l'en-tête du blog
    2. Après l'en-tête du blog
    3. Après la zone du menu (entre le menu et le corps du blog)
    4. Avant le flux d'articles
    5. Après le flux d'articles
    6. Avant le pied de page
    7. Après le pied de page
  4. Exemple : Ajout d'une zone de gadgets entre le menu et le corps du blog
  5. Rectifier l'espacement autour de la nouvelle zone de gadgets

Faire une sauvegarde de son blog

Vous connaissez la chanson, comme d'habitude faites une sauvegarde de votre thème avant d'y apporter une modification ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Ajouter une nouvelle zone de gadgets sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Les codes pour créer les zones de gadgets

Maintenant que vous avez bien fait une sauvegarde de votre thème, nous allons pouvoir entrer dans le vif du sujet : les codes !

Je vous propose 3 styles de zones de gadgets :
  • Avec 1 seule colonne
  • Avec 2 colonnes
  • Avec 3 colonnes

Dans un premier temps je vais vous donner les codes, puis vous expliquer comment les utiliser ;)

Zone de gadgets avec 1 seule colonne

<b:section id='nouvelle-zone' name='Zone de Gadgets' showaddelement='yes'></b:section>

Zone de gadgets avec 2 colonnes

<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-2-colonnes'>
  <tbody>
    <tr>
      <td class='first columns-cell'>
        <b:section id='colonne-gauche' showaddelement='yes' name='Colonne de Gauche'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-droite' showaddelement='yes' name='Colonne de Droite'>
        </b:section>
      </td>
    </tr>
  </tbody>
</table>

Zone de gadgets avec 3 colonnes

<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-3-colonnes'>
  <tbody>
    <tr>
      <td class='first columns-cell'>
        <b:section id='colonne-gauche' showaddelement='yes' name='Colonne de Gauche'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-centre' showaddelement='yes' name='Colonne du Centre'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-droite' showaddelement='yes' name='Colonne de Droite'>
        </b:section>
      </td>
    </tr>
  </tbody>
</table>

Où coller les codes des nouvelles zones ?

Bon, maintenant que nous avons les codes, où faut-il les coller dans notre thème ? Et bien cela va dépendre de l'emplacement souhaité !

Imaginez votre blog comme un ensemble de blocs. Chaque bloc porte un nom plus ou moins unique pour pouvoir le retrouver et le différencier des autres. Il faut donc trouver le nom du bloc après (ou avant) lequel vous souhaitez ajouter la nouvelle zone de gadgets.

Ajouter une nouvelle zone de gadgets sur Blogger

Ci-dessous quelques indications pour les thèmes Blogger Simple.

Pour chercher un code, allez dans Modèle à partir de votre tableau de bord Blogger, puis cliquez sur Modifier le code HTML. Cliquez n'importe où à l'intérieur de la boîte de code, puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac).

Un champ de recherche doit apparaître en haut à droite à l'intérieur de la boîte de code. S'il apparaît en haut de la page web, recommencez en cliquant bien à l'intérieur de la boîte de code avant de faire Ctrl + F.

Dans la boîte de recherche collez un des codes donnés ci-dessous, et appuyez sur Entrer.

Avant l'en-tête du blog

Ajouter une nouvelle zone de gadgets sur Blogger

Le code qui détermine le début de l'en-tête du blog est :
<header>
Si vous voulez ajouter une zone de gadgets avant l'en-tête, alors collez le code de la zone de votre choix AVANT la ligne ci-dessus.

Après l'en-tête du blog

Ajouter une nouvelle zone de gadgets sur Blogger

Le code qui détermine la fin de l'en-tête du blog est :
</header>
Pour ajouter une zone de gadgets après l'en-tête, collez le code de la zone de votre choix APRES la ligne ci-dessus.

Après la zone du menu (entre le menu et le corps du blog)

Ajouter une nouvelle zone de gadgets sur Blogger

Pour ajouter une zone de gadgets entre le menu et le corps du blog, collez le code de la zone de votre choix AVANT la ligne :
<div class='main-outer'>

Avant le flux d'articles

Ajouter une nouvelle zone de gadgets sur Blogger

Pour ajouter une zone de gadgets avant le flux d'articles, mais sans que cette zone s'étende au-dessus de la barre latérale, collez le code de la zone de votre choix APRES la ligne :
<div class='column-center-inner'>

Après le flux d'articles

Ajouter une nouvelle zone de gadgets sur Blogger

Pour ajouter une zone de gadgets après le flux d'articles, mais sans que cette zone s'étende en-dessous de la barre latérale, repérez les codes suivants de votre thème :
<div class='column-right-outer'>
Au-dessus de cette ligne vous trouverez :
</div>
</div>
Comme ceci:
</div>
</div>

<div class='column-right-outer'>
Collez le code de la zone de votre choix APRES le premier </div> :
</div>
<! -- Collez le code de la zone de votre choix ICI -->
</div>

<div class='column-right-outer'>

Avant le pied de page

Ajouter une nouvelle zone de gadgets sur Blogger

Pour ajouter une zone de gadgets avant le pied de page, collez le code de la zone de votre choix AVANT la ligne suivante :
<footer>

Après le pied de page

Ajouter une nouvelle zone de gadgets sur Blogger


Pour ajouter une zone de gadgets après le pied de page, collez le code de la zone de votre choix APRES la ligne suivante :
</footer>

Voilà pour les codes des principales parties des thèmes Simples sur Blogger.

Attention à bien coller les codes des zones AVANT ou APRES les codes donnés, comme précisé ! Si vous inversez, alors vous n'obtiendrez pas le résultat souhaité ;)

Exemple : Ajout d'une zone de gadgets entre le menu et le corps du blog

Dans cet exemple nous allons ajouter une zone de gadgets sur 3 colonnes entre la zone de menu et le corps du blog

Ajouter une nouvelle zone de gadgets sur Blogger

Le code que nous allons utiliser pour la zone de gadgets sur 3 colonnes est :
<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-3-colonnes'>
  <tbody>
    <tr>
      <td class='first columns-cell'>
        <b:section id='colonne-gauche' showaddelement='yes' name='Colonne de Gauche'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-centre' showaddelement='yes' name='Colonne du Centre'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-droite' showaddelement='yes' name='Colonne de Droite'>
        </b:section>
      </td>
    </tr>
  </tbody>
</table>
Le code à rechercher pour trouver l'emplacement entre le menu et le corps du blog est :
<div class='main-outer'>
Je colle donc le code avant cette ligne :
<table border='0' cellpadding='0' cellspacing='0' class='section-columns zone-3-colonnes'>
  <tbody>
    <tr>
      <td class='first columns-cell'>
        <b:section id='colonne-gauche' name='Colonne de Gauche' showaddelement='yes'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-centre' name='Colonne du Centre' showaddelement='yes'>
        </b:section>
      </td>
      <td class='columns-cell'>
        <b:section id='colonne-droite' name='Colonne de Droite' showaddelement='yes'>
        </b:section>
      </td>
    </tr>
  </tbody>
</table>

<div class='main-outer'>
Comme ceci :

Ajouter une nouvelle zone de gadgets sur Blogger

Sauvegardez votre thème en cliquant sur le bouton Enregistrer le modèle en haut de la page.

Maintenant, si vous allez sur Mise en page à partir de votre tableau de bord, vous trouverez 3 nouvelles zones de gadgets :

Ajouter une nouvelle zone de gadgets sur Blogger

Vous pouvez ajouter les gadgets de votre choix dans ces zones en cliquant sur Ajouter un gadget : Images, listes de liens, un article mis en avant, etc.

Rectifier l'espacement autour de la nouvelle zone de gadgets

Il se peut que vous ayez besoin de rectifier les espaces autour de votre nouvelle zone de gadgets. Pour cela il faut utiliser le code CSS ci-dessous qui va correspondre à votre zone de gadget :

Zone avec 1 seule colonne

/* --- Apparence de la nouvelle zone de gadgets --- */
#nouvelle-zone {
margin-top: 0px;   /* Espace au-dessus de la zone */
margin-bottom: 0px;   /* Espace sous la zone */
margin-left: 0px;   /* Espace à gauche de la zone */
margin-right: 0px;   /* Espace à droite de la zone */
}
Remplacez les valeurs de 0px par celles qui vous plaisent.

Zone avec 2 colonnes

/* --- Apparence de la zone de gadgets à 2 colonnes --- */
table.zone-2-colonnes {
margin-top: 0px;   /* Espace au-dessus de la zone */
margin-bottom: 0px;   /* Espace sous la zone */
margin-left: 0px;   /* Espace à gauche de la zone */
margin-right: 0px;   /* Espace à droite de la zone */
}
Remplacez les valeurs de 0px par celles qui vous plaisent.

Zone avec 3 colonnes

/* --- Apparence de la zone de gadgets à 3 colonnes --- */
table.zone-3-colonnes {
margin-top: 0px;   /* Espace au-dessus de la zone */
margin-bottom: 0px;   /* Espace sous la zone */
margin-left: 0px;   /* Espace à gauche de la zone */
margin-right: 0px;   /* Espace à droite de la zone */
}
Remplacez les valeurs de 0px par celles qui vous plaisent.

Vous pouvez également vous amuser à modifier la couleur de fond du gadget, la bordure, l'espace entre le bord du gadget et le contenu, etc. Vous pouvez vous inspirer de mes précédents tutoriels ;)

Dans un prochain tutoriel je vous expliquerai comment personnaliser n'importe quel gadget de votre blog !

Autres articles

10 commentaires:

  1. Ooh super article ! Merci beaucoup pour tous ces tutos super et vivement le prochain !

    RépondreSupprimer
  2. Bonjour et merci beaucoup pour ce nouveau tutoriel très intéressant :-)

    C'est vraiment sympas de ta part de nous proposer autant d'astuces pour améliorer le design de nos blogs ! Tu expliques toujours très bien. Sans toi, je n'aurais jamais osé toucher au code CSS !

    Malheureusement, ce tutoriel-ci ne fonctionne pas sur mon blog (je ne sais pas pourquoi...)

    Je voudrais ajouter une zone de gadgets avec 3 colonnes sous ma bannière.
    J'ai suivi les différentes étapes que tu as citées ci-dessus, mais lorsque je valide rien ne se passe dans mon tableau de bord... Les nouvelles zones de gadgets ne s'affichent pas.

    Pourtant j'ai essayé cette même technique sur un autre blog "test" et ça a fonctionné du premier coup... Je dois avoir une erreur dans mon code à force d'y toucher...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Une fois les modifications effectuées dans le thème, vas sur Mise en Page. Ensuite recharge la page en appuyant sur F5 (sur PC) pour mettre à jour la mise en page dans le navigateur.
      Si la nouvelle zone de gadgets ne s'affiche toujours pas, vérifie que tu as bien collé le code de la zone de gadgets au bon endroit ou qu'il ne manque pas un morceau de code.

      Supprimer
    2. Bonjour,

      Merci beaucoup d'avoir pris le temps de répondre à mes interrogations. C'est vraiment sympas de ta part. C'est bon, ça fonctionne à présent ! Merci pour ton aide. J'ai même réussi à mettre un effet au survol de la souris, je suis contente du résultat :-)

      Malgré tout, j'ai peut-être bien des erreurs dans mon code CSS et c'est pour cela que je rencontre quelques difficultés de temps en temps. Par exemple, j'ai remarqué qu'il y avait des lignes entières de caractères spéciaux qui s'y étaient mises, alors qu'elles ne devraient pas... Par exemple, au lieu d'avoir la phrase /* Apparence du menu déroulant */ sur mon code il est écrit /* Apparence du menu déroulant */ Enfin, tant que tout fonctionne quand-même ça va, j'espère juste que cela ne posera pas de problème pour la suite ;-) Qu'en penses-tu ?

      Ps : Puis-je me permettre de te proposer une idée de tutoriel pour une prochaine fois ? (même si je me doute bien que ta liste de tutoriels à faire doit être déjà longue) Serait-il possible de nous expliquer comment installer un slider en haut du blog ? Merci d'avance et encore bravo pour ton blog qui est superbe et tes tutoriels qui sont très bien expliqués. A bientôt !

      Supprimer
    3. Bonjour,
      C'est bizarre que des caractères spéciaux apparaissent dans ton code :/ Il semblerait que ce soit à la place de l'accent é. Tant que c'est entre un signe /* et un */ ce n'est pas dérangeant car tout ce qui se trouve entre ces signes est un commentaire et n'est pas lu par le navigateur. C'est simplement un commentaire pour nous, pour que l'on puisse nous retrouver dans le code ;)

      Justement en parlant de slider, je vais bientôt créer un article sur le sujet ;)

      Supprimer
    4. Bonjour,

      Je te remercie pour toutes tes réponses, c'est vraiment gentil de ta part :-)
      Je suis soulagée de savoir que ces caractères spéciaux qui sont apparus dans mon code ne sont pas dérangeants. Et j'ai vraiment hâte de découvrir ton article au sujet du slider !!! MERCI !

      Bon week-end et à très bientôt.

      Supprimer
  3. Bonjour,

    Merci pour tes tutos qui nous permettent de sublimer nos blogs avec des explications toujours simples :)
    Je souhaite faire comme ton exemple (LIFESTYLE / MODE / RECETTES); mettre en avant 3 catégories de mon blog, j'aimerais savoir s'il y a un tuto ou si tu peux nous expliquer comment mettre 3 images et un texte dessus (comme ta photo d'exemple dans l'article) renvoyant aux articles qui correspondent au thème de mes 3 images
    Je ne sais pas si c'est très clair... :)

    Merci d'avance pour ta réponse
    dansleblogdesophie.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Bonne idée, je note l'idée du tutoriel. En plus, ce n'est pas si compliqué que ça en à l'air ;)
      Je le ferai sûrement après le tutoriel pour le diaporama qui arrive très bientôt.

      Supprimer
  4. Bonjour,

    Déjà merci pour ton article. Génial, comme d'habitude. Mais voilà j'ai un petit soucis, c'est que lorsque j'effectue ton tutoriel, l'expression "lire la suite" (qui est une image), de ton autre article "remplacer le lien lire la suite par une image" disparaît. En gros, on voit apparaître mes articles en entier. J'espère que tu pourras m'aider.
    Voici le lien de mon blog si ça peut te servir : https://leblogdelunatia.blogspot.fr/

    Merci d'avance,

    Lunatia.

    RépondreSupprimer
    Réponses
    1. Bonjour Lunatia,
      En collant le code de la nouvelle zone de gadgets tu as dû supprimer une partie du code pour tes articles. Où essaies-tu de coller la nouvelle zone de gadgets ?
      Vérifies bien de ne pas supprimer une partie de code, ou de coller le code de la nouvelle zone au bon endroit ;)

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger