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


Après avoir expliqué comment retirer la navbar et la bordure des images sous Blogger, je vais vous parler de la barre de navigation. On va voir ensemble comment créer une barre de navigation, comment la personnaliser et même créer un menu déroulant ! Et pour finir je vous proposerais quelques modèles :)

Bon et bien c'est parti !

Tout d'abord c'est quoi une barre de navigation (ou menu) ? C'est cette partie souvent sous le titre ou le header qui contient les liens vers les différentes parties de votre blog. Elle peut contenir les catégories de vos articles, des liens externes à votre blog, des liens vers des articles, bref, ce que vous voulez. Quelques exemples :


Première partie : Créer sa barre de navigation

Dans ce premier tutoriel, je vous propose de créer une barre de navigation simple avec :
  • Un lien vers la page d'accueil du blog
  • Un lien interne vers un article
  • Une catégorie
  • Un lien externe au blog
  • Un lien pour vous contacter pas e-mail

Créer une Barre de Navigation sous Blogger

Avant de commencer quoique ce soit, sauvegardez votre blog comme expliqué au premier tutoriel !

Ensuite allez sur votre tableau de bord et cliquez sur Mise en Page dans le menu à gauche, puis sur Ajouter un Gadget en dessous de votre titre :

Créer une Barre de Navigation sous Blogger

Une fenêtre s'ouvre devant vous proposant une liste de gadgets. Descendez la liste et sélectionnez HTML/Javascript en cliquant sur le signe + :

Créer une Barre de Navigation sous Blogger

Vous obtenez une fenêtre qui ressemble à celle d'un article en cours de création.
N'écrivez rien dans la partie Titre. C'est dans la partie Contenu que nous allons créer notre barre de navigation.

Maintenant on passe au choses sérieuses... le HTML ! Allez, vous en faites pas ça va aller, c'est pas si compliqué ;)

Commencez par copier ce code :

<!-- début du menu -->

<div id="barre_nav">
<ul>
<li><a title="Titre" href="Lien">Texte du Lien</a></li>
</ul>
</div>

<!-- fin du menu -->
Et collez-le dans la partie Contenu :

Créer une Barre de Navigation sous Blogger

C'est la base de notre menu.

Remarquez cette ligne :

Créer une Barre de Navigation sous Blogger

C'est un lien. A chaque fois que vous voulez ajouter un autre lien il faudra ajouter ce code à la suite du précédant. Nous allons voir par la suite.

Il faut maintenant préciser le Titre, le Lien et le Texte du lien.

Le Texte du lien est le texte qui sera affiché sur la barre de navigation.
Le Lien est l'adresse sur laquelle vous vous rendez quand vous cliquez sur le lien.
Et le Titre correspond généralement au texte du lien mais il n'est pas affiché.

Un lien vers l'accueil de votre blog

Pour un lien vers l'accueil de votre blog il faut copier l'adresse qui se trouve en haut du navigateur quand on se trouve sur la page d'accueil du blog :

Créer une Barre de Navigation sous Blogger

Et on le colle à la place de Lien. On remplace aussi Titre et Texte du Lien. Par exemple :

<li><a title="Accueil" href="http://ladybirdr.blogspot.fr/">Accueil</a></li>
Si vous avez bien suivi, on a remplacé :
  • Texte du lien par Accueil
  • Lien par http://ladybirdr.blogspot.fr/
  • Titre par Accueil

Ce qui donne :


Un lien interne vers un de vos articles

Pour un lien interne vers un de vos articles, il vous faut d'abord trouver l'adresse de votre article. Pour ceci allez sur la page de votre article et copiez le lien en haut de votre navigateur internet.

Collez cette adresse à la place de Lien, puis nommez votre lien en remplaçant Titre et Texte du lien. Par exemple :

<li><a title="Mon Article" href="http://ladybirdr.blogspot.fr/2013/07/tuto-blog-retirer-la-bordure-des-images.html">Mon Article</a></li>
Pour résumer, on a donc remplacé :
  • Texte du lien par Mon Article
  • Lien par http://ladybirdr.blogspot.fr/2013/07/tuto-blog-retirer-la-bordure-des-images.html
  • Titre par Mon Article

Ce qui donne :

Créer une Barre de Navigation sous Blogger

Un lien vers une catégorie, ou libellé

Pour un lien vers une catégorie ou un libellé, il vous faudra le lien vers cette catégorie. Vous pouvez la trouver en bas de votre article. Faites un clique droit sur votre libellé et copiez le lien :

Créer une Barre de Navigation sous Blogger

Collez ce lien à la place de Lien, puis remplacez Titre et Texte de Titre. Par exemple :


Un lien externe à votre blog

De la même manière, pour un lien vers une page web externe à votre blog, il faut vous munir de l'adresse de la page web de destination comme pour le lien vers un de vos articles.

Il vous suffit alors de remplacer Lien par cette adresse, Titre et Texte de Titre par ce que vous voulez. Par exemple, ici j'ai fait un lien vers mon profil Pinterest :

Créer une Barre de Navigation sous Blogger

Un lien pour vous contacter par e-mail

Si vous voulez inclure un lien pour pouvoir vous envoyer un e-mail, nous allons devoir utiliser un code spécifique :

<li><a title="E-mail" href="mailto:votre@email.fr">E-mail</a></li>

A la place de Lien il faut écrire mailto:votre@email.fr, en remplaçant votre@email.fr par votre propre e-mail bien sûr :). N'oubliez pas de changer le Titre et le Texte du Titre.
Ce qui donne :

Créer une Barre de Navigation sous Blogger

Code final

Maintenant que nous avons vu quels codes écrire pour les différents types de lien, il faut les rassembler en un menu. Pour cela il suffit de les écrire à la suite comme ceci :

Créer une Barre de Navigation sous Blogger

Vous pouvez rajouter des liens en rajoutant son code à la suite des autres liens. Il faut simplement qu'il soit entre <ul> et </ul> sinon ça ne marchera pas.

Une fois que vous avez écrit tous vos liens, enregistrez :

Créer une Barre de Navigation sous Blogger

Bravo ! Vous venez de créer votre barre de navigation ! Il ne reste plus qu'à la personnaliser. Je vous expliquerai comment dans la partie 2 ;)

Créer une Barre de Navigation sous Blogger

Autres articles

290 commentaires:

  1. C'est exactement le genre de petit tutoriel qui me fallait, merci ! J'attends avec impatience la partie deux :)

    RépondreSupprimer
  2. Super ! Merci pour ce tuto ! Hâte d'avoir la suite pour la personnaliser ;)

    RépondreSupprimer
  3. J'attends la deuxième partie avec impatience !!

    RépondreSupprimer
  4. HYPER BIEN EXPLIQUE !!! vraiment bravo!! me tarde la suite !!

    RépondreSupprimer
  5. Je suis heureuse d'être enfin tombée sur un tutoriel ACCESSIBLE.
    J'attends la suite avec impatience :3.

    RépondreSupprimer
  6. Franchement ton blog est super & il m'est vraiment utile, encore merci ! :D

    Maintenant grâce à toi j'ai une barre de navigation toute belle & je n'ai plus cet immonde cadre autour de mes photos ♥

    http://loolashanti.blogspot.fr/

    RépondreSupprimer
  7. Super, merci ! C'est exactement ce qu'il me fallait...
    Vivement la suite !

    RépondreSupprimer
  8. La 2e partie ! La 2e partie ! Merci beaucoup, grace à toi, tout s'éclaire ! J'imagine que ce sera expliqué dans la deuxième partie, mais j'en profite pour poser une question : comment mettre un image plutot que du texte ? Par exemple une icone pinterest, plutôt qu'ecrire pinterest ? merci !

    RépondreSupprimer
    Réponses
    1. Pour mettre une image à la place d'un texte, il faut remplacer " Texte du lien " du code :

      <li><a title="Pinterest" href="http://www.pinterest.com/">Texte du lien</a></li>

      par ce code :

      <img src="http://adresse.com/image.jpg">

      http://adresse.com/image.jpg correspond à l'adresse du ton image. Tu peux utiliser des sites comme photobucket ou autre pour mettre ton image sur internet et lui donner un lien.

      Ce qui donne :

      <li><a title="Pinterest" href="http://www.pinterest.com/"><img src="http://adresse.com/image.jpg"></a></li>

      Et voilà ! ;)

      Supprimer
  9. Bonjour,

    Pour ma part j'ai créé une barre de navigation qui reprend mes libellés, en revanche à chaque fois que je clique sur une catégorie lié à un libellé le message suivant s'affiche "Affichage des articles dont le libellé est Homme. Afficher tous les articles" Comment le supprimer ?

    Audrey

    RépondreSupprimer
  10. Bonjour,

    Dans le cadre d'un projet je souhaite optimiser le blog de la boutique d'une amie afin qu'il soit professionnel au maximum.

    J'ai suivi ce tuto pour mettre en place une barre de navigation, cependant lorsque je clique dans les onglets, le messages suivant s'affiche "Affichage des articles dont le libellé est Mangue. Afficher tous les articles" Est-il possible de le supprimer ?

    Merci d'avance

    RépondreSupprimer
  11. Vraiment superbe ton tuto merci beaucoup :)

    RépondreSupprimer
  12. merci beaucoup!!! tuto super! tu me sauves!!!

    RépondreSupprimer
  13. merci beaucoup vraiment super, bonne continuation

    RépondreSupprimer
  14. Un immense merci ! Votre article a débloqué mon blog et c'est vraiment génial !

    RépondreSupprimer
  15. comment mettre plusieurs articles dans une même catégories ?

    RépondreSupprimer
  16. Enfin quelqu'un qui sait expliquer correctement!! Je suis aux anges avec ton tuto je réussie en une soirée ce que j'essaye de faire depuis plus de deux heures avec d'autres tuto!
    Plein de bisous et 1000 merci!
    Cécile! <3!!

    RépondreSupprimer
  17. Comme d'hab S-U-P-E-R tuto ! Juste un petit problème mais c'est ma faute...Enfait quand je clic sur le lien qui doit renvoyer vers une page pour contacter la personne par e-mail on me dit : "Désolé, la page que vous recherchez dans ce blog n'existe pas." Que dois-je faire ?

    RépondreSupprimer
    Réponses
    1. Comme je ne peux pas voir ton code, la seule chose que je peux te conseiller c'est de bien vérifier ce que tu as écrit : vérifie qu'il n'y a pas d'espaces en trop, que l'adresse html est bien la bonne, qu'il y a bien les guillemets autour de l'adresse, etc.
      Un simple oubli, ou une toute petite erreur d'une lettre par exemple, est souvent la cause de ces problèmes. Le plus dur c'est de les trouver !

      Supprimer
  18. Coucou, il y a encore plus simple, à la place de "HTLM/JavaScript", il y a "Page" et on peut mettre les pages du blog ou des liens externes. Sinon, c'est une bonne technique aussi!
    Le problème avec "page", c'est que je crois qu'on ne sais pas mettre de menu déroulant.

    RépondreSupprimer
  19. Hello ! merci pour cet article

    J'aimerais savoir comment faire pour que la barre de navigation soit située tout en haut de la page avant même le logo comme la tienne.

    D'avance merci :)

    http://mademoiselleperrier.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Salut Emilie, je vais bientôt faire un tutoriel sur le sujet ;)

      Supprimer
  20. Merci encore pour toutes des explications ! Tu es la MEILLEURE Cath !!!!
    Grace à toi j'avance dans la personnalisation de mon blog, tout en étant totalement nulle en html !

    Isa.

    RépondreSupprimer
  21. Coucou :)!
    Merci beaucoup pour ces petits Tuto très pratique! Et qui m'ont bien aidé en tant que jeune débutante dans la blogosphère haha. Juste petites questions, Quand on clique sur une des catégorie, un message s'affiche, j'aurais aimé savoir si il était possible de supprimer ou du moins de ne pas le rendre visible? :)
    Et ma deuxième question haha, est ce que tu sais comment modifier la disposition des articles sur Blogger, par exemple, au lieu qu'il soit les uns à la suite des autres, en faire des miniatures (6 sur une page)? Si c'est le cas, ton conseil est le bienvenue!
    Sur ce bonne continuation! Ton blog est génial! :) Bisous!

    RépondreSupprimer
    Réponses
    1. Salut !
      Je note toutes tes bonnes idées sur ma liste de tutoriels à faire ;)

      Supprimer
  22. C'est top ces articles, j'adore, merci beaucoup de prendre le temps d'expliquer, parce que c'est pas évident.

    RépondreSupprimer
  23. Super article ! Mais j'ai juste un petit problème : je n'arrive pas à mettre un lien interne vers 2 articles, je ne sais pas si tu vois ce que je veux dire. Comment je peux faire ?

    RépondreSupprimer
    Réponses
    1. Salut Marie,

      Si tu veux créer un lien vers plusieurs articles sur le même sujet, vers tes articles DIY par exemple, je te conseil d'utiliser les libellés.

      Quand tu créé ton article donne lui un libellé (DIY par exemple) dans le menu sur la droite de la page de création d'article. C'est aussi possible d'en ajouter un à un article existant en cliquant sur modifier l'article. Donne ce même libellé à tous les articles DIY.
      Ensuite donne l'adresse url suivante au lien DIY de ton menu :

      http://autourdemarie.blogspot.fr/search/label/DIY

      Comme ceci :

      <li><a href="http://autourdemarie.blogspot.fr/search/label/DIY" title="DIY">DIY</a></li>

      Maintenant en cliquant sur ce lien, tous les articles associés au libellé DIY seront affiché :)

      J'espère que j'ai bien répondu à ta question ^^

      Supprimer
  24. Hoo Merci pour ce tuto =)
    Simple & Efficace ... Par contre j'ai un petit souci. J'ai mon dernier onglet qui ne prend pas. Le code est bon, aucun espace en trop ou autre. Mais Incliquable!
    Est ce que par hasard tu aurais une idée du pourquoi du comment ?

    Des Bisous Bisous

    RépondreSupprimer
    Réponses
    1. Salut Angie,
      As-tu réglé le problème ? Quand je vais sur ton blog, le dernier lien est bien cliquable et me renvoie vers les articles libellés Actu'Blog :)

      Supprimer
  25. Coucou
    Ha non j'ai rien touché. Le soucis est donc sur mon pc. Bon je suis soulager que cela fonctionne.
    Merci pour l'information ^^
    Bisous

    RépondreSupprimer
  26. Salut, j'ai essayé de faire une barre de navigation, j'ai tout bien fait mais ma barre de navigation s'affiche comme ceci :
    Accueil
    Mon Article
    Email
    tout à la verticale.. Je ne comprend pas? :/

    RépondreSupprimer
    Réponses
    1. Salut Marie,

      Cherches le code commençant par :

      .tabs .widget li, .tabs .widget li {

      Et ajoutes la ligne suivante

      display: inline-block;

      Comme ceci:

      .tabs .widget li, .tabs .widget li {
      display: inline-block;
      }

      :)

      Supprimer
    2. Merci beaucoup, mon problème est réglé pour le texte mais je n'ai pas de "barres" ou tableau entre les mots,
      En tout cas merci beaucoup, et tes articles sont super !
      :)

      Supprimer
    3. Pour ajouter un espace entre les liens cherches le code qui commence par :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {

      Et ajoute la ligne suivante :

      padding: 0 10px;

      Comme ceci :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      padding: 0 10px;
      }

      Tu peux augmenter ou diminuer 10px pour changer l'espace entre les liens :)

      Supprimer
    4. Où faut-il chercher ces codes? merci

      Supprimer
    5. Salut Océane,
      Pour chercher des codes vas dans Modèle à partir de ton tableau de bord puis cliques sur Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Si tu ne le trouves pas passe à l'étape suivante.
      Cliques n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code colles la 1ère ligne du code CSS que tu veux rechercher et appuies sur Entrer pour trouver le code.
      Tout est expliqué dans la 2e partie du tutoriel ici :
      http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
    6. Bonjour,
      J'ai un peu le même souci et je ne trouve pas la ligne ".tabs .widget li, .tabs .widget li {
      " Pourtant j'ai bien déroulé le ...
      Je comprends pas... :-/

      Supprimer
    7. Bonjour Célia,
      As-tu regardé la partie 2 de ce tutoriel qui explique comment modifier l'apparence du menu ? http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Si tu ne trouves pas du tout ce code alors rajoutes-le à la suite des codes CSS après avoir suivi la partie 2 du tutoriel ;)

      Supprimer
    8. Alors oui je suis allée et je ne trouve pas non plus le .tabs dont tu parles dans le tutu n°2. C'est un template acheté, peut-être que le code est différent, est-ce possible ?

      Supprimer
    9. Bonjour Célia, oui c'est sûrement ça le problème. Mais ce n'est pas grave, tu peux utiliser le code du tuto n°2 légèrement modifié. Utilises le code suivant à coller à la suite du code HTML de ton menu (dans le gadget) :

      <style type="text/css">

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      #barre_nav ul li:first-child {
      }

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav ul {
      }

      /* Police et Couleur des Liens */
      #barre_nav li a {
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      #barre_nav li.selected a, #barre_nav li a:hover {
      }

      /* Centrer la Barre de Navigation */
      #barre_nav li, #barre_nav li {
      }

      </style>

      Suis le tutoriel n°2 avec ce nouveau code ;)

      Supprimer
    10. Merci beaucoup pour ta réponse ! Alors le menu actuel est en fait le widget "Pages" donc je dois refaire un widget html ?

      Supprimer
    11. Non pas forcément, mais dans ce cas tu peux simplement utiliser le code CSS que je donne dans le tutoriel n°2, car il devrait s'appliquer aux gadget pages également.

      Supprimer
  27. Bonjour,
    merci du Tito, mais comment faire un menu parmi la barre de navigation qui amène vers plusieurs articles ?

    Comment faire un menu déroulant ?(avec plusieurs sous-menus qui s'affichent) est-ce compliqué ?

    RépondreSupprimer
    Réponses
    1. Salut,
      J'ai fait un article sur les menus déroulants ici : http://ladybirdr.blogspot.com/2014/09/creer-un-menu-deroulant.html
      ;)

      Supprimer
  28. Bonjour et merci pour vos explications accessibles à tous, mais j'aurai une question concernant les menus. Okay on peut tout y mettre, une page statique, qui dirige vers un lien externe, interne, une catégorie aussi etc etc

    Si je ne me trompe pas, et corrigez-moi si c'est le cas...
    On peut rédiger un menu avec votre méthode "ajouter HTML/Javascript". Mais on peut très bien aussi le faire en ajoutant le gadget "pages" qui lui aussi peut contenir des pages des articles catégories que l'on fait cette fois "glisser".?

    Quel est l'avantage de l'un par rapport à l'autre et... pourquoi?
    Si je ne me trompe pas, aussi en modifiant le html du modèle.

    Ma dernière question sera la suivante: Comment intégrer 2 menus, l'un qui sera au-dessus de l'entête et redirigera en partie sur d'autres sites voir "contact" etc... Et un autre au-dessous de l'entête cette fois mais déroulant.

    En fait, pour faire simple, je voudrai 2 menus qui soient identiques niveau design et qui ne puissent pas interférer l'un envers l'autre.

    Dans l'attente, cordialement!

    RépondreSupprimer
    Réponses
    1. Bonjour;

      Oui c'est tout à fait possible de créer un menu avec le gadget pages :)
      Ici je propose une solution mais il en existe, bien sur, d'autres. Par contre il me semble qu'on ne peut pas faire de menu déroulant avec le gadget pages.

      L'avantage d'utiliser la méthode HTML est une plus grande flexibilité, et une plus grande liberté, car on peut vraiment faire ce qu'on veut : on est pas limité au code par défaut du gadget, on le créé nous-même.
      Avec la version HTML on peut, par exemple, intégrer 2 groupes de liens dans le même menu, une partie des liens à gauche et une partie des liens à droite de l'écran, ce qui n'est pas possible avec le gadget pages :)

      Pour tes 2 menus, j'utiliserais 2 codes HTML (mais ça reste mon avis personnel :)), surtout pour le second qui sera déroulant (voici un tutoriel pour créer un menu déroulant : http://ladybirdr.blogspot.fr/2014/09/creer-un-menu-deroulant.html).
      Une fois que tu as créé tes menus déplace les widgets sous ton en-tête. Pour déplacer le 1er menu au-dessus de ton en-tête il faudra déplacer le code du menu directement dans ton thème. J'ai fais un tutoriel qui explique comment faire ici : http://ladybirdr.blogspot.fr/2014/11/deplacer-la-barre-de-navigation-au.html

      Pour que les 2 menus aient la même apparence tu as 2 options :
      - Nommer les menus avec le même nom : on utilisera donc le même code CSS pour définir l'apparence des 2 menus. Dans ce cas la première ligne commençant par "<div" doit être de ce type :

      <!-- début du menu -->

      <div class="barre_nav">
      <ul>
      <li><a title="Titre" href="Lien">Texte du Lien</a></li>
      </ul>
      </div>

      <!-- fin du menu -->

      - Nommer les menus avec un nom différent (barre_nav et nav_barre par exemple) et ajouter les 2 noms à la suite séparés par une virgule dans le code CSS, comme ceci par exemple :

      .barre_nav, .nav_barre {
      }

      En faisant ceci on défini l'apparence pour les 2 menus, mais on est aussi libre d'ajouter des modifications à seulement l'un des 2 en ajoutant des codes CSS commençant par :

      .barre_nav {
      }

      ou

      .nav_barre {
      }

      Pour plus d'informations sur comment modifier l'apparence des menus voici la partie 2 du tutoriel : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html :)

      Supprimer
    2. Bonjour Catherine,

      Comme dit en réponse au commentaire ci dessus, il est possible de créer sa barre avec l'outil gadget. C'est d'ailleurs ce que j'ai fait.
      Mais j'aimerais, tout à gauche de ma barre, y ajouter mon logo avant le premier lien dans ma barre de navigation. Pour ce faire, je ne sais pas vers quel code me tourner puisqu'il y en a pas. Saurais-tu m'aider ? Merci :)

      Supprimer
    3. Bonjour Emy,
      J'ai fait un tutoriel qui explique comment ajouter des images à la barre de navigation ;)
      http://ladybirdr.blogspot.com/2014/10/ajouter-des-images-la-barre-de.html

      Supprimer
    4. Bonjour, pour être plus claire, je n'ai pas su y arriver via le tutoriel justement. Car je n'ai pas créé ma barre d'adresse via le gadget html, mais via le gadget pages. Je ne sais donc pas modifier mon code html car je ne sais pas où il se trouve :/
      Comment faire? merci!

      Supprimer
    5. Ah d'accord, dans ce cas avant la ligne :

      /* Content

      Ajoutes le code suivant :

      .widget.PageList li:first-child:before {
      content: url('http://url-adresse.fr/image.png'); /* Adresse url de l'image */
      position: relative;
      margin-right: 20px; /* Espace à droite de l'image */
      }

      Ceci te permettra d'ajouter une image avant le premier lien de ta barre de navigation ;)

      Supprimer
    6. Pardon, encore moi, mais j'insère cela dans mon code html général? car mon souci c'est justement savoir où insérer ce qu'il faut :/

      Supprimer
    7. Oui vas dans Modèle à partir de ton tableau de bord puis cliques sur Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin>. Si tu ne le trouves pas passes à l'étape suivante.
      Cliques n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code colles :

      /* Content

      Et appuies sur Entrer.

      Juste au-dessus de cette ligne, colles :

      .widget.PageList li:first-child:before {
      content: url('http://url-adresse.fr/image.png'); /* Adresse url de l'image */
      position: relative;
      margin-right: 20px; /* Espace à droite de l'image */
      }

      Remplaces http://url-adresse.fr/image.png par l'adresse url de ton image.
      Augmente la valeur de 20px pour ajouter de l'espace à droite de celle-ci, ou diminue-la pour réduire cet espace :)

      Supprimer
    8. Merci, c'est parfait!! :)
      J'aurais une dernière faveur à te demander, je ne trouve de tuto nulle part pour que ma barre reste fixée au dessus comme actuellement (http://emysphr.blogspot.com) puis, une fois passé ma grosse bannière, elle réapparaisse au dessus avec cette fois l'image du logo en miniature juste à gauche du bouton accueil sur ma barre (genre : xomisse.com). C'est la transition entre les deux que je ne sais pas comment faire, mais ma barre qui défile quand je scroll est déjà activée :) Merci d'avance!

      Supprimer
    9. Bonjour Emy, en fait xo-misse utilise 2 barres de navigation. Une première qui apparaît en haut du blog par défaut, et une 2e qui apparaît quand on descend la page et qui comporte le logo.
      Je pense que c'est un moyen simple d'y arriver. Je te conseil donc de créer une 2e barre de navigation mais cette fois-ci en utilisant mes tutoriels car il faudra apporter quelques modifications au code HTML du menu. Tu pourras plus facilement y ajouter ton logo comme expliqué dans mon tutoriel.
      Une fois que c'est fait il faut ajouter le code suivant :

      #barre_nav {
      display: none;
      }

      Au code CSS de tes menus.
      Ensuite cherche le code suivant :

      <head>

      Juste après cette ligne colle ceci :

      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $undefinedfunctionundefined){
      // Check the initial Poistion of the Sticky Header
      var stickyHeaderTop = $undefined'#barre_nav').offsetundefined).top;

      $undefinedwindow).scrollundefinedfunctionundefined){
      ifundefined $undefinedwindow).scrollTopundefined) > stickyHeaderTop ) {
      $undefined'#barre_nav').cssundefined{position: 'fixed', top: '0px'});
      $undefined'#barre_nav').cssundefined'display', 'block');
      } else {
      $undefined'#barre_nav').cssundefined{position: 'static', top: '0px'});
      $undefined'#barre_nav').cssundefined'display', 'none');
      }
      });
      });
      </script>

      Ça devrait marcher :)

      Supprimer
    10. Bonjour,

      J'ai donc une barre faite par code html général (dans modèle). Celle-ci est flottante, et fixée au dessus.

      J'en ai créé une autre. elle ne s'affiche pas correctement, elle se met au dessus de mes gadgets de manière verticale, et si je met #barre_nav {
      display: none;
      } dans le CSS, elle disparait d'au dessus de mes gadget. Si je la bouge pour la mettre en dessous de mon entête, cela ne change rien.
      J'ai même essaye de l'appelelr "nav_bar" au lieu de "bar_nav" pour ne pas qu'elles se confondent mais rien n'y fait :(

      Que faut-il faire ? désolée je suis perdue!
      Je t'ai d'ailleurs envoyé un mail avec une capture d'écran de mon logo ajouté à ma barre, j'aimerais que le menu soit centré horizontalement et verticalement aussi, sinon comme tu pourras le voir sur la capture, le logo n'est pas aligné avec le menu.

      Merci beaucoup !! :)

      Supprimer
    11. Voilà déjà une erreur de réglée, je n'avais pas cliquer sur le "ajouter un gadget" du dessus mais sur les gadgets du côté. Donc ma nouvelle barre est bien là, au dessus de l'autre qui est transparente et qui descend si je scroll.
      Si j'applique le code "#barre_nav {
      display: none;
      }" que tu as donné dans le CSS, elle ne se voit plus. Si j'applique l'autre code "script", ça ne change rien.

      La nouvelle barre devrait rester figée au dessus, et celle qui est en dessous devrait apparaître une fois passé la bannière. As-tu une solution? :/
      On y est presque! Un grand merci!

      Supprimer
    12. Salut Emilie,
      Je t'ai envoyé un mail :)

      Supprimer
  29. SoFrenchy Time07 février, 2015

    Bonsoir Mélanie.
    Merci pour ce tutoriel mais malgré que tes explications soient claires et précises,j'ai tout de même un problème. Lorsque je clique sur l'une de mes catégories ( hormis " Accueil " et " A propos " ), il s'affiche le message suivant : " Désolé, la page que vous recherchez dans ce blog n'existe pas. ".
    De plus, la page " Me contacter " devrait permettre de m'envoyer un e-mail; hors ce n'est pas le cas. Pourrais-tu m'aider s'il te plait ? Je désespère !

    Merci d'avance. Bonne soirée.

    RépondreSupprimer
    Réponses
    1. Bonjour Sofrenchy time,

      Peux-tu me donner l'adresse de ton blog pour que je puisse voir le problème ?

      Supprimer
    2. SoFrenchy Time10 février, 2015

      Bonsoir Catherine.

      Serait-il possible que je te la transmette d'une autre manière ? Car je l'ai mis en privé et souhaiterais qu'il le reste pour l'instant ( hormis pour que tu puisses le voir ). Aurais-tu une adresse e-mail pour que je puisse te l'envoyer et te donner mon programme pour que tu puisses bien voir comment j'ai fait ?

      Merci de prendre le temps de me répondre. Bonne soirée.

      Supprimer
    3. Oui pas de soucis, tu peux m'envoyer un e-mail en cliquant sur contact dans la barre de navigation, ou sur l'icône enveloppe à côté des icônes Facebook, Pinterest et Instagram dans la barre latérale:)

      Supprimer
    4. SoFrenchy Time13 février, 2015

      Bonsoir Catherine.

      Lorsque je clique sur les icônes que tu m'as indiquées, rien ne s'affiche. Je n'arrive donc pas à t'envoyer d'e-mail. Pourrais-tu me donner ton adresse e-mail par Instagram s'il te plait ? Mon compte est le suivant : http://instagram.com/sofrenchytime/ . Merci d'avance.

      Bonne soirée.

      Supprimer
    5. Voici mon e-mail ce sera plus simple : contact@catherinesurr.fr

      Supprimer
  30. Voici l'exemple pour argumenter ma question http://blogbuster.fr/plateforme-de-blog/transformer-blogger-en-blog-pro.htm#comment-18128

    RépondreSupprimer
  31. Coucou,
    est ce que tu saurais aussi donner le lien pour ajouter une page blogger, par exemple
    pour un "A propos"?
    Merci ;)

    RépondreSupprimer
    Réponses
    1. Bonjour Hello Nonie,

      Pour trouver le lien vers un page Blogger, tu peux soit :
      - Aller sur ta page et copier l'adresse url qui se trouve dans la barre d'adresse de ton navigateur (comme pour le lien vers un article)
      - Aller dans Pages à partir de ton tableau de bord, survoler la page souhaitée, puis faire un clique-droit sur Afficher qui apparaît sous le nom de la page et sélectionner "Copier l'adresse du lien".

      Ensuite colle l'adresse à la place de Lien dans ton code HTML. Et voilà :)

      Supprimer
  32. Vraiment merci beaucoup pour ce tuto!!! Bravo pour ton blog et ton travail!

    RépondreSupprimer
  33. Waw c'est extraordinaire ton travail ! Un très grand merci, c'est vraiment hyper clair et très utile. Quel grand coeur tu as !! ;-)

    RépondreSupprimer
  34. Coucou! Je n'arrive pas à le faire :-( J'ai réessayer et tout vérifier, les espaces etc. Mais rien a faire! Ca ne veut pas s'enregistrer et en bas il y a écrit javascript void 0 (comme je n'y comprend rien...) Que faut-il faire? :-(

    RépondreSupprimer
  35. Ca fait 2 jours que j'essaie sans succès et juste quand je me décide à t'écrire... j'essaie une dernière fois et ça marche! Merci tu as changé ma vie lol! Merci merci!

    RépondreSupprimer
  36. Bonjour,
    Je viens d'arriver chez Blogger et j'aimerais pouvoir insérer dans mon blog un formulaire de contact sécurisé (avec Captcha), comme je l'avais chez mon précédent hébergeur, afin d'éviter d'être envahie par des robots (j'ai déjà donné...). Y a-t-il une ligne à ajouter à ton code ?
    Merci d'avance,

    RépondreSupprimer
    Réponses
    1. Bonjour Patricia,

      Pour ajouter un formulaire de contact avec Captcha il faut créer un formulaire externe à Blogger. Avec Google Docs par exemple, car le formulaire de contact par défaut de Blogger n'en contient pas et on ne peut lui en ajouter un.

      Voici Un tutoriel en Français, en 2 parties, qui explique comment faire :
      Partie 1 : http://mestrucspourblogger.blogspot.fr/2011/11/integrer-un-formulaire-de-contact-12.html
      Partie 2 : http://mestrucspourblogger.blogspot.fr/2011/11/integrer-un-formulaire-de-contact-22.html

      Supprimer
  37. Bonjour,
    Merci pour tes superbes articles, super simple à mettre en place! J'aimerai changer de modèle pour un modèle plus épuré comme le tien, quitte à le customiser par la suite. mais les thèmes "simple" proposées par Bloggeur ne semblent pas top, est il nécessaire de downloader un thème sur un autre site.
    Peux tu nous dire celui que tu utilises?
    Merci d'avance et encore bravo pour ce super travail de partage!
    Camille

    RépondreSupprimer
    Réponses
    1. Bonsoir Camille,
      J'utilise le modèle Simple de Blogger (le tout blanc dans l'aperçu) que j'ai personnalisé :)
      En fait j'utilise toujours celui-là car il est vraiment basique et on peut faire ce qu'on veut avec. Un peu comme une feuille blanche, où l'on peut y dessiner ce qu'on souhaite :)
      Pour les thèmes, ça dépend si tu souhaites personnaliser ton thème toi-même à partir de zéro, ou utiliser quelque chose de plus abouti. Le seul problème avec certains thèmes c'est qu'ils changent beaucoup le code HTML du blog et on a du mal à retrouver les codes de chaque élément que l'on souhaite modifier :/. Heureusement, ils ne sont pas toujours comme ça mais certains le sont et on s'en rend compte une fois le thème installé.

      Supprimer
  38. Bonsoir, tout d'abord merci pour tout ces tutos que j'adore ! & qui m'ont beaucoup aidée ;)
    J'ai un petit soucis, j'ai créer ma barre de menu comme tu l'a expliqué, le problème c'est que le texte reste blanc.. Je les ai bien paramétrés en prune pourtant... Si tu peux m'aider ^^ MErci !

    RépondreSupprimer
    Réponses
    1. Bonsoir Eloïse,

      As-tu réglé le problème ? Car de mon côté les liens sont bien en prune :)

      Supprimer
  39. Bonjour ! Bravo pour l'aide que tu fournis, ta patience et ta gentillesse. J'espère ne pas trop en abuser en te posant le problème suivant :

    J'ai créé un menu via le gadget "Pages" et j'aimerais que lorsque l'on clique sur la rubrique "trend" par exemple, tous les articles en rapport apparaissent automatiquement. Tu vas peut-être me dire d'utiliser le gadget Libellés mais du coup le menu que j'ai créé ne me servira plus à rien puisque le gadget Libellés en lui-même fait apparaître un menu ? D'ailleurs, peut-on personnaliser ce dernier de manière à lui donner la forme d'un menu comme j'ai fait ?

    J'espère que tu me comprends :)

    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Pour ajouter un lien qui renvoi vers un libellé dans le gadget Pages, vas sur ton gadget et sous Pages à afficher cliques sur Ajouter un lien externe. Dans Titre ajoutes le texte du lien à afficher sur le menu et dans Adresse web url colles l'adresse url du libellé :)

      Pour créer un libellé je te conseil le tutoriel suivant : http://ladybirdr.blogspot.fr/2015/02/ajouter-des-libelles-aux-articles.html
      Et dans celui-ci j'explique comment trouver le lien url d'un libellé : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html

      Supprimer
    2. Merci beaucoup c'est super gentil de ta part :)

      Supprimer
  40. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  41. Hey ! Désolée j'abuse mais je t'expose mon second et dernier problème (promis) :

    J'ai suivi ton tuto pour que mon menu soit en haut et descende en même temps que la page. Maintenant, j'aimerais que mon boutons réseaux sociaux apparaissent sous ma bannière, or lorsque je place le gadget sous l'en-tête dans mise en page, les boutons se superposent au titre : http://theoverjoyedirony.blogspot.fr

    Comment y remédier ? Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Trouves le code suivant :

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Et remplaces-le par :

      #PageList1 {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Ça devrait régler le problème :)

      Supprimer
    2. Wow tu es géniale ! :)
      Je te remercie infiniment
      Ton blog est superbe et c'est le plus utile que je connaisse je crois haha
      Bonne continuation

      Supprimer
  42. Enfin en gros les boutons de réseaux sociaux se mettent avec la barre tout en haut alors dans mise en page l'en-tête est bien entre les deux

    RépondreSupprimer
  43. Bonjour, mon blog me "dégoûte" un peu, et j'aimerais vraiment changer ma barre de navigation, mais moi et les codes... ça fait 2, et j'aurais voulu avoir ce genre de barre http://craftiemarie.blogspot.com.es/ mais je n'y comprends rien, pouvez-vous m'aider ? merci beaucoup.

    RépondreSupprimer
    Réponses
    1. Bonjour Anthony,
      Peux-tu me donner le lien vers ton blog pour que je puisse voir ton menu actuel et te donner le code à changer?

      Supprimer
    2. oui bien sûr tenez http://espacepokora.blogspot.fr/

      Supprimer
    3. ah oui et également aussi, comment peut-on insérer une page facebook et un compte twitter dans la colonne droite comme sur ce blog http://craftiemarie.blogspot.com.es/ merci car ça m'intéresserait aussi.

      Supprimer
    4. Vas dans Modèle > Modifier le code HTML. Cliques sur le triangle noir à droite de :

      <b:skin>...</b:skin>

      Clique ensuite n'importe où dans la boîte de code et appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite colles ceci :

      .tabs-inner .widget li a {

      Tu devrais trouver ceci :

      .tabs-inner .widget li a {
      display: inline-block;

      padding: .6em 1em;

      font: $(tabs.font);
      color: $(tabs.text.color);

      border-$startSide: $(tabs.border.width) solid $(content.background.color);
      border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
      }

      Remplaces tout ce code par ceci :

      .tabs-inner .widget li a {
      display: inline-block;
      padding: .6em 1em;
      font: normal normal 24px Cuprum;
      color: #ffffff;
      border: none;
      }

      Cherches ensuite de la même manière :

      .tabs-inner .section:first-child ul {

      Tu devrais trouver :

      .tabs-inner .section:first-child ul {
      margin-top: -$(header.border.size);
      border-top: $(header.border.size) solid $(tabs.border.color);
      border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
      border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
      }

      Remplaces ce code par :

      .tabs-inner .section:first-child ul {
      margin-top: 1px;
      border: none;
      }

      Ensuite, juste en-dessous colle tout ceci :

      .tabs-outer {
      position: relative;
      }

      .tabs-outer:before {
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 80px;
      background: #5D0000;
      top: 0;
      left: -70px;
      z-index: 10;
      }

      .tabs-outer:after {
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 80px;
      background: #5D0000;
      top: 0;
      right: -70px;
      z-index: 10;
      }

      #barre_nav {
      position: relative;
      }

      #barre_nav:before {
      width: 46px;
      height: 44px;
      background-color: rgb(33, 2, 0);
      -ms-transform: rotate(35deg);
      -webkit-transform: rotate(35deg);
      transform: rotate(35deg);
      display: block;
      content: '';
      position: absolute;
      bottom: -17px;
      left: -91px;
      z-index: -10;
      }

      #barre_nav:after {
      width: 46px;
      height: 44px;
      background-color: rgb(33, 2, 0);
      -ms-transform: rotate(-35deg);
      -webkit-transform: rotate(-35deg);
      transform: rotate(-35deg);
      display: block;
      content: '';
      position: absolute;
      bottom: -17px;
      right: -91px;
      z-index: -10;
      }

      Sauvegardes et voilà :)

      Supprimer
    5. Pour facebook et twitter je pense faire des tutoriels qui expliquent comment faire :)

      Supprimer
    6. ah oui quand même mdr, j'espère ne pas me planter :) merciii

      Supprimer
    7. par contre j'ai un petit soucis, je n'arrive pas à changer la couleur des bordures ajoutée :/ vu que je refais la façade, ça fait les 2 opposés bordeaux et les onglets bleu.

      Supprimer
    8. Pour changer la couleur des bords retrouve ces 2 codes :

      .tabs-outer:before {
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 80px;
      background: #5D0000;
      top: 0;
      left: -70px;
      z-index: 10;
      }

      .tabs-outer:after {
      content: '';
      position: absolute;
      display: block;
      height: 100%;
      width: 80px;
      background: #5D0000;
      top: 0;
      right: -70px;
      z-index: 10;
      }

      Et change #5D0000 par le code de la couleur souhaitée pour les 2 codes. Si tu as changé la couleur des onglets dans Modèle > Personnalisé tu pourras retrouver le code de la couleur que tu as utilisé :)

      Supprimer
    9. merci bien, je pense que je vais beaucoup vous contacter lol c'est parfait et bien expliqué !

      Supprimer
    10. mais je ne comprends pas, même l'écriture et la taille on ne peut pas changer, c'est complexe comme truc :O

      Supprimer
    11. Pour changer l'apparence du menu tu peux suivre le tutoriel suivant :
      http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html :)

      Supprimer
  44. Coucou, j'ai fais exactement ce que tu as dit, mais ça m'affiche un menu en liste et non une barre horizontale, c'est surement du au template de mon blog que j'ai changer ! Peux tu m'aider stp ? Voilà le lien de mon blog, il n'y a pas de menu existant pour le moment car j'arrive pas !

    http://mapetiterevue.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. C'est normal il faut suivre la partie 2 du tutoriel pour donner l'apparence horizontale au menu ;)
      Voici la partie 2 : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
  45. Ouah! Article très complet sur le sujet. Merci beaucoup pour le temps accordé.

    RépondreSupprimer
  46. Bonjour,
    Quand je fais ctrl et F pour afficher la barre de recherche dans le code HTLM, elle s'affiche mais ne cherche rien, c'est à dire que si je tape enter pour faire chercher, cela ne fonctionne pas. Savez-vous pourquoi ? Merci

    RépondreSupprimer
    Réponses
    1. Bonjour, as-tu bien cliqué dans le code HTML avant d'appuyer sur Ctrl et F ? Car si tu ne le fais pas, c'est une autre boîte de recherche qui apparaît mais en haut de l'écran et ça ne fonctionne pas toujours avec cette boîte.

      Supprimer
  47. Bonjour,
    Je suis complètement novice et je découvre le blog en même temps que j'essaie d'en créer un.
    Mais tout d'abord merci pour les tutos, il me sont d'une grande efficacité !
    J'ai suivi à la lettre pour faire un menu et un menu déroulant, et tout marche. Mais j'ai un gros problème. Je ne sais pas comment faire quand j'ai une catégorie ou un titre pour pouvoir remplir cette page. Je dois m'y prendre complètement à l'envers!!!
    Faut il d'abord créer des pages, des articles...
    J'ai crée une page, mais quand je mets le lien, les personnes ont accès au texte que j'ai écris et peuvent la modifier. Enfin bref, la page de création.
    Je ne sais pas si je suis assez claire...
    Merci de ton aide

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tout d'abord il faut créer les pages et articles dans un premier temps.
      Quand tu as fini d'écrire un article il faut l'associer à un libellé. Voici un tutoriel qui explique comment faire : http://ladybirdr.blogspot.com/2015/02/ajouter-des-libelles-aux-articles.html
      Une fois que tu as fait tout ça cliques bien sur Publier en haut à droite de l'écran.
      Vas ensuite sur la page d'accueil de ton blog. Ton article devrait apparaître. Fais un clique-droit sur le libellé et sélectionne Copier l'adresse du lien comme expliqué plus haut dans ce tutoriel. Colles cette adresse url à la place du l'adresse url du lien de ta catégorie dans ta barre de navigation comme montré dans le tutoriel :)

      Pour les pages il faut également créer la page en amont et la publier. Une fois que c'est fait vas dans Pages à partir de ton tableau de bord et survol le nom de ta page. Fais un clique-droit sur Afficher qui apparaît en-dessous du nom de la page. C'est ce lien qu'il faut utiliser pour que tes lecteurs puissent lire la page (sans pouvoir la modifier ;)).
      Comme pour les catégories, colles ce lien à la place de l'adresse url du lien dans ta barre de navigation.

      Voilà :)

      Supprimer
    2. Ah super !
      Merci beaucoup pour ton aide. Je n'ai pas encore testé les articles, mais pour les pages c'est ok. Je ne les publiais pas !

      Supprimer
  48. Coucou merci beaucoup pour ces tutoriels ils m aident vraiment beaucoup
    cependant j'ai une petite preoccupation
    je ne sais pas comment ajouter a la barre de navigation l'option "a propos" puisque je n'ai aucun lien sur le blog qui pourrait rapporter a cette page.
    j'espere que je me fais comprendre :)
    tu pourrais m'aider stp
    kittyhid.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Choukie,
      Dans le code HTML de ta barre de navigation ajoutes une nouvelle ligne avant le dernier </ul> :

      <li><a title="A propos" href="LIEN">A propos</a></li>

      Il faut ensuite créer une page A propos. Vas dans Pages à partir de ton tableau de bord et cliques sur Nouvelle page. Une fois que tu as créé ta page cliques sur cliques sur Publier. Tu sera redirigé vers la page de tes pages. Survol le nom de la page que tu viens de créer et fais un clique-droit sur Afficher qui apparaît sous celui-ci. Sélectionne Copier l'adresse du lien. Tu as maintenant copié l'adresse url de cette page.
      Il te suffit ensuite de remplacer LIEN dans le code HTML de ton lien A propos par cette adresse.

      Si tu ne souhaite pas ajouter d'adresse url à un lien de ton menu alors remplace LIEN du code HTML par #
      Et voilà :)

      Supprimer
  49. Encore moi … Pour la dernière fois j'espère …

    Barre de navigation ok, tout semble fonctionner, c'est génial.

    Par contre, la mise en page et la police, les couleurs des titres, etc des pages que j'ai créées (A propos, Blogroll, Contact) ne sont pas les mêmes que ceux de la page Accueil.

    J'ai essayé de changer depuis Modèle, mais rien à faire.

    C'est à s'en arracher les cheveux ;-)

    Merci encore de ton aide oh combien précieuse !

    RépondreSupprimer
    Réponses
    1. Bonjour, je n'arrive plus à accéder à ton blog. Or il faudrait que j'aille dessus pour voir d'où vient le problème :)

      Supprimer
    2. C'est tout bon, j'ai résolu le problème comme une grand (après bidouillages propres en ordre ! ) Comme ça, je ne t'embête pas pour rien :-)

      Supprimer
  50. Alors la merci!!!
    En revanche, il ne veut pas changer la couleur de soulignement des liens! Il est têtu mon Blogger, et comment séparer les catégories par des Slash comme dans le 2 en haut de ton article ?

    RépondreSupprimer
    Réponses
    1. J'ai réusiiiiiiii! HAHA trop douée! Pfiou, fin juste l'histoire du soulignement. Tu sais comment je pourrai ajouter les slash? Et j'ai une petite question sur l'encart avec photo... Je voudrais le centrer un peu, je ne sais pas trop ce que je dois changer pour... :)

      Supprimer
    2. Bonjour Lucie,
      As-tu bien essayé de changé le code couleur de la ligne :

      border-bottom-color: #F07ED2; /* Couleur de la bordure */

      Du code :

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      border-bottom: solid; /* Style de bordure : solide */
      border-bottom-width: 1px; /* Taille de la bordure */
      border-bottom-color: #F07ED2; /* Couleur de la bordure */
      padding-bottom: 6px; /* Espacement de la bordure avec le lien */
      }

      Pour ajouter des slashs entre les liens il suffit de rajouter le signe / ou \ entre les codes HTML des liens.
      Voici un exemple :

      <li><a title="Lien 1" href="http://Lien1.fr/">Lien 1</a></li>/
      <li><a title="Lien 2" href="http://Lien2.fr/">Lien 2</a></li>

      J'ai ajouté le signe / à la fin du Lien 1 pour qu'il apparaisse entre le Lien 1 et le Lien 2 :)

      Supprimer
    3. Merciii, oui c'est bon pour le soulignement! Me manquait une ligne haha ! Mais en revanche les slashs s'ajoutent tous au bout du menu et non pas entre les catégories... :'( Je vais essayer de bidouiller!

      Merci beaucoup!

      Supprimer
    4. Essaye de mettre le signe avant le </li> du premier lien comme ceci :

      <li><a title="Lien 1" href="http://Lien1.fr/">Lien 1</a>/</li>
      <li><a title="Lien 2" href="http://Lien2.fr/">Lien 2</a></li>

      Supprimer
    5. Merci beaucoup. C'est génial! Tu as réussi à me faire coder en HTML. T'es la meilleure.
      Bonne continuation.

      Supprimer
    6. Zut, je voulais te joindre une capture, mais du coup même avant le /li comme tu me l'as conseillé. C'est pas top, est ce queon peut ajuster la taille et l'espacement du slash?

      Ca donne actuellement:
      BONS PLANS /BLABLAS /BEAUTE

      Sauf que les Slash sont pas très proportionnés... :/

      Merci :)

      Supprimer
    7. Pour ajuster la taille et l'espacement, alors au lieu de simplement ajouter / entre tes liens, ajoutes ceci :

      <span>/</span>

      Ce qui donnes :

      <li><a title="Lien 1" href="http://Lien1.fr/">Lien 1</a><span>/</span></li>

      Ensuite, tu peux rajouter du code CSS pour modifier la taille, l'espacement, la couleur, et même la police de ces caractères.
      Pour cela cherches le code :

      /* Content

      Juste au-dessus de cette ligne colles :

      #barre_nav li span {
      margin-left: 5px; /* Espace à gauche du caractère */
      margin-right: 5px; /* Espace à droite du caractère */
      font-size: 16px; /* Taille de la police du caractère */
      }

      Tu peux ajouter d'autres paramètres avant le signe } comme par exemple :

      color: #000000; /* Couleur du caractère */
      font-family: Arial; /* Police du caractère */

      Voilà :)

      Supprimer
  51. Salut, ton tuto est très sympa mais j'ai un souci :
    J'ai des pointillés au-dessus de mes liens (sauf pour "blog") et je n'ai jamais voulu en mettre.

    Voici l'adresse pour te donner une idée : http://www.djoelesmains.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Djoe,
      C'est un problème courant, en fait il faut retrouver le code suivant :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      display: inline;
      float: none;
      }

      Juste avant le signe } colles :

      border-top: none;

      Et voilà :)

      Supprimer
  52. Bonjour! Je suis en train de créer un menu déroulant pour mon blog. J'ai donc créé le menu comme ci dessus, j'ai revérifié les codes plusieurs fois et tou m'a l'air bon sauf que à l'étape suivante je n'ai pas le code: .tabs .widget li, .tabs .widget li {. Je ne comprends pas!!!! Pourrais tu m'aider?!

    RépondreSupprimer
    Réponses
    1. Bonjour, ce n'est pas grave si tu ne le trouves pas, rajoutes-le après le signe } d'un code CSS de ton menu :)

      Supprimer
    2. Bonjour,
      Je ne le trouvais pas non plus, je l'ai ajouté mais ça ne fonctionne pas... Je ne comprends pas...

      Supprimer
  53. bonjour, dsl pour cette question mais comment associer mes articles à une page?
    je me perds depuis ce matin

    RépondreSupprimer
    Réponses
    1. Bonjour, en fait on n'associe pas des articles à une page mais on ajoute un lien au menu qui renvoie vers une recherche de libellés. Comme ça, tous les articles associés à ce libellé vont apparaître en cliquant sur le lien.
      J'ai fait un article expliquant comment ajouter des libellés ici : http://ladybirdr.blogspot.com/2015/02/ajouter-des-libelles-aux-articles.html
      Ensuite pour trouver le lien qui renvoi vers la recherche de libellé il faut suivre l'instruction de ce tutoriel à la partie "Un lien vers une catégorie, ou libellé"
      Si tu veux qu'en cliquant le lien de ton menu on soit renvoyé à un article spécifique, alors il faut suivre l'instruction à la partie "Un lien interne vers un de vos articles"

      Supprimer
  54. Merci pour toutes ces précisions, je me lance

    RépondreSupprimer
  55. Salut, mais le problème, c'est que si je veux créer une page chronique par exemple, je ne peux pas mettre de lien puisque cette page n'existe pas encore. Et c'est ça que je comprend pas ! =(
    Pourrais-tu m'éclairer sil te plait...

    RépondreSupprimer
    Réponses
    1. Bonjour, que veux-tu dire par une page chronique ?

      Supprimer
  56. Salut ton site est super simpas, ça m'a beaucoup aider à comprendre comment marcher mon blog, il y a juste un endroit ou je bloque j'ai fait les titres mais je voudrais mettre plusieurs articles dans un titres comment je doit procéder? ou dois je mettre le liens de mon articles?

    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Si tu souhaites associer plusieurs articles à un lien de ton menu, il faut utiliser les libellés. Ajoutes le même libellé aux articles que tu souhaites associer (http://ladybirdr.blogspot.com/2015/02/ajouter-des-libelles-aux-articles.html), puis ajoutes l'adresse URL qui envoie vers la recherche de ce libellé au code HTML du lien dans ton menu.
      Par exemple pour mon libellé Customiser son Blogger, le code HTML du lien dans mon menu est :

      <li><a href="http://ladybirdr.blogspot.fr/search/label/Customiser%20son%20Blogger" title="Customiser son Blogger">Customiser son Blogger</a></li>

      Pour trouver l'adresse URL tu peux simplement aller à la fin de ton article publié et faire un clique-droit sur le libellé, puis sélectionner Copier l'adresse du lien.

      Supprimer
  57. Bonjour !
    j'ai tout bien fait comme ton article dis de faire il y'a de ça quelques semaines. J'ai voulu redonner un petit coup de pep's à mon blog car je commence juste .. & j'ai voulu créer une page pour mon ''à propos'' sauf que cela à supprimer mes onglets créer avec les libellés de mes articles. J'abandonne la page à propos ou il y a une alternative ? Car j'ai lu qu'en créant une page on ne pouvait pas y glisser des articles. Je suis perdue ...

    RépondreSupprimer
    Réponses
    1. Bonjour Eva,
      Ajouter un onglet vers une page ne devrait pas avoir d'influence sur tes autres onglets.
      Es-tu bien sûre de ne pas avoir remplacé tes onglets avec tes libellés par l'onglet A propos, sans faire exprès ? Ça peut arriver ;)

      Supprimer
    2. ça doi têtre ça ! je te remercie d'avoir pris le temps de répondre. Bonne continuation, très bon travail et des explications de qualité c'est chouette.

      Supprimer
  58. Coucou tout d'abord merci beaucoup pour tes tutos qui sont très bien expliqués !!!
    J'aimerais savoir la procédure exacte pour mettre plusieurs articles dans un seul onglet ?
    J'ai beau mettre le lien de l'article à la suite de l'autre, mais rien n'y fait

    RépondreSupprimer
    Réponses
    1. Bonjour Aud, il faut utiliser des libellés pour associer plusieurs articles à un lien. Ajoutes un même libellé aux articles que tu souhaites associer au lien. Ensuite copies l'adresse URL de la recherche de ce libellé comme expliqué à la partie "Un line vers une catégorie, ou libellé" : http://ladybirdr.blogspot.fr/2014/02/customiser-son-blogger-la-barre-de.html?showComment=1433582019581#LienLibellé
      Colles cette adresse à la place de LIEN dans le code HTML du lien de ton menu, et voilà ;)

      Supprimer
  59. bonjour,
    j'ai un soucis sur mon blog j'ai mis une barre de navigation rammenant au différentes pages, mais j'ai beau essayer de changer la taille ou la police, rien n'y fait ca ne bouge pas. pourriez vous m'aider svp.
    cousu-de-fil-blanc.blogspot.com
    merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Kelly,

      Pour changer l'apparence des liens de ton gadget Pages tu peux te baser sur la partie 2 de ce tutoriel : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
  60. salut, lorsque je valide la barre de menu apparait de façon verticale, comment la rendre horizontale? sinon merci pour ce tuto!

    RépondreSupprimer
    Réponses
    1. Bonjour Fonta, il faut suivre la partie 2 du tutoriel qui permet de modifier l'apparence du menu ;)
      http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
  61. Il est génial ton site, très clair et bien expliqué !
    Merci beaucoup !

    RépondreSupprimer
  62. Bonjour, je suis de retour lol mais vu que j'ai lâché mon blog pendant 4 mois à cause des examens, y'a certaine chose que je n'arrive plus à faire même si vous m'avez déjà répondu mais je ne retrouve plus mon commentaire
    http://espacepokora.blogspot.fr/ voilà en faite je vous savoir tout simplement comment changer la couleur de ma barre de navigation (onglets, plus les extérieurs) merci beaucoup :)

    RépondreSupprimer
    Réponses
    1. Bonjour Anthony,
      Appuie sur Ctrl et F (ou Cmd et F sur Mac) sur cette page, et entre ton nom dans la boîte de recherche qui apparaît. Appuie sur Entrer et tu trouveras tes commentaires ;)

      Supprimer
  63. Merci beaucoup pour ce tuto, il est vraiment très clair !

    RépondreSupprimer
  64. Bonjour,
    J'aimerai créer une deuxième barre de navigation car j'aimerai garder celle actuellement en place en dessous du titre et en faire une deuxième je déplacerai au dessus et qui serai immobile en scrollant vers le bas... Mais du coup etc ce possible puisqu'il n'y a possibilité d'ajouter qu'un code HTLM en dessous du header... ?
    Merci bcp pour tout ces précieux tutos!

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Oui c'est tout à fait possible ! Normalement tu devrais pouvoir ajouter d'autres gadgets HTML sous l'en-tête.
      Il te suffit de créer une 2e barre de navigation dans un 2e gadget HTML/JavaScript, mais de changer son nom dans la première ligne du code de barre_nav à barre_nav2 par exemple :

      <div id="barre_nav">

      Deviendrait

      <div id="barre_nav2">

      Ensuite, il te faudra changer les noms des codes CSS pour cette barre de navigation dans la partie 2 de ce tutoriel par ceux-ci :

      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      #barre_nav2 ul li:first-child {
      }

      /* Fond et Bordure de la Barre de Navigation */
      #barre_nav2 ul {
      }

      /* Police et Couleur des Liens */
      #barre_nav2 li a {
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      #barre_nav2 li a:hover {
      }

      /* Centrer la Barre de Navigation */
      #barre_nav2 li {
      }

      Si tu suis mon tutoriel pour fixer la barre de navigation en haut du blog alors au lieu d'utiliser le code suivant :

      /* Fixer la barre de navigation en haut du blog */

      .tabs-outer {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      .region-inner.tabs-inner {
      padding: 0;
      }

      #crosscol {
      margin: 0;
      }

      Utilise celui-ci :

      /* Fixer la barre de navigation en haut du blog */

      #barre_nav2 {
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      .region-inner.tabs-inner {
      padding: 0;
      }

      #crosscol {
      margin: 0;
      }

      Supprimer
    2. Ok merci beaucoup je vais essayer ça!!!!

      Supprimer
    3. Cela me semple impossible d'ajouter un deuxième gadget sous l'en-tête... si je le met dans le header est ce que ça marche quand même?

      Supprimer
    4. Oui cela marchera quand même car de toute façon il sera fixé en haut du blog ;)

      Supprimer
  65. Bonjour,

    J'ai fait mon code il y a un bon moment, et en voulant ajouter une sous catégorie, j'en ai deux qui ont disparues et je n'arrive vraiment plus à les remettre ... Voici mon code :

    (étrangement il ne veut pas se copier ... )

    Mes pages " Qui suis-je ?" et '' Partenaires '' ne s'affichent plus du tout. C'étaient normalement des pages, ou quand on cliquait sur le lien j'avais juste mon texte, pas d'articles etc ! Juste ma "présentation" !

    Saurais-tu m'aider ? Merci beaucoup !!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as du supprimer ces liens en copiant et en collant le code des menus déroulants dans ton menu car ils ne sont plus dans le code HTML de ton menu.
      Il te suffit de le rajouter à nouveau ;)

      Supprimer
  66. Bonsoir, et tout d'abord, un énorme merci à toi pour tous ces tutos super bien expliqués qui m'ont permis d'améliorer mon blog.

    J'ai créer ma barre de navigation hier, grâce à ton tuto, et grâce à ton autre tutoriel je l'ai placée au dessus du titre de mon blog. Jusque là, aucun soucis. Sauf que j'avais oublié de faire une rubrique "ABOUT" et du coup j'ai voulu retrouver le gadget pour la rajouter. Et c'est là qu'arrive le problème : quand je vais dans mise en page, IMPOSSIBLE de retrouver le gadget de ma barre. Pourtant elle est bien sur mon blog, mais je n'arrive absolument pas à la retrouver pour la modifier.. Je ne sais pas si tu pourras m'aider mais ça ne coute rien d'essayer.;

    En tout cas, de toute façon je te remercie énormément pour tes tutoriels, c'est super!

    Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour Apolline,

      C'est normal que tu ne le trouves pas dans Mise en page, car tu as déplacé le code HTML de ton menu dans le code HTML de ton thème ;)
      Suis les étapes du tutoriel pour trouver l'endroit où tu as collé le code HTML de ton menu et tu le trouveras ;)
      http://ladybirdr.blogspot.fr/2014/11/deplacer-la-barre-de-navigation-au.html

      Supprimer
  67. Salut,

    J'ai fais exactement ce que tu as dis mais tout s'affiche sur le coté à droite à la verticale. Au final ça me fais comme ci que j'avais mis des catégories. Pourrais-tu m'aider ? Merci d'avance ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faut suivre la partie 2 du tutoriel pour définir l'apparence du menu ;)
      http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
  68. Salut Catherine .
    Ton article est super, bien expliqué. Facile à comprendre. Mais moi j'ai un autre soucis.
    Comment insérer des sous-tire au menu ?

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      J'ai fait un tutoriel sur le sujet : http://ladybirdr.blogspot.com/2014/09/creer-un-menu-deroulant.html
      ;)

      Supprimer
  69. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  70. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  71. Merci infiniment pour ton aide ! Mais j'ai un petit problème, un de mes titres est en dessous des autres et je ne sais pas comment arranger ça. Merci d'avance si tu lis mon commentaire.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu m'envoyer le lien vers ton blog pour que je puisse voir le problème ?

      Supprimer
  72. J'ai le même soucis. Voici le lien de mon blog : http://a-glowing-yogini.blogspot.fr/
    Merci d'avance si tu peux m'aider :)

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Il faut suivre la partie 2 du tutoriel pour régler ce problème : http://ladybirdr.blogspot.fr/2014/03/customiser-son-blogger-la-barre-de.html

      Supprimer
  73. Bonjour, vos articles sont geniaux, j'ose vous demander pourquoi je ne peux pas modifier la colonne cross-column 2 (ne figure pas "modifier")
    Autre question : peut on changer l'image principale de son blog, je l'ai fait rapidement et maintenant je voudrais la modifier, si possibilité des modifs affecteront ils mon blog (asso humanitaire) Remerciements.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      S'il n'y a pas de lien Modifier dans Cross-column 2 alors cette zone est bloquée, mais si elle est vide ce n'est pas important.
      Quelle image souhaites-tu changer ? L'image en en-tête de blog avec le titre de blog ? Si oui, il suffit d'aller dans Mise en Page et de cliquer sur Modifier dans le gadget header. Ensuite il faut supprimer l'image existante en cliquant sur Supprimer une image. Tu pourras alors ajouter une nouvelle image de ton ordinateur ou d'une adresse url.

      Supprimer
    2. Ce commentaire a été supprimé par l'auteur.

      Supprimer
    3. Pour centrer ton image d'en-tête dans header ajoute ce code CSS à ton blog :

      #Header1_headerimg {
      margin: 0 auto;
      }

      Et voilà ;)

      Supprimer
  74. Bonjour !
    Je n'arrive pas à comprendre ou écrire le contenu d'une catégorie.. Je voudrais créer une catégorie "FAQ" et une "Blogroll" en haut de mon blog mais ou dois-je écrire l'article sans qu'il soit publier sur mon blog et seulement apparent quand la personne clique sur la catégorie? Je sais pas si je me suis bien faite comprendre mais je travaille sur mon projet de blog depuis un petit mois mtnt pour qu'il soit parfait et cela m'embête de pas réussir à faire cela !
    Idem pour les photos.. meme si je les met toutes en Extra-large, certaines sont plus grosses que d'autres. Je ne comprend pas.
    Comme tes tutos sont super et qu'il me tarde de mettre mon blog en ligne je viens te demander conseils en espérant avoir une réponse ou une indication pour un autre tuto.. Merci d'avance;
    Margaux futur blogueuse !

    RépondreSupprimer
    Réponses
    1. Bonjour Margaux,
      Il faut créer des Pages et non des Articles pour FAQ et Blogroll, car les pages n'apparaissent pas dans le flux d'articles sur la page d'accueil ;)
      Pour les photos, il te suffit de sauvegarder toutes tes photos à la même largeur, par exemple 800 pixels de large, avec un programme comme Photoshop ou Pxlr (https://pixlr.com/editor/) qui est gratuit et en ligne ;)

      Supprimer
  75. Je te remercie ! A bientôt :)

    RépondreSupprimer
  76. Bonjour,
    J'ai voulu créer une barre de navigation mais elle est apparue en bas de ma page en gris et à la verticale. J'ai essayé de continuer et de personnaliser ma barre de navigation car je voyais que mes libellés que j'ai été obligée de créer pour former des catégories sont apparus en haut de ma page.
    Ce sont les libellés qui ont été personnalisés sauf que ils ne sont pas dans l'ordre que je voulais et j'ai toujours ma barre de navigation correcte mais qui se trouvent en bas en gris.
    J'éspère que vous comprendrez ma question car je ne suis pas du tout une pro !
    Merci d'avance

    RépondreSupprimer
  77. Rebonjour,
    Je suis l'Anonyme de il y a quelques minutes, avec les libellés et la barre de navigation qui est en bas et en gris. J'ai réussi à tout remettre à sa place, il fallait juste essayer un tout petit peu plus ! Merci beaucoup pour votre blog, quand j'ai vu tous ces codes je pensais ne jamais y arriver mais au final copier/coller et c'est facile.
    Merci

    RépondreSupprimer
    Réponses
    1. Pas de soucis, je suis contente que tu ai trouvé le problème ;)

      Supprimer
  78. Bonjour,

    J'ai un petit souci, voici mon blog : http://www.dancinginnowhere.com/

    Alors que je pensais avoir tout fait parfaitement, je me retrouve avec quelques erreurs.
    Lorsque je suis sur la partie "Hôtels" et que je passe ma souris sur France et Pays-Bas, ce sont les deux mêmes qui s'affichent à chaque fois, alors qu'Enghien les Bains devrait se trouver dans France et Amsterdam dans Pays-Bas.
    D'ailleurs, Enghien-les-Bains ne s'affiche pas en entier.
    Dans la partie "Voyages" j'ai le même souci du côté de l'Europe, et encore de la France et des Pays-Bas. Aurais-tu une solution à me proposer ? Je dois en plus rajouter des parties mais je n'ai pas envie de travailler sur un code qui n'est déjà pas correct :( Et même problème dans les voyages, Saint-Vaast-la-Hougue ne s'affiche pas en entier...

    J'en profite pour demander s'il serait possible d'enlever la petite barre bleue lorsque l'on se trouve dans une sous-section ?

    Merci d'avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour Marie-Charlotte,
      Le problème vient du fait que tu n'as pas correctement fermé les menus déroulants de France et Pays-bas.
      Voici le code ton menu-déroulant Europe :

      <li>
      <a href="http://www.dancinginnowhere.com/search/label/europe">Europe</a>
      <ul>
      <li>
      <a href="http://www.dancinginnowhere.com/search/label/france">France</a>
      <ul><li><a href="http://www.dancinginnowhere.com/search/label/paris">Paris</a></li>
      <li><a href="http://www.dancinginnowhere.com/search/label/saintvaast">Saint-Vaast-la-Hougue</a></li></ul>
      <a href="http://www.dancinginnowhere.com/search/label/paysbas">Pays-Bas</a>
      <ul><li><a href="http://www.dancinginnowhere.com/search/label/amsterdam">Amsterdam</a></li></ul>
      </li>
      </ul>
      </li>

      Avant le code du lien Pays-bas :

      <a href="http://www.dancinginnowhere.com/search/label/paysbas">Pays-Bas</a>

      Il faut fermer le lien France et ouvrir un nouveau lien Pays-bas en rajoutant :

      </li>
      <li>

      Comme ceci :

      </li>
      <li><a href="http://www.dancinginnowhere.com/search/label/paysbas">Pays-Bas</a>

      De même pour tes menus-déroulants sous Hôtels, il faut fermer le lien France et ouvrir un nouveau lien Pays-bas ;)

      Supprimer
    2. Pour supprimer la petite barre bleue de tes menus-déroulants, ajoute la ligne suivante :

      background-color: #fff;

      Avant le signe } du code :

      #barre_nav li ul ul {
      margin: -22px 0 0 144px;
      border-left: 1px solid #fff;
      }

      Comme ceci :

      #barre_nav li ul ul {
      margin: -22px 0 0 144px;
      border-left: 1px solid #fff;
      background-color: #fff;
      }

      Et voilà ;)

      Supprimer
    3. Merci beaucoup pour tous tes conseils !!!

      Supprimer
  79. Bonjour, c'est encore moi!
    J'ai tout bien suivi ce que tu as noté mais je rencontre un problème avec mon lien "Contact". En effet, même après avoir tout vérifié (espace en trop ou autre) mais rien n'y fait, mon lien ne veut pas fonctionner...
    Pourrai-tu m'aider ? Merci d'avance
    Doux baisers!
    (www.chemindesreves.blogspot.com)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le lien marche pour moi. As-tu un programme pour lire tes e-mails sur ton ordinateur ? Si tu te connectes à tes mails via un navigateur web alors c'est pour cela que ce lien ne marche pas pour toi. Ce type de lien ouvre ton programme d'e-mails (Thunderbird, Outlook, etc.). Si tu souhaites changer ce lien tu peux créer une page Contact avec ton adresse e-mail écrite dessus, ou un formulaire de contact ;)

      Supprimer
  80. Bonsoir j'avais laissez un commentaire sur votre blog, et j'ai vu que vous avez repondu que je n'avais pas mi mon blog en public..
    J'ai denouveau essayé votre tutoriel rien n'y fait j'y arrive vraiment pas .....

    Je vous laisse jeter un œil dessus : nouveausouvenir.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Je n'arrives pas à accéder à ton blog, ça me dit qu'il à été supprimé :/

      Supprimer
  81. Bonjour. bonjour!
    Je reviens aujourd'hui car je rencontre un léger problème avec le lien de contact car ce dernier ne me mène absolument à rien ... Je ne sais pas si je dois ajouter quelque chose à quelque part du coup, pourrai-tu m'aider ?
    Doux baisers!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton lien Contact marche parfaitement. Utilises-tu un programme d'e-mail ? Si non, alors c'est pour ça que cela ne fonctionne pas pour toi. Le lien ouvre le programme (Thunderbird, Outlook, etc.) pour envoyer un e-mail à l'adresse que tu as indiqué ;)

      Supprimer
  82. Merci pour ce tutoriel, les étapes sont très claires et faciles à suivre!!

    RépondreSupprimer
  83. Bonjour,
    je suis en train de créer un blog que je viens de mettre en ligne. J'ai passé déjà beaucoup de temps pour y arriver. J'ai créer des pages en lien avec les libellés mais lorsque je clique sur l'onglet qui correspond à cette page, j'aimerais voir apparaître uniquement la liste des titres des articles de cette catégorie et non pas les articles entiers, comme je le vois sur certains blogs. ainsi en cliquant sur un titre, on serait renvoyé vers l'article complet. Est-ce possible et si oui merci de me dire comment faire. Un grand merci.

    RépondreSupprimer
    Réponses
    1. Bonjour Françoise,
      C'est possible en jouant sur les codes CSS. Ce n'est pas la meilleure manière de procéder mais c'est simple et rapide.
      Dans Modèle > Modifier le code HTML cherche le code suivant :

      </body>

      Juste avant cette ligne colle ceci :

      <b:if cond='data:blog.searchLabel'>

      <style type='text/css'>
      .post-body, .post-footer, .date-header {
      display: none;
      }
      </style>

      </b:if>

      Supprimer
  84. Bonjour Catherine,
    Merci beaucoup, je vais essayer.

    RépondreSupprimer
  85. Coucou ma belle ! J'ai essayer de bien suivre tes conseils mais ça ne va pas.. Ca me mets "le blog" tout en haut et n'arrives pas à y enlever ainsi que les pointillés.. J'espère que tu pourras m'aider ?
    J'ai aussi une petite question à te poser, comment mettre les icônes de réseaux sociaux dans la barre également ? Merci beaucoup

    http://unblogunemerveillee.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      J'ai vu que tu as fixé ton menu en haut de ton blog. Quel est le problème exactement ? L'alignement des liens ? Le cadre autour des liens ?

      Pour les icônes, tu peux ajouter des liens à la suite de tes liens actuels, en remplaçant le texte du lien par une image. Voici un tutoriel pour ajouter des images au menu : http://ladybirdr.blogspot.com/2014/10/ajouter-des-images-la-barre-de.html

      Supprimer
  86. Merci beaucoup, ça a super bien marché.
    je suppose que maintenant, si je veux créer une nouvelle page-onglet en lien avec un libellé, je fais comme j'avais fait au départ, mettre le lien http://NOM_DE_MOM_BLOG.blogspot.com/search/label/LIBELLE
    et je n'aurai que les titres des articles dans cette page.
    Je vous avais envoyé un premier message de remerciement, mais je vois qu'il n'apparaît pas, désolée, alors je vous dit encore un grand merci.

    RépondreSupprimer
  87. Bonjour Catherine,

    Tout a bien fonctionné pour mes onglets. J'ai maintenant une autre question : dans les onglets que j'ai installés avec un lien pour n'y trouver que les titres des articles concernés par le même libellé, cette liste de titres a la police et la taille des titres des articles, est-il possible de modifier la taille de cette liste de titre sans que soit modifiée la taille des titres quand on affiche les articles.
    Mon blog est etsiondejeunaitensemble.blogspot.com

    Merci pour ton aide.

    RépondreSupprimer
    Réponses
    1. Pour modifier l'apparence des titres seulement sur ces pages, retrouve le code que tu as rajouté pour n'afficher que les titres :

      <b:if cond='data:blog.searchLabel'>

      <style type='text/css'>
      .post-body, .post-footer, .date-header {
      display: none;
      }
      </style>

      </b:if>

      Rajoute ce code :

      h3.post-title.entry-title a {
      font-family: 'Coming Soon', sans-serif; /* Police */
      font-size: 22px; /* Taille de la police */
      font-weight: bold; /* Graisse du texte : normal = normal ; bold = gras */
      color: #a84c4c; /* Couleur du texte */
      margin: 0 0 -1em;
      display: block;
      }

      Avant la ligne :

      </style>

      Comme ceci :

      <b:if cond='data:blog.searchLabel'>

      <style type='text/css'>
      .post-body, .post-footer, .date-header {
      display: none;
      }

      h3.post-title.entry-title a {
      font-family: 'Coming Soon', sans-serif; /* Police */
      font-size: 22px; /* Taille de la police */
      font-weight: bold; /* Graisse du texte : normal = normal ; bold = gras */
      color: #a84c4c; /* Couleur du texte */
      margin: 0 0 -1em;
      display: block;
      }
      </style>

      </b:if>

      Remplace les valeurs pour la police, la taille de la police, la couleur et la graisse pour obtenir ce qu'il te plaît ;)

      Supprimer
  88. YES YES, MERCI THANK YOU!!!! Comment te dire !! enfin un site ou le codage ne semble pas un langage venu de mars, parlé uniquement par une élite!! 1er pas réussis!! J ai connu ton blog par http://unblogunemerveillee.blogspot.fr/search/label/accueil?max-results=6, merci merci!! je compte pas te lacher !! Mon bébé blog qui n'a pas 15 jours à besoin de toi!! <3 :-)

    RépondreSupprimer
  89. Coucou ! Dis-moi, je suis bloquée dès le départ haha parce que je n'arrive pas à trouver le modèle que tu utilises... Sur le mien, il y a systématiquement la Navbar au-dessus du titre de mon blog et donc je ne peux pas faire "Ajouter" comme tu l'indiques...

    Merci pour ton aide !

    RépondreSupprimer
  90. Coucou tout d'abord merci beaucoup pour ces tutos
    Mon blog n'est pas visible car je le commence mais j'ai deux petites questions je voudrais augmenter la hauteur de la barre de navigation est-ce possible?
    De plus, dans ma barre j'ai les catégories: accueil a propos blogs à voir je ne veux pas que les catégories soit centrer mais pas quelles soit complètement à gauche comment je peux créer l'espace que je souhaite?
    J'ai intégrer une barre de recherche que je souhaite mettre plus sur la droite de la barre de navigation mais je ne sais pas quel code peut me permettre de la mettre où je souhaite.
    Je ne sais pas si je suis très claire
    Merci par avance pour ta réponse,

    RépondreSupprimer

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