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

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

Aujourd'hui je vais vous expliquer comment vous débarrasser de cette affreuse ligne en pointillés au niveau des liens de navigation, et comment modifier l'apparence de ces liens.

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

C'est parti pour les explications !

Sauvegarde du thème

Je vous conseil fortement de faire une sauvegarde avant toute modification, comme toujours. C'est vraiment indispensable si vous faites une erreur, car on peut facilement revenir en arrière.

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur.

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier.

Supprimer le fond en pointillés

Maintenant que votre sauvegarde est faite, cliquez sur Modifier le code HTML :

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Dans cette boîte de recherche collez la ligne suivante et appuyez sur Entrer :
.blog-pager {
Vous devriez tomber sur ceci :
.blog-pager {
background: $(paging.background);
}

Pour supprimer le fond, remplacez $(paging.background) par none comme ceci :
.blog-pager {
background: none;
}

Pour remplacer le fond par une couleur alors remplacez $(paging.background) par le code hexadécimal de la couleur souhaitée. Comme ceci par exemple :
.blog-pager {
background: #7FC6BC;
}
Pour trouver le code d'une couleur vous pouvez aller sur le site code-couleur ;)

Vous pouvez également ajouter une bordure en ajoutant les lignes suivantes avant le signe } :
border-color: #FFE8B8;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */

Vous pouvez également ajouter de l'espace autour des liens en ajoutant la ligne suivante :
padding: 20px;    /* Espace entre la bordure et les liens */
Changez la valeur 20px en l'augmentant ou en la diminuant comme vous le souhaitez ;)

Avec le code suivant :
.blog-pager {
border-color: #FFE8B8;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
padding: 20px;    /* Espace entre la bordure et les liens */
}
On obtient visuellement :

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

Modifier l'apparence des liens de navigation

Passons maintenant à l'apparence des liens. Cherchez le code suivant :
.blog-pager-older-link, .home-link,
Vous devriez tomber sur :
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
Ce code devrait se trouve sous le premier. C'est lui qui définit l'apparence des liens.

Par défaut il y a une ligne pour le fond des liens. Vous pouvez la laisser telle quelle ou supprimer le fond en remplaçant $(content.background.color) par transparent, comme ceci :
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: transparent;   /* Supprime le fond */
padding: 5px;
}

De plus il y a un espace de 5 pixels autour des liens. Vous pouvez également le laisser ainsi ou le supprimer en changeant 5px pour 0, comme ceci :
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: none;   /* Supprime le fond */
padding: 0;   /* Espace autour des liens */
}

Pour changer la police des liens ajoutez les lignes suivantes avant le signe } :
font-family: 'Satisfy', cursive;   /* Police des liens */
font-size: 18px;   /* Taille de la police des liens */
font-weight: normal;   /* Style des liens : normal = normal | bold = gras */
Comme ceci :
.blog-pager-older-link, .home-link, .blog-pager-newer-link {
background-color: none;   /* Supprime le fond */
padding: 5px;   /* Espace autour des liens */
font-family: 'Satisfy', cursive;   /* Police des liens */
font-size: 18px;   /* Taille de la police des liens */
font-weight: normal;   /* Style des liens : normal = normal | bold = gras */
}

Pour changer la couleur des liens, il faut rajouter le code suivant à la suite du précédent :
#blog-pager a {
color: #2A2A2A;   /* Couleur des liens */
}
Visuellement on obtient :

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

Pour supprimer le soulignement des liens au survol, rajoutez le code suivant à la suite du précédent :
#blog-pager a:hover {
text-decoration: none;   /* Supprime le soulignement des liens */
}

Pour changer la couleur des liens au survol de la souris rajoutez le code suivant avant le signe } :
color: #E18F3E;   /* Couleur des liens au survol de la souris */
Comme ceci :
#blog-pager a:hover {
text-decoration: none;   /* Supprime le soulignement des liens */
color: #E18F3E;   /* Couleur des liens au survol de la souris */
}
Visuellement on obtient :

Supprimer le fond et modifier l'apparence des liens de navigation sur Blogger

Sauvegardez, et voilà ! Vous savez maintenant comment modifier simplement l'apparence des liens de navigation ;)

Bon blogging !

Autres articles

82 commentaires:

  1. Encore un super article ! Merci Catherine ! :)

    RépondreSupprimer
  2. Merci beaucoup pour ton tutos , j'ai encore 2/3 soucis sa me fais pas la même ecriture que toi :/
    J'ai mis à 0 l'éspace autour des liens mais sa change pas :/
    Encore merci pour tout tes tutos :)

    RépondreSupprimer
    Réponses
    1. Coucou, tu as oublié de fermer certains codes, ils ne sont donc pas pris en compte.
      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. Colles ceci dans la boîte de recherche qui apparaît, et appuies sur Entrer :

      #blog-pager a {

      Juste avant cette ligne rajoutes le signe } comme ceci :

      }
      #blog-pager a {

      Cherches maintenant de la même manière la ligne suivante :

      #blog-pager a:hover {

      Et rajoutes un signe } juste au-dessus comme ceci :

      }
      #blog-pager a:hover {

      Voilà :)

      Supprimer
    2. Merci beaucoup :) Encore un petit truc sa ne fait pas la même ecriture que toi sa viens de quoi ? Merci encore :)

      Supprimer
    3. La police que j'ai utilisé est une police Google fonts. Il faut d'abord l'installer sur son blog en suivant le tutoriel suivant : http://ladybirdr.blogspot.fr/2014/11/utiliser-des-polices-google-fonts.html.
      Par contre je suis allée sur ton blog et ta police est bien la même que la celle utilisée ;)

      Supprimer
    4. J'ai réussi merci encore :)
      Parfois quand je regarde l'écriture reste l'ancienne il faut que je recharge ma page et après je le voit , mais c'est au bout de la deuxième fois que je vois l'écriture je peux rien y faire ? :/

      Supprimer
    5. :/ Je ne vois pas ce que tu pourrais faire désolée

      Supprimer
  3. Merci, très clair comme d'hab' :)
    Par contre j'ai 2 questions :
    - comment peut-on enlever le "Inscription à : Articles ( Atom )" juste en dessous de ces liens de navigation?
    - est-il possible de remplacer les "Article plus récent/plus ancien" par les titres des articles?

    Merci! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Zou,
      Je ne sais pas si on peut remplacer "Articles plus récents/anciens" par les titres des articles mais je vais chercher :)
      Par contre pour "Inscription à : Articles ( Atom )", il suffit de rajouter le code suivant :

      .blog-feeds {
      display: none !important;
      }

      Avant la ligne :

      /* Content

      Dans ton code HTML :)

      Supprimer
    2. Merci Je cherchais aussi comment l'enlever :)

      Merci pour tous ces tutos

      Supprimer
    3. Merci Catherine, je passais par là et c'est vrai que c'était un petit truc que je voulais moi aussi supprimer ^^Merci beaucoup! :D

      Supprimer
    4. Super moi aussi je cherchais comment l'enlever ! Encore une chose qui me gênait et que tu as su régler indirectement ! :D

      Supprimer
  4. Merci beaucoup pour ce tuto! :D

    RépondreSupprimer
  5. Coucou, merci pour tous ces tutos hyper complets !

    J'ai une petite question : j'aimerais supprimer le "Inscription à : Articles ( Atom )" en dessous des liens de navigation. J'ai vu qu'il suffisait d'insérer le code suivant :

    .blog-feeds {
    display: none !important;
    }

    Mais j'ai peur que ça ne supprime complètement mon flux RSS, et donc que mes articles ne soient plus partagés sur mes réseaux sociaux automatiquement comme c'est le cas actuellement.. Je ne sais pas du tout si ça a une incidence ?
    Merci d'avance ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ce code ne supprime pas en soi les liens, il cache simplement le texte "Inscription à Articles (Atom)" sur le blog. Donc il n'y aucun soucis ;)

      Supprimer
    2. D'accord, merci beaucoup pour ta réponse :)
      Au fait, est-ce que tu pourrais faire un tuto sur "Comment personnaliser son footer" ? A bientôt :)

      Supprimer
    3. Oui, c'est déjà noté sur ma liste de tutoriels à faire ;)

      Supprimer
  6. Merci énormément pour ce tutoriel ! Je désespérais de ne trouver aucun site expliquant convenablement comment s'en défaire.

    RépondreSupprimer
  7. Super boulot merci beaucoup...je suis nouveau tu m'es d'une grande aide en effet ^^

    RépondreSupprimer
  8. Salut Catherine, sais tu si il est possible de supprimer les liens de navigation et remplacer par des pages numérotées? Après la question de savoir si c'est possible de mettre un lien direct sur le blog plutôt que sur google plus en cliquant sur notre pseudo, comme tu peux le voir mon cerveau se pose encore pas mal de questions... ;-)
    Promis j'essaie de plus te poser d'autres questions, du moins avant qques temps de peur de voir ta liste de tutos à faire s'allonger à s'arracher les cheveux !!

    RépondreSupprimer
    Réponses
    1. Oui c'est vrai que j'ai pas mal de tutos à faire mais c'est une bonne chose ! Si je me retrouvais sans idée tuto je n'aurais plus rien à écrire et à partager avec vous ! ^^
      Je note tout et je fais mes petites recherches ;)

      Supprimer
  9. Merci pour ce tuto hyper complet ! J'aimerais savoir s'il était possible de faire pareil pour la barre latérale, car du coup je souhaiterais que ça fasse un rappel de couleurs :)
    Bonne journée !

    RépondreSupprimer
    Réponses
    1. Bonjour, oui c'est possible de le faire pour la barre latérale. C'est déjà noté dans ma liste de tutoriels à faire ;)

      Supprimer
  10. Bonjour,
    Tout d'abord merci beaucoup pour tes tuto s^^
    Donc, voilà j'ai suivis toutes les étapes,
    mais au final mes miniatures sont decalé
    j'ai corrigé les dates de publications y'en avait des articles du même jour ;
    mais le décalage reste encore si tu peux m'aider merci d'avance

    http://moussarase.blogspot.fr/

    RépondreSupprimer
  11. Bonjour, merci pour ton blog, c'est très agréable d'avoir une aide efficace quand on cherche à personnaliser son blog :-)
    J'essaye de changer la couleur des textes (article plus récent / accueil / articles plus anciens). J'ai essayé de placer un "color: #000000" un peu partout, mais rien n'y fait ! Qu'est-ce qui m'échappe ? Si tu peux m'aider, ce serait formidable ! Très bonne journée à toi.

    RépondreSupprimer
    Réponses
    1. Bonjour, sans voir ton blog, as-tu bien ajouté le signe ; à la fin du code couleur ?
      Sinon, peux-tu m'envoyer le lien vers ton blog pour que je puisse voir d'où peut venir le problème ?

      Supprimer
  12. merci pr le travail que vous faîtes, j'aimerai bien voir sur votre blog splendide un tuto pr modifier l'apparence du pied de l'article avec des boutons de partage sur les réseaux sociaux plus modernes lol, celui de blogger et moche, merci pour votre aide.

    RépondreSupprimer
    Réponses
    1. Bonjour Lima, je note sur ma liste de tutoriels à faire ;)

      Supprimer
  13. Parfait, ça fait plusieurs semaines que je cherchais comment modifier "Articles plus anciens".
    Voilà le problème résolu grâce à ton simplissime tutoriel !!

    Merci !

    RépondreSupprimer
  14. Bonjour,
    j'ai une petite question où dans le code html on peut modifier la partie en bas des articles avec libellés, nombres de commentaires... car je voudrais le faire en fond blanc avec un encadrement gris.

    RépondreSupprimer
    Réponses
    1. Bonjour, c'est dans ma liste de tutoriels à faire. J'en ai tellement que ça prend du temps à tous les faire, mais ça arrive promis ;)

      Supprimer
    2. D'accord pas de problèmes je comprend ! ;)
      Au passage j'adore ton nouveau design !

      Supprimer
  15. Bonsoir Catherine,
    Une petite question qui n'a rien a voir avec ce tuto (mais je sais pas vraiment ou la poser !! ), comment fais tu pour faire les blocs de couleurs ou tu inscris tes codes dans tes articles ?

    Amélie

    ps : très joli ce nouveau design :)

    RépondreSupprimer
    Réponses
    1. Bonjour Amélie,
      Je mets mes codes dans un contenant dont je défini un visuel spécifique. Par exemple, pour créer un contenant autour de mon code je passe en mode HTML en haut de la page de création de l'article. Je retrouve le texte de mon code et ajoutes ceci juste avant :

      <div class="boite">

      Et ceci juste après le texte :

      </div>

      Ensuite dans Modèle > Modifier le code HTML j'ajoutes des codes CSS qui vont définir le visuel de ce contenant que j'ai nommé boite. Par exemple :

      /* Apparence globale du contenant boite, et de son texte */
      .boite {
      }

      /* Apparence globale des titres h2 du contenant boite */
      .boite h2 {
      }

      /* Apparence globale des sous-titres du contenant boite */
      .boite h3 {
      }

      /* Apparence globale des titres secondaires du contenant boite */
      .boite h4 {
      }

      /* Apparence globale des liens du contenant boite */
      .boite a {
      }

      Les code CSS des différentes éléments sont à ajouter avant le signe } du code correspondant ;)

      Supprimer
  16. Bonjour,

    Merci pour ce super tuto, encore une fois :)
    J'ai bien tout suivi pour personnaliser mes liens de navigation, par contre je me demandais si c'était possible qu'au lieu que tout soit dans un seul et même cadre, chaque lien soit dans son propre cadre distinct? (un cadre pour articles plus anciens, un cadre pour accueil et un cadre pour articles plus récents)

    Merci beaucoup d'avance pour ta réponse.
    Une très belle journée à toi :)

    RépondreSupprimer
    Réponses
    1. Oui c'est possible, il suffit d'ajouter les mêmes codes des bordures au code CSS des liens :

      #blog-pager a {
      color: #2A2A2A; /* Couleur des liens */
      }

      Supprimer
    2. Quand je suis tes conseils, en laissant le code pour les bordures dans .blog-pager { et en ajoutant celui que tu m'as mis, j'ai toute la bordure qui reste et en plus des bordures qui apparaissent autour de chaque lien, mais si j'enlève les codes de bordure dans .blog-pager { alors là je n'ai plus que les bordures des côtés qui apparaissent et plus aucune au dessus et en dessous du texte.

      Du coup pour l'instant ça me fait soit un seul cadre avec tout dedans séparés par des traits à l'intérieur ou alors plus de cadre autour et juste les bordures sur les côtés.

      Est ce que tu sais pourquoi ?

      Bisous, bonne soirée :)

      Supprimer
    3. Bonjour Elodie,

      Rajoute la ligne suivante :

      overflow: visible !important;

      Dans le code suivant :

      .blog-pager {
      background: none;
      }

      Comme ceci :

      .blog-pager {
      background: none;
      overflow: visible !important;
      }

      Supprimer
  17. Ohhh génial, fantastique, ça a marché :D

    Merci milles fois, maintenant tout est parfaitement comme je le voulais.
    Belle journée à toi
    Bises.

    RépondreSupprimer
  18. Bonjour, j'ai suivi tous tes conseils et ça rend super bien ! Je veux juste savoir si à la place de "article plus récent" on ne peut pas mettre une autre phrase/mot ? Parce que je trouve cette appellation assez moche je dois dire ... ^^ merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est noté sur ma liste de tutoriels à faire ;)

      Supprimer
  19. Bonsoir ! Je me demandais s'il était possible de savoir comment faire pour que sous les liens "article suivant" et "article précédent" s'affichent les titres des l'articles en question ?
    Comme sur ton blog en fait.
    Merci d'avance ! :-)

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Pour cela il faut ajouter du code JavaScript et modifier le code HTML de ton blog.
      Je note l'idée pour un tutoriel ;)

      Supprimer
  20. yes merci, tout réussi du premier coup, pas de question :-)

    RépondreSupprimer
  21. Bonjour Catherine, tout d'abord merci pour ce tuto !! Par contre j'ai un légé problème: quand je tape dans le boitié de recherche ".blog-pager {" rien ne s'affiche et à côté du code je voix "0sur 0" en rouge ... Du coup je ne peut rien faire :/
    Savez vous d'ou vient de problème ?
    Merci, Enola

    RépondreSupprimer
    Réponses
    1. Bonjour Enola,
      As-tu bien cliqué sur le triangle noir à gauche de <b:skin>...</b:skin> puis cliqué dans la boîte de code avant d'appuyer sur Ctrl et F ?
      Si oui, assures-toi qu'il n'y a pas d'espace avant ou après le texte que tu as collé dans la boîte de recherche.
      Si cela ne marche toujours par, ce code se situe quelques lignes après :

      /* Accents

      Supprimer
  22. Salut Cathy,

    Les liens ne s'affichent pas sur mon blog ... :( Je ne comprends pas ils doivent être cachés ! www.lespetitspostsdesophie.fr
    Egalement sais tu si on peut supprimer le lien "accueil" qui se situe au milieu ?
    Merci beaucoup !!!

    Sophie

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Juste au-dessus de cette ligne :

      /* Permet de cacher les boutons de partage par défaut de Google
      -- Pour remettre ces boutons sur votre blog supprimez ce code CSS */

      Tu as ceci :

      .blog-pager {
      display: none;
      }

      Ce code cache ces liens de navigation. Supprime-le.
      Pour cacher le lien Accueil utilise ce code :

      .blog-pager .home-link {
      display: none;
      }

      Supprimer
  23. Cc,
    J'ai encore un petit soucis; je ne trouve pas le code de départ: ".blog-pager {". Je ne suis pas en modèle classique.
    Mon blog: http://rose-diy.blogspot.fr/

    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu téléchargé un thème pour Blogger ou utilises-tu un thème proposé par Blogger ?

      Supprimer
    2. J'utilise un thème proposé par Blogger, que j'ai modifié avec tes tutos.

      Supprimer
    3. Désolé de t'avoir dérangé pour cela, mais après avoir lu le commentaire laissé par "Illico Pesto", j'ai trouvé le code "#blog-pager {".
      Merci beaucoup de ta réponse

      Supprimer
  24. Merci pour tous ces tutos qui m'aident beaucoup à construire un blog digne de ce nom ! Par contre je me demandais comment peut-on faire pour changer la couleur du textes (accueil, articles récents...) ? Parce que je me retrouve avec un superbe encadré mais la couleur par défaut me désespère...
    Merci d'avance ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour changer la couleur des textes, il faut utiliser le code CSS suivant :

      #blog-pager a {
      color: #2A2A2A; /* Couleur des liens */
      }

      Remplace le code couleur par celui qui te plaît. Tu peux utiliser le site code-couleur.com pour trouver le code d'une couleur ;)

      Supprimer
  25. Bonjour,

    J'ai suivi plusieurs de tes tutoriels (merci beaucoup!) mais impossible d'appliquer celui-ci. Je ne trouve ni ".blog-pager {" ni "./ Accents" comme cité dans une de tes réponses. Peux-tu m'éclairer ? Merci beaucoup. Mon blog : http://illicopesto.blogspot.co.uk/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cherche le code suivant à la place :

      #blog-pager {

      Il marche de la même manière :)

      Supprimer
    2. Bonjour,
      Merci beaucoup j'avais le même problème, mais il est résolu maintenant.

      Supprimer
  26. Merci beaucoup pour tes tutoriels! Ton blog m'aide beaucoup à personnaliser le mien.

    A très vite,
    Emma.

    RépondreSupprimer
  27. Bonjour Catherine!
    Je reviens vers toi car je rencontre un problème! J'ai installé Masonry sur mon blog sauf que du coup mes liens de navigation se retrouvent cacher derrière mes articles! J'ai utilisé la fonction "stamp" pour l'enlever de là-dessous sauf qu'il reste bloqué au-dessus de mes articles alors que j'aimerais qu'il soit à son emplacement de base, c'est à dire en bas de page! En plus de la fonction "stamp" j'ai intégré la position absolute, un clear both et un bottom à 0 au CSS de ".blog-pager", mais rien n'y fait, il reste bloqué en haut!
    Saurais-tu me dire ce qui cloche?
    Merci d'avance pour ta réponse! :)

    Kévin
    http://www.ouaipkevin.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Kévin,
      Il semblerait que tes liens de navigation soient pris dans la grille d'articles, comme un article. Essaye de charger Masonry sur le contenant .blog-posts qui ne contient que les articles au lieu de .main qui contient également les liens de navigation.

      Supprimer
    2. Ah oui effectivement c'est bien ça! ^^
      Je te remercie beaucoup pour ton aide! :)

      Supprimer
  28. Bonjour catherine.
    Tout d'abord merci pour tout ces tutos super intéressant, ils m'ont beaucoup aidé :)
    J'ai un petit soucis pour la barre de navigation, je l'ai créée, elle me plait mais je ne comprend pas comment mettre plusieurs lien d'articles dans chaque catégories.. Je suis sur que ce n'est pas compliqué mais j'ai beau chercher je ne vois pas comment y remédier; je peux lier une catégorie qu'a un seul lien d'article, hors j'aimerais qu'on tombe sur une page qui réunit tout les articles de la catégories .. Aurais-tu une solution à me proposer ? Ou un tuto ?
    Merci d'avance :-) A bientôt !
    http://www.goldandgreen.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Aimy,
      Je vois que tu as trouvé la solution à ton problème ;)

      Supprimer
    2. Oups désolé de ne pas avoir prévenue, mais oui c'est bon, merci les libellés hihi!
      Merci quand même d'avoir pris le temps de regarder ;)

      Supprimer
  29. Bonjour Catherine,

    J'ai personnalisé les liens de navigation, mais le problème, c'est que sur la version mobile (je suis maudite avec cette version mobile), il y a un encadré noir autour des liens "accueil" et "articles précédents/articles suivants". Je n'arrive pas à l'enlever!
    Autre chose, je voudrais que "articles précédents" soit à gauche et "articles suivants" à droite, je trouve ça illogique la disposition actuelle sur mon blog.
    Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Sur mobile il y a une couleur de fond sur les boutons. Retrouve ce code CSS :

      .mobile-link-button {
      background-color: #c27ba0;
      }

      Si tu as un code différent à la place de #c27ba0 comme ceci : $(blabla) alors ce n'est pas grave. Remplace cette valeur par transparent comme ceci :

      .mobile-link-button {
      background-color: transparent;
      }

      Et voilà ;)

      Supprimer
  30. Merci! Merci! merci! je suis une grande fan de tes tutos!

    RépondreSupprimer
  31. Bonjour.
    Je ne comprends pas ce qu'il se passe sur mon blog, j'avais fait plein de modifications, y compris le fond et l'apparence des liens de navigation comme tu l'expliques dans ce tutoriel.
    J'étais bien contente du résultat.
    Mais j'ai dû faire une bêtise quelque part parce que mes modifications sont toujours présentes dans le code html de mon blog, mais elles ne s'appliquent pas sur mon blog... Je deviens folle à chercher d'où vient le problème... J'avais aussi modifié mon pied de page, et les modifications ne sont pas prises en compte non plus alors qu'elles sont bien là dans le code...
    Je suis complètement perdue...
    Peux-tu m'aider stp?
    merci
    http://mamandejumelles.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Tu as peut-être des erreurs dans ton code CSS.
      Vérifie tout ton code CSS qu'il ne manque pas un des signes suivants, ou qu'il n'y en ai pas un en trop :

      { : ; } /* */

      S'il manque un signe, ou s'il y en a en trop alors tout ce qui suit l'erreur n'est pas, ou mal, pris en compte.

      En regardant rapidement ton code, j'ai remarqué ceci :

      .comments .continue {
      border-top: none;

      Il manque le signe } qui ferme le code. Rajoute le à la suite comme ceci :

      .comments .continue {
      border-top: none;
      }

      Vérifie ensuite le reste de ton code qu'il n'y ait pas d'autre erreur.

      Supprimer
  32. !!!! je t'adore!!! l'erreur venait bien de ce petit } qui manquait! tu es trop forte! vraiment!

    RépondreSupprimer
  33. Bonjour Catherine,
    J'ai bientôt fini de t'embêter mais il me reste quelques petites modifs que je n'arrive pas à faire seule...
    Quand je clique sur un de mes articles (ex: http://wild--amanda.blogspot.fr/2017/02/article-pour-essai.html), mes liens de navigations ne sont pas les mêmes que quand je vais dans une de mes catégories (ex: http://wild--amanda.blogspot.fr/search/label/bonnes%20adresses?max-results=12). J'aimerais donc que ils soit tous comme cela : http://wild--amanda.blogspot.fr/search/label/bonnes%20adresses?max-results=12
    J'ai essayé de retrouver le code correspondant et de le copier mais ça ne marche pas... Encore un énorme merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le seul moyen d'avoir la même apparence pour ces liens est de changer le code HTML des liens sur les pages d'articles pour le même code que sur les pages d'index.
      Tout d'abord fait une sauvegarde de ton thème avant de modifier quoi que ce soit.
      Ensuite, retrouve le code qui commence par :

      <div class="pagination">

      C'est le code qui commence les liens de navigation sur les pages d'index.
      Clique sur le nombre à gauche de cette ligne pour fermer le code. Sélectionne le code fermé en commençant par la droite, qui doit être :

      <div class="pagination">...</div>

      Si le code s'ouvre, pas de panique, continue de sélectionner le code jusqu'à avant la ligne <div class="pagination">.

      Copie ce code.
      Maintenant tu dois retrouver le code des liens sur les pages d'articles. Retrouve la ligne :

      <div class="*" id="blog-pager">

      C'est le début des les sur les pages d'articles.
      De la même manière, ferme le code et sélectionne-le. Coupe-le et colle le code des autres liens de navigation à la place.

      C'est assez délicat à réaliser. C'est pour cela qu'il faut bien faire une sauvegarde de ton thème avant toute chose.

      Supprimer
    2. Merci beaucoup pour ton aide, cependant les liens de navigation disparaissent... Je l'ai fais 2 fois mais c'est pareil :(
      Si c'est trop compliqué ce n'est pas grave, je laisserais comme ça.
      Merci encore !

      Supprimer
  34. Bonjour Catherine,

    J'ai supprimé le code html qui permettait ceci : "Inscription à : Articles ( Atom )" avant de voir à travers cet article qu'on pouvait le cacher tout simplement... Y'a-t'il une possibilité de remettre ce code ?

    Y'a-t'il une incidence sur le référencement Google ?

    Cordialement,

    Pierre | https://turfjeusimple.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      Retrouve cette ligne de code dans ton thème :

      <b:include name='nextprev'/>

      Juste après celui-ci colles :

      <!-- feed links -->
      <b:include name='feedLinks'/>

      Et les liens devraient réapparaître.
      Les supprimer n'a aucune incidence sur ton référencement car ce sont simplement des liens pour que les lecteurs s'abonnent à tes articles.

      Supprimer
  35. Bonjour Catherine, j'ai un petit (gros) soucis ! J'ai du faire une erreur un jour en modifiant le html, j'ai suivi l'ensemble de tes tutoriels pour modifier l'apparence de mon blog. Je me rends compte aujourd'hui que ces liens de navigation ne sont pas sur mon blog... mes anciens articles disparaissent et aucun moyen d'y avoir accès sur l'index. Comment je peux faire pour les faire réapparaître ? Je suis désespérée...
    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réglé le problème car je vois bien ton menu et tes articles ;)

      Supprimer
  36. Bonsoir Catherine !

    - J'ai vu que la question t'avait été posée plusieurs fois mais je n'ai pas trouvé la réponse : est-il possible de modifier l'appelation de "article plus récent" ou "article plus ancien" ?

    - Comment est-ce que je peux faire pour mettre ces liens de navigation AVANT la boite pour laisser des commentaires ? (Je pense qu'il doit falloir sortir la zone et la coller autre part mais je ne sais pas trop où ça commence et fini et où la coller).

    - J'ai vu aussi que la question t'avais été posée mais pareil, je n'ai pas trouvé la réponse : est-ce qu'il est possible de mettre plutôt des chiffres "1 - 2 - 3 - ..." pour indiquer le nombre de pages plutôt que "article récent" ?

    - Comment est-ce que tu as fait pour créer ton encart avec une suggestion d'autres articles ayant le même libellé ?

    - J'ai un de mes titres de mes miniatures qui est caché par je ne sais quoi, est-ce que par hasard tu saurai me dire par quoi et comment régler ce problème ? :)

    Sinon, j'ai bien réussi à modifier mes liens grâce à ton tuto !

    Merci beaucoup pour tout,

    Maïlys.

    RépondreSupprimer
    Réponses
    1. Bonjour Maïlys,

      - C'est possible de modifier le texte des liens de navigation (Article plus récent et plus ancien) mais il faut modifier le code HTML du thème, et je n'ai pas encore fait de tutoriel sur le sujet ;)

      - Il faut copier le code des liens de navigation dans le thème pour les faire apparaître avant les commentaires, mais aussi ajouter des codes conditionnels pour qu'ils n'apparaissent pas 2 fois sur le blog. C'est un peu complexe mais je peux en faire un tutoriel ;)

      - C'est aussi possible de remplacer les liens de navigation par des chiffres. Cet article explique comment faire (mais c'est en anglais).

      - Pour les articles similaires en bas des articles, j'ai utilisé un code javascript qui génère les articles du même libellé. C'est déjà sur ma liste de tutoriels à faire (qui est plutôt longue ^^)

      - C'est parce que ton titre est un peu long. Tu peux réduire l'interligne de tes titres en ajoutant :

      line-height: 1;

      Avant le signe } du code CSS suivant de ton affichage en miniature :

      h3.post-title.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      font-family: 'Alex Brush', cursive;
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 52px;
      position: absolute;
      bottom: 0;
      }

      Supprimer

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

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

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