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

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Ce petit encadré gris qui s'affiche quand vous faites une recherche de libellé vous agace ? Aujourd'hui je vais vous expliquer comment personnaliser son apparence, et le supprimer si vraiment il vous sort par les yeux ^^

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

C'est parti pour les explications !

Sauvegarde de votre 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 / Modifier l'encadré sur la page des libellés sur Blogger

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

Où coller les codes pour supprimer/modifier l'encadré

Maintenant que votre sauvegarde est faite, cliquez sur Modèle à partir de votre tableau de bord puis sur Modifier le code HTML :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

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

Supprimer / Modifier l'encadré sur la page des libellés 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.
Collez ici la première ligne des codes donnés et appuyez sur Entrer pour les trouver.

Supprimer l'encadré

Pour supprimer l'encadré, cherchez le code suivant :
/* Content
Au-dessus de cette ligne collez le code suivant :
.status-msg-wrap {
display: none !important;
}
Sauvegardez, et voilà ! L'affreux encadré à disparu ! ;)

Personnaliser l'apparence de l'encadré

Voici les codes CSS pour personnaliser l'apparence de l'encadré. Cherchez le code suivant :
/* Content
Et collez les codes avant cette ligne.

Nous allons voir comment :

Modifier ou supprimer la bordure

Ajouter le code suivant pour modifier la bordure :
.status-msg-border {
border-color: #D9EFF2;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 1px;   /* Epaisseur de la bordure */
opacity: 1;
}
OU pour supprimer la bordure collez ce code à la place :
.status-msg-border {
border: none;   /* Supprime la bordure */
opacity: 1;
}
Visuellement, sans la bordure on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Modifier la couleur de fond :

Ajoutez le code suivant pour modifier la couleur de fond de l'encadré :
.status-msg-bg {
background-color: #fcb74b;   /* Couleur de fond de l'encadré */
opacity: 1;
}
Visuellement on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Modifier le texte

Pour modifier la police et la couleur du texte, ajouter le code suivant :
.status-msg-body {
font-family: 'Lora', serif;   /* Police du texte */
font-size: 13px;   /* Taille de la police du texte */
color: #AE6129;   /* Couleur du texte */
letter-spacing: 1px;   /* Espacement des caractères du texte ; 0 = espacement par défaut */
}
Visuellement on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Modifier le lien "Afficher tous les articles"

Pour modifier la couleur et la police du lien "Afficher tous les articles" ajoutez le code suivant :
.status-msg-body a {
font-family: 'Lora', serif;   /* Police du lien */
font-size: 13px;   /* Taille de la police du lien */
text-decoration: none;   /* Permet d'enlever le soulignement du lien */
color: #D35B00;   /* Couleur du lien */
}
Pour changer la couleur du lien quand survolé par la souris, ajoutez ce code :
.status-msg-body a:hover {
color: #AE6129;   /* Couleur du lien quand survolé par la souris*/
}
Visuellement on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

A vous de jouer maintenant sur les couleurs.
Remarque : pour trouver le code hexadécimal de la couleur souhaitée, allez sur code-couleur.com, c'est un site bien pratique pour trouver le code d'une couleur ;)

Voici quelques exemples de combinaisons :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Voilà ! Vous savez maintenant comment supprimer et personnaliser l'apparence de l'encadré qui apparaît sur les pages de libellés.

Bon blogging ! ;)

Autres articles

56 commentaires:

  1. Merci pour tous tes tutoriels, cela m'aide énormément pour mon blog !!
    Bonne continuation ♥

    RépondreSupprimer
  2. Génial...je trouvais cet encadré gris vraiment pénible!!!! merci beaucoup!!!

    RépondreSupprimer
  3. Coucou je me tourne vers toi car je sais que tu trouve souvent solution à tout :)

    J'ai été piratée, on m'a supprimé tous les articles du blog. J'ai récupéré tous les accès au site mais aucun de mes articles. Je suis dégoutée j'y tenais vraiment . Y a t il un moyen de les récuperer ? Cela ne fait que 2jours qu'ils ont été supprimé

    Merci d'avance

    RépondreSupprimer
    Réponses
    1. :O Oula, je suis désolée que tu ai été piraté !
      J'ai regardé un peu sur internet et trouvé une piste mais je ne sais pas si ça va marcher :/
      Vas sur la page Google.com et entre ceci dans la barre de recherche :

      site:tequilabeauty.blogspot.fr

      Si tu vois tes articles apparaître cliques sur la FLECHE à côté de l'adresse de l'article et cliques sur En Cache. Si ça marche tu pourras copier le contenu de l'article et le coller dans un nouvel article pour le publier à nouveau.

      Je n'ai pas trouvé d'autre moyen à moins que tu ais fait une sauvegarde de ton blog en cliquant sur Paramètres > Autres > Exporter le blog.

      Supprimer
    2. J'ai recherché et j'ai retrouvé quelques un de mes articles. Un ENORME MERCI , vraiment. Les articles me tenait tellement à coeur ça m'aurait fait trop de mal de tout avoir perdu. Je vais tout remettre en ligne et ensuite je ferais une sauvegarde du blog. Et je pense que je le ferais de temps en temps maintenant.

      En tout cas encore un tout tout grand merci pour ton aide :)
      et pour toutes tes astuces également, que je suis depuis plusieurs mois maintenant ;)

      Pleins de bisous

      Supprimer
    3. Je suis contente que tu ais pu récupérer tes articles !! :)
      Du coup j'ai moi aussi fait une sauvegarde de mon blog. Je ne l'avais jamais fait ^^

      Supprimer
  4. Merci Beaucoup! :D Encore une fois, très bonne idée de tutoriel! :) Merci!!

    RépondreSupprimer
  5. Merci ! J'ai enfin réussi à supprimer cet encadré ! J'ai une question... j'ai ajouté le gadget "suivre sur Google +" et j'aimerai diminuer la longueur de l'encadré du gadget... je sais pas trop comment expliquer. Je te laisse le lien de mon blog pour voir par toi même (l'encadré à droite avec ma photo à l'intérieur) : http://aromeandco.blogspot.com
    Je te remercie

    RépondreSupprimer
    Réponses
    1. Bonjour Cécile,
      Veux-tu dire la largeur ou la hauteur ?

      Supprimer
  6. Merci de ta réponse. Je veux dire la largeur !

    RépondreSupprimer
    Réponses
    1. Vas sur cette page : https://developers.google.com/+/web/badge/#faq-find-page-id
      C'est la page des badges Google +. Ici tu peux modifier la largeur des badges.
      Pour info, la largeur de ta barre latérale est de 230 pixels ;)
      Une fois que tu as choisi les paramètres que tu souhaite, vas sur Mise en page et ajoutes un nouveau gadget HTML/JavaScript. Colle le code qui se trouve sous l'aperçu à droite dans contenu et supprime l'ancien gadget Google + :)

      Supprimer
  7. Coucou!

    Je voulais te remercier pour tous tes tutos, tu m'as beaucoup aidée pour le design de mon blog! J'aime bien coder mais tout créer moi-même et difficile, et tes bases sont d'une aide précieuse!
    J'ai encore ma section "articles populaires" qui me chiffonne un peu car elle n'est pas parfaite, mais pour le reste j'en suis très satisfaite! J'espère que ton entreprise aura du succès, bonne continuation :)

    RépondreSupprimer
    Réponses
    1. Merci ! :)
      Je pense que ça peut être pas mal un petit tutoriel pour personnaliser les articles populaires. Je note l'idée ^^

      Supprimer
  8. Oh la la quel bonheur de plus voir cette affreuse barre !!! merci infiniment ! de la balle ton blog !

    RépondreSupprimer
  9. Vraiment top ! Je viens de faire un menu déroulant et enlever cet affreux encadré grâce à ton blog qui est très bien expliqué !

    RépondreSupprimer
  10. Parfait ! Parfait ! Je déteste ce cadre affreux.
    Merci beaucoup.

    RépondreSupprimer
  11. Merci pour ce tuto! Ils ont l'air vraiment sympathiques mais malheureusement je n'arrive à rien :'(
    A chaque fois que je veux rechercher un code (ctrl + f), il ne les trouve pas... Y a-t-il plusieurs versions de blogger?

    Encore merci pour tous ces bons tuyaux! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Madison,
      Tu devrais pourtant le trouver. As-tu bien cliqué dans la boîte de code (n'importe où dans le code de ton blog) avant d'appuyer sur Ctrl et F ? Sinon une boîte de recherche va bien s'ouvrir en haut de la page web mais elle ne marchera pas. Il faut ouvrir une boîte de recherche dans la boîte de code pour que ça marche.

      Supprimer
  12. Merci pour tous tes conseils!!!! C'est magique!!!!!!!

    RépondreSupprimer
  13. Bonjour Catherine! Je reviens vers toi pour un petit problème! Je n'arrive absolument pas à gérer la partie "Configurer les articles" de mon blog! C'est à dire que si je ne veux pas faire apparaître les libellés de mes articles, ou que je veux changer le placement des divers options proposées, et bien ça ne marche, rien ne bouge! Saurais-tu me dire d'ou viens le problème? Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour Kévin,

      Tout d'abord il y a quelques erreurs dans ton code CSS. Voici ce que je trouve :

      .post {
      margin: 0 0 45px 0;
      padding-bottom: 30px;
      border-bottom: 1px dashed #999999;
      <div style="border-bottom: 1px solid #000;"></div>
      }

      Et :

      .post-body {
      font-size: 110%;
      position: relative;
      <div style="border-bottom: 1px solid #000;"></div>
      }

      Il faut que tu supprimes tous les code HTML de ton code CSS, donc <div style=" et "></div>

      Ensuite si rien ne changes, cliques sur Accéder au widget en haut de la page et sélectionne Blog1. Remplaces le mot Blog1 dans ton code par Blog2, sauvegardes. Changes à nouveau Blog2 en Blog1 et sauvegardes à nouveau. Regardes maintenant si ça fonctionne.

      Supprimer
    2. Merci beaucoup, tout re-fonctionne normalement! ^^ Merci milles fois!

      Supprimer
  14. Coucou,
    Ton article m'a beaucoup aidé, je t'en remercie!
    Je voulais juste savoir comment je pouvais déplacer simplement le nom du libellé en-dessous du titre de l'article?

    Merci

    Abby

    RépondreSupprimer
  15. Trop cool, je me demandais comment faire! Merci :)))

    RépondreSupprimer
  16. Peut-être que l'article m'a échappé mais pourrais-tu expliquer comment mettre les libellés au dessus titre comme sur ton blog ?
    Merci par avance !

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

      Supprimer
  17. Finalement j'ai réussit à résoudre le problème des catégories, tout d'un coup ça a remarché!
    Et donc comme j'ai dit, j'ai acheté un thème pour mon blog sous blogger. J'ai deux petits soucis assez fâcheux. Le premier: je n'arrive pas à supprimer l'encadré des libellés et quand je cherche */ contente rien ne se passe dans le code html .. comment je peux faire? Et le deuxième problème c'est que quand on arrive sur mon blog, le texte est aligné avec les photos or quand on clique sur l'article le texte dépasse les photos. Que faire? Une solution? J'aimerai que le texte reste aligné aux photos même en cliquant sur un article en particulier. :) Merci de ton aide précieuse :D

    RépondreSupprimer
    Réponses
    1. Pour les photos as-tu essayé de les mettre en Taille originale dans l'article ?
      Même si tes photos sont très grandes elles ne dépasseront pas la zone de tes articles car ton thème limite leur taille à cette zone. Du coup en choisissant Taille Originale tes photos s'aligneront avec le texte.

      Pour les libellés je ne vois pas d'encadré sur ton blog, est-ce normal ? :/

      Pour finir c'est normal que tu ne trouves pas /* Content car ton thème est un thème acheté et la personne qui à codé ton thème à modifié les codes par rapport au thème Blogger de base ;)

      En tout cas c'est un joli thème ;)

      Supprimer
  18. Bonjour je suis votre blog avec grand intérêts seul soucis j'ai acheter un thème moi aussi mais impossible de trouver le code et/*content comment dois je procéder. Vraiment super votre petit blog sa m'a bien aider

    RépondreSupprimer
    Réponses
    1. Bonjour Maximilien,
      Tu peux ajouter tous les codes CSS avant la ligne suivante :

      ]]></b:skin>

      Supprimer
  19. Super, très bien expliqué. merci à toi je ne savais pas comment m'en sortir de cet encadré !

    RépondreSupprimer
  20. Finalement, j'ai trouvée la solution, enfin plutot je suis allé voir ton article '' Ajouter des libellés aux articles '' une fille t'avais poser la question. Maintenant j'ai une autre petite question, dans ma barre de navigation, je vais faire une rubrique Beauty test, et d'autre encore, mais j'aimerai que lorsqu'on clique sur cette catégorie, mes article reste en miniature. Crois tu que c'est possible ?

    Belle soirée, et merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as trouvé la solution non ? Car c'est déjà le cas ;)

      Supprimer
  21. salut je voudrais savoir comment faire pour supprimer un article de mon blog

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour supprimer un article il suffit d'aller sur Articles à partir de ton tableau de bord. Ensuite, survol avec la souris le nom de l'article en question. Sous le nom de ton article apparaît des options. Clique sur Supprimer, et voilà ;)

      Supprimer
  22. Une mine d'astuces simples et utiles ! un super grand merci ;-))

    RépondreSupprimer
  23. Hello ! Comme je ne trouvais pas la ligne /* Content je l'ai rajoutée. Après, j'ai fait comme tu dis. Et, pffftt, disparu l'encadré (qui n'en n'était pas vraiment un, mais un truc du genre). Merci pour tous tes conseils.

    RépondreSupprimer
  24. Merci beaucoup pour ce tuto, c'est tellement mieux quand on bidouille un peu et qu'on obtienne quelque chose de plus coloré! :3
    En revanche, comment fait-on pour changer le texte par défaut? Quel code faut-il utiliser?

    Je voudrais savoir aussi, est-il possible de customiser des gadgets comme les blogrolls ou les archives? :/
    J'essaie de changer/ customiser le lien d'inscritption aux articles "Atom", situé en bas des articles à chaque fois, et en regardant mon code à ce niveau là en faisant F12, je sais que c'est ça qu'il faut toucher: < div class='feed-links' >
    Le hic, c'est que je vois pas du tout où il faudrait que je touche quelque chose... :/

    Pardon pour toutes ces questions et merci pour ta patience de répondre à la multitude qu'on te pose! Ton site est une vraie mine d'or, merci infiniment! :D

    RépondreSupprimer
    Réponses
    1. Bonjour Arlé,
      Je note l'idée de faire un tutoriel pour modifier le texte par défaut de cette boîte ;)
      Pour customiser un gadget spécifique, il faut tout d'abord trouver le nom du gadget. Pour cela va sur la page Mise en page et clique sur Modifier sur le gadget en question.
      Dans la barre d'adresse en haut de la fenêtre qui s'ouvre, va à la fin de l'url. Tu trouveras quelque chose comme ceci :

      widgetId=HTML5

      Tout ce qui se trouve après widgetId= est le nom de ton gadget.
      HTML est le type de gadget, et le 5 le numéro du gadget. Ici dans cet exemple, HTML5 correspond à mon 5e gadget HTML/JavaScript créé sur le blog.

      Pour cibler ce gadget spécifiquement, il faut ajouter #HTML5 avant les codes CSS, par exemple :

      Pour le gadget en général (dont les textes) :

      #HTML5 {
      }

      Pour le titre de ce gadget :

      #HTML5 h2 {
      }

      Pour les liens de ce gadget :

      #HTML5 a {
      }

      Ou pour les images :

      #HTML5 img {
      }

      Pour modifier l'apparence du lien Atom utilise le nom dans la partie class='' pour le cibler : feed-links. Dans tes codes CSS écrit :

      .feed-links {
      }

      De même, pour cibler les liens il faut ajouter a comme ceci :

      .feed-links a {
      }

      Par contre pour modifier le texte, je regarderai pour en faire un tutoriel, car cela implique de modifier directement le code HTML du blog.

      Supprimer
  25. Oh mon dieu, merciii !
    Je trouve que ça fait BEAUCOUP plus propre quand on a plus cette grosse barre toute moche en haut de la page des articles visés... !! AMEN ! :D

    Merci pour tout ce travail et, je vais tenter de modifier mon coin archives... J'aimerais en faire une liste personnalisé comme celle des libellés.. ! J'espère y arriver x'D

    Merci encore ! ♥ Tu mériterais une médaille, sérieusement. ♥

    RépondreSupprimer
  26. Comment te remercier? Vraiment un grand merci pour tes tutos, ils sont géniaux!! Merci merci merci

    RépondreSupprimer
  27. Impeccable merci beaucoup c'est top!

    RépondreSupprimer
  28. coucou. Un seul petit souci: sur la version mobile, l'encadré des libellés dépasse de la page, du coup il est coupé, peux-tu me dire comment le centrer stp? merci!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas ce problème quand je vais sur la version mobile de ton blog :/

      Supprimer
  29. Bonjour. Merci pour ta réponse. Alors en effet c'était parti, et maintenant c'est revenu... moi pas comprendre... o.o

    RépondreSupprimer
    Réponses
    1. Le problème vient de ce code CSS :

      .mobile .main-inner .column-center-inner .section {
      margin: 0; /* DECALE LES ARTICLES VERS LE BAS */
      margin-left: 0;
      margin-right: -150px; }

      Supprime la ligne :

      margin-right: -150px;

      Ensuite, pour régler le problème des articles sur la page d'accueil sur mobile, ajoute :

      .mobile-date-outer.date-outer {
      width: 43%;
      }

      Dans le code CSS de ton affichage en miniature.

      Supprimer
  30. argh... si je supprime "margin-right: -150px;", ça résoud en effet le problème de l'encadré des libellés, mais ça modifie la présentation de mes articles quand on les ouvre pour les lire (ils sont présentés sur un tiers de la page seulement environ).
    Si j'ajoute:
    .mobile-date-outer.date-outer {
    width: 43%;} , ça résoud en partie le problème des articles sur la page d'accueil (mais le deuxième article est décalé par rapport aux autres), mais pas dans la page de chaque article...

    je ne sais pas si je m'explique bien... désolée

    RépondreSupprimer
  31. C'est encore moi!

    J'ai trouvé une solution pour contourner le problème!!

    J'ai ajouté "width : 70%;" dans .status-msg-border et dans .status-msg-body , et ça fait parfaitement l'affaire!

    .status-msg-border { /* Encadré sur les libellés d'articles */
    border-color: #000000; /* Couleur de la bordure */
    border-style: solid; /* Style de la bordure */
    border-width: 0px; /* Epaisseur de la bordure */
    opacity: 1;
    width: 70%; }
    .status-msg-bg {
    background-color: #F9E8C2 ; /* Couleur de fond de l'encadré */
    opacity: 1;
    padding-top: 0.5px;
    marging-top: 0.5px;
    padding-bottom: 0.5px;
    marging-bottom: 0.5px;}
    .status-msg-body {
    font-family: Arial; /* Police du texte */
    font-size: 12px; /* Taille de la police du texte */
    color: #000000; /* Couleur du texte */
    letter-spacing: 1px; /* Espacement des caractères du texte ; 0 = espacement par défaut */
    padding-top: 8px;
    marging-top: 0.5px;
    padding-bottom: 0.5px;
    marging-bottom: 0.5px;
    width: 70%;}

    Désormais mon encadré ne dépasse plus de la page sur la version mobile, et il est moins grand sur la version web (ce qui ne me gêne pas du tout au contraire)

    merci pour ton aide!

    RépondreSupprimer
  32. Salut Catherine !
    Je ne sais pas ce qu'il se passe avec mon blog, mais récemment j'ai changé le thème général et depuis, tout semble ne plus vouloir marcher...
    Tu as voir que j'ai laissé quelques commentaires sur d'autres articles et ici aussi j'ai un problème. Je ne trouve pas /* Content dans mon code html. Je ne comprends pas, cela fait deux fois que je ne trouve plus certaines choses que tu nous demandes de trouver... Vaut-il mieux que je remette l'ancien thème ?
    Merci beaucoup d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour ambre,
      Effectivement cela vient de ton thème. Le code HTML des nouveaux thèmes est complètement différent des thèmes classiques, c'est donc pour ça que tu ne trouves pas les mêmes codes :/
      Pour les codes CSS, tu peux tous les coller avant la ligne :

      ]]</b:skin>

      Supprimer
    2. Pardon, la ligne :

      ]]></b:skin>

      Supprimer
    3. Je suis désolée de te déranger encore une fois, mais j'ai essayé de coller
      .status-msg-wrap {
      display: none !important;
      }
      Avant ]]> et cela ne marche toujours pas :/

      Supprimer
    4. Bonjour Ev et Ambre,
      Vérifiez qu'il n'y a pas d'erreur dans vos codes CSS, qu'il ne manque pas un signe (ou qu'il n'y en ai pas un en trop) parmi les suivants :

      { : ; } /* */

      Tout, ou partie, de ce qui suit la ou les erreurs ne sera pas, ou mal, pris en compte ;)

      Supprimer
  33. Ah ! Voilà le tuto que j'espérais trouver ! Je me suis fait une liste de tout ce qui n'allait pas sur mon blog en le regardant et j'avais noté cette barre affreuse, maintenant, le problème est résolu et encore une fois je peux dire : merci Catherine !

    RépondreSupprimer

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

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

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