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

33 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
  5. Bonjour Catherine,

    j'ai suivi ton tuto, mais cela ne fonctionne pas sur mon blog. Je crois que j'ai trop bidouillé le code CSS, surtout avec l'histoire de la barre de menu fixe. La zonne de gadgets s'insère correctement lorsque je la place en bas du blog par exemple, ou bien juste au-dessus du flux de mes articles, dans la colonne de droite, mais impossible de la faire apparaître sous ce fameux "main-outer".
    Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cela devrait pourtant marcher. Vérifies bien que tu ne supprimes pas un morceau de code par inadvertance, ou que tu n'oublies pas un morceau de code quand tu colle le code de la nouvelle zone.

      Supprimer
  6. Bonjour, je souhaite savoir si il y a possibilité d'agrandir la zone de texte de sorte qu'elle fasse toute la page ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour cela il faut placer la nouvelle zone de gadgets en dehors du contenant de la zone des articles du blog. Comme tu as déjà ton en-tête, ton pied de page et ton menu à 100%, place-le sous ton menu, ou alors au-dessus de ton pied de page.

      Supprimer
  7. Bonjour,
    je viens de rajouter une nouvelle zone de gadget en pied de page de mon blog, mais je n'arrive pas à centrer mes gadgets ainsi que les titres .
    Peux tu m'aider stp
    Mon blog: http://lescapricesdestelle.blogspot.com
    Merci beaucoup ton site m'aide beaucoup a faire évoluer mon blog

    RépondreSupprimer
    Réponses
    1. Bonjour Estelle,
      Pour centrer par défaut le contenu de tes gadgets dans cette nouvelle zone ajoutes :

      .zone-3-colonnes .widget {
      text-align: center;
      }

      Avant la ligne :

      ]]></b:skin>

      Ensuite pour centrer ta liste de liens dans ton gadgets Archives ajoutes :

      #BlogArchive1 ul {
      text-align: center;
      }
      #BlogArchive1 li {
      padding-left: 0 !important;
      }
      #BlogArchive1 .toggle {
      display: none;
      }

      Toujours avant la ligne :

      ]]></b:skin>

      Supprimer
  8. Bonjour Catherine,

    Merci pour tous ces derniers tutos qui m'ont bien fait progresser : codes conditionnels, page d'accueil, création de nouvelles zones de gadgets. Mon projet avance bien maintenant : https://chasseur2valeurs.blogspot.fr/

    La contrepartie est que cela impacte de plus en plus l'affichage mobile ou même sur PC, lorsqu'on redimensionne la fenêtre de navigateur. Déjà, il faut penser à rajouter le mobile='yes' pour tous les gadgets. Mais ensuite, ce n'est plus vraiment responsive. J'ai bien essayé de bidouiller de-ci de-là, avec des ressources sur internet, comme jouer avec les block, inline, em, rem mais je n'obtiens pas le résultat souhaité...

    Bref, comme tu nous as habitués à de vraies solutions délivrées de façon très pédagogique, pourrais-tu prévoir d'aborder cette question d'une façon générale avec des cas pratiques ?

    Je t'en remercie infiniment, par avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Yann,
      Oui le responsive peut être un casse-tête. Mais je vois que tu t'en est bien sorti. Il reste à définir un petit détail. Par défaut une largeur minimale du blog est défini sur Blogger. Il faut modifier cette largeur pour 100%.

      Retrouve la ligne suivante :

      body {

      Tu en trouveras 4 mais c'est le dernier qui nous intéresse. Il comprend une ligne qui commence par :

      min-width:

      Remplace la valeur après min-width par 100% comme ceci :

      body {
      min-width: 100%;
      }

      Ensuite, il faut modifier le code CSS qui se trouve juste après celui-ci et qui commence par :

      .content-outer, .content-fauxcolumn-outer, .region-inner (

      De la même manière remplace toutes les valeurs de ce code par 100% comme ceci :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 100%;
      max-width: 100%;
      _width: 100%;
      }

      Et voilà ;)

      Supprimer
    2. Petite remarque, si tu souhaites que la barre latérale du blog se déplace sous la partie centrale à partir d'une certaine largeur d'écran ou de fenêtre, alors ajoutes ce code :

      @media screen and (max-width: 960px) {
      .main-inner .columns {
      padding-left: 0px;
      padding-right: 0;
      }

      .main-inner .column-right-outer {
      width: 310px;
      margin-right: 0;
      clear: both;
      display: block;
      margin: 0 auto;
      float: none;
      }
      }

      Avant la ligne :

      ]]>

      Qui se trouve juste avant la ligne suivante :

      </b:template-skin>

      Tu peux modifier 960px pour la largeur d'écran (ou de fenêtre) de ton choix.

      Supprimer
    3. Merci encore de tes excellentes suggestions et en particulier cette dernière qui me paraît bien adaptée à ce que je souhaite.

      Si tu trouves que je m'en suis pas trop mal sorti, c'est surtout que j'ai abandonné l'idée de la zone à 2 colonnes pour laquelle je ne parvenais pas à placer les 2 gadgets "formulaire d'inscription" et "bouton pour continuer sur le site", côte-à-côte, avec la même hauteur. Tant pis, je suis revenu à un empilement de 3 zones à une seule colonne, ce qui semble plus facile à gérer qu'un élément 'table'.

      Merci encore pour ta disponibilité et patience face à ma précédente avalanche de questions !!!

      Supprimer
  9. Bonjour Catherine!

    Tout d'abord, merci pour la qualité de vos tutoriels qui permettent à des novices comme moi, de s'en sortir.

    Je souhaitais vous demander comment faire pour que mes articles soient listés du plus ancien au plus récent, en une seule colonne, et accolés à l'article

    Je souhaiterais afficher les 4 articles les plus récents, répartis sur 2 colonnes, la 1ère afficherait l'article le plus récent sur tout l'espace alloué, tandis que la 2ème colonne afficherait les 3 autres. Je n'y arrive pas, je ne sais absolument pas comment faire..

    Merci pour votre aide. Bonne journée.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai par erreur supprimé ton 2e commentaire ^^'
      Je pensais l'avoir publié mais je ne le trouves pas... Il semblait que tu disais avoir trouvé la réponse à ta question ?

      Supprimer
    2. Autant pour moi... Je viens de le retrouver. Je vais de ce pas le lire ;)

      Supprimer
  10. Merci beaucoup pour tous tes tutos clair et bien détaillés. Moi qui ne suis pas du tout adepte de tout cela et qui suis très novice, j'arrive non seulement à suivre et faire tes tutos mais en plus j'embellis et organise mon blog comme je veux!
    Bref, je voulais savoir où on doit inclure les code CSS pour modifier l'espacement de la nouvelle zone de gadgets?

    RépondreSupprimer
  11. Tout d'abord, j'aimerais te remercier du fond du cœur parce que je n'ose même pas imaginer ce à quoi ressemblerait mon blog si je n'avais pas pu utiliser tes précieux conseils. On s'accordera tous pour dire que tout est très clair et complet !
    Cependant j'ai trois questions :
    Premièrement, comptes-tu sortir un tuto sur le widget de présentation?
    Secondement (je suis vraiment désolée je ne retrouve plus l'article) pour les boutons CSS, je n'ai pas trouvé le code complet pour le bouton Instagram, mais seulement pour le logo (il n'y a donc pas de lien)...
    Enfin, de manière générale, vers quoi mènent les liens Instagram? Je n'ai jamais vu qu'il fallait entrer l'URL de sa page dans les codes...
    Merci infiniment de ton attention !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai déjà écrit un tutoriel pour créer un gadget d'introduction ici si c'est ce que tu cherches.
      Tu peux retrouver la liste de mes tutoriels classés par type sur cette page ;)

      Pour les boutons CSS, parles-tu de ce tutoriel ? Si oui, ici tu créé un lien vers ta page Instagram il faut donc ajouter le lien vers ta page qui se présente comme ceci :

      https://www.instagram.com/tonnominstagram/

      Avec ton nom d'utilisateur à la place de tonnominstagram.

      Si tu parles des boutons de partage en bas des articles, il n'existe pas de lien de partage d'article sur Instagram car on ne peut pas partager un article sur cette plateforme ;)

      Supprimer
  12. Bonjour!
    Je voudrais mettre en place le diaporama sur mon blog, j'ai suivi ton tutoriel mais je n'arrive pas à mettre une nouvelle zone de gadget, la balise /b:section à la fin du code s'enlève, et un / s'ajoute avant la fin:



    J'ai donc lu ce tutoriel, et comme c'est le même principe, ça ne marche pas non plus...
    Aurais-tu une solution? voici mon blog si ça peut servir : unelunepascommelesautres.blogspot.com

    PS: je vais supprimer la mise en page en grille actuelle pour la remplacer par le diaporama.

    RépondreSupprimer
  13. Re-boujour!
    Je suis désolée du précédent commentaire, je viens de m'aperçevoir que ma zone de gadget fonctionne bel et bien! elle était seulement cachée dans mon tableau de bord par une autre zone de gadget ^^' heureusement en travaillant dans "personnaliser" j'ai pu le remarquer.
    Encore désolée!

    RépondreSupprimer
  14. Bonjour,

    Je voulais savoir si c'était possible de créer une zone de gadget "à 100% de la page".
    Je m'explique, j'ai mis un diaporama qui n'est qu'au centre du site, et je voulais ajouter une zone de gadget à gauche de ce diaporama et ce jusqu'au pied de page du blog :

    https://cuisinetpatisserie.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement ce n'est pas encore possible de définir une hauteur à 100% de son contenant. Peut-être avec les prochaines générations de CSS, mais actuellement ce n'est pas possible, désolée :/

      Supprimer
  15. Bonjour, merci pour ces tutos qui sont très formateurs et aident beaucoup. J'ai créé mon blog voyage avant mon départ, et tes tutos mon permis de faire un mise en page sympa. Cependant, je n'arrive vrm pas a rajouter une nouvelle zone de gadget. J'ai tout essayer: toutes les colonnes, à tout emplacement que tu donnes. J'ai vrm suivi tes explications à la lettre. Mais rien n'y fait, ça ne me fait rien. J'ai bien actualisé à chaque fois mes pages, mais rien... J'ai le thème contempo. J'ai même copié collé le code HTML du blog sur un bloc note pour les modifications, et ça ne fonctionne pas. A force d'essayer, j'ai l'impression que ça ne s'enregistre pas du tout. J'ai noté les lignes correspondantes aux endroits où je voulais ajouter le code, mais les chiffres changent à chaque fois ...
    mon blog c'est https://parenthesevoyage.blogspot.fr/
    As-tu une idée d'oû le pb pourrait venir ?
    Merci de ton aide !
    Bonne journée !

    RépondreSupprimer
  16. Bonjour, j'aime beaucoup tes tutos! ça m'aide vraiment mais pas tous les tutos généralement je ne trouve pas les lignes de code correpondantes au "div class main outer" ou au "div class column center inner" du coup je ne peux pas faire les modifications que je veux ! tu peux m'aider stp ?

    RépondreSupprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

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

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger