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

Modifier l'apparence des titres de la barre latérale

Aujourd'hui dans Comment customiser son Blogger, un petit tutoriel pour personnaliser l'apparence des titres des barres latérales.

Modifier l'apparence des titres de la barre latérale

Il suffit d'ajouter un code CSS !


Et oui ! Un seul code CSS est à ajouter pour personnaliser ces titres :)
Allez, c'est parti pour les explications.

Faire une sauvegarde de votre blog

Comme toujours, faites une sauvegarde de votre thème avant d'y apporter des modifications !
Si vous faites une erreur vous pourrez alors facilement revenir en arrière !
Pour savoir comment faire une sauvegarde de son blog / thème et comment la charger en cas d'erreur, suivez le tutoriel  ;)

Où coller le code

Une fois que vous avez fait une sauvegarde de votre blog, cliquez sur Modifier le code HTML :

Créer un page d'accueil statique sur Blogger

Cliquez n'importe où dans la boîte de code. Appuyez sur Ctrl et F en même temps (ou Cmd et F pour Mac). Un champ de recherche doit apparaître en haut à droite de la boîte de code. Si le champ de recherche apparaît en haut de la page web, cliquez bien à l'intérieur de la boîte de code et appuyez à nouveau sur Ctrl et F.

Dans le champ de recherche qui apparaît en haut à droite de la boîte de code collez :
]]></b:skin>
Et appuyez sur Entrer.
C'est au-dessus de cette ligne que nous allons coller les codes CSS.

Personnalisation des titres avec CSS

Si votre barre latérale est à gauche, on va écrire dans le code suivant :
/* Apparence des titres de la barre latérale de gauche */
.column-left-inner h2 {
}
Si votre barre latérale est à droite, on va écrire dans le code suivant :
/* Apparence des titres de la barre latérale de droite */
.column-right-inner h2 {
}
Dans mon exemple, j'ai décidé de donner l'apparence suivante à mes titres :
  • police : Arial
  • taille de la police : 14 pixels (14px)
  • en majuscules (uppercase)
  • de couleur rose (#ebd275)
  • texte centré (center)
  • bordure solide (solid) sous le titre, de 1 pixel (1px) de large et de couleur noir (#000000)
  • un espace entre la bordure et le titre de 10 pixels (10px)
  • un espace après le titre de 20 pixels (20px)

J'écris donc :
font-family: Arial;
font-size: 14px;
text-transform: uppercase;
color: #eb2d75;
text-align: center;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
padding-bottom: 10px;
margin-bottom: 20px;
Ma barre latérale est à droite, j'écris donc dans le code commençant par .column-right-inner h2, comme ceci :
/* Apparence des titres de la barre latérale de droite */
.column-right-inner h2 {
font-family: Arial;
font-size: 14px;
text-transform: uppercase;
color: #eb2d75;
text-align: center;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
padding-bottom: 10px;
margin-bottom: 20px;
}
Sauvegardez ensuite en cliquant sur Enregistrer le modèle en haut à droite de l'écran.

Modifier l'apparence des titres de la barre latérale

Et voilà ! Vous avez personnalisé vos titres de barre latérale !

Pour plus d'idées de personnalisation de textes et liens, vous pouvez lire le tutoriel sur la personnalisation de la barre de navigation, qui explique un peu plus en détail quel code fait quoi ;)

J'espère que ce petit tuto vous aura été utile. A bientôt pour de nouvelles astuces ! ;)

Autres articles

133 commentaires:

  1. ça ne marche pas sur mon blog :( j'ai copié exactement le même code que toi pour voir si ça marche et modifier après, depuis le temps que je cherches un tuto, d'ailleurs ton blog est une vraie mine d'or ! Merci :)

    RépondreSupprimer
  2. Salut Kelly,

    C'est bizarre car j'ai pu regarder ton blog et quand j'essaye de mon côté tout marche.
    Vérifie bien que tu n'a pas oublié le dernier "}" à la fin du code, ou le "." au tout début...
    Il suffit d'un simple oubli ou faute de frappe (ça m'arrive aussi ^^) pour que ça ne marche pas.
    Utilise bien le code :

    .column-right-inner h2 {
    }

    et non :

    .column-left-inner h2 {
    }

    Sinon, essaye avec le code suivant :

    .column-right-outer h2 {
    }

    Normalement ça revient au même, mais on ne sait jamais ;)

    RépondreSupprimer
    Réponses
    1. j'ai vérifié et essayé l'autre code, toujours rien :( j'ai peut être trop bidouillé le html x)

      Supprimer
    2. Tu peux essayer le code suivant :

      aside h2 {
      }

      (sans "." devant !) à la place de :

      .column-right-inner h2 {
      }

      Et sinon rajoutes !important après la valeur, juste avant le point-virgule, comme ceci :

      .column-right-inner h2 {
      font-family: Arial !important;
      font-size: 14px !important;
      }

      Rajouter !important force le navigateur à afficher ce que tu souhaite quand il ne veut pas.

      Supprimer
    3. Tous essayé ça ne fonctionne pas non plus :/ il y a un moyen de faire ça en passant par la modif du code HTML ?
      Merci !

      Supprimer
    4. Oui, cherches le code suivant dans le code HTML de ton thème :

      /* Content

      Colles les codes pour tes titres juste avant cette ligne.

      Supprimer
  3. Ouiii trop bien tes tutus !!! merci merci!! :)

    RépondreSupprimer
  4. Héhé, celui-çi peeeerfect :p

    RépondreSupprimer
  5. J'ai re-essayé, j'ai collé les codes dans "Modifier les codes HTML" à la place de "Ajouter le fichier CSS" et ça a fonctionné

    RépondreSupprimer
  6. Bonjour,
    Déjà, merci pour tous ces pas à pas, qui sont vraiment top !
    Ensuite, j'ai une petite question... J'ai bien réussi à mettre en place les titres de ma colonne de droite, tout comme je voulais (en vert), mais finalement, j'aimerai changer de couleur et je n'y arrive pas... Peux-tu me dire comment faire ? stp

    RépondreSupprimer
    Réponses
    1. Finalement, j'ai réussi à changer =)

      Supprimer
    2. Bonjour Marinette,

      Pour changer la couleur des liens il faut changer la valeur de color.
      Par défaut dans mon exemple il y a écrit :

      color: #eb2d75;

      Voici un site internet très utile qui permet de trouver le code pour toutes les couleurs : http://www.code-couleur.com/.
      Il suffit de sélectionner la couleur souhaitée dans le gros cadre. Le code apparaît sur la droite. Copie-le et colle-le à la place de #eb2d75.
      Fais attention à ne pas supprimer le ; après le code couleur ;)

      Supprimer
  7. Merci beaucoup! C'est super bien expliqué comme à chaque fois et au final, ça semble assez simple à changer et personnaliser pour notre propre blog :-)
    Mille merci!

    RépondreSupprimer
  8. Bonjour!

    Avant tout, ton site est vraiment génial, très beau design, très jolies présentations, photos, couleurs, tout ce que j'aime!

    Je suis aussi une adepte de l'épuré et de la sobriété avec des petites touches de couleurs, encore plus quand elles sont pastels, donc comment ne pas adhérer immédiatement à ton blog? ;-)

    Tes autos sont super bien écris et présentés, tu arrives peu à peu à nous faire comprendre comment ça marche et surtout à nous aider à comprendre ce qu'on écrit, et comment on l'écrit.

    Bref, je t'ai directement ajoutée à mes favoris et je me suis inscrite à ta newsletter car je ne veux louper aucun de tes articles!
    Donc voilà, continue, je vois dans les commentaires que tu aides tellement de personnes, c'est génial ce que tu fais! :-)

    Sinon, j'avais une petite question, je viens tout juste de commencer mon blog et j'ai adoré cette barre avec les catégories, qui est beaucoup plus jolie que l'affichage standard de Blogger, mais j'ai bien fait tout ce qui est écrit et mon texte ne veut pas s'aligner et surtout, il garde les points devant chaque mot :-S.
    Je ne comprends pas pourquoi, j'ai relu plusieurs fois ton article et bien tout vérifié, j'ai même regardé dans les commentaires et essayé avec !important en bout de phrase pour l'obliger un peu, comme j'ai cru comprendre, mais ça ne marche toujours pas :-S

    Pourrais-tu m'aider?
    Ce serait vraiment adorable, et je te remercie d'avance pour ton temps,
    et déjà merci pour tous tes tutos!

    RépondreSupprimer
    Réponses
    1. Bonjour La Paillette,

      Merci ! Ça fait très plaisir :) Je suis contente de pouvoir aider

      En fait le code de ce tuto ne change que l'apparence des titres, et non la liste de catégories, c'est pour ça que ça ne marche pas ;)
      Du coup pour changer l'apparence de la liste de tes catégories il faut ajouter 2 codes.

      Va dans Modèle à partir du tableau de bord, puis clique sur Modifier le code HTML.
      Clique sur le triangle noir à gauche <b:skin>...</b:skin>. Clique n'importe où dans la boîte de code et colle le code suivant dans la boîte de recherche qui s'affiche en haut à droite :

      /* Content

      Juste au-dessous de cette ligne colle les codes suivants :

      .list-label-widget-content li {
      list-style: none; /* Enlève les "points" avant les liens */
      padding-top: 5px; /* Espace au-dessus des liens */
      padding-bottom: 5px; /* Espace en-dessous des liens */
      font-family: Arial; /* Police */
      font-size: 14px; /* Taille de la police */
      text-align: left; /* Alignement des liens (left = gauche; center = centré; right = droite) */
      }

      .list-label-widget-content li a {
      color: #000000; /* Couleur du lien */
      }

      .list-label-widget-content li a:hover {
      color: #ec144e; /* Couleur du lien quand survolé par la souris */
      text-decoration: none; /* Supprime le soulignement du lien quand au survol */
      }

      Tu peux changer la police, les couleurs des liens, l'espace entre les liens, etc., en suivant les commentaires entre /* */
      Et voilà ! :)

      Supprimer
    2. Merci pour ta réponse rapide! :D
      Mais ça ne marche toujours pas :-S Je ne comprends vraiment pas pourquoi,
      je t'envoie un mail avec une capture d'écran pour que tu puisses vérifier si tu as le temps :-)

      Supprimer
    3. Coucou Claire ! J'ai le même souci que toi (je viens de tenter de personnaliser l'apparence des listes des menus de droite. Dans un 1er temps ça m'a fait perdre la personnalisation des titres (rentrée en suivant le tuto, avec "ajouter un code CSS", mais j'ai mis les codes dans le code html de la page et c'est revenu ( uniquement en collant des !important un peu partout ^_^).

      En revanche, pas moyen de toucher à l'apparence du contenu des menu, si c'est le même souci que toi et que tu as eu une solution, n'hésite pas à m'en faire part (je me demande si c'est pas un souci dû au code déjà existant du blog car j'ai pris un template tout fait de blogger qui n'était pas dans ceux tout simples de base. Quelque part dans le html la donnée de comment afficher et où doit être donnée et je ne la trouve pas).

      (Depuis que j'ai découvert les tuto de ce blog, je ne décolle plus des lieux, je teste tout :D)

      Supprimer
    4. Bonjour Shan,
      As-tu pu régler le problème ?

      Supprimer
  9. Salut Catherine! :-) J'ai une petite question, sur mon blog (http://www.lapaillette.com), mes catégories empiètent sur mon espace titre et j'aimerais bien trouver un moyen de créer un petit espace vide pour les décaler vers le bas. J'ai testé plusieurs trucs mais je n'ai pas réussi :-P. Peut être que tu as une astuce? ;-)
    Merci d'avance pour ton temps et ta réponse :-)

    RépondreSupprimer
    Réponses
    1. Salut Claire,

      Rajoutes le code suivant avant la ligne /* Content dans Modifier le code HTML :

      .column-right-outer {
      margin-top: 80px;
      }

      Tu peux augmenter l'espace en augmentant la valeur de 80px, ou à l'inverse diminuer l'espace en diminuant la valeur en pixels :)

      Voilà ! ;)

      Supprimer
    2. Ah merci beaucoup pour l'astuce!!! :D Merci merci merci!

      Supprimer
  10. Bonsoir :)
    Tout d'abord merci beaucoup pour tout tes tutoriels, vraiment super ça m'aide beaucoup. En plus je n'y connais absolument rien en code etc. mais tes explications son très claire :)

    J'aimerais savoir si tu pouvez m'aider pour centré une image dans la bannière de droite ainsi que le texte que l'on met en description sous l'image.

    J'ai essayé de chercher avec les astuces que tu donne dans les autres tutos mais rien a faire je suis nulle ^^

    Merci par avance

    RépondreSupprimer
    Réponses
    1. Bonjour FimCouBij' &Co',

      Pour créer un petit encart sur le côté avec une image et du texte il faut créer un widget HTML/Javascript.
      Cliques sur Mise en page à partir du tableau de bord Blogger. Cliques ensuite sur ajouter un gadget sur la barre latérale de droite. Choisis HTML/JavaScript dans la liste de gadgets proposés.
      Dans la nouvelle fenêtre qui s'ouvre colles ceci dans Contenu :

      <div id="Info">
      <img src="URL DE L'IMAGE" />
      <p>Le texte descriptif va ici</p>
      </div>

      <style type="text/css">

      #Info {
      text-align: center;
      }

      </style>

      Remplaces URL DE L'IMAGE par l'adresse url de l'image que tu souhaite ajouter. Si elle n'est pas sur internet mais sur ton ordinateur, alors ajoutes-la à un nouvel article brouillon. Fais un clique droit sur l'image et sélectionne copier l'adresse du lien pour obtenir le lien. Colles-le dans le code ci-dessus. Attention à ne pas publier cet article brouillon et à ne pas le supprimer !

      Remplaces Le texte descriptif va ici par le texte de ton choix.
      Le reste du code sert à centrer le contenu de ce widget.

      Et voilà ! ;)

      Supprimer
    2. Merci beaucoup pour ton aide, je n'y serais vraiment pas arrivé toute seul en effet ^^.
      & merci pour ta réponse très rapide :)

      Supprimer
  11. Bonjour Catherine,
    J'ai modifié une première fois les titres de la barre latérale pour voir ce que cela pouvait donner et cela a marché. Mais maintenant que je souhaite faire de nouvelles modifications je ne trouve plus le code, faut-il à chaque fois réinscrire le code dans "Ajouter le code CSS" ? Merci d’avance :-)
    ps : j'ai d'autres questions, puis-je t'envoyer un petit mail ?

    RépondreSupprimer
    Réponses
    1. Bonjour Laeti B,
      Non il faut le chercher dans Modèle puis dans Modifier le code HTML.
      Ici clique sur la flèche noir à gauche de <b:skin>...</b:skin> puis clique n'importe où dans la boîte de code.
      Appuie sur Ctrl et F en même temps et colle la première ligne de ton code dans la boîte de recherche qui apparaît en haut à droite. Appuie sur Entrer et tu devrais trouver ton code.
      Si tu en as plusieurs versions élimine-les et ne gardes-en qu'un seule que tu modifieras.
      Envoi-moi un mail pour tes autres questions ;)

      Supprimer
    2. Encore une fois merci :-)

      Supprimer
  12. Bonjour
    déjà un très grand merci pour tes tutos, qui sont très faciles à appliquer pour des néophytes dont je fais partie !!!
    J'ai utilisé celui-ci en premier. Tout avait très bien marché.
    Puis j'en ai essayé d'autres qui ont également fonctionné.
    Et je viens de me rendre compte que l'apparence des titres de ma barre latérale étaient redevenus comme avant. HORREUR
    Je ne sais plus quoi faire pour que ça revienne.
    Aurais-tu une idée ?
    Un grand merci dans tous les cas.

    RépondreSupprimer
    Réponses
    1. Bonjour Barbara,
      C'est très bizarre en effet, essaye de rajouter le code manuellement en allant dans Modèle à partir du tableau de bord, puis dans Modifier le code HTML.
      Clique sur le triangle noir à gauche de <b:skin>...</b:skin>, puis clique n'importe où dans la boîte de code.
      Appuies sur Ctrl et F en même tmps, dans la boîte de recherche qui apparaît en haut à droite de la boîte de code colle :

      /* Content

      Juste au-dessus de cette ligne colle à nouveau le code pour les titres :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: Arial;
      font-size: 14px;
      text-transform: uppercase;
      color: #eb2d75;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }

      Sauvegardes et dis-moi si ça marche

      Supprimer
    2. oh merci ça fonctionne
      t'es une magicienne !
      je vais continuer à mettre en application tes tutos géniaux
      encore un grand merci

      Supprimer
    3. en fait, j'ai l'impression que "l'outil de création de modèles" ne fonctionne plus car quand je vais dans "avancé" et que je veux remettre la police d'écriture des articles en courier ou autre police, ça ne marche plus non plus ;-(

      Supprimer
    4. J'ai eu le même problème et grâce à ta solution, ça remarche!
      Merci beaucoup! :)

      Supprimer
  13. Bonjour,

    Grâce à toi mon blog prend forme petit à petit. J'ai réussis (enfin !!) à appliqué bon nombre de tes tutos (je n'étais pas sur une version "simple" donc ça bugé tout le temps). J'ai modifié mes titres de catégories et j'aimerais désormais modifier le fond des catégories (mettre un cadre, un fond de telle couleur ect...) mais je ne trouve pas le bout de code CSS concerné -_-

    Pourrais-tu me l'indiquer STP ??

    Merci par avance et un grand bravo pour ton super blog ! Je commence enfin à piger quelque chose au CSS !

    RépondreSupprimer
    Réponses
    1. Comment as tu modifier le titre des catégories? je cherche désespérément comment les changer et je ne trouve pas... Merci d'avance!

      Supprimer
  14. Bonjour,

    J'aimerais savoir comment on peut enlever la longue ligne de séparation verticale qu'il y a entre les articles et la barre latérale?
    Je n'arrive pas à trouver ça dans le code.

    Je vois qu'ici elle n'y est pas, donc ça doit être possible ^^
    Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour Zou,

      Pour enlever cette ligne vas dans Modèle > Modifier le code HTML. Clique 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 colle ceci :

      .fauxcolumn-right-outer .fauxcolumn-inner {

      Tu devrais trouver le code suivant :

      .fauxcolumn-right-outer .fauxcolumn-inner {
      border-left: 1px solid $(body.rule.color);
      }

      Remplaces-le par :

      .fauxcolumn-right-outer .fauxcolumn-inner {
      border-left: none;
      }

      Et voilà ! :)

      Supprimer
    2. Roh j'ai honte, je l'avais vu ce code en plus.
      Merci beaucoup!

      Supprimer
  15. Bonjour :)

    Voilà, j'avais une petite question.
    J'ai commencé par la création de l'encart de présentation où j'ai utilisé la Google Font Cookie Cursive pour le titre h2.

    Après, je m'attaque à la personnalisation des autres éléments de ma barre latérale avec ce code. Cependant, lorsque je veux mettre Cookie Cursive pour la police, cela ne me le prend pas en compte et ça ne modifie que le titre h2 de mon encart de présentation et rien sur les autres titres ( Instagram ou Archives ).

    Peux-tu m'aider à régler ce problème ? :)

    Merci à toi !

    RépondreSupprimer
    Réponses
    1. Bonjour, essaye d'ajouter le code CSS pour les titres de ta barre latérale dans Modèle > Modifier le code HTML. Cliques sur le triangle noir à gauche de :

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

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

      /* Content

      Appuies sur Entrer.

      Juste au-dessus de cette ligne colles le code CSS pour tes titres de la barre latérale.
      Vérifie également qu'il ne manque pas de signe : ; { et } dans ton code CSS ;)

      Supprimer
    2. Malheureusement, ça ne le prend pas en compte :/
      J'avoue que je suis un peu perdue, je ne comprends pas d'où vient le problème.

      Supprimer
    3. Bonjour, je vois que tu as réglé le problème ;)

      Supprimer
  16. Bonjour,
    j'ai une petite question, j'aimerai que dans ma barre latérale il y ait une image sous le titre, en fond du titre en gros, est-ce que c'est possible ?

    RépondreSupprimer
    Réponses
    1. Oui c'est tout à fait possible, rajoutes le code suivant avant le signe } du code CSS de tes titres de la barre latérale :

      background-image: url('LIENIMAGE');

      Remplace LIENIMAGE par l'adresse URL de ton image. Ensuite tu peux te baser sur le tutoriel suivant pour positionner ton image de fond : http://ladybirdr.blogspot.com/2014/11/personnaliser-et-ajouter-une-image-aux.html

      Supprimer
  17. Bonsoir,
    j'ai une petite question rien avoir, je voulais créer un formulaire de contact donc je l'ai fait grâce à un site mais je voudrais le personnalisé en prenant modèle avec les codes que tu as sur le formulaire de newsletter de mailchimp, et je voulais savoir où fallait que je l'ai places ces codes dans le code html du gadget que voici:
    http://zupimages.net/up/15/22/t7ce.jpg
    (j'espère que tu m'a comprise ^^)

    RépondreSupprimer
    Réponses
    1. Tu peux ajouter les code CSS pour ton formulaire à la suite de ton code. Ajoutes le code suivant en remplaçant /* Ajoutes ton code CSS ici */ par tes codes CSS :

      <style type="text/css">

      /* Ajoutes ton code CSS ici */

      </style>

      Supprimer
  18. Coucou ! J'aime beaucoup ton blog, il m'est très utile lorsque j'ai un doute pour la mise en page de mon blog, et comme je veux faire de tout ça mon métier, j'aime apprendre sur ton blog qui est très bien fait et ludique ! Bref ! J'aurais une petite question : comment faire pour que la barre ne soit ni en haut, ni au dessus mais centre, c'est à dire qu'elle dépasse un peu de chaque coté du titre de l'onglet, je ne sais pas si je suis très clair ... Merci par avance en tout cas :)

    RépondreSupprimer
    Réponses
    1. Bonjour Valentine,
      Veux-tu parler du menu ? Qu'il dépasse en largeur du titre du blog ?

      Supprimer
  19. Merci pour ce tuto, j'adore le rendu mais j'ai un petit problème : j'arrive à changer tous les paramètres sauf la couleur. On peut voir le rendu en temps réel lorsque l'on change et quand je met un nouveau code couleur, il ne me le prend pas en compte. Que dois-je faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Essaye de rajouter !important entre le code couleur et le signe ; comme ceci :

      color: #45C3BC !important;

      Supprimer
    2. Merci beaucoup, ça fonctionne.

      Supprimer
  20. Bonjour Catherine,

    Merci pour tous tes tutos extrêmement bien expliqués même pour une personne qui ne savait pas ce que sont des boutons css ou un code html ;)
    Et tout avec un joli design, ça transformerait presque la corvée en récré!

    Je commence doucement tout doucement et ai pu enlever les marges sur les photos ou la navbarre grâce à toi.

    Et là je veux modifier les titres de la barre latérale de droite, ça fonctionne sauf pour la police et l'espace après le titre. Voici ce que j'ai entré:

    .column-right-inner h2 {
    font-family: Cardo;
    font-size: 14px;
    text-transform: none;
    color: #eb2d75;
    text-align: center;
    margin-bottom: 0 px;
    }

    Si tu as un peu de temps pour m'aider, je te serai extrêmement reconnaissante :)



    RépondreSupprimer
    Réponses
    1. Bonjour Madelaine,
      Je suis allée voir ton blog et c'est bien la police Cardo qui s'affiche correctement pour moi.
      Pour l'espace après le titre tu peux rajouter !important avant le signe ; comme ceci :

      margin-bottom: 0px !important;

      D'ailleurs j'ai remarqué que tu avais 2 codes CSS pour les titres de la barre latérale. Attention à bien supprimer celui que tu ne veux pas utiliser, sinon le navigateur ne saura pas lequel il faut respecter ;)

      Supprimer
  21. Rebonjour :)

    C'est encore moi!
    je me demande si on peut centrer le "texte" au niveau de la barre latéral comme le widget instagram, la blogroll et les archives? et si on peut changer ta typo, la taille etc...

    De plus, j'ai parcouru tes super tutos de long en large, et un expliquant comment modifier la barre de recherche, en remplaçant "rechercher" par une petite loupe par exemple ça serait très chouette.

    Merci beaucoup!

    RépondreSupprimer
  22. Bonjour,

    Récemment,j'ai fait mon encart d'introduction mais avant ça,j'avais modifié les titres de ma barre latérale (qui sont maintenant soulignés).Alors quand j'ai mis le titre dans l'encart d'introduction,il était,lui aussi souligné.Est-ce possible de n'enlever la ligne qu'aux titres ? Si non,comment faire pour enlever le soulignement à tout les titres ?

    Et j'ai deux-trois questions :

    Comment séparer les gadgets par une ligne pointillée mauve ?
    Comment aligner les boutons de partage et le bouton des commentaires ? (par exemple : Le bouton des commentaires à gauche et le bouton de partage tout à droite ?
    Et la dernière,comment peut-on mettre une ligne de séparation,puis la date de l'article et encore une ligne de séparation ?

    Je ne sais pas tout est clair car je ne peux pas mettre de photos pour illustrée :/

    Merci pour tout les tutoriels qui m'ont beaucoup aidé jusque là :) !

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Pour supprimer la bordure seulement au titre de l'encart d'introduction, il faut ajouter une ligne au code suivant de l'encart d'introduction :

      /* Apparence du titre */
      #encart-intro h2 {
      }

      Ajoutes :

      border: none !important;

      avant le signe } et voilà ;)

      Pour le reste, je note sur ma liste de tutoriel à faire ;)

      Supprimer
  23. Hello Catherine!
    Merci pour ce superbe tutoriel *-*

    J'ai un petit soucis avec le code par contre. En effet, il y a un espace trop important entre le titre de ma barre latéral droite et le gadget! J'ai essayé de le rétrécir avec le code padding-bottom mais il ne prend pas en charge les valeurs négatives! J'espère que tu vois ce dont je parle et que tu as la solution!

    Voici mon code:
    /* Apparence des titres de la barre latérale de droite */
    .column-right-inner h2 {
    font-family: Cheddar Jack !important;
    font-size: 45px !important;
    text-transform: none;
    color: #5a6e55 !important;
    text-align: center;
    }

    Bisous et à bientôt!
    Julie

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Rajoute cette ligne avant le signe } de ton code :

      margin-bottom: 15px !important; /* Espace en-dessous du titre */

      Comme ceci :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: Cheddar Jack !important;
      font-size: 45px !important;
      text-transform: none;
      color: #5a6e55 !important;
      text-align: center;
      margin-bottom: 15px !important; /* Espace en-dessous du titre */
      }

      Tu peux augmenter ou diminuer la valeur en pixels pour augmenter ou diminuer l'espace sous les titres ;)

      Supprimer
  24. MERCI !
    J'adore, ça rends vraiment bien sur mon blog :P

    Bisous x.

    RépondreSupprimer
  25. Hello, merci beaucoup pour tous tes tutoriels qui me servent très souvent ! :)
    J'ai tout de même une petite question et je ne trouve pas de tuto sur ton blog: comment fais t-on pour enlever le titre d'un élément d'une colonne. J'avais réussi auparavant mais là, je refais tout le design de mon blog et impossible de retrouver l'astuce :/

    Merci beaucoup <3

    Ninon
    ninonptrs.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Ninon,
      Pour supprimer le titre d'un gadget il faut d'abord trouver le nom du gadget. Pour cela tu peux ouvrir le gadget en cliquant sur le lien Modifier dans Mise en page. En haut de la fenêtre tu verras une adresse URL, vas tout à droite de l'adresse, tu verras écrit :

      widgetId=HTML2

      Le nom de ton gadget est le texte après le signe =. Ci-dessus le nom du gadget est HTML2.

      Ensuite ajoute le code CSS suivant dans ton thème, avant /* Content par exemple :

      #HTML2 h2 {
      display: none;
      }

      Remplace HTML2 par le nom du gadget en question, et voilà ;)

      Supprimer
  26. Je découvre le monde fascinant des blogs depuis quelques semaines (enfin le fait d'en tenir un moi-même) mais je n'y connais pas grand chose! Ton blog est vraiment super! Merci pour tous ces articles qui m'aident à améliorer mon blog et sa présentation!

    RépondreSupprimer
  27. Merci beaucoup pour ce magnifique tuto qui m'a ennormeent servi !

    Vous êtres fan de MODE et Beauté?

    SUIVEZ mon blog designer grace aux tuto de lady red bird!!!
    blackvetvet.blogspot.com

    RépondreSupprimer
    Réponses
    1. De rien, je suis contente de pouvoir aider ^^

      Supprimer
  28. Bonjour Catherine !

    Je te remercierai jamais assez pour tes tuto ;) grâce auxquels je progresse... lentement, mais sûrement.

    J'ai un petit souci sans doute très bête : mes titres se mettent en gras, par défaut. J'ai essayé le "font-weight: none;" et même "font-weight: none !important;" mais je n'arrive pas à enlever l'effet gras. Tu pourrais m'aider là dessus, s'il-te-plaît ?

    Par avance, merci.

    RépondreSupprimer
    Réponses
    1. Bonjour Coralie,
      Essaye ceci :

      font-weight: normal;

      ;)

      Supprimer
    2. OPardon, je n'avais pas vu ton message.

      Oui, ça a marché ! Merci !!!

      Supprimer
    3. Bonjour, moi aussi ça me le fait et j'ai essayé toutes les méthodes notés ici et cela ne fonctionne pas :/

      Supprimer
    4. Bonjour,
      En regardant ton code CSS tu as :

      font-weight: none !important;

      Au lieu de :

      font-weight: normal;

      Essaye avec ce dernier code ;)

      Supprimer
  29. Bonjour à toi!
    J'ai bien avancé sur mon blog (qui n'est pas encore visible pour le moment) c'est grâce à toi.
    Je voulais te demander sous mon encart de présentation je souhaite ajouter un widget en clair je veux que le titre soit une image (j'ai fais une petite bannière exemple pour me contacter) et en dessous j'ai aussi créer un image qui ne comporte pas de lien mais je ne vois pas comment faire?
    De plus, je souhaite faire un autre gadget avec à la place du titre une image que j'ai faite aussi mais en dessous je veux insérer une image qui renvoie à une page internet je ne sais pas si je suis claire? Est-ce que c'est réalisable?
    Je te remercie par avance
    Encore un truc! dans ma page de présentation je voulais te citer pour tes tutos mais je ne sais pas si je peux alors je te demande l'autorisation :-)
    Gros bisous pour toi

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour cela il faut ajouter plusieurs images dans un même gadget HTML/JavaScript. Une image avec un lien et une image sans lien, dans l'ordre que tu souhaites.

      Le code HTML d'une image est :

      <img src="http://adresse.fr/image.jpg" alt="Texte de Secours" />

      Remplace http://adresse.fr/image.jpg par l'adresse URL de ton image. Tu peux en créer une en l'ajoutant à Blogger comme expliqué ici : http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Remplace Texte de Secours par un texte de secours qui ne s'affichera que si l'image ne charge pas.

      Le code HTML d'un lien se présente comme ceci :

      <a href="http://adresse.fr/lien.html">lien</a>

      Remplace http://adresse.fr/lien.html par l'adresse URL vers laquelle on est redirigé en cliquant sur le lien.
      Remplace lien par le code HTML de l'image auquel tu veux ajouter un lien.

      Pour finir, il faut cacher le titre par défaut du gadget. Pour cela il faut trouver le nom de ton gadget. Va dans Mise en Page, clique sur Modifier sur ton gadget. Clique dans la barre d'adresse en haut de la fenêtre. Va à la toute fin de cette adresse. Tu trouveras quelque chose comme ceci :

      widgetId=HTMLX

      où X sera un numéro.
      HTMLX (avec un numéro à la place de X) est le nom de ton gadget. Pour cacher le titre par défaut de ce gadget ajoute le code suivant dans ce gadget :

      <style type="text/css">
      #HTMLX h2 {
      display: none;
      }
      </style>

      Remplace bien X dans ce code par le numéro de ton gadget !

      Sauvegarde et voilà ;)

      Supprimer
    2. Merci beaucoup d'avoir pris le temps de me répondre avec ça je vais avoir un super blog
      Tu ne m'as pas répondu pour savoir si je pouvais te citer
      Bisous

      Supprimer
    3. Oh oui pardon, il n'y aucun problème ! ^^

      Supprimer
    4. J'ai fais comme tu m'as dit nikel par contre mon image ne se centre pas peux-tu m'aider?

      Supprimer
    5. Pour centrer ton image utiliser le code CSS suivant :

      #HTMLX {
      text-align: center;
      }

      Et au cas où ça ne suffit pas :

      #HTMLX img {
      margin: 0 auto;
      }

      Attention à bien remplace X par le numéro de ton gadget ;)

      Supprimer
  30. Bonjour,

    Merci pour ce tutoriel :)

    J'ai une question : comment-faire pour avoir un fond ? Je ne sais pas très bien l'expliquer mais un peu comme le blog "Kayture"

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour ajouter un fond il faut utiliser les codes CSS suivants (exemple pour les titres de la barre de droite) :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      background-color: #000000; /* Couleur de fond */
      padding: 10px 10px 10px 10px; /* Espace au-dessus, à droite, en-dessous et à gauche du texte */
      }

      Remplace #000000 par le code de la couleur de ton choix (#000000 correspond au noir).

      La ligne :

      padding: 10px 10px 10px 10px; /* Espace au-dessus, à droite, en-dessous et à gauche du texte */

      Permet d'ajouter un espace entre le texte et la bordure du fond ;)

      Supprimer
  31. Hello ! Dis moi, je suis perdu, je voudrais re-faire le design de mon blog mais je suis tellement nulle que je n'arrive, ni à mettre un fond totalement blanc (le mien est gris je ne comprend pas pourquoi www.leblogpoidsplume.blogspot.fr) ni à centrer le titre de mon blog.. Aurais-tu des conseils, voir des solutions? :) Merci par avance !
    Margaux

    RépondreSupprimer
    Réponses
    1. Bonjour Margaux,
      Ton fond est bien blanc. L'ombre de tes gadgets donne l'illusion que ton fond est gris.
      Ton titre est également bien centré, mais ton menu est décalé vers la gauche. Pour régler ce problème remplace ce code CSS :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Allerta;
      font-style: gras;
      font-size: 17px;
      color: #444444;
      margin-right: 20px;
      }

      Par celui-ci :

      /* Police et Couleur des Liens */
      .tabs-inner .widget li a {
      font-family: Allerta;
      font-style: gras;
      font-size: 17px;
      color: #444444;
      margin-right: 10px;
      margin-left: 10px;
      }

      Supprimer
  32. Arf... c'est très bizarre, ça ne marche qu'à moitié !

    Mais avant de me plaindre, je veux te remercier mille fois pour tes tutoriels géniaux. Je commence seulement à bidouiller, donc pour le moment, le résultat est encore assez moche, mais je ne désespère pas d'arriver à quelque chose de sympa grâce à toi. Mon blog, c'est mariescribouille.blogspot.com

    Pour en revenir à nos moutons... J'ai d'abord essayé la version simple en ajoutant le CSS comme tu l'as suggéré en premier lieu. Je parviens à changer le centrage du texte, la bordure inférieure, mais pas la typo ni la couleur du texte. J'ai essayé directement dans le code, pas mieux ! J'ai supprimé tous les paragraphes que j'avais ajoutés au code pour revenir en arrière, et ça reste centré avec une bordure.

    Pour info, j'ai rentré comme typo une typo google font (permanent marker) que je viens d'ajouter grâce à un autre de tes tutoriels. Mais même quand je copie ton code, la typo et la couleur de texte ne changent pas.

    En tous cas merci pour tout !

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Tu as un code CSS qui entre en conflit avec ton nouveau code.
      Retrouve ton code CSS suivant :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: 'Permanent Marker', cursive;
      font-size: 14px;
      color: #ffb55c;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }

      Et rajoute !important à la fin des lignes suivantes :

      font-family: 'Permanent Marker', cursive;
      font-size: 14px;
      color: #ffb55c;

      Et :

      margin-bottom: 20px;

      Comme ceci :

      .column-right-inner h2 {
      font-family: 'Permanent Marker', cursive !important;
      font-size: 14px !important;
      color: #ffb55c !important;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px !important;
      }

      Supprimer
    2. Ça y est, top, j'ai compris ! Elle me prend pas ma permanent marker que j'ai installée, mais c'est pas grave, j'ai pris la Rock Salt qui est built-in.
      Un tout grand merci. Y a encore 1000 de tes tutos que je veux essayer. Mais une chose à la fois. J'adore ton blog, c'est vraiment ma meilleure source pour la customisation de Blogger.
      En plus, tu es super dispo et prends le temps de répondre à tout le monde, chapeau !

      Supprimer
  33. Coucou,

    Merci pour tout tes tutoriels super sympa, cela m'aide beaucoup, cependant j'aurais deux trois questions à te poser...

    Je n'arrive pas à changer la police de mes titres de barres latérale, j'ai suivis tes instructions à la lettre mais rien à faire je ne peux pas les changer :/

    Et aussi, je voulais savoir comment as-tu fais pour que ton widget Instagram prenne toute la largeur de ta page blog ? :)

    http://theblondcover.blogspot.fr

    Pleins de bisous, Marine

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Tu as un code CSS qui entre en conflit avec ton nouveau code.
      Retrouve ton code CSS suivant :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: Homemade Apple;
      font-size: 16px;
      text-transform: uppercase;
      color: #FF9CF9;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }

      Rajoute !important avant les signes ; des lignes :

      font-family: Homemade Apple;
      font-size: 16px;
      color: #FF9CF9;
      margin-bottom: 20px;

      Comme ceci :

      .column-right-inner h2 {
      font-family: Homemade Apple !important;
      font-size: 16px !important;
      text-transform: uppercase;
      color: #FF9CF9 !important;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px !important;
      }

      Pour le gadget Instagram, j'ai ajouté un espace au-dessus du pied de page. Mais je vais peut-être faire un tutoriel qui explique comment faire ;)

      Supprimer
  34. Bonjour,
    j'ai une petite question, j'aimerai pouvoir personnalisé le menu déroulant de "Archives" est-ce que c'est possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible. Voici les codes CSS pour ce gadget :

      Pour le gadget en général :

      .BlogArchive {
      }

      Pour le menu déroulant c'est :

      select#BlogArchive1_ArchiveMenu {
      }

      Supprimer
    2. Merci beaucoup j'ai réussi ! :)
      Au passage, pour éviter de trop t'embêter quels sont les codes css pour les gadgets traduire, articles les plus consultés & libellés pour que je puisse les modifier ?
      Merci d'avance et bonne soirée ;)

      Supprimer
    3. Pour trouver le nom de ton gadget. Va dans Mise en Page, clique sur Modifier sur ton gadget. Clique dans la barre d'adresse en haut de la fenêtre. Va à la toute fin de cette adresse. Tu trouveras quelque chose comme ceci :

      widgetId=YYYX

      Où YYY peut être HTML, Label, etc.
      Et X sera un numéro.
      Pour un gadget HTML JavaScript ce mot sera HTML1 ou HTML2 par exemple. C'est le nom de ton gadget. Le code CSS correspondant doit commencer par ce nom comme ceci :

      #HTML1 {
      }

      Remplace HTML1 dans ce code CSS par le nom de ton gadget et voilà ;)
      Ensuite pour modifier le titre du gadget il faut rajouter h2 après le nom, comme ceci :

      #HTML1 h2 {
      }

      Pour les liens il faut ajouter a à la place :

      #HTML1 a {
      }

      Ensuite pour chaque article il y a plusieurs spécificités dues à leur code HTML. Je pourrais en parler plus en détail dans un tutoriel ;)

      Supprimer
  35. Bonjour Catherine !

    Fan depuis peu de tes tutoriels pour Blogger, je les appliques à la lettre, seulement aujourd'hui j'ai vraiment besoin de ton aide je me suis perdue dans mes codes HTML.... En voulant "centrer" l'ensemble des mes gadgets de la barre latérale, la modification de mes gadgets dans la mise en page m'est maintenant totalement impossible ! Preuve à l'appuis:
    file:///Users/saint-felix/Desktop/Capture%20d’écran%202016-01-23%20à%2020.10.44.png

    J'espere que tu pourras m'aider j'ai vraiment tout tenté, mais je suis bloquée. Merci d'avance pour ton aide, gros bisous, Marine


    Adresse de mon blog: http://theblondcover.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne peux voir ton image car elle est sr ton ordinateur ;)
      Si tu veux centrer le contenu de tes gadgets, il faut centrer chaque contenu dans chaque gadget. Par exemple, pour centrer l'image de ton premier gadget :

      #Image1 img {
      margin: 0 auto !important;
      display: block;
      }

      Supprimer
  36. Bonjour,

    Tout d'abord merci pour toutes ces précieuses explications. Jusqu'à présent j'ai toujours réussi à m'en sortir comme une grande, mais là je pense avoir besoin de ton aide. Je voudrais personnaliser la liste de catégories (qui sont des libellés).
    J'ai essayé d'utiliser ces lignes de code comme tu l'as indiqué précédemment:

    .list-label-widget-content li {
    list-style: none; /* Enlève les "points" avant les liens */
    padding-top: 5px; /* Espace au-dessus des liens */
    padding-bottom: 5px; /* Espace en-dessous des liens */
    font-family: Arial; /* Police */
    font-size: 14px; /* Taille de la police */
    text-align: left; /* Alignement des liens (left = gauche; center = centré; right = droite) */
    }

    .list-label-widget-content li a {
    color: #000000; /* Couleur du lien */
    }

    .list-label-widget-content li a:hover {
    color: #ec144e; /* Couleur du lien quand survolé par la souris */
    text-decoration: none; /* Supprime le soulignement du lien quand au survol */
    }

    Mais ça ne semble pas fonctionner.
    Pourrais tu me guider ?

    Je te remercie

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient du nom de ton gadget. Il faut d'abord trouver le nom de ton gadget, puis l'ajouter au début des codes CSS.

      Pour trouver le nom de ton gadget. Va dans Mise en Page, clique sur Modifier sur ton gadget. Clique dans la barre d'adresse en haut de la fenêtre. Va à la toute fin de cette adresse. Tu trouveras quelque chose comme ceci :

      widgetId=YYYX

      Où YYY peut être HTML, Label, etc.
      Et X sera un numéro.
      Pour un gadget HTML JavaScript ce mot sera HTML1 ou HTML2 par exemple. C'est le nom de ton gadget. Le code CSS correspondant doit commencer par ce nom comme ceci :

      #HTML1 {
      }

      Remplace HTML1 dans ce code CSS par le nom de ton gadget et voilà ;)
      Ensuite pour modifier le titre du gadget il faut rajouter h2 après le nom, comme ceci :

      #HTML1 h2 {
      }

      Pour les liens il faut ajouter a à la place :

      #HTML1 a {
      }

      Etc. ;)

      Supprimer
  37. bonjour,

    Merci beaucoup pour tous ces supers tutos, c'est top!
    J'aurai voulu savoir si tu pouvais me dire s'il te plaît, où se trouve le code CSS qui permet de modifier l'apparence générale de la barre latérale et pas seulement les titres: j'aimerai que ma barre latérale est un fond et une bordure différents du reste du blog, est-ce possible? merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour Alice,
      Pour modifier la barre latérale de manière générale, utilise le code CSS :

      aside .sidebar {
      }

      Supprimer
  38. Encore moi, décidément je n'avais pas eu besoin de demander de l'aide depuis plusieurs semaines que je suis tes tutos et paf 3 messages d'un coup. Sur ce tuto là, c'est la jolie barre sous les titres qui n'apparait pas chez moi...
    Bizarre toutes ces choses que je n'arrive pas à appliquer, y-a-t-il un bug quelque-part sur mes codes...
    Merci encore. Mon blog: http://ideessortiesenfantssecteursevran93.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Retrouve ton code :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: Giorgia;
      font-size: 14px;
      text-transform: uppercase;
      color: ;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;
      }

      Rajoute !important avant le signe ; des lignes suivantes :

      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #000000;
      padding-bottom: 10px;
      margin-bottom: 20px;

      Comme ceci :

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

      Il y a une petite erreur dans ce code, il n'y a aucune valeur dans ce code :

      color: ;

      Supprime cette ligne si tu ne souhaites pas définir la couleur de texte de tes titres, ou ajoute un code couleur si tu souhaites la définir ;)

      Supprimer
  39. Bonjour Catherine.

    Déjà, merci mille fois pour ce blog et tous ces tutos, c'est un bonheur de réussir à modifier son blog et de le rendre joli ;-)

    J'ai réussi à modifier les titres et le corps de la barre latérale mais mon souci est que ma barre latérale est beaucoup trop proche de mes articles. J'ai essayé un code pour l'éloigner proposé dans les commentaires mais rien n'y fait... Je ne sais pas où j'ai loupé un truc.

    Serait-ce possible également d'agrandir la zone du blog sur la largeur de la page? J'ai l'impression que tout fait "tasser" au milieu, tout collé et je ne trouve pas ça très esthétique. Y a-t-il un code utilisable pour agrandir cette zone?

    Et pareil (je profite de mon message pour mon dernier problème), impossible de diminuer l'espace sous ma barre de menu... Ca fait énorme et j'ai essayé de modifier quinze mille codes mais je n'ai toujours pas trouvé le bon.

    Si vous pouviez m'aider, cela serait super gentil.
    Mon blog est ici: https://lecturesdelyuna.blogspot.fr
    Je vous remercie d'avance et merci une nouvelle fois pour tous ces tutos bien pratique,
    Elyuna

    RépondreSupprimer
    Réponses
    1. Bonjour Elyuna,
      Tu peux modifier la largeur de ton blog en allant dans Modèle > Personnaliser. Dans le menu à gauche clique sur Ajuster la largeur. Sous Blog complet tu peux ajuster la largeur globale de ton blog.

      Pour ajouter un espace entre la zone de tes articles et ta barre latérale, utilise le code suivant :

      .widget.Blog {
      padding-left: 20px;
      }

      Colle-le avant la ligne suivante dans ton code :

      ]]></b:skin>

      Augmente la valeur de 20px pour augmenter l'espace et diminue cette valeur pour réduire l'espace.

      Pour diminuer l'espace sous ton menu, retrouve ce code CSS :

      .main-inner {
      padding-top: 35px;
      padding-bottom: 65px;
      }

      Si à la place de 35px tu as un code qui ressemblent à ceci : $(blabla.bla), ce n'est pas grave. Remplace la valeur de la ligne commençant par :

      padding-top:

      Par celle que tu souhaites. Actuellement elle est à 35px, diminue cette valeur pour diminuer l'espace ;)

      Supprimer
  40. Coucou miss,

    Je suis en plein dans la finalisation du design de mon blog, c'est le plus dur, les petits détails lol.

    Est ce que tu pourrais me dire pourquoi dans le pied de page qui est séparé en deux, je n'arrive pas à avoir les barres de recherches sous chaque image. En gros pourquoi elles ne sont pas centrées et si longue pour celle de gauche?

    Par ailleurs, est ce que tu pourrais me dire comment faire pour modifier le gadget Suivez moi par email à droite.
    J'aurai voulu le modifier comme celui de la recherche mais il n'est pas fait par elle code HTML. Je suppose qu'il faut que je modifie directement le code dans le modèle mais dans quel attribue je dois entrer le code?
    Je voudrais centrer le tout et changer la couleur et l'écriture au moins du titre :D

    Merci ma belle
    Aurélie
    http://lespetitesbullesdemavie.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      As-tu changé ton pied de page ? Car je ne vois pas le simages ni les barres de recherche :/

      Voici les codes CSS pour modifier le titre, le champ de saisie et le bouton de ton gadget "Suivez-moi par e-mail" :

      /* Gadget Suivez-moi par e-mail */
      /* Titre du gadget */
      #FollowByEmail1 h2 {
      }
      /* Champ de saisie */
      .FollowByEmail .follow-by-email-inner .follow-by-email-address {
      }
      /* Bouton valider */
      .FollowByEmail .follow-by-email-inner .follow-by-email-submit {
      }

      Supprimer
    2. Coucou merci miss! Je vais tester ca!
      Oui du coup, j'ai enlevé le pied de page, je le trouvais moche lol.

      Je cherche juste un gadget article similaire mais je cherche encore.
      Je t'avais posté une autre question sur un autre tuto.

      En tout cas merci pour tes conseils! Plusieurs lectrices m'ont demandé comment j'avais fait tout ca, du coup, je donne le nom de ton blog ;)
      bisous

      Supprimer
  41. Coucou miss!!

    C'est encore moi, tu dois avoir déjà une de mes demandes en attente pour le widget follow by email que je n'arrivais pas à modifier.

    J'ai réussi grace à ce tuto à modifier le titre mais si tu regardes sur mon blog (https://lespetitesbullesdemavie.blogspot.fr/), je voulais modifier aussi la case SUIVRE qui est grise. Je voulais la changer de couleur mais je n'arrive pas :/

    De même, j'ai installé une nouvelle police sur blogger mais elle ne s'affiche pas toujours. Certaines copines l'ont et d'autres non :/ C'est Sweet Pea.
    Tu as une idée du pourquoi du comment?
    J'ai collé ce code avant ]] b skin

    /* @font-face kit by Fonts2u (http://www.fonts2u.com) */
    @font-face {
    font-family:"Sweet Pea";
    src:url("Sweet_Pea.eot?") format ("eot"),
    src:url("Sweet_Pea.otf") format("truetype"),
    url("Sweet_Pea.woff") format("woff"),
    url("Sweet_Pea.svg#Sweet_Pea") format("svg");
    font-weight:normal;
    font-style:normal;
    }

    Merci de ton aide :D
    bisous bisous
    Aurélie

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      C'est normal que la police ne marche pas, ton code ne contient pas les adresses url des polices.
      Le plus simple pour installer une police, autre que Google Fonts, est d'ajouter les fichiers (.eot, .otf, .woff et .svg) dans un dossier public sur Dropbox (les dossiers publics ne sont disponibles que pour les comptes payants). Il faut ensuite copier les adresses url partagés de ces fichiers et les coller dans ton code. Je peux en faire un tutoriel. Mais ton code actuel ne marchera pas :/

      Supprimer
    2. ah ok, il ne parle jamais d'adresse url dans les tutos bizarre. Mais en fait, la police que j'utilise n'est pas dans google fonts, la loose lol.

      Bon je vais regarder ca :D
      Bises

      Supprimer
  42. Bonjour Catherine!

    Novice dans les codes html, j'essaye de me dépatouiller, mais là je n'y arrive pas. J'ai des onglets de couleurs gris que je n'arrive pas à changer :( lorsque l'on survole ils sont blancs. J'aimerai qu'ils soient blancs tout le temps. J'ai cherché partout impossible de trouvé une solution. Merci beaucoup de l'aide que tu nous apportes.

    Laurence (www.leptitcoinvintage.com)

    RépondreSupprimer
    Réponses
    1. Bonjour Laurence,
      Pour modifier l'apparence des liens de ton gadget Pages, retrouve le code CSS commençant par :

      .tabs-inner .widget li a {

      Remplace les 2 dernières lignes du code avant le signe }, commençant par background et border-right par ces lignes :

      background: transparent;
      border: none;

      Ensuite cherche le code CSS commençant par :

      .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

      Remplace les 4 dernières lignes avant le signe } par :

      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      -goog-ms-box-shadow: none;
      box-shadow: none;

      et remplace la ligne commençant par background par :

      background: transparent;

      Maintenant dans les paramètres de personnalisation de ton blog, modifie la couleur des liens de ton menu par celle que tu souhaites car pour l'instant ils sont blancs :)

      Supprimer
  43. Hello,
    Je souhaitais avoir ton aide, j'ai essayé de mettre le titre de la barre latérale comme la date sur mon blog. Mais si passes par mon blog, tu peux voir que mes titres ont le texte barré ... Je pense que j'ai du oublié une étape, mais ça m'échappe ^^
    Pourrais-tu m'aider ?

    Hiddenlifee.com
    Aurore.

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      C'est normal que les titres soient barrés, par défaut on ne peut pas avoir le même résultat. Il faut ajouter un petit code javascript qui va permettre d'obtenir le même résultat.
      Colle ceci :

      <script>$(document).ready(function(){$("aside h2").wrapInner("<span></span>");});</script>

      Avant la ligne suivante de ton thème :

      </body>

      Ensuite, cherche la ligne :

      ]]></b:skin>

      Juste avant cette ligne colle :

      #encart-intro h2 span {
      background-color: #ffffff;
      padding-left: 20px;
      padding-right: 20px;
      z-index: 1;
      }

      Supprimer
  44. Bonjour :)
    J'aurais une petite question, ça fait quelques jours que je bataille à chercher comment personnaliser et centrer les titres des gadgets.. j'ai essayé ce tuto très bien expliqué comme d'habitude mais ça ne fonctionne pas j'aimerais savoir pourquoi.. Merci beaucoup :)

    (mon blog : lenvieenrose.blogspot.fr)

    RépondreSupprimer
  45. Oups alors apparemment ça fonctionne pour centrer le titre mais ça n'a rien changé à l'apparence :/
    Et comment fait-on pour centrer un gadget (j'aimerais centrer le chiffres des statistiques) ?

    Merci beaucoup !! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sara,
      Oui effectivement tes titres sont bien centrés. Mais tes statistiques ne le sont pas. Ajoute le code CSS suivant :

      #Stats1 {
      text-align: center !important;
      }

      Avant la ligne suivante de ton code :

      ]]></b:skin>

      Et voilà ;)

      Supprimer
    2. Super merci beaucoup !! :)

      Supprimer
  46. Bonjour,
    j'essaye de changer la décoration des titres de la bar latérale, mais je n'arrive pas à placer des lignes horizontales de chaque côté du titre. Quelles sont les modifications à faire dans le code Html?
    Merci
    Abby (baguelle.blogspot.be)

    RépondreSupprimer
    Réponses
    1. Bonjour Abby,
      Par défaut on ne peut pas ajouter de lignes derrières les titres des gadgets sur Blogger. Il faut ajouter un code Javascript qui permet de modifier le code HTML des titres.
      Je note pour en faire un tutoriel ;)

      Supprimer
  47. bonjour, je ne sais pas si je pose ma question au bon endroit... voilà
    mon souci est que l espace entre mes gadgets dans la colonne de droite est trop grand et je voudrais le rapetisser
    dans mon blog d essai c est ok... j ai essayé de comparer les 2 codes sources sans trouver...
    peux tu me dire quel est le paramètre à modifier
    à toutes fins utiles le lien de mon blog montrant cet espace vraiment trop grand
    http://septsup6.blogspot.fr/
    merci d avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour modifier les marges autour de tes gadgets tu peux utiliser ce code CSS :

      /* Gadgets de la barre latérale */
      aside .widget {
      margin-top: 0px !important; /* Marge au-dessus */
      margin-bottom: 0px !important; /* Marge en-dessous */
      }

      Remplace les valeurs de 0px par celles qui te conviennent. Une valeur positive va augmenter la marge, et donc l'espace. Une valeur négative va diminuer la marge.

      Colle ce code CSS avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  48. Bonsoir !
    Tout d'abord merci pour ce blog qui est une vraie mine d'informations ! J'ai réussi à poser les bases pour la construction de mon blog grace a vous !
    J'ai créé des barres latérales a droite pour mettre des liens (Les blogs que je suis et les catégories de mon blog) et j'ai mis des images comme titre des barres. J'aurais voulu connaitre un code pour remplacer les puces par des images dans les listes de liens. J'ai chercher sur internet différents codes mais sans succès.
    Et mon problème le plus embêtant : Certains de ces liens a droite (ex: L'icône de l'enveloppe dans l'encart de présentation, "Recettes", "DIY", ... apparaissent en vert et non pas en gris. Je ne trouve pas comment rectifier ca..
    Merci d'avance !

    Le lien de mon blog : http://myhibernationblog.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      Pour ajouter une puce personnalisée à tes listes, tu peux utiliser cette astuce.
      Tu peux ajouter un élément avant un autre avec du CSS. Par exemple, on peut ajouter quelque chose avant les points de ta liste de liens Catégories avec le code CSS suivant :

      #HTML4 li:before {
      content: 'x'; /* Elément à ajouter */
      display: inline-block;
      margin-right: 10px; /* Espace à droite de l'élément */
      }

      Ton gadget liste de liens Catégories porte le nom de HTML4 (tu peux suivre ces instructions pour trouver le nom d'un gadget). Tu peux adapter ce code CSS à un autre gadget en changeant HTML4 par le nom d'un autre gadget.

      Dans cette exemple, le code CSS ajoute un x avant chaque point de la liste. Tu peux remplacer ce x par une image en remplaçant :

      content: 'x';

      Par :

      content: url('http://url.com/image.png');

      Remplace http://url.com/image.png par l'adresse URL de ton image.

      Pour ce qui est des couleurs de tes liens, le problème vient de tes paramètres de couleurs. Va dans Modèle > Personnaliser. Clique sur Avancé puis sur Liens. Ici tu trouveras les paramètres de tes liens :
      - Liens non visités
      - Liens visités
      - Liens quand survolés par la souris (couleur de pointage)

      Défini la même couleur pour les liens non visités et les liens visités, et voilà ;)

      Supprimer
    2. Au top ! Ca marche du tonnerre :D Merci beaucoup !! :)

      Supprimer
  49. Bonjour !

    Sais-tu quel code il faut pour faire des "triangles" sur les bords du "background" des titres ? (pour obtenir un effet "ruban", je sais pas si je suis claire lol)

    Dans cet esprit là :

    http://images.google.fr/imgres?imgurl=http%3A%2F%2Fimg.freepik.com%2Fvecteurs-libre%2Fensemble-de-rubans-et-bannieres_1026-158.jpg%3Fsize%3D338%26ext%3Djpg&imgrefurl=http%3A%2F%2Ffr.freepik.com%2Fphotos-vecteurs-libre%2Fbanniere-de-ruban&h=338&w=338&tbnid=Pr1BjRZIkIT4_M%3A&vet=1&docid=OX3UZeLDamJkuM&ei=B3-TWPfNDMG3a-nGtrgK&tbm=isch&iact=rc&uact=3&dur=1360&page=0&start=0&ndsp=20&ved=0ahUKEwi37a7oifLRAhXB2xoKHWmjDacQMwg3KAUwBQ&bih=759&biw=1536


    Merci encore! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      On peut tout à fait recréer cet effet avec du code CSS. Ou alors utiliser une image de fond.
      Je note l'idée pour un tutoriel ;)

      Supprimer
    2. Okay!! :)
      Et tant qu'on est dans les "idées tuto" (^^), ce serait intéressant d'avoir un tuto pour créer un carrousel (ou slider), en dessous du titre par exemple... Qu'en penses-tu ? c'est faisable ?

      A tout bientôt! :)

      Supprimer
    3. Bonjour,
      Oui c'est possible et c'est même prévu ;)

      Supprimer
  50. Bonjour !
    J'ai suivi attentivement toutes tes explications et j'ai lu presque tous les commentaires pour comprendre mais non je n'y arrive pas...
    Je n'arrive pas à modifier mes titres sur le côté "Rechercher dans ce blog" etc... Pourtant j'ai mis la mention " !important; " un peu partout. Je ne comprends pas :(
    Merci par avance de ton aide !!

    RépondreSupprimer
    Réponses
    1. Bonjour Manon,
      Il y a juste une petite erreur dans l'ajout des !important. Il faut ajouter ce terme avant le signe ; entre ce signe et la valeur comme ceci :

      font-family: Arial !important;

      Or tu as un signe ; entre la valeur (ici Arial) et le signe ; qui ferme la ligne :

      font-family: Arial; !important;

      Comme le signe ; après Arial ferme la ligne, !important n'est pas pris en compte ;)

      Supprimer
  51. Bonjour Catherine,
    j'ai lu tous les commentaires pour voir si la question avait été posée mais apparemment non. J'ai effectivement bien compris comment modifier l'apparence des titres grâce à tes explications, mais je souhaiterais mettre une couleur différente pour chaque catégorie ainsi qu'un petit icone à coté, (par exemple ma catégorie Beauté en rose avec un icone rouge à lèvres à coté puis Lifestyle avec un petit icone et le tout en bleu...) sais-tu comment je pourrais faire ? J'ai beau chercher mais je ne trouve absolument pas d'explication pour ajouter un code me permettant de modifier la couleur de plusieurs catégories...

    Je te remercie d'avance pour ton aide ! Et au passage, ton blog est vraiment une mine d'or concernant les tutoriels blogger, c'est un réel plaisir de venir y faire un tour et découvrir de nouvelles choses pour en apprendre plus sur les coulisses du blog !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Souhaites-tu afficher une liste de catégories dans ta barre latérale avec des couleurs différentes pour chaque catégorie ?
      Si oui, alors tu peux créer une liste de liens dans un gadget HTML/JavaScript.
      Tu peux te baser sur le tutoriel pour créer des boutons CSS. Sauf qu'au lieu d'ajouter les codes CSS dans Personnaliser, ajoute-les directement dans le code de ton thème avant la ligne ]]></b:skin>
      Le code HTML d'un lien de ce tutoriel est :

      <a href="http://adressedulien.com" id="motclé" target="_blank">Texte du lien</a>

      Il suffira de remplacer l'adresse url par l'adresse de ton libellé comme ceci :

      http://nomdublog.blogspot.com/search/label/Libellé

      Remplace Libellé par le nom exacte de ton libellé (mêmes majuscules et accents) et en remplaçant les espaces du libellé (s'il y en a) par %20.

      Si tu souhaites ajouter une icône, ajoute-le juste avant le Texte du lien.

      Supprimer
  52. Bonjour! Ce site est vraiment génial, bravo pour ce travail!!!!!!
    J'ai une petite question et je ne vois pas la réponse dans les commentaires.
    Est-il possible de faire la même manipulation pour changer les titres des gadgets sur la page d'accueil statique?

    J'ai une autre difficulté par rapport aux libellés en bas des posts: j'ai essayé de changer la police et la couleur comme (très clairement) indiqué, mais ça n'est pas pris en compte.... Pour les titres de gadget, la modif que tu as conseillée au-dessus de "content" a résolu ce soucis. y'a-t-il une manip similaire à effectuer?
    Un énorme merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sonia,
      Tu peux tout à fait utiliser ces codes pour les gadgets de ta page d'accueil statique. Il faut simplement remplacer le début du code CSS avec le nom de ta zone de gadgets.
      Dans mon tutoriel cette nouvelle zone se nomme gadgets-accueil. Tu peux donc utiliser le code CSS suivant pour modifier les titres des gadgets de cette zone de gadgets :

      #gadgets-accueil .widget h2 {
      }

      Si tes modifications pour les libellés ne s'affichent pas, vérifies dans les codes CSS précédents qu'il ne manque pas un des signes suivants { : ; } /* */
      Un oubli de signe, ou un signe en trop et tout ce qui suit l'erreur ne sera pas bien pris en compte par le navigateur.

      Supprimer

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

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger