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

Personnaliser la Barre de Navigation sous Blogger

Remarque : A cause d'un trop grand nombre de commentaires vsur cet article, il y a des problèmes de chargement des commentaires. Je vous invite donc à ajouter votre commentaire sur ce nouvel article spécialement créé pour cela ! ;)


Aujourd'hui je vais vous expliquer comment personnaliser la barre de navigation que nous avons créé dans la 1ère partie de ce tutoriel.

Pour l'instant notre barre de navigation ressemble à ça :
Personnaliser la Barre de Navigation sous Blogger
Maintenant on va voir comment :
  • Changer la couleur du fond
  • Enlever et changer la couleur, le style, la taille de la bordure
  • Changer la police, la couleur, la taille du texte
  • Modifier un lien quand survolé avec la souris
  • Centrer la barre de navigation
psst ! Un bonus vous attend à la fin du tutoriel :
Un tutoriel exclusif pour afficher un texte ou une image au survol d'un lien du menu !

Introduction

Pour personnaliser le visuel votre barre de navigation, comme tout autre partie de votre blog, il faut modifier son CSS.

Qu'est-ce que le CSS ? C'est un code qui défini le rendu visuel des différentes parties d'une page web.
Il se construit comme ceci :
.nom {
propriété-1: valeur;
propriété-2: valeur;
}
Où :
  • .nom désigne l'élément dont on veut définir les propriétés visuelles.
  • propriété est la propriété dont on défini la valeur.
    Exemple : pour la propriété couleur on défini la valeur rouge.

Quelques règles à respecter quand on écrit en CSS :
  • Les propriétés visuelles de l'élément sont toujours entouré de 2 crochets { et }
  • Ne jamais mettre d'espace avant les ":" et les ";" !
  • Toujours finir une ligne de valeurs avec un point-virgule ";" sans espace après !

Dans le code CSS on peut écrire des commentaires qui ne sont pas affiché sur la page web, mais qui servent de repère. Ces commentaires se présentent sous la forme :
/* Ceci est un Commentaire */

Trouver le code

Tout d'abord il faut sauvegarder votre blog comme expliqué au premier tutoriel !

Ensuite ouvrez votre tableau de bord, et cliquez sur Modèle dans le menu à gauche de la page, puis sur Modifier le code HTML :

Personnaliser la Barre de Navigation sous Blogger

Repérez la ligne de code <b:skin>...</b:skin> :
Et cliquez sur le triangle noir à sa gauche :

Personnaliser la Barre de Navigation sous Blogger

On va cherche le code CSS, il définit le visuel de notre blog.

Pour ceci faites une recherche : cliquez n'importe où dans la boite de code, puis appuyez sur Ctrl et F en même temps. Une fenêtre de recherche apparaît en haut à droite de la boîte comme ceci :

Personnaliser la Barre de Navigation sous Blogger

Tapez /* Tabs et appuyez sur Entrer.
Vous serrez redirigé vers cette partie :

Personnaliser la Barre de Navigation sous Blogger

Pour faire au plus simple, copiez ce code :
/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
}

/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
}

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

/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
}

/* Centrer la Barre de Navigation */
.tabs .widget li, .tabs .widget li {
}
Et collez le à la place du code surligné suivant. Attention n'effacez rien de plus, rien de moins que ce qui est montré !

Personnaliser la Barre de Navigation sous Blogger

Vous obtenez donc :

Personnaliser la Barre de Navigation sous Blogger

Notez les commentaires, ils permettent de savoir à quoi servent les codes qui les suivent.
Comme vous pouvez le voir, pour l'instant nous n'avons précisé aucun paramètre ni valeur.

Maintenant on va voir comment :

Changer l'espacement et la bordure

Les paramètres que nous allons utiliser ici sont :
  • margin : définit la marge de l'élément
  • border : définit la bordure de l'élément

La marge est l'espacement avant, après, à gauche, à droite de l'élément. Les valeurs que l'on peut utiliser sont en pixels comme ceci :
margin: 10px;
Si on ne veut pas de marge on écrit none à la place des pixels comme ceci :
margin: none;
La bordure de l'élément peut être :
  • Un simple trait : solid
  • Un trait en pointillés (traits) : dashed
  • Un trait en pointillés (points) : dotted
  • Un trait double : double
  • Aucun trait : none

On peut aussi ajuster la taille et la couleur de la bordure :
  • border-color : définit la couleur de la bordure (code hexadécimal)
  • border-width : définit la taille de la bordure (pixels)

Exemple :
border: solid;
border-color: #333333;
border-width: 1px;
Notez que la couleur est indiqué en code hexadécimal.
Je vous conseille Code-couleur, un site pratique qui donne les codes et des palettes de couleurs.

La marge et la bordure peuvent être réglées pour tous les bords de l'élément en même temps, dans ce cas on écrit simplement la propriété comme vu ci-dessus.

Si on veut spécifier la propriété pour seulement un bord de l'élément, on ajoute :
  • -top : bord supérieur de l'élément
  • -bottom : bord inférieur de l'élément
  • -left : bord gauche de l'élément
  • -right : bord droit de l'élément

Exemple: 
border-top : dashed;
border-left : solid;
Il suffit maintenant d'inclure ces codes dans notre code CSS.

Aller à cette partie :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
}
C'est ici que l'on va inclure les propriétés margin et border.

Par exemple, si je veux :
  • 10 pixels (10px) de marge au-dessus et en-dessous de ma barre de navigation
  • Une bordure simple (solid) de 2 pixels en-dessous de couleur bleu (#4BB5C1)
  • Une bordure en pointillés (traits: dashed) de 1 pixel au-dessus de couleur verte (#96CA2D)

J'écris :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
margin-top: 10px;
margin-bottom: 10px;
border-bottom: solid;
border-bottom-color: #4BB5C1;
border-bottom-width: 2px;
border-top: dashed;
border-top-color: #96CA2D;
border-top-width: 1px;
}
Ce qui donne visuellement :

Personnaliser la Barre de Navigation sous Blogger

Changer la couleur du fond de la barre de navigation

Pour changer la couleur de fond, nous allons utiliser le paramètre :
  • background : définit le fond de l'élément

La valeur du fond peut être :
  • Une couleur : code hexadécimal. Par exemple #222222
  • Une image : url(http://adresse-image.html)

Pour l'image il faut d'abord la mettre sur internet (sur Photobucket par exemple) et coller le lien vers l'image entre les parenthèses.

Si l'image n'est pas assez grande, on peut la répéter dans tout le fond. Pour cela on rajoute -repeat.
Une image peut être répétée horizontalement (valeur : x) ou verticalement (valeur : y)

Par exemple, si je veux que ma barre de navigation ait un fond de couleur crème (#EFECCA), j'écris :
background: #EFECCA;
Si je veux que le fond soit cette image : [image], et qu'elle soit répétée horizontalement, j'écris :
background: url(http://www.pixeden.com/media/k2/galleries/93/001-subtle-light-pattern-background-texture.jpg);
background-repeat: x;
Nous allons écrire ce code dans la même partie que pour l'espacement et la bordure. C'est-à-dire :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
}
En reprenant l'exemple du fond de couleur crème (#EFECCA), on obtient :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
background: #EFECCA;
}
Ce qui donne :

Personnaliser la Barre de Navigation sous Blogger

Changer la police, la couleur et la taille du texte

Pour modifier le texte nous allons utiliser :
  • font-family : définit la police d'un texte (nom de la police)
  • color : définit la couleur d'un texte (code hexadécimal)
  • font-size : définit la taille du texte (en pixels)
  • text-decoration : définit la décoration du texte
  • font-style : définit le style du texte (gras, italique, oblique)
  • margin : définit la marge de l'élément
  • border : définit la bordure de l'élément

Pour la police (font-family) la valeur à indiquer est le nom de la police. Par exemple :
  • Times New Roman
  • Arial

Pour voir les polices utilisables sous Blogger allez sur votre tableau de bord. Cliquez sur Modèle dans le menu à gauche, puis sur Personnaliser :

Personnaliser la Barre de Navigation sous Blogger

Cliquez ensuite sur Avancé. Vous verrez dans la partie Texte de la page la liste des polices installés sous Blogger :

Personnaliser la Barre de Navigation sous Blogger

Recopiez ensuite le nom de la police souhaitée.

Par exemple, si je veux que le texte de mon menu soit en Nobile. J'écris :
font-family: Nobile;
Pour le style (font-style) du texte on peut préciser :
  • Texte en gras : bold
  • Texte en italique : italic
  • Texte oblique : oblique
  • Texte normal : normal

Pour la décoration (text-decoration) du texte on peut préciser :
  • Trait sous le texte : underline
  • Trait sur le texte : overline
  • Trait au milieu du texte : line-through
  • Aucun trait : none

Pour la couleur, comme nous l'avons vu précédemment, il faut indiquer le code hexadécimal de la couleur souhaitée. Et on indique la taille de la police en pixels ou en em.

Nous allons inclure ce code dans la partie suivante :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
}
Exemple, je veux que le texte de mes liens soient :
  • En police Arial
  • En 14 pixels (14px)
  • En italique (italic)
  • Sous-ligné (underline)
  • De couleur bleu (#4BB5C1)
  • Avec une marge après le texte (à droite) de 20 pixels (20px)

J'écris :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Arial;
font-size: 14px;
font-style: italic;
text-decoration: underline;
color: #4BB5C1;
margin-right: 20px;
}
Ce qui donne :

Personnaliser la Barre de Navigation sous Blogger

Pour utiliser le paramètre border au lieu de souligner le texte, il faudra ajouter un code CSS :
/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
overflow: visible;
}
En effet, avec certaines polices, la bordure dépasse du menu et ne sera pas visible sans ce code.

Dans le partie suivante :
/* Espacement et Bordure du Premier Lien de la Barre de Navigation */
.tabs-inner .section:first-child ul {
}
On peut spécifier les paramètres pour le premier lien de la barre de navigation si besoin.

En reprenant l'exemple ci-dessus, si au lieu d'avoir un texte souligné, je veux qu'il ait une bordure inférieur de la même couleur, j'écris :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Arial;
font-size: 14px;
font-style: italic;
border-bottom: solid;
border-bottom-color: #4BB5C1;
border-bottom-width: 1px;
color: #4BB5C1;
margin-right: 20px;
}

/* Visibilité de la Bordure des Liens */
.tabs .widget ul {
overflow: visible;
}
Ce qui donne :

Personnaliser la Barre de Navigation sous Blogger

Cette méthode permet de contrôler l'espace entre le texte et sa bordure.

Modifier le lien quand survolé par la souris

On peut préciser les paramètres du lien quand il est survolé par la souris. Pour cela, on indique les paramètres à changer dans cette partie :
/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
}
On peut changer divers paramètres comme par exemple :
  • La taille du texte : font-size
  • La couleur du texte : color
  • La police : font-family
  • Le style du texte : font-style
  • La décoration du texte : text-decoration

Pa exemple, je veux que mes liens soient :
  • En police Arial
  • En 14 pixels (14px)
  • De couleur bleu (#4BB5C1)
  • Avec un espace de 20 pixels (20px) après le lien
  • Quand survolés : le texte devient italique (italic), sous-ligné (underline) et de couleur vert (#96CA2D)

J'écris :
/* Police et Couleur des Liens */
.tabs-inner .widget li a {
font-family: Arial;
font-size: 14px;
color: #4BB5C1;
margin-right: 20px;
}

/* Police et Couleur des Liens quand Survolés par la Souris */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
font-style: italic;
text-decoration: underline;
color: #96CA2D;
}
Ce qui donne :

Personnaliser la Barre de Navigation sous Blogger

N'oubliez pas !
Un tutoriel exclusif pour afficher un texte ou une image au survol d'un lien du menu vous attend à la fin du tutoriel !

Centrer la barre de navigation

Pour centrer le barre de navigation nous allons simplement copier les paramètres suivants :
display: inline;
float: none;
Et les coller dans la partie suivante :
/* Centrer la Barre de Navigation */
.tabs .widget li, .tabs .widget li {
}
Ce qui donne :
/* Centrer la Barre de Navigation */
.tabs .widget li, .tabs .widget li {
display: inline;
float: none;
}
Il faut également spécifier un dernier paramètre important :
  • text-align : définit l'alignement du texte d'un élément

Pour centrer le texte dans la barre de navigation, on ajoute ce paramètre avec la valeur center au code que nous avons utilisé pour définir le fond et la bordure, comme suit :
/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {
text-align: center;
}
Au fur et à mesure que vous remplissez les codes CSS de paramètres vous transformerez votre barre de navigation :

Personnaliser la Barre de Navigation sous Blogger

Conclusion

Et voilà ! Vous connaissez maintenant les bases pour modifier l'apparence de votre barre de navigation !

Dans la prochaine partie je vous proposerai quelques exemples avec leurs codes ;)

Tutoriel exclusif

Comment afficher un texte / une image au survol d'un lien du menu !

En vous inscrivant vous serez ajouté à la liste de contacts de Lady Bird Red.
Vous pourrez vous désabonner à tout moment.


Remarque : A cause d'un trop grand nombre de commentaires sur cet article, il y a des problèmes de chargement des commentaires. Je vous invite donc à ajouter votre commentaire sur ce nouvel article spécialement créé pour cela ! ;)


Autres articles

201 commentaires:

  1. MERCI pour toutes tes explications détaillées ... je t'ai d'ailleurs citée dans mon blog (tout neuf) http://maylovelymoments.blogspot.com/
    tu as changé ma vie de blogueuse novice

    RépondreSupprimer
    Réponses
    1. De rien ! Je suis contente d'avoir pu t'aider ^^
      Et merci de m'avoir cité dans ton blog !! :D

      Supprimer
  2. J'ai un problème : n'y à t-il pas d'autre modèles de bannières ? Et pourrait-tu faire un tuto qui montre comment faire des bannière "déroulantes" si tu vois ce que je veux dire ^^'
    Sinon, tes tutos sont très claire et c'est vraiment rare, bon courage ! ♥

    RépondreSupprimer
    Réponses
    1. Merci :)
      Si par bannière tu veux dire la barre de navigation ou le menu, oui, je prépare des articles avec des modèles concrets et bien plus joli que ce dont je vous ai montré.
      Je prépare également un article pour expliquer comment faire des menus déroulants :)
      Tout ça prends un peu de temps mais ne t'en fais pas ça arrive ! ;)

      Supprimer
  3. Coucou j'aurais une question a te poser pour savoir si tu pourrais en faire un toto ? Je voudrais savoir comment tu as fais pour que lorsqu'on voit l'onglet de ton blog tu a fait pour mette un logo d'oiseaux voila merci bisous :)

    RépondreSupprimer
    Réponses
    1. Oui je peux en faire un, ça s'appelle un favicon. Je le rajoute à ma liste de tutos à faire ;)

      Supprimer
  4. Bonjour Cath, super blog j'ai appris pleins de choses. Par contre, petite question, je n'arrive pas à centrer ma photo d'en-tête.
    Pourriez-vous m'aider ?
    Merci d'avance.
    Marion.

    RépondreSupprimer
    Réponses
    1. Bonjour Marion, pour ton image en en-tête suit les étapes suivantes :

      - Sur le tableau de bord clique sur Modèle
      - Clique ensuite sur Personnaliser
      - Sur la gauche clique sur Avancé. Tu verras alors une liste apparaître avec les options "Liens", "Titre du blog", etc.
      - Descends en bas de cette liste et clique sur Ajouter le fichier CSS
      - Dans la boîte blanche qui apparaît sur la droite colle ce code :

      #header-inner {
      margin: 0 auto;
      }

      - Clique sur Appliquer au blog tout en haut à droite de la page web. Et voilà !

      Normalement ça devrait résoudre ton problème ! ;)

      Supprimer
  5. Merci pour tous ces tutos :)
    Ils m'ont été d'une grande utilité pour l'élaboration du blog.

    Bonne journée à toi ;)
    La Pinch'euse

    RépondreSupprimer
  6. Super ton tuto !
    J'ai enfin pu faire ce que je voulais de cette fichue barre de navigation :)

    Encore merci.
    Des bisous !

    RépondreSupprimer
  7. Aurélie13 mai, 2014

    Salut, merci beaucoup pour toutes ces explications !
    Saurais-tu comment on peut "forcer" le texte de la barre de navigation à rester en majuscules (ou en lettres capitales) ? Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Pour forcer un texte à rester en majuscules, il suffit dans la partie :

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

      }

      d'ajouter le code CSS suivant :

      text-transform: uppercase;

      Comme ceci :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      text-transform: uppercase;
      }

      Si tu as déjà des codes CSS dans cette partie, ajoute " text-transform: uppercase; " à la suite des autres codes CSS mais attention à bien le mettre avant le dernier " } "

      Supprimer
    2. Aurélie25 mai, 2014

      Merci mille fois !!! Je suis ravie, mon blog commence à ressembler à l'idée que je m'en faisais. Très belle journée !

      Supprimer
  8. Franchement un grand merci !
    Mon blog est plus beau grace à toi !
    Anna

    RépondreSupprimer
  9. Bonjour,

    Merci beaucoup pour tous ces conseils !!
    Par contre, je n'arrive pas à centrer mes images par rapport aux liens. Je pense que c'est du au fait que la bordure de lien dépasse à droite... Comment faire ? merci beaucoup...
    http://studiowalkietalkie.blogspot.fr

    RépondreSupprimer
  10. Et sinon, deuxième question, savez vous comment mettre la barre de navigation avant le titre du blog ?
    Merci beaucoup pour votre aide !
    Flo

    RépondreSupprimer
    Réponses
    1. Pour déplacer ton menu au dessus du titre du blog il faut déplacer son code HTML au dessus de celui du titre. Pour cela, quand tu es sur la page Modifier le code HTML il faut sélectionner tout ce code :

      <div class="tabs-outer">
      <div class="tabs-cap-top cap-top">
      <div class="cap-left"></div>
      <div class="cap-right"></div>
      </div>
      <div class="fauxborder-left tabs-fauxborder-left">
      <div class="fauxborder-right tabs-fauxborder-right"></div>
      <div class="region-inner tabs-inner">
      <div class="tabs section" id="crosscol"><div class="widget HTML" id="HTML1">
      <div class="widget-content">
      <!-- début du menu -->

      <div id="barre_nav">
      <ul>
      <li><a title="HOME" href="http://studiowalkietalkie.blogspot.fr/">HOME</a></li>
      <li><a title="A PROPOS" href="http://studiowalkietalkie.blogspot.fr/2014/05/le-studio-walkie-talkie-est-un-atelier.html">A PROPOS</a></li>
      <li><a title="COLLECTION" href="http://studiowalkietalkie.blogspot.fr/">COLLECTION</a></li>
      <li><a title="FACEBOOK" href="https://www.facebook.com/studiowalkietalkie/">FACEBOOK</a></li>
      <li><a title="PINTEREST" href="http://studiowalkietalkie.blogspot.fr/">INSTAGRAM</a></li>
      <li><a title="INSTAGRAM" href="http://studiowalkietalkie.blogspot.fr/">PINTEREST</a></li>
      <li><a title="CONTACT" href="mailto:studiowalkietalkie@gmail.com">CONTACT</a></li>
      </ul>
      </div>

      <!-- fin du menu -->
      </div>
      <div class="clear"></div>
      <span class="widget-item-control">
      <span class="item-control blog-admin">
      <a class="quickedit" href="//www.blogger.com/rearrange?blogID=4419931578220473191&amp;widgetType=HTML&amp;widgetId=HTML1&amp;action=editWidget&amp;sectionId=crosscol" onclick="return _WidgetManager._PopupConfigundefineddocument.getElementByIdundefined&quot;HTML1&quot;));" target="configHTML1" title="Modifier">
      <img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
      </a>
      </span>
      </span>
      <div class="clear"></div>
      </div></div>
      <div class="tabs section" id="crosscol-overflow"></div>
      </div>
      </div>
      <div class="tabs-cap-bottom cap-bottom">
      <div class="cap-left"></div>
      <div class="cap-right"></div>
      </div>
      </div>

      Coupe tout ce code (de ton code HTML), et colle juste avant le ligne :

      <header>

      Et voilà ça devrait marcher ;)

      Supprimer
    2. Je voulais le faire également, mais impossible de trouver le code ! :(

      Supprimer
  11. Ton blog est vraiment génial. Merci pour tous ces conseil ! Pourrais tu faire un article sur comme faire les boutons "pinterest, instagram et contact" dans ta barre de widgets ? :)

    RépondreSupprimer
    Réponses
    1. Ça y est le tuto pour faire ces petits boutons est en ligne ;)
      http://ladybirdr.blogspot.fr/2014/09/boutons-css.html

      Supprimer
  12. J'ai une petite question à te poser, en fait j'ai un soucis sur mon blog (http://whataboutvogue.blogspot.fr), je n'arrive pas à aligner mes images à mon texte dans mes articles, comme tu peux le voir, le texte est légèrement à gauche par rapport aux images... Comment faire ? Merci d'avance pour ta réponse !

    RépondreSupprimer
  13. Bonjour, tout d'abord un grand merci pour tes tutos qui sont d'une grande aide !
    J'aurais deux petites questions : dans la barre de navigation, saurais-tu comment faire pour espacer les bordures au-dessus et en dessous du texte?
    Et est-il possible d'y inclure une également une image, sans que cela soit un fond, comme un onglet à part entière?
    Merci d'avance pour tes réponses, et bonne continuation !

    RépondreSupprimer
  14. Cela fait depuis le début de mon blog que je déteste ma barre de menu, voilà qui est chose faite :D Un énorme merci à toi !
    http://fancy-treat.blogspot.be

    RépondreSupprimer
  15. Coucou!

    Tout d'abord, un GRAND merci pour tes tutos de design ; je crois que ça aide tout le monde. Malheureusement, la majeure partie des blogs qui en font sont dédiés à wordpress. Je suis heureuse d'avoir enfin réussi à personnaliser ma navbar!

    Néanmoins il me reste un problème : j'ai mis ma navbar avant mon header, mais j'ai une bordure pour ma sidebar, qui continue jusqu'en haut et qui du coup ne centre plus le header sur tout le corps du blog. Voici : http://backtothe1990s.blogspot.fr
    Saurais-tu comment je peux remédier à ça?

    Merci encore,
    Amandine xx

    RépondreSupprimer
    Réponses
    1. Salut !

      Ton header est bien centré, c'est ta barre de navigation qui est décalée.
      Pour y remédier, il suffit de rajouter ce code CSS :

      .tabs-inner .widget li:last-child a {
      margin-right: 0px;
      }

      En fait, tu as ajouté une marge de 45 pixels à droite de tous les liens de ta barre de navigation, même pour le dernier lien. Ceci décale toute la barre de navigation à gauche.
      Comme on veut une marge seulement entre les liens, alors on enlève la marge pour le dernier lien grâce à ce code ci-dessus.

      Bonne soirée ;)

      Supprimer
  16. Bon, re! ^^ J'ai réussi à enlever la bordure mais comme tu peux le voir, mon header n'est pas centré vis à vis de la side bar également. Merci!

    RépondreSupprimer
  17. Sniffffffff, je n'ai pas la ligne ...
    Les lignes numérotées s'arrêtent à 10, donc me voilà bloquée au début du tuto !
    Puis-je avoir ton aide SVP ? Merciiiiiiiiiiiii !

    RépondreSupprimer
  18. J'ai un petit problème...je ne sais pas pourquoi mais même avec les codes donnés, ma barre de navigation n'est pas centrée, les mots sont attachées et ce n'est pas la bonne police, comment faire ?

    RépondreSupprimer
    Réponses
    1. Salut March !

      Pour centrer la barre de navigation il faut que tu cherches le code suivant :

      .tabs .widget li, .tabs .widget li {
      margin: 0;
      padding: 0;
      float: left;
      }

      Remplace la dernière ligne "float: left;" par ceci :

      display: inline;

      Ce qui donne :

      .tabs .widget li, .tabs .widget li {
      margin: 0;
      padding: 0;
      display: inline;
      }

      Pour la police des liens, d'après ce que je peux voir tu n'a rien écrit dans la partie correspondant à l'apparence des liens :

      .tabs-inner .widget li a {

      }

      C'est ici qu'il faut indiquer la police, la taille, la couleur des liens.
      Par exemple pour de liens en Arial, de taille 14, de couleurs bleu, et avec un espace de 20 pixels entre les liens, j'écris :

      .tabs-inner .widget li a {
      font-family: Arial;
      font-size: 14px;
      color: #4BB5C1;
      margin-right: 20px;
      }

      N'hésite pas si tu as d'autres questions :)

      Supprimer
    2. Bonjour à toi,

      J'ai le même soucis, je n'arrive pas à centrer la barre de navigation malgré tout ce que tu as expliqué dans le tuto et dans ce commentaire... Sinon tout le reste est parfait ! Merci.

      Si tu pouvais m'aider ça serait top ! :)

      Supprimer
    3. Bonjour Caroline,
      Dans ton cas, il manque une ligne de code :

      float: none;

      A rajouter au code :

      /* Centrer la Barre de Navigation */
      .tabs .widget li, .tabs .widget li {
      }

      Comme ceci :

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

      Si cela ne fonctionne toujours pas, alors rajoutes !important après none comme ceci :

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

      Supprimer
    4. J'ai essayé les deux techniques mais ça ne fonctionne toujours pas :(

      Voilà le code complet de cette partie :

      /* Tabs
      ----------------------------------------------- */
      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      margin-top: 50px;
      margin-bottom: 10px;
      border-bottom: dashed;
      border-bottom-color: #E6E6E6;
      border-bottom-width: 1px;
      border-top: dashed;
      border-top-color: #E6E6E6;
      border-top-width: 1px;
      padding-top: 15px;
      padding-bottom: 10px;
      }
      }
      }

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      }

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Sweet Pea;
      font-size: 23px;
      font-style: normal;
      text-decoration: none;
      color: #E6E6E6;
      margin-right: 40px;
      }
      }

      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible;
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      font-family: Sweet Pea;
      font-size: 26px;
      font-style: normal;
      text-decoration: none;
      color: #eca8a6;
      }

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


      /* Headings
      ----------------------------------------------- */

      Supprimer
    5. Il y a plusieurs erreurs dans ton code : tu as plusieurs signes } en trop. Le problème vient de là car tout ce qui suit ces erreurs n'est pas pris en compte par le navigateur.

      Supprimes les signes superflus comme ceci :

      /* Tabs
      ----------------------------------------------- */
      /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
      .tabs-inner .section:first-child ul {
      margin-top: 50px;
      margin-bottom: 10px;
      border-bottom: dashed;
      border-bottom-color: #E6E6E6;
      border-bottom-width: 1px;
      border-top: dashed;
      border-top-color: #E6E6E6;
      border-top-width: 1px;
      padding-top: 15px;
      padding-bottom: 10px;
      }

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      text-align: center;
      }

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Sweet Pea;
      font-size: 23px;
      font-style: normal;
      text-decoration: none;
      color: #E6E6E6;
      margin-right: 40px;
      }

      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible;
      }

      /* Police et Couleur des Liens quand Survolés par la Souris */
      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
      font-family: Sweet Pea;
      font-size: 26px;
      font-style: normal;
      text-decoration: none;
      color: #eca8a6;
      }

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


      /* Headings
      ----------------------------------------------- */

      Supprimer
  19. impréssionnant, un article sur le menu déroulant svp, je vous en serai reconnaissant,

    merci pour vos tutoriels.

    RépondreSupprimer
  20. Ce tuto m'intéresse beaucoup aussi :D !
    Par contre, je suis un peu perdue... alors je n'ai pas le courage de modifier tous ces codes (qui ressemblent clairement à du chinois à mes yeux, ahah ^^)

    Du coup, sais-tu ce que je dois modifier/ajouter dans l'HTML initial (sans copier/coller un autre HTML à la place) afin de tout simplement centrer ma barre actuelle ? :)

    Un tout grand merci,
    Bisous!

    RépondreSupprimer
    Réponses
    1. Salut Estelloo !

      J'ai pu regarder un peu ta barre de navigation, et pour la centrer il te faut ajouter 2 lignes de code CSS et en supprimer 3 autres (ou 4 selon ta préférence).

      Tu vas voir ce n'est pas très compliqué !

      Premièrement, cherche le code suivant comme expliqué au début du tuto, dans la partie "Modifier le code HTML" :

      .tabs .widget ul, .tabs .widget ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      list-style: none;
      }

      Et ajoutes-y cette ligne :

      text-align: center;

      Comme ceci, au-dessus du "}" :

      .tabs .widget ul, .tabs .widget ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      list-style: none;
      text-align: center;
      }

      Deuxièmement, cherche le code suivant :

      .tabs .widget li, .tabs .widget li {
      margin: 0;
      padding: 0;
      float: left;
      }

      Et remplace la dernière ligne "float: left;" par la suivante :

      display: inline;

      Ce qui donne :

      .tabs .widget li, .tabs .widget li {
      margin: 0;
      padding: 0;
      display: inline;
      }

      Pour finir, il faut revoir la bordure à gauche et à droite de tes liens. Pour cela, cherche le code :

      .tabs-inner .widget li a {
      display: inline-block;
      padding: .6em 1em;
      font: normal normal 12px 'Trebuchet MS', Trebuchet, sans-serif;
      color: #ffffff;
      border-left: 1px solid #ffffff;
      border-right: 1px solid #f2f2f2;
      }

      Tu peux enlever la dernière ligne "border-right: 1px solid #f2f2f2;" ce qui laissera une bordure entre les liens seulement.

      Ou tu peux enlever les 2 dernières lignes "border-left: 1px solid #ffffff;" et "border-right: 1px solid #f2f2f2;" ce qui enlèvera les bordures complètement.

      A toi de voir ce que tu préfère :)

      Supprimer
    2. Aïe aïe aïe, je dois vraiment être nulle parce que je n'y arrive pas :(
      En fait je ne trouve pas le code qui commence par :
      .tabs .widget li, .tabs .widget li {
      Donc j'ai essayé de m'en sortir sans lui mais non, du coup ça marche vraiment pas !
      Je vais réessayer en espérant trouver une solution. Mais en tout cas un grand merci pour ton aide précieuse !
      Bisous.

      Supprimer
  21. Bonjour, en plein relooking de mon blog, je viens de découvrir votre blog et vos tutos. Quelle belle découverte! Vous voilà incontestablement parmi mes favoris! Je bloque toute de même sur un point :
    lorsque je souhaite coller le code entre tabs et columns. eh bien ça ne veut pas. je ne peux pas l’écrire non plus. A croire que ce fichu code ne veut pas être modifier....j'en ai pourtant modifier d'autres parties sans problèmes....Si vous avez une solution...Merci

    RépondreSupprimer
  22. Merci merci merci ! Tes tutus sont tellement clairs que j'ai enfin réussi à avancer sur mon blog. Vivement les suivants !

    RépondreSupprimer
  23. Un grand merci pour tes tutus. Peux-tu juste m'aider sur le point suivant: je n'arrive pas à espacer les lignes bas et haut qui encadrent ma barre de navigation. Comment faire également pour séparer chaque rubrique de cette barre soit par des tirets ou des / comme tu l'as fait ?
    Merci d'avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Salut Emma !

      Pour espacer la bordure de ta barre de navigation il faut ajouter un espace au-dessus et en-dessous des liens. Pour cela cherche le code suivant :

      .tabs-inner .widget ul {
      text-align: center;
      background: #FFFFFF;
      margin-top: 100px;
      margin-bottom: 100px;
      border-bottom: solid;
      border-bottom-color: #000000;
      border-bottom-width: 2px;
      border-top: solid;
      border-top-color: #000000;
      border-top-width: 2px;
      }

      Pour ajouter un espace au-dessus des liens on va utiliser padding-top, et pour ajouter un espace en-dessous, on va utiliser padding-bottom.

      Ajoute donc les 2 lignes suivantes au code ci-dessus, avant le "}" :

      padding-top: 10px;
      padding-bottom: 10px;

      Comme ceci :

      .tabs-inner .widget ul {
      text-align: center;
      background: #FFFFFF;
      margin-top: 100px;
      margin-bottom: 100px;
      border-bottom: solid;
      border-bottom-color: #000000;
      border-bottom-width: 2px;
      border-top: solid;
      border-top-color: #000000;
      border-top-width: 2px;
      padding-top: 10px;
      padding-bottom: 10px;
      }

      Change la valeur en pixels (px) pour augmenter ou diminuer cet espace.


      Pour séparer mes liens dans ma barre de navigation j'ai ajouté un caractère entre mes liens.
      En fait, dans le code HTML (Widget HTML/Javascript) de ta barre de navigation tu peux ajouter un caractère comme celui-ci : | entre le "</li>" à la fin d'un lien et le "<li>" du lien suivant.

      Comme ceci :

      <li id="nav_menu_1"><a href="http://ladybirdr.blogspot.fr/">Accueil</a></li>|
      <li id="nav_menu_2"><a href="http://ladybirdr.blogspot.fr/search/label/Recettes">Recettes</a></li>

      Tu peux également mettre un tiret à la place du |, tout caractère marche ;)

      Supprimer
  24. Salut ! J'adore tes tutos mais pour moi le CSS ne fonctionne pas du tout...

    RépondreSupprimer
    Réponses
    1. Salut Matt Lhom.
      Que veux-tu dire? Qu'est-ce qui ne fonctionne pas ?

      Supprimer
  25. Salut,
    Tout d'abord merci pour ces tutos, ils sont géniaux. Je suis en train de revoir le design de mon blog et j'aimerai ajouter des séparateurs dans le menu, ces petites lignes verticales entre chaque thèmes.
    Ou placer le code?
    Merci,
    Gwladys

    RépondreSupprimer
    Réponses
    1. Salut Gwladys,

      Pour ajouter des séparateurs, il suffit de les ajouter dans ta liste de liens, entre tes liens.
      Exemple : je veux ajouter le signe | entre mes liens, je l'insère entre les balises </li> et <li> comme ceci :

      <li id="nav_menu_1"><a href="http://lien.fr/">Lien</a></li>
      |<li id="nav_menu_2"><a href="http://lien.fr/">Lien</a></li>

      Si tu regardes bien j'ai ajouté le caractère avant la balise <li> du 2e lien.

      Et voilà ! Rien de plus simple ^^

      Bonne journée :)

      Supprimer
  26. Merci tout simplement grace a toi mon blog ressemble enfin a quelques chose =) Par contre impossible d'avoir mes barres de colonnes en pointillés ! J'ai tout essayer sa ne fonctionne pas.

    Voila le code que j'ai mis :
    /* Apparence des titres de la barre latérale de droite */
    .column-right-inner h2 {
    font-family:Georgia;
    font-size: 14px;
    text-transform: uppercase;
    color: #58462c;
    text-align: center;
    border-bottom: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #58462c;
    padding-bottom: 10px;
    margin-bottom: 20px;
    }

    RépondreSupprimer
    Réponses
    1. Salut Nessa,

      Essaye le code suivant à la place :

      .column-right-inner h2 {
      font-family: Georgia;
      font-size: 14px;
      text-transform: uppercase;
      color: #58462c;
      text-align: center;
      border-bottom: dotted !important;
      border-bottom-width: 1px !important;
      border-bottom-color: #58462c !important;
      padding-bottom: 10px !important;
      margin-bottom: 20px !important;
      }

      Ajouter !important après une valeur force le navigateur à afficher ce que tu souhaites quand il ne veut pas ;)

      Bonne journée !

      Supprimer
    2. Merci beaucoup Cath tu est adorable =)

      Supprimer
  27. Salut, une grand merci pour tes tutos qui m'aident beaucoup avec mon blog. J'ai un petit problème avec ma barre de navigation, il y a un trait en pointillé qui s'est glisser derrière le nom de mes onglets, sauf le premier, et malgré une recherche soutenue, je n'ai pas réussi à trouver d'ou venait le problème. Peut-être pourrais-tu m’éclairer là dessus ?
    J'ai hâte de voir tes prochains tutos, à bientôt.

    RépondreSupprimer
    Réponses
    1. Salut Jennifer,
      j'ai regardé un peu ton blog et il semblerait que le problème viens de ce bout de code CSS :

      .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: dashed 1px #767676;
      }

      Essaye de chercher le code dans la partie "Modifier le code HTML". Clique n'importe où dans la boîte de code CSS et appuie sur Ctrl et F en même temps. Une petite boîte de dialogue apparaît en haut à droite de la boite de code. Entre la ligne suivante et appuie sur entrer :

      .widget ul li, .widget #ArchiveList ul.flat li {

      Si tu le trouves, remplace la dernière ligne par

      border-top: none;

      Comme ceci :

      .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: none;
      }

      Si tu ne le trouves pas tu peux rajouter le code suivant :

      .widget ul li {
      border-top: none;
      }

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

      Supprimer
    2. Whoua c'est super c'est réglé !!! Merci beaucoup pour le temps que tu m'as consacré. Au plaisir :)

      Supprimer
  28. Coucou! Alors j'ai essayé de créer une barre de navigation (j'ai réussi je crois!)
    Elle s'affiche parfaitement sur Chrome mais sur Internet Explorer, une ligne en pointillée s'affiche juste au dessus et je ne sais pas comment faire pour l'enlever, peux-tu m'aider? :(

    RépondreSupprimer
    Réponses
    1. Salut Tiphaine, tu as le même problème que Jennifer.
      Cela viens du code suivant :

      .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: dashed 1px #767676;
      }

      Essaye de chercher le code dans la partie "Modifier le code HTML". Clique n'importe où dans la boîte de code CSS et appuie sur Ctrl et F en même temps. Une petite boîte de dialogue apparaît en haut à droite de la boite de code. Entre la ligne suivante et appuie sur entrer :

      .widget ul li, .widget #ArchiveList ul.flat li {

      Si tu le trouves, remplace la dernière ligne par :

      border-top: none;

      Comme ceci :

      .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: none;
      }

      Si tu ne le trouves pas tu peux rajouter le code suivant :

      .widget ul li {
      border-top: none;
      }

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

      Supprimer
    2. Cool :) Merci, ça a réglé mon problème :) :)

      Supprimer
  29. Coucou ! Merci pour ce tutos ça m'a vraiment aidé ! Par contre j'ai un problème mes sous-catégories se place au même endroit (ce de catégories et follow) et je ne vois pas comment changer ça !
    Pourrais-tu m'aider ?

    RépondreSupprimer
    Réponses
    1. Salut Ninis,

      Il y a une erreur dans le code CSS de ton menu déroulant.
      Cherches le code suivant comme expliqué dans le tuto (en appuyant sur Ctrl et F dans la boîte de code) :

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

      Tu devrais tomber sur ce code :

      .tabs .widget li, .tabs .widget li {
      display: inline;
      float: none;
      }

      Change "inline" de la première ligne par "inline-block" comme ceci :

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

      Ensuite il faut rectifier un détail. Tu as ajouté un espace de 490 pixels à gauche de tes menus déroulants qu'il faut supprimer car il déplace les menus déroulants trop à droite.

      Cherches le code suivant :

      .tabs .widget li:hover ul {

      Tu devrais tomber sur :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 490px;
      }

      Change la valeur 490px par 0px comme ceci :

      .tabs .widget li:hover ul {
      display: block;
      margin-top: 0px;
      margin-left: 0px;
      }

      Tes menus déroulants sont maintenant dans leur position par défaut.
      Tu peux leur rajouter un espace à gauche mais je pense qu'une dizaine de pixels doit suffire.

      Et voilà ! :)

      Supprimer
  30. Merci infiniment !! En fait je n'avais que 2 choses à changer mais comme je ne m'y connais pas du tout je n'y serais jamais arrivés sans toi !
    J'adore ton blog, je vais le mettre dans la liste de mes blogs coup de cœur !

    Continues comme ça !

    RépondreSupprimer
  31. Salut!
    Merci pour ces précieux conseils et ta clarté dans tes propos! J'ai mis un lien de ton blog sur le mien pour les personnes souhaitant refaire leur interface!
    Des bisous :)

    Justine du blog dans-lesplacardsdejustine.blogspot.com

    RépondreSupprimer
  32. Bonjour
    je n'arrive pas à espacer les bordures des mes onglés, je les trouve trop rapprochés du menu et j'aimerai monter celle du haut et descendre celle du bas.
    Peux tu m'aider ? :)

    RépondreSupprimer
    Réponses
    1. Salut Sophie,

      Veux-tu parler de la bordure des liens de ta barre de navigation ? Ou de celle des titres de tes gadgets de ta barre latérale à côté de tes articles ?

      Supprimer
  33. Bonjour =)

    Juste un petit message pour te dire à quel point ton blog m'a aidée !

    J'ai créé le mien il y a quelques semaines et étant une véritable novice, tes articles m'ont accompagnée durant de longues heures de codage et de "choix déco".
    Merci encore pour ces jolis articles clairs et ce blog ravissant.

    Penses-tu que tu puisses me donner ton avis "d'experte" sur mon blog ?
    N'hésite surtout pas à me donner des conseils et suggestions, je suis preneuse !

    Merci encore & belle continuation ! =)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton blog est super, tu as fait du joli boulot ! :)
      Il y a juste un tout petit détail, les widgets dépassent de ta barre latérale de droite, c'est un peu dommage. Je ne sais pas si tu peux les changer sur le site où tu les a créé, mais pour information la largeur de ta barre latérale est de 210 pixels ;)
      Sinon c'est vraiment sympa ! :D

      Supprimer
  34. Merci infiniment pour tes tutos ! j'ai commencé mon blog avec tes tutos et ça a été plus facile que ce que je pensais.
    Mais petit souci avec ma barre de navigation, j'ai réussi à mettre des barres au dessus de mes catégories mais impossible d'agrandir l'espace entre ces catégories et les "mots" c'est beaucoup trop serré ! j'ai vraiment tout essayé en lisant bien tes tutos mais vu que je suis novice j'ai dû louper quelque chose !
    Autre chose ou impossible de trouver la solution , j'aimerais aussi avoir un espace entre deux articles publiés, (entre la fin du premier et le début d'un autre) car c'est limite collé, il y a aucun espace c'est confus du coup j'ai l'impression :(
    merci beaucoup et bravo pour ton blog il est vraiment très beau j'aimerais bien mettre mes petits dessins un peu partout comme toi c'est très jolie !
    mon blog : http://iplovcreationleblog.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Salut !

      Si j'ai bien compris, c'est l'espace entre les barres et les mots que tu veux agrandir, nan ?

      En fait il y a 2 moyens d'ajouter une barre au-dessus ou en-dessous d'un texte :
      - Surligner ou souligner d'un trait
      - Ajouter une bordure

      Tu as utilisé la première technique mais le problème c'est qu'en surlignant on ne peut pas modifier l'espace entre la barre et le texte. Du coup il vaut mieux utiliser l'autre méthode.

      Pour ce faire, dans Modèle clique sur Modifier le code HTML.
      Clique sur le rectangle noir à côté de <b:skin>...</b:skin>. Si tu ne le trouves pas c'est que cette partie est déjà ouverte, passes à l'étape suivante.

      Clique n'importe où dans la boîte de code et dans la boîte de recherche qui apparaît tape :

      .tabs-inner .widget li a {

      Tu devrais tomber sur le code suivant :

      .tabs-inner .widget li a {
      font-family: syncopate;
      font-size: 20px;
      text-decoration: overline;
      border-top: 100px;
      color: #000000;
      text-transform: uppercase;
      margin-right: 20px;
      padding: 23px;
      padding-bottom: 100px;
      }

      Remplace-le par :

      .tabs-inner .widget li a {
      font-family: syncopate;
      font-size: 20px;
      border-top: 100px;
      color: #000000;
      text-transform: uppercase;
      border-top-style: solid;
      border-top-width: 3px;
      border-top-color: #000000;
      margin-right: 20px;
      margin-left: 20px;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 100px;
      padding-top: 15px;
      }

      Pour modifier l'espace entre la bordure et le texte change la valeur de la dernière ligne de 15px à ce que tu veux :)


      Cherche ensuite :

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

      Tu devrais tomber sur :

      .tabs .widget li, .tabs .widget li {
      margin: 0;
      padding: 0;
      float: left;
      }

      Remplace-le par :

      .tabs .widget li, .tabs .widget li {
      margin: 0;
      padding: 0;
      float: none;
      display: inline-block;
      }

      Ensuite cherche :

      .tabs-inner .widget ul {

      Tu devrais trouver :

      .tabs-inner .widget ul {
      background: margin-top: 10px;
      margin-bottom: 60px;
      border-bottom: none;
      border-bottom-color: border-bottom-width: 2px;
      border-top: overline;
      border-top-color: border-top-width: 50px;
      text-align: center;
      }

      Remplace-le par :

      .tabs-inner .widget ul {
      margin-bottom: 60px;
      border-bottom: none;
      text-align: center;
      overflow: visible;
      margin-top: 60px;
      }

      Pour changer l'espace au-dessus de ta barre de navigation change la valeur de la dernière ligne (margin-top) de 60px à ce que tu veux :)


      Pour l'espace entre tes articles ajoute le code suivant :

      .post-outer {
      margin-bottom: 100px;
      }

      Change la valeur de margin-bottom de 100px à celle que tu souhaites :)

      Et voilà !

      Supprimer
    2. Je ne comprend pas car rien de marche :(

      j'ai bien fait attention au codes aux " } " ect mais quand je tape tous les codes que tu m'as donné et quand j'enregistre mon blog la barre au dessus de mon texte n'est plus la
      Pour info quand tu as dit de chercher ce code :

      tabs-inner .widget ul {

      pour normalement trouver :

      background: margin-top: 10px;
      margin-bottom: 60px;
      border-bottom: none;
      border-bottom-color: border-bottom-width: 2px;
      border-top: overline;
      border-top-color: border-top-width: 50px;
      text-align: center;
      }

      J'ai plutôt trouvé :

      .mobile .tabs-inner .widget ul {
      margin-left: 0;
      margin-right: 0;
      }

      il y a ce . mobile qui reviens souvent dans mes codes et je ne sais pas pourquoi :s

      (pour les autres codes je les ai bien trouvés)

      Pour agrandir l'espace entre les articles j'ai essayé de rajouter ce code :

      .post-outer {
      margin-bottom: 100px;
      }

      à la place de :

      .mobile .post {
      margin: 0;
      }

      J'ai aussi essayé de mettre ton code de cette manière :

      .mobile h3.post-title {
      margin: 0;
      }

      est devenu :

      .mobile h3.post-title {
      margin-bottom: 100px;
      }
      et rien ne s'est passé non plus...

      car il y a plusieurs codes concernant le titre j'ai l'impression ?

      Je ne comprend pas car au tout début j'ai fais mon blog avec tes tutos ça marchais plus ou moins mais j'y arrivais ! et puis j'ai voulu faire d'autres changements comme ceux-ci et j'ai aussi voulu suivre tes autres tutos (nottament changer la police des titres, faire des bannières pinterest,facebook,mail) ect ... et rien de fonctionne, alors que j'y passe des heures, est ce que suivant le modèle de mon blog certains tutos ne peuvent pas marcher ?
      pourtant c'est le modèle le plus simple.
      J'ai aussi bidouiller pas mal en cherchant mais j'ai toujours fait attention de rien enregistrer si je n'était sûre de rien mais c'est possible que j'ai changer quelque chose qui bloc tout ?
      Désolé de mon pavé et de mes soucis avec mon blog , tes explications sont pourtant bien claires !

      Supprimer
    3. Les codes commençant par .mobile sont pour le visuel de ton blog sur mobile seulement. Les changer ne modifiera pas ton blog sur ordinateur. Il faut donc bien modifier les codes sans le .mobile devant ;)

      Sur ton blog, tu devrais trouver les codes aux lignes suivantes :
      .tabs-inner .widget ul { --> ligne 290 environ
      .tabs-inner .widget li a { --> ligne 303 environ
      .tabs .widget li, .tabs .widget li { --> ligne 332 environ.

      Pour :

      .post-outer {
      margin-bottom: 100px;
      }

      Tu peux le rajouter juste après les codes du menu (sans ".mobile" ;))

      Dis-moi si ça marche :)

      Supprimer
    4. Hello !
      Tout d'abord merci de ta patience :)
      Alors au début ça n'as pas marché, puis je me suis déconnectée et j'ai re essayé et ça a fonctionné ! du moins pour la barre de navigation (je vais peaufiner les détails plus tard car au début je voulais une ligne entière et pas discontinue mais c'est pas grave j'ai choisis la facilité! et pour le moment c'est déjà un bon début!

      Par contre pour l'espace entre les articles je ne comprend pas ou je dois mettre ton code ? : .post-outer {
      margin-bottom: 100px;
      }

      Car je trouve ça :

      .post {
      margin: 0 0 $(post.margin.bottom) 0;

      }
      h3.post-title, .comments h4 {
      font: $(post.title.font);
      margin: .75em 0 0;

      }

      .post-body {
      font-size: 110%;
      line-height: 1.4;
      position: relative;

      J'ai essayé de le mettre un peu partout dans les codes ci-dessus mais ça marche pas !
      quand tu dit de le rajouter après les codes du menu j'ai essayé aussi et rien ne se passe (si j'ai compris ce que c'est un menu bien sûr :s )

      Merci encore :)

      Supprimer
    5. Tu peux essayer de l'ajouter autrement :

      Dans Modèle clique sur Personnaliser. Dans le menu à gauche clique sur Avancé, puis dans la liste de liens qui apparaît clique sur Ajouter le fichier CSS (le dernier lien de la liste).
      Dans le boîte de code blanche qui apparaît colle :

      .post-outer {
      margin-bottom: 100px;
      }

      Clique sur appliquer au blog en haut à droite de l'écran.

      Ça devrait marcher. Tiens moi au courant :)

      Supprimer
    6. j'ai suivi à la lettre tes indications, et puis je suis déjà allé dans ces paramètres donc je suis sûre de ne m'être pas trompé.
      Pourtant ça n'a pas fonctionné.... je suis désespéré lol
      Que se passe - t-il avec mon blog ! ai-je trop bidouillé et j'ai fais des manips qui fallait pas ? car la vraiment je ne comprend pas... :(
      vraiment désolé :s

      Supprimer
    7. Dans ce cas retrouve ce code :

      .post {
      margin: 0 0 $(post.margin.bottom) 0;
      }

      Et remplace-le par :

      .post {
      margin: 0 0 100px 0 !important;
      }

      Supprimer
    8. Je suis désolé mais ça ne marche pas...
      Tes autres astuces aussi car j'ai voulu utiliser une police google font, mettre la date dans un cercle, pleins d'autres choses qui n'ont pas marché et avec aussi d'autres astuces d'autres bloggeuses :(
      je suis à la limite de tout recommencer à zéro !
      je comprend pas car j'ai réussi à changer pleins de choses au début mais plus maintenant ! j'ai dû modifier qq chose qu'il ne fallait pas ?

      Question : est-ce que le template du blog peut y jouer qq chose ? car si on utilise pas les mêmes templates peut-être que les codes ne sont pas les même ?
      La vraiment je trouve pas la solution...

      Supprimer
  35. Coucou, merci pour ce tuto, il est super utile et bien expliqué etc ! J'ai un petit problème, ma barre est sur trois lignes, que faire ? Voici le lien de mon blog au cas où : thenailartzone.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Angéla,
      Pour régler ce problème, cherches le code suivant :

      .tabs .widget li, .tabs .widget li {
      display: inline;
      float: none;
      }

      Et remplace "inline" par "inline-block" comme ceci :

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

      Les liens de ton menu s'affichent maintenant sur 1 ligne ;)

      Supprimer
    2. Merciiii infiniment !!! Je souhaiterai avoir un plus grand espace/écart entre chaque "mot" (si tu vois ce que je veux dire) mais je n'y arrive pas :(

      Supprimer
    3. Pour modifier l'espace enter les mots de ta barre de navigation il faut changer la valeur en pixels de margin-right du code suivant (ligne 281 environ) :

      .tabs-inner .widget li a {
      font-family: Arial;
      font-size: 13px;
      color: #000000;
      text-transform: uppercase;
      margin-right: 40px;
      }

      Supprimer
  36. Je te remercie pour tes nombreux tutoriels, ils sont très clairs et même moi qui suis malvoyante, j'arrive à m'y retrouver !

    J'ai par contre une petite question : je voudrais créer une page "A propos" à mon menu, mais comment faire ? J'ai vu qu'il y avait moyen de créer un menu à partir de plusieurs pages, mais il y a-t-il moyen d'insérer une page dans le modèle de menu que tu proposes ?

    Je ne sais pas si j'ai été très claire... Merci pour toute aide que tu pourras m'apporter.

    RépondreSupprimer
    Réponses
    1. Salut Laeti !

      C'est tout à fait possible d'ajouter un lien vers une page dans ton menu, c'est d'ailleurs ce que j'ai fait pour ma page A propos :)

      Tout d'abord il faut créer la page A propos dans Pages à partir de ton tableau de bord.
      Une fois créée, retourne sur Pages. Tu verras alors la liste de tes pages. En survolant le nom de ta page A propos, un lien Afficher apparaîtra en-dessous. Fais un clique-droit sur Afficher et clique sur Copier l'adresse du lien.

      On a maintenant le lien qui renvoie à ta page A propos. Il suffit alors de l'ajouter à ton menu.

      Voici un exemple de code HTML de menu :

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

      <div id="barre_nav">
      <ul>
      <li><a title="Accueil" href="http://adresse-blog.fr">Accueil</a></li>
      <li><a title="Catégorie" href="http://adresse-blog.fr/search/categorie">Catégorie</a></li>
      </ul>
      </div>

      <!-- fin du menu -->

      Je souhaite ajouter un lien vers ma page A propos après le lien Catégorie.
      J'ajoute :

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

      Comme ceci :

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

      <div id="barre_nav">
      <ul>
      <li><a title="Accueil" href="http://adresse-blog.fr">Accueil</a></li>
      <li><a title="Catégorie" href="http://adresse-blog.fr/search/categorie">Catégorie</a></li>
      <li><a title="A propos" href="Lien">A propos</a></li>
      </ul>
      </div>

      <!-- fin du menu -->

      Tu n'as plus qu'a remplacer le mot Lien par le lien que tu as copié :

      <li><a title="A propos" href="http://adresse-blog.fr/p/a-propos.html">A propos</a></li>

      Et voilà ! :)

      Supprimer
    2. Je ne vois ta réponse qu'aujourd'hui, apparemment je suis complètement passée à coté ! Merci beaucoup, en plus tu m'avais répondu très rapidement ! :-)

      Supprimer
  37. merci beaucoup!!!!!! ton blog est super!!!!

    RépondreSupprimer
  38. Bonjour,
    Déjà ton blog est génial j'ai appris pas mal de choses et j'ai pu faire pas mal de changement.
    Alors voilà mon problème j'ai suivi le tuto, mais je ne sais pas pourquoi j'ai une ligne en pointillé au dessus et elle ne prend pas toute la largeur de ma barre de navigation. Je n'ai pas de border ou autre dans mon css pourtant.J'aimerais bien pouvoir supprimer la ligne.
    http://mahora-ebook-cover.blogspot.fr/
    Merci d'avance pour ton aide :)

    RépondreSupprimer
    Réponses
    1. Salut Mahora Luna,
      Le problème vient du code commençant par :

      .widget ul li, .widget #ArchiveList ul.flat li {

      Il doit ressembler à quelque chose comme ça :

      .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: dashed 1px #777777;
      }

      Remplace-la dernière ligne par :

      border-top: none;

      Comme ceci :

      .widget ul li, .widget #ArchiveList ul.flat li {
      padding: .35em 0;
      text-indent: 0;
      border-top: none;
      }

      Si tu ne trouves pas le code, tu peux simplement ajouter le code suivant :

      .widget ul li {
      border-top: none;
      }

      Après le code suivant :

      /* Content
      ----------------------------------------------- */

      Et voilà ! ;)

      Supprimer
    2. C'est bon ça marche merci beaucoup :)

      Supprimer
  39. Coucou , déjà bon noël, merci pour ce tutoriel , mais voila , j'ai un problème , je n'arrive pas à centrer ma barre de navigation . Alors je ne sais pas de quel sens était utilisé le centrer (verticalement ou horizontalement , je sais pas si tu me comprend ) . Ce que j'essaye de dire c'est que je n'arrive pas à la centrer , qu'il y a de l'espace à gauche et à droite , comme un titre sur une feuille.
    Je ne sais pas si tu comprendras , passe de bonnes fêtes de fin d'années !

    RépondreSupprimer
    Réponses
    1. Salut Astrid,

      Bon Noël à toi aussi :)
      Pour ton menu, il te manque un ; dans un bout de code.
      Cherches le code suivant :

      .tabs-inner .widget ul {
      background: #FFFFFF
      text-align: center;
      }

      Et rajoutes un ; après #FFFFFF

      Ça devrait régler ton problème ;)
      Bonnes fêtes de fin d'année :)

      Supprimer
    2. A oui , merci , je l'avais oublié , merci pour cette réponse si rapide et si efficace =)

      Supprimer
  40. Merci encore Cathy de tous tes précieux conseils et tuto. Sans toi je n'y serai jamais arrivé, et grace à toi mon blog prend forme petit à petit.
    J'ai juste un souci à ce stade, je ne sais pas pourquoi mais tous les titres de mon menu n'apparaissent pas de la même couleur... mystère.
    Si tu as l'explication, je suis preneuse car je n'ai vu personne avoir rencontré le même souci dans tous les commentaires ci dessus.
    Merci pour tout.
    Isa.

    RépondreSupprimer
    Réponses
    1. Salut Isa,
      En fait il y a une petite erreur dans ton code :

      .tabs-inner .widget li a {
      font-family: trebuchet;
      font-size: 18px;
      color: FF9300;
      margin-right: 20px;
      }

      Il manque le # devant le code couleur, comme ceci :

      .tabs-inner .widget li a {
      font-family: trebuchet;
      font-size: 18px;
      color: #FF9300;
      margin-right: 20px;
      }

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

      Supprimer
  41. Bonsoir LadyBird! J'aimerais modifier la couleur du soulignement (underligne) du texte. J'ai essayé avec le code:
    "text-decoration-color"
    Mais rien n'y fait le soulignement reste noir! Peut-tu m'aider sur ce point et si je peux également modifier la largeur de la barre de soulignement.
    J'aimerai que le texte reste le même mais que le soulignement ai une couleur différente! Merci à toi :)

    RépondreSupprimer
  42. J'ai réussi!!! Youpii!!
    Sinon au lieu de te déranger pour rien comme presque à chaque fois je voulais te demander un tuto!
    Peux-tu nous montrer comment garder notre barre latérale fixe et faire l'article défilé à l'infini? Je crois que ça s'appelle un scroll..
    Merci encore :)

    RépondreSupprimer
  43. Génial ! Tu m'a trop aidé ! Merci !
    Bon ce n'est pas encore du grand art mais au moin j'ai mon menu maintenant :)
    http://chicnsheep.blogspot.be/

    RépondreSupprimer
    Réponses
    1. J'aime bien les couleurs :)
      Mais j'ajouterais bien un peu d'espace entre les bordures et les liens.
      Tu peux ajouter les 2 lignes suivantes par exemple :

      padding-top: 8px;
      padding-bottom: 8px;

      Au code suivant, avant "}" :

      .tabs-inner .section:first-child ul {
      margin-top: 2px;
      margin-bottom: 2px;
      border-bottom: solid;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 2px;
      border-top: solid;
      border-top-color: #4BB5C1;
      border-top-width: 2px;
      }

      Comme ceci :

      .tabs-inner .section:first-child ul {
      margin-top: 2px;
      margin-bottom: 2px;
      border-bottom: solid;
      border-bottom-color: #4BB5C1;
      border-bottom-width: 2px;
      border-top: solid;
      border-top-color: #4BB5C1;
      border-top-width: 2px;
      padding-top: 8px;
      padding-bottom: 8px;
      }

      Pour augmenter l'espace change 8 pour un nombre plus grand, et pour moins d'espace diminue ce nombre ;)

      Supprimer
  44. Hello! Merci beaucoup pour ces tutos très clairs, je n'avais pas fait de CSS depuis 5 ans et grâce à toi j'y retrouve goût!

    Par contre j'ai un souci sur ma barre de nav., j'ai suivi tes étapes, mais dès que je change la taille de ma police, des dash apparaissent au dessus de mes 2 derniers liens, et je ne comprends pas d'où cela vient :( pourrais-tu m'éclairer?

    RépondreSupprimer
    Réponses
    1. Salut Miss C.

      Ajoutes ce code à la suite des codes pour ton menu :

      .widget ul li {
      border-top: none !important;
      }

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

      Supprimer
  45. Coucou je vois que je ne suis pas la seule à avoir ce soucis , je ne parviens pas à aligner la barre :( tout reste à gauche malgré les codes :

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


    Pourrais-tu m'aider ?

    RépondreSupprimer
  46. Bonsoir Catherine;
    voilà j'ai quelques petites questions à te demander!
    1/ J'aimerai au survol du lien, soit un background qui sliderait de la gauche vers la droite, ou du milieu vers l'extérieur. Soit que ce soit le surlignement du texte qui ai cet effet.
    Peut-tu m'aider? Je fouine depuis pas mal de temps sur le net et c'est vrai qu'avec les tutos angais j'ai beaucoup de mal pour le moment à savoir où bien placer les balsies et surtout comment!
    2/ J’apprécie énormément la façon dont tu a crée/customisé la date de tes articles et je cherche à reproduire la même chose mais pour le titre des articles! As-tu un code à me conseiller?
    Bonne soirée!

    RépondreSupprimer
    Réponses
    1. Salut Lux-M !

      Ma réponse étant trèèès longue je t'envoie un mail ;)

      Supprimer
  47. Ooooh je te remercie par avance de prendre autant de temps pour moi :)
    Bises!

    RépondreSupprimer
    Réponses
    1. Salut Lux-M,
      J'ai envoyé mon e-mail le 22 mais je viens de recevoir un e-mail d'erreur comme quoi il n'est pas arrivé :/. Je me suis peut-être trompé dans ton adresse. Peux-tu m'envoyer un e-mail par le bouton contact pour que je puisse t'envoyer la réponse ?

      Supprimer
    2. Bonsoir Catherine! Je me disais aussi! J'ai attendu avant de venir t'embêter sur ta page mais finalement j'ai bien fait! Alors voici une adresse mail où me contacter: mandywowlol@gmail.com
      Désolé pour le temps de réponse! Je te remercie grandement!

      Supprimer
    3. Je t'ai renvoyé le mail :)

      Supprimer
    4. Purée (pour ne pas dire autre chose..) je ne t'ai pas donné le bon mail: j'ai confondu gmail et yahoo!
      En fait c'est mandywowlol@yahoo.com. Encore désolé pour le temps perdu!
      Depuis j'ai réussi à configuré le titre de mes articles mais la barre de navigation c'est encore autre chose donc merci pour ton aide!

      Supprimer
    5. Pas de soucis,
      e-mail envoyé ;)

      Supprimer
  48. merci pour ces précieux conseils. Mon blog s'embellit de jour en jour, c'est chouette!

    RépondreSupprimer
  49. Salut! Ce qui est génial avec ton blog, c'est que tu rends accessible le code (ce qui est assez incroyable!!). Il y a encore une semaine, je n'y connaissais rien mais avec tes tutos hyper bien présentés, clairs etc, j'ai réussi à comprendre comment ça fonctionnait à peu près!
    Donc bravo! et Merci!
    Peut être pourrais-tu justement faire une sorte de guide avec tout ce qu'on peut mettre, comme quand tu nous explique ça:

    "Pour le style (font-style) du texte on peut préciser :
    Texte en gras : bold
    Texte en italique : italic
    Texte oblique : oblique
    Texte normal : normal"

    surtout que c'est en anglais et qu'on peut rapidement être bloqué par rapport aux termes à mettre pour définir ce qu'on veut faire;
    Voilà, c'est une idée ;-)

    Continue, tes articles sont géniaux! Merci du fond du coeur!

    RépondreSupprimer
    Réponses
    1. Salut Claire, c'est un très bonne idée ! Je vais mettre au point un petit guide ça peut être sympa :)

      Supprimer
    2. Salut Catherine! Regarde ce que j'ai trouvé :-P Je sais que tu connais déjà tout, mais si ça peut t'aider à organiser ton guide, on ne sait jamais, je te mets le lien ;-)
      http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css

      Supprimer
  50. Salut Cath, je t'envoie un petit message parce que j'ai un problème avec la barre de navigation. J'en avais crée une hier grâce à tes tutos et tout fonctionnait très bien, le menu déroulant, la police, tout était nickel. Ce matin, je fais d'autres modifications vis à vis du design du blog (je ne touche pas à la partie du menu puisqu'il était nickel). Et là, je me déconnecte de mon compte et je me mets en mode "visiteur' si je puis dire, pour voir si tout fonctionne bien de l'extérieur. C'est à ce moment là que je me rends compte que les liens de ma barre de menu ne marchent pas. On ne peut pas cliquer dessus (comme si il n'y avait pas de liens), le menu déroulant ne s'affiche pas (comme si il n'y en avait pas). Je suis un peu désespérée je dois t'avouer haha, j'ai supprimé tous les codes HTML en rapport avec cette barre de menu mais j'ai du faire une fausse manip non? Aurais-tu la solution s'il te plait? Peut être un code HTML à changer?

    En fait le problème c'est que les liens marchent dans la colonne de droite, mais quand je transfère le widget en haut ils ne marchent plus, comme si l'option lien avait été désactivée au niveau de la barre de menu mais pas ailleurs sur le blog.

    J'espère avoir été claire, c'est un peu compliqué à expliquer ^^ Je te mets le lien de mon blog si tu souhaites aller voir, la barre de menu n'y est plus (comme j'ai dis précédemment je l'ai supprimé) mais bon peut être que tu remarqueras quelque chose qui ne va pas!
    http://www.splendidfeeling.blogspot.fr

    Voilà voilà, merci d'avance pour ton aide. :)

    RépondreSupprimer
    Réponses
    1. Bonjour Splendid Feeling,
      Ça ne devrait poser aucun problème pourtant. Peux-tu remettre le menu pour que je puisse voir le problème ?

      Supprimer
    2. C'est fait :)
      Merci de prendre le temps de me répondre, il y a aussi un menu déroulant mais vu que les liens ne marchent pas il ne s'affiche pas.

      Supprimer
    3. Tout d'abord il y a un problème avec la date de tes articles qui empêche de cliquer sur le premier lien.

      Sur la page Modifier le code HTML de ton thème cliques sur le triangle noir à gauche de <b:skin>...</b:skin> et appuie 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 ceci :

      .date-header span {

      Apparemment tu as écris ce code plusieurs fois, or il ne faut qu'une seul version des codes CSS. Supprime celles que tu ne veux pas utiliser et laisse celle que tu souhaite utiliser.

      Dans un des codes se trouve cette ligne :

      padding: 278px;

      Supprime-la.

      Ton menu fonctionne correctement, le seul problème c'est que les liens que tu as associé à Fashion et Beauty sont le lien de ton blog. Si tu souhaites qu'ils renvoient à des catégories ajoutes à la fin des url :

      /search/label/categorie

      En changeant categorie pour le nom du libellé choisi.

      Et voilà :)

      Supprimer
    4. Merci beaucoup, ça remarche maintenant! Mais en fait si j'ai bien compris, je ne peux pas avoir à la fois un menu, et la date mise au centre comme j'avais fait souligné grâce au code :

      padding: 278px; /* espace entre la bordure et le texte */

      ?

      Encore une fois merci beaucoup, tu m'auras beaucoup aidé dans la conception de mon blog ! :)

      Supprimer
    5. Tu peux centrer tes titres si tu le souhaites mais pas avec padding.
      Il faut le faire en ajoutant la ligne suivante :

      text-align: center;

      Au code commençant par :

      .date-header {

      Supprimer
  51. Tes tutoriels sont super intéressant ! Il apprends pas mal de chose ! :) Je me pose une question pourquoi n'utilise pas le fichier css ? Cela serais plus facile de l'utiliser, cela éviterais de trop toucher le fichier htlm non ? :)

    RépondreSupprimer
    Réponses
    1. En fait on modifie le fichier CSS directement dans le code HTML. Le problème c'est que l'interface qui propose d'ajouter du code CSS dans Modèle > Personnaliser ne marche pas toujours très bien. Enfin, c'est ce que j'ai pu remarquer :)
      Mais on peut très bien utiliser l'interface de personnalisation de Blogger. Le petit soucis c'est qu'on est limité par les options proposés. Par exemple, il ne nous propose pas d'ajouter une bordure ou un espace autour des titres :)

      Supprimer
  52. Re-bonjour ! :)
    J'aurai encore une petite question,
    Est-il possible de rajouter un code pour que la barre soit plus épaisse ? Au niveau du fond, par exemple j'ai ma barre de navigation, et le fond de couleur prend seulement la hauteur du texte, alors que j'aimerais que le fond soit un peu plus haut et un peu plus bas que le texte (je ne sais pas si je suis claire ^^),
    Je pensais qu'il fallait toucher au code margin pour faire ça, mais apparemment ce n'est pas ça... si tu as la solution .. :-)
    Merci beaucoup,
    Bonne journée,
    Lucie

    RépondreSupprimer
    Réponses
    1. Rebonjour Lucie,

      Oui c'est un faux-amis le margin, il ajoute de l'espace autour d'un élément mais ici tu veux ajouter de l'espace à l'intérieur du menu, il faut donc ajouter du padding. Cherches le code suivant :

      #barre_nav ul {
      background: #FEADAE;
      text-align: center;
      }

      Et ajoutes les lignes suivantes avant le signe } :

      padding-top: 10px;
      padding-bottom: 10px;

      Comme ceci :

      #barre_nav ul {
      background: #FEADAE;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
      }

      Changes la valeur de 10px à celle que tu souhaites, et voilà :)

      Supprimer
  53. Ahhhh super !! merci beaucoup c'est top ! :D
    Moi qui pensait que je n'arriverai jamais à rien bidouiller toute seule sur mon design, grâce à toi tout est beaucoup plus clair ! :D
    Merci infiniment,
    Bon week-end ! :)
    Lucie

    RépondreSupprimer
  54. Un gros merci !! C'est génial comme site ! Je trouve plein de choses à bidouiller ! Yiiihaaaa.
    Thea

    RépondreSupprimer
  55. Bonjour :)
    J'ai tenté de bidouiller un peu pour faire l'encadré que je cherchais et j'ai réussi grâce à ton tuto. Malheureusement, je me retrouve avec une marge sur le coté droit pas très jolie et vide. Peux-tu m'aider stp?? Merci à toi !

    RépondreSupprimer
    Réponses
    1. Bonjour Gwen,
      Pour régler ce problème cherches la ligne suivante :

      #PageList1

      Tu devrais trouver le code suivant :

      #PageList1 {
      padding-left:225px;
      }

      Remplaces-le par :

      #PageList1 {
      padding-left: 0;
      }

      Et ajoutes le code suivant juste en-dessous :

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

      Voilà, ça devrait marcher :)

      Supprimer
  56. Je te remercie tellement pour cet article! Tu es la première à expliquer tout clairement et que ça fonctionne à la fin! Merci mille fois!!!!

    Gros bisous, Megan
    http://theprivatemode.com

    RépondreSupprimer
  57. Coucou, merci beaucoup pour cet article ! J'ai un problème, je n'arrive pas à mettre une bordure en bas alors qu'en haut j'y arrive :/
    Mon blog : http://unemariniere.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a un petit oubli dans ton code :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      padding-top: 10px; /* Espace au-dessus des liens du menu */
      padding-bottom: 10px; /* Espace en-dessous des liens du menu */
      border-bottom: solid
      border-bottom-color: #000000;
      border-bottom-width: 1px;
      border-top: solid;
      border-top-color: #000000;
      border-top-width: 1px;
      background: none;
      text-align: center;
      }

      Il manque un signe ; à la fin de la ligne

      border-bottom: solid

      C'est pour cela que la bordure du bas ne s'affiche pas ;)

      Supprimer
  58. Merci pour ce tutoriel :)
    J'avais déjà manipulé les codes comme ça sur des forums donc je connaissais le fonctionnement, mais ton tuto ma grandement facilité les choses :)

    RépondreSupprimer
  59. Salut!
    Ton tuto est top, j'ai réussi à créer des catégories ensuite la centrer!
    En revanche, je sais comment je me suis débrouillée, mais cela a changé la police de mes articles, du coup je ne sais pas où et comment modifier l'HTML pour récupérer la police que j'avais choisi! Merci d'avance de ton aide!!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as supprimé un peu de code, du coup le navigateur lis mal le code et n'affiche pas correctement ton texte.
      Sur la page Modifier le code HTML, cliques sur le triangle noir à gauche de <b:skin>...</b:skin> 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 ceci :

      body {

      Tu devrais trouver ce code plusieurs fois. Cliques sur la boîte de recherche et appuies à nouveau sur Entrer jusqu'à ce que tu trouves ceci :

      .tabs .widget li, .tabs .widget li {
      }
      ----------------------------------------------- */
      body {
      font: italic normal 14px Neuton;
      color: #000000;
      background: #ffffff none repeat scroll top left;
      padding: 0 0 0 0;
      }

      Rajoutes :

      /* Content

      Avant la ligne en pointillés, comme ceci :

      .tabs .widget li, .tabs .widget li {
      }
      /* Content
      ----------------------------------------------- */
      body {
      font: italic normal 14px Neuton;
      color: #000000;
      background: #ffffff none repeat scroll top left;
      padding: 0 0 0 0;
      }

      Sauvegardes et ça devrait marcher :)

      Supprimer
    2. Je vais essayé et je te dis ça dès que j'ai effectué les modifications! Merci pour ta réponse! =))

      Supprimer
    3. Super!!! Tu viens de sauver mon blog! Mille merci pour ta gentillesse! =))

      Supprimer
  60. Hello,

    Je reviens vers toi car j'aimerai insérer une barre de recherche à droite dans la barre de navigation, mais je ne sais pas comment faire, peux-tu m'aider ou faire un post ? Merci d'avance

    RépondreSupprimer
    Réponses
    1. Je pense qu'un tutoriel serait pas mal car ça doit intéresser du monde ;)

      Supprimer
    2. Ok ça marche, merci :)

      Supprimer
  61. Bonjour !

    Tout d'abord merci beaucoup pour tes tutos qui rendent mon blog beaucoup plus esthétique, ensuite j'ai un petit problème.
    Sur ma barre de navigation il y a des petits traits gris qui se sont faufilé et que je n'arrive pas à enlever et le style d'écriture "chewy" n'apparait pas alors que j'ai tout bien fait.
    De plus en pleine diversification de sujets pour mon blog, j'ai créé des catégories ou il n'y a pas encore de lien mais je ne sais pas comment faire pour créer une nouvelle page qui sera reliée directement à une des catégories de ma barre de navigation.

    Je te remercie beaucoup et j'espère que je suis claire !
    http://paef77.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Barbara,
      Pour enlever les pointillés, il faut retrouver le code suivant :

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

      Pour cela, sur la page de modification du code HTML de ton blog, 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 colles :

      /* Centrer la Barre de Navigation */

      Et appuies sur entrer.
      Juste après la ligne :

      float: none;

      Colles :

      border-top: none;


      Ensuite pour ta police, dans la boîte de recherche colles ceci :

      <head>

      Juste après cette ligne colles :

      <link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

      Sauvegardes, et voilà ;)

      Supprimer
    2. Super merci ! ça fonctionne !

      Supprimer
  62. Bonjour,

    J'ai cherché partout mais en vain; pour garder surligner l'onglet de la page en cours, par exemple ici "About me" quand je navigue dessus, j'ai vu des tutos disant de copier dans le CSS un code pour chaque page d'onglet et ainsi y définir les couleurs etc.

    J'ai tenté comme ceci (le code ne s'affiche par correctement dans le commentaire quand je le regarde en apercu, il manque une partie avec "div'. Dis moi comment je peux te l'envoyer en complet) :
    "


    /* Styles pour les liens survolés ou sélectionnés au clavier*/
    #navigation a:hover, #navigation a:focus {
    background-color: #C6AA85;
    color: ##cc1177;
    }

    /* Styles pour la rubrique en cours */
    #navigation #en-cours a {
    background-color: #C6AA85;
    color: #ffffff;
    }
    About me

    "

    Cela ne fonctionne pas, sais tu m'indiquer où cela coince? Merci!

    RépondreSupprimer
    Réponses
    1. Tu peux m'envoyer ton code par e-mail, comme ça je pourrais le voir.
      Par contre, petite remarque, il y a un # en trop à la ligne :

      color: ##cc1177;

      Du code :

      /* Styles pour les liens survolés ou sélectionnés au clavier*/
      #navigation a:hover, #navigation a:focus {
      background-color: #C6AA85;
      color: ##cc1177;
      }

      Supprimer
  63. Géniiial ! Un grand merci pour ce tuto au top !

    RépondreSupprimer
  64. Bonjour,

    Merci beaucoup pour tes tutoriels ! Moi qui ne connaît absolument rien au codage, c'est un sacré coup de pouce !

    Peut-être pourrais-tu m'aider sur un point : je cherche a faire que mon menu (et ma bannière par la même occasion) fasse la même largeur que mon blog (comme le tiens en fait) et pouvoir mettre une image d'arrière plan seulement sur la partie basse,du coup... J'ai retourné internet et rien de ce que j'ai pu essayé n'a fonctionné...
    Aurais-tu une solution ? :) Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Hélène,
      Cela demande de modifier directement le code HTML du blog. C'est plus compliqué à expliquer et peut varier d'un blog à un autre. Ce serait plus simple que je le fasse pour toi. C'est même compris dans mes prestations pour 20 €.
      Si ça t'intéresse envoi-moi un e-mail ;)

      Supprimer
  65. Bonjour Catherine,

    Tout d'abord merci, tes tuto m'ont permis de "bidouiller" un blog qui commençait à prendre de l'allure... jusqu'à mon échec de personnalisation de la barre de navigation... J'ai l'impression que le codes "marge-top"et "marge-bottom" ne modifient rien, alors que je les ai retapé 20 fois pour être sûre... Du coup je n'arrive pas à faire de l'espace avant et après le texte (c'est moche).

    Et puis, incompréhension totale, j'ai une ligne pointillée collée au(dessus du texte, alors que je n'ai entrer aucune bordure... J'ai l'impression qu'elle a été configuré ailleurs, parce qu'elle est rouge (??? tu peux la voir ici : http://ohmonfle.blogspot.mx/)

    Merci pour ton temps, et sinon, j'envisage sérieusement de te demander un gros coup de pouce (via mail ;)

    Merci !
    Coralie

    RépondreSupprimer
  66. Re-bonjour,

    Je t'ai écrit un commentaire il y a quelques heures au sujet de pointillés dans ma barre. Je viens de trouver la réponse dans les commentaires précédents... Pareil pour les espaces. J'avoue, j'ai perdu patience. Désolée, désolée, désolée !

    Merci encore pour ton blog ;)
    Coralie

    RépondreSupprimer
    Réponses
    1. Pas de soucis ! ^^
      Je suis contente que tu as trouvé la solution :)

      Supprimer
  67. Le top du top ces petits tutos !! Simple et efficace :)
    Merci.

    RépondreSupprimer
  68. Coucou !

    Déjà, je te remercie énormément pour tes tutoriels ! J'apprécie particulièrement le fait que tu expliques pas à pas les choses alors que la plupart des autres tutoriels nous disent simplement de "coller ça ici".
    J'ai réussis à faire toutes les modifications que je voulais, mais je suis bloquée depuis une demie-heure parce que le texte de ma barre ne veut pas se centrer... Je ne comprends vraiment pas car je pense avoir fait tout ce que tu as dit...

    Pourrais-tu m'aider s'il te plait ?
    (si tu vas sur mon blog, tu verras que c'est centré mais c'est la barre blogger d'origine, je fais tous mes tests sur un autre blog fait exprès !).

    Merci d'avance :)

    RépondreSupprimer
  69. Toutes mes excuses, c'est réglé ;).

    Merci encore :)

    RépondreSupprimer
  70. merci pour ton article très clair et d'une grande aide !

    RépondreSupprimer
  71. Merci pour tous ces tutos ! Celui-là est vraiment facile à manipuler, un vrai plaisir !

    RépondreSupprimer
  72. coucou
    je vouais changer la couleur de ma barre de navigation mais im possible de trouver
    /* Tabs dans le code

    c est bien dommage
    Xo
    kittyhid.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est parce que tu as installé un thème sur ton blog que tu ne trouves pas le code.
      Tu devrais trouver les codes pour ton menu sous :

      /*** Navigation ***/

      Mais ils ne seront pas écrit de la même manière que dans le tutoriel, ils commencent par :

      .menu

      Pour le menu et :

      ul.menu

      Pour le menu déroulant

      Supprimer
    2. Ohhh ok merci Catherine je vais reessayer alors

      Supprimer
  73. Merci pour cet article très utile !

    RépondreSupprimer
  74. Hello Catherine,

    Je découvre ton blog et tes tutus avec délectation !
    Merci beaucoup pour le temps investi à nous apprendre ce langage pour beaucoup inconnu !

    Pour mon blog http://www.dressingdes4saisons.com/ je souhaiterais :

    1. Centrer mon menu déroulant sur la largeur total du blog (y compris la partie de gauche )
    2. Bloquer ce menu lorsqu'on fait défiler la page vers le bas (c'est-à-dire que le menu reste en haut de la page)
    3. Mettre la date des articles en dessous du titre de l'article
    4. Enlever la vilaine apostrophe qui apparaît tout en haut à gauche au dessus de mon header.

    En espérant que ça ne sera pas trop compliqué à mettre en oeuvre.
    Je te remercie par avance de ton aide.

    Mel

    RépondreSupprimer
    Réponses
    1. Bonjour Mel,
      Souhaites-tu une prestation ? Si oui, envoi-moi un e-mail en cliquant sur l'icône enveloppe dans ma barre latérale. Je t'expliquerai comment je fonctionne :)

      Supprimer
  75. Bonsoir,
    Merci à vous pour ces superbes tuto.
    Je viens de faire une barre de navigation déroulante grâce à vous mais j'aurais besoin d'une petite aide pour élargir la barre dans le sens de la hauteur.
    J'ai regardé les discutions précédentes pour voir si quelqu'un aurait voulu de même, il a bien une personne a qui vous avez répondu en février et vous lui avez donné ce code ci-dessous à modifier mais je ne le trouve nulle part :

    #barre_nav ul {
    background: #FEADAE;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    Que faire pour élargir ma barre.
    Merci pour votre réponse.
    Stevie

    RépondreSupprimer
    Réponses
    1. Bonjour Stevie,
      Essaye de chercher le code suivant :

      .tabs-inner .widget ul {
      background: #ede0f2;
      margin-top: 25px;
      text-align: center;
      }

      Rajoutes les 2 lignes suivantes avant le signe } :

      padding-top: 10px; /* Espace au-dessus du menu déroulant */
      padding-bottom: 10px; /* Espace en-dessous du menu déroulant */

      Comme ceci :

      .tabs-inner .widget ul {
      background: #ede0f2;
      margin-top: 25px;
      text-align: center;
      padding-top: 10px; /* Espace au-dessus du menu déroulant */
      padding-bottom: 10px; /* Espace en-dessous du menu déroulant */
      }

      Changes la valeur de 10px en l'augmentant ou en la diminuant pour obtenir ce que tu souhaites ;)

      Supprimer
    2. Bonjour,
      J'ai fait cette modif et c'est bon
      Un grand Merci à toi

      Supprimer
  76. Coucou! Je découvre ton blog et il tombe à pic puisque je compte m'attaquer bientôt à la refonte de mon blog! Juste une petite question, je n'arrive pas à utiliser la police que je veux, pourtant elle est bien présente dans la liste utilisée par Blogger, il s'agit de Sue Ellen! J'ai beau essayer de bidouiller plein de solutions différentes, rien à faire... Je ne sais pas si tu saurais à quoi cela est dû ?!
    En tout cas mille mercis pour tes tutos vraiment parfaits!

    RépondreSupprimer
    Réponses
    1. Bonjour, essaye avec Sue Ellen Francisco à la place de Sue Ellen ;)

      Supprimer
  77. Bonjour, je découvre blogger et votre blog qui explique bien le CSS, cependant j'ai un petit soucis sur mon menu j'ai un espace d'environ 3cm entre les onglets et les sous catégories que je voudrais diminuer. ça fait 1 semaine que je penche dessus toujours pas de solution; Pourrez-tu m'aider STP. merci d'avance

    #cssnav {
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: auto;
    font: $(tabs.font); /* Personnaliser le modèle - permet de changer la police, taille, etc... */
    color: $(tabs.text.color); /* Personnaliser le modèle - permet de changer la taille */
    }

    #cssnav ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    _background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
    height: 40px; /* Change la hauteur du menu */
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #cssnav li {
    float: left;
    padding: 0px;
    }

    #cssnav li a {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    _background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
    display: block;
    margin: 0px;
    text-align: center;
    font: $(tabs.font); /* Personnaliser le modèle - permet de changer la police, taille, etc... */
    text-decoration: none;
    }

    #cssnav > ul > li > a {
    color: $(tabs.text.color); /* Personnaliser le modèle - permet de changer la couleur de la police */
    }

    #cssnav ul ul a {
    color: $(tabs.text.color); /* Personnaliser le modèle - permet de changer la couleur de la police */
    }

    #cssnav li > a:hover, #cssnav ul li:hover {
    color: $(tabs.selected.text.color); /* Personnaliser le modèle - permet de changer la couleur de la police quand on survole */
    background-color: $(tabs.selected.background.color); /* Personnaliser le modèle - permet de changer la police quand on survole */
    text-decoration: none;
    }

    #cssnav li ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    _background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
    display: none;
    height: auto;
    padding: 60px;
    margin: 0px;
    border: 0px;
    position: absolute;
    width: 200px; /* change la largeur du menu déroulé */
    z-index:9999;
    }

    #cssnav li:hover ul {
    display: block;
    }

    #cssnav li li {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-0 scroll 0 -200px;
    _background-image: none; /* Personnaliser le modèle - changer l'arrière-plan */
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 188px; /* change la largeur du menu déroulé */
    }

    #cssnav li:hover li a {
    background: #96CA2D; /* Personnaliser le modèle - changer l'arrière-plan d'un lien quand on survole */
    }

    #cssnav li ul a {
    display: block;
    height: auto;
    margin: 0px;
    padding: 0px;
    text-align: left;
    }

    #cssnav li ul a:hover, #cssnav li ul li:hover > a {
    color: $(tabs.selected.text.color); /* Personnaliser le modèle - changer la couleur du texte quand on survole */
    background-color: $(tabs.selected.background.color); /* Personnaliser le modèle - changer l'arrière-plan d'un lien quand on survole */
    border: 0px;
    text-decoration: none;
    }

    RépondreSupprimer
    Réponses
    1. Bonjour, le problème vient du code :

      #cssnav li ul {
      background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
      _background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
      display: none;
      height: auto;
      padding: 60px;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 200px; /* change la largeur du menu déroulé */
      z-index:9999;
      }

      Remplaces-le par :

      #cssnav li ul {
      background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
      _background-image: none; /* Personnaliser le modèle - changer l'arrière-plan du menu */
      display: none;
      height: auto;
      padding: 0;
      margin: 0px;
      border: 0px;
      position: absolute;
      width: 200px; /* change la largeur du menu déroulé */
      z-index: 9999;
      overflow: visible;
      }

      Supprimer
    2. Merci très sympas de ta part! je reviendrai vers toi si je rencontre d'autres soucis.

      Supprimer
  78. Pardon voici mon blog http://osmosefamily.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Merci très sympas de ta part! je reviendrai vers toi si je rencontre d'autres soucis.

      Supprimer
  79. Encore une fois j'ai créé grâce à toi un bordure toute belle et vraiment à mon goût :-)
    Par contre, je voulais savoir si tu allais faire un tuto pour faire un menu déroulant... je serais très intéressée ;-)

    RépondreSupprimer
  80. excuse moi je viens juste de voir que tu en avais fait un ^^

    RépondreSupprimer
  81. Bonjour, j'ai une question j'ai choisi la bordure double et je voudrais qu'il y ait un plus grand espace entre les lettres et et la bordure en haut et en bas, que ça fasse plus aéré, est-ce que c'est possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour, oui c'est possible mais à quel code as-tu ajouté la bordure ? Aux liens ou au menu ?

      Supprimer
  82. Merci beaucoup pour tout ces tutoriels ! ♥
    Personnellement je m'en sors pas trop mal en codage, mais je dois avouer que les "structures" et codes de Google me font un peu peur avec blogger, et je n'ose pas y toucher °w° !
    En tout cas ça m'a bien aidé ^v^ !

    RépondreSupprimer
  83. Bonjour Catherine, j'aimerais modifier ma barre de navigation, j'ai suivi donc tout ton tutoriel jusqu'à ce que je rentre /* Tabs dans la barre de recherche. Je retombe sur un code différent du tien, est-ce normal ? Je ne sais pas donc pas changer.

    Mon code est le suivant :

    /* Tabs
    ----------------------------------------------- */
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
    }

    #layout .tabs-outer {
    overflow: visible;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;

    border-top: 1px solid $(tabs.border.color);

    }

    .tabs-cap-bottom {
    bottom: 0;
    }

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

    margin: 0;
    padding: .6em 1.5em;

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

    border-top: 1px solid $(tabs.border.color);
    border-bottom: 1px solid $(tabs.border.color);
    border-$startSide: 1px solid $(tabs.border.color);

    height: 16px;
    line-height: 16px;
    }

    .tabs-inner .widget li:last-child a {
    border-$endSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    color: $(tabs.selected.text.color);
    }

    Enfin je ne l'ai pas copier entièrement mais voilà un aperçu.
    Pourrais-tu me dire comment faire s'il te plaît ?

    RépondreSupprimer
    Réponses
    1. Oui il n'y aucun soucis, tant que tu remplaces le code qui se trouve entre les deux commentaires :

      /* Tabs
      ----------------------------------------------- */

      Et :

      /* Columns
      ----------------------------------------------- */

      Supprimer
    2. N'oublies pas de faire une sauvegarde avant de faire des modifications, comme ça, si tu te trompes tu peux facilement revenir en arrière ;)

      Supprimer
  84. Bonjour ! J'ai un problème pour ma part..
    Lorsque je fais modifier le code html, impossible de trouver /* Tabs , ça m'écrit que c'est introuvable.. Je ne comprends pas !
    Merci de ta réponse et de tes tutos :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mel, cliques bien dans la boîte de code avant d'appuyer sur Ctrl et F (ou Cmd et F si tu es sur Mac). Sinon une autre boîte de recherche va apparaître en haut de la page web au lieu d'en haut de la boîte de code. Or cette autre boîte ne fonctionnera pas correctement.

      Supprimer
  85. Bonjour, si j'écris le code html de mon menu déroulant dans un widget, tout est noté en "dur" donc figé. Dans ce cas, comment puis-je ajouter une classe ".current" (ou selected) sur la catégorie de mon menu qui a le focus (afin que je puisse lui attribuer un style spécifique ul li.selected a{MON STYLE SPECIFIQUE}; ?

    RépondreSupprimer
  86. Bonsoir !
    S'il vous plait j'ai une petite question et cela m'a vraiment gêné x)
    Bref, J'ai déjà modifié ma barre de navigation et j'ai crée mes propres rubriques et tout (en modifiant le code HTML .. puisque j'ai un template tout prêt à utiliser et j'arrive pas à tout contrôler ) en fait j'arrive pas à lier mes articles avec chacune de ces catégories la .. du coup la barre reste juste un détail décoratif et ne sert strictement à rien puisque tous mes articles sont en désordre et mes lecteurs trouvent une difficulté à trouver ce qu'ils veulent .
    Pourrais-tu me dire comment faire s'il te plaît ?
    et MERCI d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Meriam,
      Pour relier tes articles à tes liens dans ton menu il faut utiliser les libellés. Associes un libellé à un lien, par exemple beauté au lien Beauté. Ajoutes ce libellé à tous les articles que tu souhaites faire apparaître en cliquant sur le lien Beauté. Voici un tutoriel que j'ai fait qui explique comment ajouter des libellés : http://ladybirdr.blogspot.com/2015/02/ajouter-des-libelles-aux-articles.html

      Ensuite il faut modifier l'adresse URL du lien de ton menu comme expliqué dans la partie 1 de ce tutoriel ici : http://ladybirdr.blogspot.co.uk/2014/02/customiser-son-blogger-la-barre-de.html#LienLibellé

      Pour ajouter une page à ton menu alors il faut créer ta page dans un premier temps, puis ajouter l'adresse URL correspondante au lien de ton menu, comme expliqué ici : http://ladybirdr.blogspot.co.uk/2014/02/customiser-son-blogger-la-barre-de.html#LienArticle

      Et voilà ;)

      Supprimer
  87. Milles merci pour tes tutos vraiment super bien expliqué qui m'ont permis de faire des miracles!!! J'ai tout de même un petit problème: j'aimerais que le fond noir de ma barre soit plus large, n'ont pas en longueurs mais en hauteur, ainsi avoir plus d'espace en dessous et au dessus de mes mots... comment puis-je faire stp?
    Merci d'avance!
    http://www.aswildchild.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Pour ajouter de l'espace au-dessus et en-dessous des liens de ton menu, et donc augmenter la taille en hauteur du menu, il faut ajouter les codes suivants :

      padding-top: 20px; /* Espace au-dessus des liens du menu */
      padding-bottom: 20px; /* Espace en-dessous des liens du menu */

      Au code CSS suivant, avant le signe } :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      }

      Supprimer
  88. Bonjour, j'ai réussi a faire une barre de navigation mais c'est pas aligné ils sont les uns au dessus des autres, & pourtant j'ai bien mis tout les liens que tu as mis ! comment faire stp ? merci

    RépondreSupprimer
    Réponses
    1. Bonjour Nessi,
      C'est un problème de code CSS, il doit te manquer un code. Peux-tu m'envoyer le lien vers ton blog pour que je puisse voir le problème ?

      Supprimer
  89. Bonjour,

    Je t'ai écris il y a quelques temps pour un petit problème.. Que j'ai résolu en relisant bien tes tutoriels et tes remarques :)
    Néanmoins, j'aurais aimé savoir comment faire pour coller la barre de navigation tout en haut de la page, qu'il n'y est pas cette espacement blanc pas beau ?

    Merci de ta réponse,
    lesserponda.blogspot.fr :)

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Tu dois avoir une ligne commençant par :

      margin-top:

      dans le code CSS de ton menu. Ce code ajoute un espace au-dessus du menu.
      Cherches cette ligne dans les codes CSS de ton menu et remplaces sa valeur en pixels par 0. Et voilà ;)

      Supprimer
  90. Bonjour j'ai un petit soucis, ma barre de navigation est répartie en 3 lignes je ne sais pas comment faire pour que ça soit sur une seule ligne. mon blog: www.helcuisine.fr
    J'espère que tu me répondras.
    Bon weekend
    Hélène

    RépondreSupprimer
  91. Salut !
    Comme tu m'as dis, j'ai fais ma barre de navigation grâce à ces explications. J'ai tout suivi, mais rien n'apparait sur mon blog et j'ai toujours le même problème :/

    RépondreSupprimer
    Réponses
    1. Bonjour Jupty,
      Tu as positionné le gadget HTML/JavaScript de ton menu dans ta barre latérale. Il faut la placer sous ton en-tête ;)

      Supprimer
  92. Bonjour, tout est à parfait en ce qui me concerne sauf une petite chose, je n'arrive pas à centrer horizontalement mon texte dans ma barre de navigation, y a t-il une solution si tu as le temps ? Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Comme tu as remplacé le menu par un gadget pages je ne peut pas te dire d'où venait le problème.
      Mais voici une solution possible, avais-tu bien ce code :

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

      Supprimer
    2. Je tiens à te dire que j'ai trouvé la solution à mon problème grâce aux commentaires de l'article ! Merci encore pour tes réponses ! Mon prochain objectif : les images sur le titre de mes articles :D

      Supprimer
  93. Bonjour :)

    Voilà j'ai essayé ce code, et j'ai un petit problème;

    En effet, j'ai réussi à tout coder correctement (enfin je suppose que non vu qu'il y a un problème, mais bref), mais aucun lien ne fonctionne! C'est ennuyant.. Enfaites, les liens ne fonctionnent que dans la partie correspondant à ma barre latérale, et non à mon blog.

    Enfin pour te faire une idée voici mon blog; http://blackananas.blogspot.be/

    Merci beaucoup si tu sais m'aider!!

    RépondreSupprimer
    Réponses
    1. Bonjour Alicia,
      Veux-tu parler des liens de ton menu ? Car de mon ordinateur ils fonctionnent très bien ;)

      Supprimer
    2. Bonjour, Merci de ta réponse.

      J'ai simplement tout supprimé ce que j'avais fait et j'ai réécris les codes uns par uns pour voir d'où venait le problème, et enfaites il venait du code que j'avais bidouillé pour la date. Bref mon problème est donc résolu ^^' Par contre est-ce que tu sais comment mettre la barre de navigation à 100% ? Merci en tout cas :)!

      Supprimer
  94. Bonjour,
    J'ai un problème je n'ai pas les mêmes éléments que toi après tabs

    .tabs-outer {
    position: relative;
    background: transparent;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;
    }

    .tabs-cap-bottom {
    bottom: 0;
    }

    .tabs-inner {
    padding: 0;
    }

    .tabs-inner .section {
    margin: 0 35px;
    }

    *+html body .tabs-inner .widget li {
    padding: 1px;
    }

    .PageList {
    border-bottom: 1px solid $(tabs.border.bevel.color);
    }

    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -goog-ms-border-top-left-radius: 5px;
    -goog-ms-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    background: $(tabs.selected.background.color) none ;
    color: $(tabs.selected.text.color);
    }

    .tabs-inner .widget li a {
    display: inline-block;
    margin: 0;
    margin-right: 1px;
    padding: .65em 1.5em;
    font: $(tabs.font);
    color: $(tabs.text.color);
    background-color: $(tabs.background.color);

    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -goog-ms-border-top-left-radius: 5px;
    -goog-ms-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }

    /* Headings
    ----------------------------------------------- */
    h2 {
    font: $(widget.title.font);
    color: $(widget.title.text.color);
    }

    /* Widgets
    ----------------------------------------------- */

    Du coup je ne sais pas jusqu'à ou je dois m'arrêter pour coller le code

    RépondreSupprimer
    Réponses
    1. Remplace le code à partir de :

      .tabs-outer {

      jusqu'à :

      /* Headings

      Mais ne supprime pas /* Headings ;)

      Supprimer
  95. bonjour
    j'ai voulu changer les couleurs enfin j'ai bidouillé en réutilisant ton tuto de la barre de navigation mais elle n'est plus centrée et il n'y a plus d'espace entre les mots c'est moche je suis trop nulle car tes tutos sont super bien faits c'est au secours que je devrais écrire!!!
    merci pour ton aide

    RépondreSupprimer

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