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

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Vous avez été nombreux à me demander des tutoriels. Je note tout sur ma liste de tutos à faire et essaye de les réaliser dans les plus brefs délais, sachant que je prépare mon projet à côté et que j'ai également un vie personnelle ;) . Mais ne vous inquiétez pas, je ne vous oublie pas !

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Aujourd'hui je vais vous expliquer comment modifier l'apparence des titres des articles : changer la police, la taille, la couleur, ajouter une image en fond.

C'est parti pour les explications !

Sauvegarde du modèle

Tout d'abord commencez par sauvegarder le visuel de votre blog pour pouvoir revenir en arrière si besoin.
Pour cela allez dans Modèle. Cliquez sur Sauvegarder/Restaurer en haut à droite de la page web :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Cliquez ensuite sur Télécharger le modèle complet et sauvegardez votre thème sur votre ordinateur :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Maintenant que vous avez fait une sauvegarde, on va pouvoir passer aux choses sérieuses :)

Trouver le code

Toujours dans Modèle, cliquez maintenant sur Modifier le code HTML :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

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

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Si vous ne le trouvez pas, cette partie est déjà ouverte, passez à l'étape suivante.

Cliquez n'importe où dans la boîte de code et appuyez 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 entrez :
h3.post-title, .comments h4 {
Appuyez sur Entrer et vous tomberez sur le code suivant :
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Remplacez le par :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-color: #ffffff;
}

.comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Visuellement on obtient ceci :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

On va maintenant s'intéresser au code suivant pour l'apparence des titres :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-color: #ffffff;
}

Modifier l'apparence des titres des articles

Changer la police, la taille du texte, sa couleur, son alignement

Pour changer la police et la taille du texte on va s'intéresser aux lignes suivantes :
h3.post-title {
font-family: Georgia; /* Police du texte */
font-size: 22px;      /* Taille du texte */
text-align: left;     /* Alignement du texte */
color: #5b5b5b;       /* Couleur du texte */
background-color: #ffffff;
}
Pour l'alignement du texte (text-align) vous pouvez choisir la valeur :
  • left pour un alignement à gauche
  • center pour un texte centré
  • right pour un alignement à droite
Pour changer la couleur du texte (color) il faut trouver le code hexadécimal de la couleur souhaitée. Le site Code Couleur est un outil simple pour trouver le code hexadécimal de n'importe quelle couleur.

La couleur de fond des titres des articles

Pour changer le fond des titres, on s'intéresse à la ligne suivante :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-color: #ffffff;   /* Couleur de fond du texte */
}
Pour changer la couleur du fond il faut également indiquer le code hexadécimal de la couleur.

Une image en fond de titre des articles

Si vous voulez ajouter une image à la place d'une couleur en fond d'un texte, il suffit de remplacer cette ligne par :
background-image: url('http://adresseurl.com/imagedefond.png');
Ce qui donne :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
}
Remplacez http://adresseurl.com/imagedefond.png par l'adresse de l'image souhaitée.

Visuellement on obtient :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Vous pouvez modifier la répétition de l'image et sa position en ajoutant les lignes suivantes :
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
Comme ceci :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
}
Pour la position de l'image, les valeurs sont en pourcentage de la zone du titre.
Pour background-position-x, 0% correspond au bord tout à gauche du titre et 100% au bord tout à droite
Pour background-position-y, 0% correspond au bord supérieur du titre et 100% au bord inférieur

Dans l'exemple donné, on obtient visuellement :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Jouez avec les pourcentages pour trouver ce qui vous convient le mieux :)

Espacement entre le texte et les bords de la zone de titre

Pour changer l'espace entre les bords et le texte des titres, il faut ajouter les lignes suivantes :
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
Comme ceci :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: repeat;
padding-top: 5px;      /* Espace au-dessus du texte */
padding-right: 10px;   /* Espace à droite du texte */
padding-bottom: 5px;   /* Espace en-dessous du texte */
padding-left: 10px;    /* Espace à gauche du texte */
}
Pour changer l'espace il suffit de changer le nombre de pixels.

Dans cet exemple on obtient visuellement :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Espacement autour de la zone des titres

Pour changer l'espace autour des titres, il faut ajouter les lignes suivantes :
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
Comme ceci :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: repeat;
margin-top: 15px;     /* Espace au-dessus de la zone de titre */
margin-right: 0px;    /* Espace à droite de la zone de titre */
margin-bottom: 0px;   /* Espace en-dessous de la zone de titre */
margin-left: 0px;     /* Espace à gauche de la zone de titre */
}

Ajouter une image aux titres des articles

En utilisant la méthode qui permet d'ajouter une image en fond d'un texte, expliqué ci-dessus, on peut, par exemple, ajouter une image avant chaque titre.

En effet, il suffit d'ajouter l'image en fond du titre mais ne pas la répéter. En jouant sur la position horizontale (x) et verticale (y) de l'image on peut la placer où l'on veut par rapport aux titres.

Exemple : Je souhaite ajouter une image à gauche des titres. Je dois donc :
  • Ne pas répéter l'image en fond du titre (no-repeat)
  • Positionner l'image à 0% horizontalement de la zone des titres
  • Positionner l'image à 50% verticalement de la zone des titres pour qu'elle soit centrée
  • Ajouter un espace de 48 pixels (48px) à gauche des titres pour éviter qu'ils chevauchent l'image

Ce qui donne :
h3.post-title {
font-family: Georgia;
font-size: 22px;
text-align: left;
color: #5b5b5b;
background-image: url('http://adresseurl.com/imagedefond.png');
background-repeat: no-repeat;  /* Pas de répétition de l'image */
background-position-x: 0%;     /* Position horizontale de l'image */
background-position-y: 50%;    /* Position verticale de l'image */
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 48px;            /* Espace à gauche des titres */
}
Et visuellement on obtient :

Personnaliser l'apparence et ajouter une image aux titres des articles Blogger

Notez que cette technique est applicable sur tout type de texte ou lien :)

N'oubliez pas que pour visualiser les changements que vous apportez à vos titres, vous pouvez cliquer sur Prévisualiser le modèle au dessus de la boîte de code.

Une fois que vous êtes satisfaits de vos titres, n'oubliez pas d'enregistrer en cliquant sur Enregistrer le modèle.

Et voilà ! Vous savez maintenant comment modifier l'apparence des titres de vos articles  ;)

Bon blogging !

Autres articles

130 commentaires:

  1. Bonsoir !

    Tout d'abord, merci pour le temps que tu consacres à ces tutos, ils sont juste géniaux. J'ai une petite question concernant la police de caractère du titre du blog.

    Est-il possible d'utiliser une des polices un peu originales que propose la plateforme ?
    Pour être plus précise, je souhaiterais utiliser la Sue Ellen Francisco mais elle ne s'affiche pas quand je mets le nom dans le code fond-family.

    RépondreSupprimer
    Réponses
    1. Bonjour Lillie,

      Oui c'est tout à fait possible. Si ça ne marche pas vérifie bien qu'il ne manque aucun caractère comme le point-virgule après le nom de la police, ou que tu as bien écris font-family avec un t ;), par exemple.
      Ce sont des erreurs faciles à faire et qui arrivent souvent même à moi :)

      Si ça ne marche toujours pas, je peux vérifier ton blog, mais il me faudrait son adresse :)

      Supprimer
    2. Je viens de tester sur un blog test et effectivement ça ne fonctionne pas pour moi non plus...
      Dans ce cas il y a une alternative : utiliser un Google Web Font (http://www.google.com/fonts)

      Pour utiliser leur polices il faut ajouter un bout de code et on peut utiliser la police choisie.

      Va dans Modèle puis Modifier le code HTML.
      Juste après le code suivant, qui se trouve au début :

      <head>

      Colle le code suivant :

      <script type="text/javascript">
      WebFontConfig = {
      google: { families: [ 'Sue+Ellen+Francisco::latin' ] }
      };
      undefinedfunctionundefined) {
      var wf = document.createElementundefined'script');
      wf.src = undefined'https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagNameundefined'script')[0];
      s.parentNode.insertBeforeundefinedwf, s);
      })undefined); </script>

      Tu pourras maintenant utiliser ta police sans soucis :)

      Petite remarque : écris le nom de la police entre ' ' comme ceci :

      font-family: 'Sue Ellen Francisco';

      Et ça devrait marcher :)

      Supprimer
    3. Merci pour ta réponse :)
      J'ai essayé de suivre tes instructions mais j'ai le message d'erreur après avoir cliqué sur enregistrer qui me dit : A skin cannot contain the element: script. Only text and CDATA sections are accepted

      Y a pas à dire... Programmeur, c'est un métier ...

      Supprimer
    4. Ça devrait pourtant marcher...

      As-tu bien collé le code juste après <head>, vers la ligne 4 de ton code ? Et non après </head>.

      Tu devrais avoir ceci :

      <head>
      <script type="text/javascript">
      WebFontConfig = {
      google: { families: [ 'Sue+Ellen+Francisco::latin' ] }
      };
      undefinedfunctionundefined) {
      var wf = document.createElementundefined'script');
      wf.src = undefined'https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagNameundefined'script')[0];
      s.parentNode.insertBeforeundefinedwf, s);
      })undefined); </script>

      Supprimer
  2. J'avais bien collé mais il a fallu attendre un peu avant que ça ne soit pris en compte ^^'
    J'ai paniqué mais ça fonctionne, désormais !

    Merci pour ta gentillesse et ta patience ! :)

    RépondreSupprimer
  3. Bonjour, sur qu'elles site peut on trouvé des images pour les instalers avant les titres ?
    merci

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Il existe de nombreux sites web proposant des illustrations, des images, des bannières, etc, sur le net.
      Tu peux facilement trouver des images sur Etsy, par exemple, en cherchant "Blog clip art" mais elles seront payantes.
      Sinon le site Free design file (http://freedesignfile.com/) propose des vecteurs et des fichiers Photoshop (en .psd) gratuits. Mais il ne faut pas oublier de citer le créateur en les utilisant ;)

      Supprimer
    2. bonsoir, j'ai voulu me repencher sur le sujet mais soucis quand je tape dans la recherche h3.post-title, .comments h4 { il me met 0sur0 en rouge

      Supprimer
    3. Salut Jessica,
      Cherches le code suivant à la place:

      h3.post-title, h4 {

      Supprimer
    4. Dans ce cas essaye simplement d'ajouter le code commençant par :

      h3.post-title {

      Tu peux l'ajouter au dessus du code suivant (par exemple) :

      /* Content

      Supprimer
  4. Top comme d'hab ! Mais ce qui est fou c'est que je n'arrive toujours pas changer la couleur de la police ...

    RépondreSupprimer
    Réponses
    1. Essaye de rajouter le code suivant :

      h3.post-title a, h3.post-title a:visited {
      color: #FF456A;
      }

      Comme les titres sont des liens il faut aussi rajouter ce code pour que les liens "visités" soient également de la même couleur que le titre par défaut ;)

      Supprimer
    2. Oh mon Dieu ça marche !!!!!! Merci merci merci :-)

      Supprimer
  5. Bonjour, j'ai essayé j'ajouter une image mais malheureusement elle ne s'affiche pas :-/

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

      Supprimer
  6. Bonsoir LadyBird !
    Déjà merci beaucoup pour ces tutus qui m'ont bien bien servi :)
    J'ai passer 2h sur ce code et je commence à m'arracher les cheveux ^_^
    En fait tout fonctionne parfaitement, sauf que... je n'arrive pas à modifier le police ainsi que la couleur, j'ai vérifier moulte fois et ne pense avoir rien oublier, je ne comprend pas pourquoi ça ne prend pas en compte la modif de ce coté là ... Si tu as une idée ?

    Encore merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour Douce Meli,

      Peux-tu donner le lien vers ton blog pour que je puisse voir d'où vient le problème ?

      En attendant, essaye de remplacer la première ligne du code h3.post-title { :

      h3.post-title {
      font-family: Georgia;
      font-size: 22px;
      color: #5b5b5b;
      }

      Par h3.post-title, h3.post-title a:link, h3.post-title a:visited { :

      h3.post-title, h3.post-title a:link, h3.post-title a:visited {
      font-family: Georgia;
      font-size: 22px;
      color: #5b5b5b;
      }

      Supprimer
    2. Merci pour ta réponse ^^
      En suivant tes nouvelles instructions, il y a du changement mais pas exactement celui que je voudrais, la couleur est enfin bonne, mais du coup ça me met l'image de devant de titre deux fois au lieu d'une... et la police elle ne change toujours pas. Grrrr.

      Mon code tel que tu peux le voir sur mon blog en ce moment est celui-çi :
      ( meli-et-co.blogspot.fr )

      h3.post-title {
      font-family: 'courier, sans-serif;
      font-size: 35px;
      text-align: left;
      color: #42BAC3;
      background-image: url('http://img11.hostingpics.net/pics/577312Capturedcran20141129141335.png');
      background-repeat: no-repeat;
      background-position-x: 0%;
      background-position-y: 50%;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 48px;
      }

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


      Le code couleur est censé être un bleu et j'ai un espèce de jaune/marron à la place et la police ( je souhaiterai la même que celle dans mes titres d'onglets ) n'est pas non plus bonne. Rooooh c'est pas possible ^^

      Supprimer
    3. Essaye de remplacer ton code par celui-ci :

      h3.post-title a:link, h3.post-title a:visited {
      color: #42BAC3 !important;
      }

      h3.post-title {
      font-family: 'courier', sans-serif;
      font-size: 35px;
      text-align: left;
      color: #42BAC3 !important;
      background-image: url('http://img11.hostingpics.net/pics/577312Capturedcran20141129141335.png');
      background-repeat: no-repeat;
      background-position-x: 0%;
      background-position-y: 50%;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 48px;
      }

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

      En fait, tu avais oublié d'ajouter le 2e ' après le nom de la police ;)

      Pour la couleur, il y a souvent un petit problème pour le titres. Ce sont aussi des liens et il faut rajouter !important après le code couleur pour qu'elle soit bien prise en compte.

      J'ai seulement indiqué les couleurs pour les liens, comme ça l'image n'est pas répété :)

      Voilà, ça devrait maintenant marcher ;)

      Et petite parenthèse, j'aime beaucoup le visuel de ton blog ! C'est super sympa. J'ai un vrai faible pour l'image du cerf à côté des titres ! :)

      Supprimer
    4. HAAAAA ! t'es au top du top ! Ca marche presque comme je veux xD
      J'ai l'impression que le titre est en gras là ? J'aimerai qu'elle soit normale...
      J'abuse hein..

      Merci beaucoup en tout cas, pour le compliment mais c'est en partie grâce à tes tuto ! Alors j'ai pas beaucoup de mérite ^_^

      Supprimer
    5. Pas de soucis, il suffit de rajouter la ligne suivante :

      font-weight: 400;

      à ton code commençant par :

      h3.post-title {

      Comme ceci :

      h3.post-title {
      font-family: 'courier', sans-serif;
      font-size: 35px;
      text-align: left;
      color: #42BAC3 !important;
      background-image: url('http://img11.hostingpics.net/pics/577312Capturedcran20141129141335.png');
      background-repeat: no-repeat;
      background-position-x: 0%;
      background-position-y: 50%;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 48px;
      font-weight: 400;
      }

      Et voilà ! ;)

      Supprimer
    6. Oh mon dieu ! Alléluuuuuia !!
      Meeeeerci beaucoup ! Tu es au top !

      Supprimer
  7. Hello ! Et merci beaucoup ton aide ! j'adore ! Saurais-tu ou je pourrais en registrer mon image pour pouvoir l'utiliser sur mes titres ?
    Je voudrais pouvoir utiliser une URL, mais je n'y arrives pô... Merci :-)

    RépondreSupprimer
    Réponses
    1. Salut !
      Avec Blogger il existe un petit moyen simple :
      Créé un nouvel article en insérant les images que tu souhaites utiliser. Mais ne publie PAS l'article, enregistre-le seulement.
      Toujours sur la page de création de ce brouillon, fais un clique droit sur l'image et sélectionne "Copier l'adresse du lien". Il te suffit alors de coller cet URL dans le code CSS, après background-image, entre les ' ' :

      background-image: url('http://adresseurl.com/imagedefond.png');

      Pour les titres des articles ça donne :

      h3.post-title {
      font-family: Georgia;
      font-size: 22px;
      text-align: left;
      color: #5b5b5b;
      background-image: url('http://adresseurl.com/imagedefond.png'); /* Adresse URL de l'image */
      }

      N'oublie pas de ne PAS publier ce brouillon, et de bien le conserver ! Si tu le supprime, alors l'image disparaîtra.
      Et voilà ! ;)

      Supprimer
  8. Coucou peux-tu me dire comment faire pour ajuster le background à la zone de texte stp?
    Merci encore pour tes lumières!

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

      Quand tu dis ajuster, tu veux dire que l'image s'ajuste en largeur et hauteur à la zone de texte ?
      Tu peux essayer de rajouter :

      background-size: contain;

      ou

      background-size: cover;

      L'effet n'est pas le même, je te laisse tester et choisir ce qui te convient :)

      Après la ligne suivante :

      background-image: url('http://adresseurl.com/imagedefond.png');

      Supprimer
    2. Tout à fait! Je vais tester ça de suite!
      Et j'aurai aimé savoir si tu avais un petit code pour "reproduire" la mise en forme de ton effet sur tes dates aux titres!
      Comme un bandeau par dessus l'article :)
      Ah et peut-être un futur tuto sur une barre de recherche et newsletter personnalisée?!
      Encore un grand merci pour tes lumières!

      Supprimer
  9. alors moi ça marche mais pas à l'endroit voulu. J'ai mis la page d'accueil en miniatures comme dans ton article. Et du coup ça change les titres de cette page au lieu de les changer sur chaque article... Je sais pas si je me suis fait comprendre..Merci!

    RépondreSupprimer
    Réponses
    1. Salut Angèle,
      Tu as sûrement fait la modification dans le code de l'affichage en miniature, qui ne fait apparaître les changements que sur la page d'accueil.
      Pour faire les modifications sur les pages d'articles il faut chercher le code à l'intérieur de <b:skin>...</b:skin> (le texte doit être en bleu).
      Quand tu fais une recherche avec la barre de recherche (en haut à droite de la boîte de code), tu peux appuyer à nouveau sur Entrer pour voir les résultats suivants de la recherche, jusqu'à tomber sur le bon code :)

      Supprimer
  10. Bonjour!!
    C'est genial je m'amuse comme une folle :)
    pourrais tu me dire comment dimensionner l'image? Je penses qu'elle est beaucoup trop grande et du coup on en voit qu'une toute petite partie, est il possible de la mettre en plus petit?
    merci!! <3 <3

    RépondreSupprimer
    Réponses
    1. Bonsoir Saskia,

      Rajoutes le code suivant :

      background-size: 130px auto;

      Au code :

      h3.post-title {
      font-family: Georgia;
      font-size: 22px;
      text-align: center;
      color: #F3DCC8;
      background-image: url('http://pixabay.com/get/9b99217f067efcaf3a16/1424097296/tree-576871.png?direct');
      }

      Sachant que :
      - 130px correspond à la largeur en pixels
      - auto correspond à la hauteur. Avec "auto" la hauteur s'ajustera automatiquement à la largeur pour que l'image reste proportionnelle.

      Petite remarque, le lien de ton image ne fonctionne pas correctement. L'image n’apparaît pas :/

      Supprimer
  11. Coucou, j'aimerais beaucoup mettre les titres de mes articles au milieux mais je ne sais pas comment faire. Sais tu comment faire ?
    Sinon j'adore ton blog, il m'aide vraiment énormément donc merci !!
    Enola

    RépondreSupprimer
    Réponses
    1. Bonjour Enola,
      Pour centrer les titres de tes articles, vas dans Modèle > Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin> puis cliques dans la boîte de code. Appuies sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît, colles :

      /* Content

      Et appuies sur Entrer.

      Juste au-dessus de cette ligne, colles ceci :

      h3.post-title.entry-title {
      text-align: center;
      }

      Sauvegardes, et voilà :)

      Supprimer
    2. Coucou,
      Malgrès tes supers tutos, je ne trouve pas le code de départ: h3.post-title, .comments h4 { Je suis donc coinçée à la première étape: tellement frustrant!!!
      Pourrait-tu me venir en aide?

      Supprimer
    3. Bonjour,
      Si tu ne le trouves pas, tu peux simplement ajouter le code CSS suivant :

      h3.post-title {
      }

      Juste avant la ligne :

      ]]></b:skin>

      Utilise ce code CSS pour modifier l'apparence de tes titres ;)

      Supprimer
  12. Bonjour Catherine!

    Grace a tes précieuse tutos j'ai pu personnaliser mon blog, mille merci!! En étant novice dans design de blog je comprenais pas comment le faire et depuis que j'ai découvert ton blog c'est une bonheur ! Merci encore !

    Yasemin K.

    RépondreSupprimer
  13. Encore un super tuto !!! merci beaucoup

    RépondreSupprimer
  14. Hello Catherine ! Merci pour ce superbe tutoriel ! J'ai crée tout le design de mon blog grâce au tien haha.
    J'aurais une question, je n'arrive pas à trouver la police qu'il me faut alors je me demandais quelle était celle que tu as mis pour le titre de TES articles? Et quelle taille également? C'est exactement celle que je cherches.

    Bisous et bonne continuation.
    http://www.lisapasellini.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lisa, la police que j'ai utilisé pour le titre de mes articles est Raleway en taille 30px, avec un espace de 2px entre les caractères, et en majuscules. Voici le code CSS pour ces paramètres :

      font-family: 'Raleway', sans-serif;
      font-size: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;

      Supprimer
  15. Bonjour,
    je suis à la recherche d'une astuce pour placer une image en background du titre de l'article de la même façcon que décrite dans cet article. Mais chaque article doit avoir une image différente, un peu comme un logo.

    Si quelqu'un a une piste pour insérer un style local et non générique ? Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Daniel,
      Cela doit être possible en utilisant les libellés pour différencier les articles. Mais cela demande de modifier directement le code HTML du blog : insérer le nom du libellé de l'article dans le code HTML des titres. Ensuite il faut définir une image pour chaque libellé.
      C'est complexe à expliquer, je peux réaliser cette modification pour toi par prestation. Si cela t'intéresse, envoie-moi un message par le formulaire de contact accessible à la page Design.

      Supprimer
    2. Finalement blogspot est assez souple. Il suffit d'encradrer le titre par des balises H1 et d'y placer les styles voulus. Tout cela se passe dans la fenêtre de titre.
      Pour les liens d'images, j'ai choisi la solution d'ouvrir un site google et de m'en servir comme stockage d'images.

      En tout cas, merci pour ta proposition d'aide. Je viens tout juste de découvrir blogger et je n'ai pas encore les bons réflexes.

      Chaque article aura son logo, voici le lien
      http://modele-cie-1931.blogspot.fr

      Supprimer
    3. Je n'avais jamais essayé de mettre du code HTML directement dans le titre de l'article. C'est bon à savoir :)
      Par contre utilise la balise <span> au lieu de <h1>.
      De plus, les titres des articles sont par défaut des titres de rang 2. Seul le titre du blog doit avoir un rang 1.

      Supprimer
  16. Bonjour Catherine,

    J'ai suivi ton tuto mais seul l'alignement du texte a marché, la couleur ne veut pas changer ni la police.
    Voici le code HTML que j'ai mis

    h3.post-title {
    font-family: 'Georgia';
    font-size: 22px;
    text-align: center;
    color: #B78178;
    background-color: #ffffff;
    }


    Merci de ton aide

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Juste sous ce code tu trouveras un code qui commence par :

      h3.post-title a {

      Il définit l'apparence des test titres quand se sont des liens.
      Remplace ce code jusqu'au signe } par celui-ci :

      h3.post-title a {
      font-family: 'Georgia';
      color: #B78178;
      }

      Et voilà ;)

      Supprimer
    2. Tu es géniale !!! Merci beaucoup pour ton aide :-)

      Supprimer
  17. je n'ai pas compris comment on faisais pour mettre une police serait t'il possible de m'expliquer comment on fait ? merci d'avance

    RépondreSupprimer
  18. Bonjour,
    Merci pour ce tuto !
    Alors j'ai suivi la démarche, tout a fonctionné au début et puis désormais, je me retrouve avec un truc bizarre. Sur Safari, c'est nickel mais sur Chrome, on ne voit pas l'image de fond. Je te donne l'adresse du blog : http://educendeformation.blogspot.fr/
    Je suis perplexe :-/

    RépondreSupprimer
    Réponses
    1. Bonjour Célia,
      Il y a un petit problème avec ton image. Essaye de l'ajouter à Blogger en utilisant la méthode décrite dans ce tutoriel : http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Supprimer
    2. Merci pour ta réponse !

      Supprimer
  19. Bonsoir !
    J'ai changé la police de mes titres d'articles ainsi qu'ajouter une image mais il ne se passe absolument rien.
    Pourrais-tu m'aider ?
    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Loïc, peux-tu me donner l'adresse de ton blog pour que je puisse voir le problème ?

      Supprimer
  20. Bonjour Catherine!
    Jusqu'à maintenant je n'ai eu aucun problème avec tes tutoriels, tout à fonctionner à la perfection, cependant je n'arrive pas à changer la police de mes titres d'articles... J'ai vérifié d'avoir tout recopié correctement (sans oublier une lettre ou un symbole) et l'image devant les titres s'affiche correctement mais la police refuse complètement de s'afficher comme désiré... Je suis supra débutante en HTML et CSS, le peu que j'ai appris c'est grâce à ton blog donc je suis bloquée...
    Au début, je pensais que c'était à cause de ma police (Always Forever) car elle est un peu originale mais même lorsque j'essaye de passer en Arial par exemple, ça ne fonctionne pas. Penses tu pouvoir m'aider?

    mon blog est le suivant: http://wonderlilyes.blogspot.fr/

    Je te remercie par avance.

    RépondreSupprimer
  21. Au temps pour moi, j'ai enfin réussi à appliquer la police que je voulais à mon Blog ^^
    Merci~

    RépondreSupprimer
  22. Bonjour, j'aimerai mettre mes titres en majuscules, quel est le code pour cela ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le code pour mettre en majuscules est :

      text-transform: uppercase;

      A insérer dans le code CSS de l'élément à modifier ;)

      Supprimer
  23. J'ai aussi une autre question, j'ai modifié la couleur de mes titres, mais là je ne sais pas pourquoi il ne veut pas et me laisse l'ancienne couleur

    RépondreSupprimer
  24. Au final c'est bon j'ai reussir à modifié la couleur ^^

    RépondreSupprimer
    Réponses
    1. Salut @Miss-fashionista, comment as-tu fait pour changer la couleur finalement ?

      Supprimer
  25. Hello, alors déjà merci pour cet article ^^
    Mais là, j'ai un petit soucis, j'ai déjà suivi ce tutoriel et la dernière fois, je n'avais pas très bien réussi à faire mes modifications, et là quand je veux retenter une nouvelle fois je ne trouve pas le code que je dois modifier, j'ai beau utiliser la recherche, elle ne trouve pas...

    RépondreSupprimer
    Réponses
    1. Bonjour Mae,
      En regardant ton blog il semble manquer un gros bout de code CSS qui correspond à l'apparence de tes articles. Tu as du le supprimer sans faire exprès. Si tu as bien fait une sauvegarde de ton thème avant de faire les modifications, alors applique ta sauvegarde sur ton blog. Ensuite tu pourras réessayer ;)
      Comment restaurer une sauvegarde de son thème : http://ladybirdr.blogspot.fr/2015/07/faire-une-sauvegarde-de-son-blog.html

      Supprimer
    2. Merci pour ta réponse :)

      Supprimer
    3. Je n'avais cependant pas fait de sauvegarde à ce moment là, y a t-il quand même une solution ou je dois tout réinitialiser ... ?

      Supprimer
    4. Tu peux créer un nouveau blog et copier son code CSS qui se trouve entre :

      /* Posts
      ----------------------------------------------- */

      Et :

      /* Comments
      ----------------------------------------------- */

      C'est cette partie qui a disparu. Colle ce code après :

      /* Posts
      ----------------------------------------------- */

      Dans ton blog pour restaurer ce qui à disparu. Par contre si tu avais fait des modifications il faudra le refaire ;)

      Supprimer
    5. Merci beacoup pour ton aide :)

      Supprimer
  26. Bonjour,

    Tout d'abord je trouve ton blog super c'est adorable de partager tes astuces. J'ai une question pour toi!
    Je n'ai pas de blog actuellement je souhaite en faire un mais voilà je ne sais pas comment créer des petites images à insérer avant les titres. Je sais que l'on peut en trouver sur internet mais j'aimerais les miennes est-ce qu'avec un logiciel cela est possible? exemple: créer une jolie flèche, un coeur, un rouge à lèvres.
    Je te remercie par avance
    Stéphanie

    RépondreSupprimer
    Réponses
    1. Oui, tu peux utiliser soit un programme comme Photoshop (ou Illustrator c'est encore mieux).
      Il existe aussi des programmes gratuits comme Gimp, et même des programmes en ligne comme Pixlr Editor qui est pas mal.
      Je pense que ça peut être sympa de faire quelques tutoriels sur le sujet ;)

      Supprimer
  27. Bonjour !
    Article au top, comme toujours ! Cela fonctionne super bien. Par contre, je centre les titres de mes articles sur la page, et l'image se retrouve complètement à gauche. Comment dois-je faire pour qu'elle se situe toujours juste à côté des titres, quelle que soit la longueur de ces derniers ?
    Merci mille fois !!!

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Pour que l'image s'adapte au titre de l'article, alors il faut utiliser une autre méthode que celle de ce tutoriel. Utilise le code suivant à la place :

      h3.post-title:before {
      display: inline-block;
      content: '';
      position: relative;
      top: 20px; /* Espace au-dessus de l'image */
      width: 50px; /* Taile de l'image */
      height: 50px; /* Taille de l'image */
      background: url('http://3.bp.blogspot.com/-trQLlSYv8vk/VkWw0Mfs6EI/AAAAAAAAClg/DQuXs4tqzSg/…d%25E2%2580%2599e%25CC%2581cran%2B2015-11-02%2Ba%25CC%2580%2B12.13.59.png');
      background-repeat: no-repeat;
      background-size: contain;
      }

      Ce code permet de créer une "boîte" auquel on applique ton image en fond.
      Pour modifier la taille de l'image modifie la valeur de width et height. comme l'image est une image de fond elle ne dépassera pas la taille de la boîte et il faut jouer sur la largeur et la hauteur de la boîte ;)

      Supprimer
    2. Petite remarque si tu souhaites déplacer l'image sur la gauche alors ajoute la ligne suivante avant le signe } de ce code :

      margin-right: 10px; /* Espace à droite de l'image */

      Modifie la valeur de 10px à ce qui te convient ;)

      Supprimer
    3. Super ! Ca marche nickel ! Merci beaucoup !!! :-D

      Supprimer
  28. Bonjour Catherine,
    Je t'embete encore une fois.
    Le titre des mes articles à deux polices.
    La première police est en rock salt sur le bloc lire la suite.
    Une fois que je clique sur lire la suite, la police n'est pas la même dans le titre (d'ailleurs, je ne sais pas quelle est cette police)
    Ce que je voudrais c'est avoir la même police sur le bloc et une fois que l'article est ouvert soit Rock Salt
    Pourrais tu m'aider stp ??

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant ton blog la police est bien la même pour moi : Rock Salt

      Supprimer
  29. Coucou à toi!
    Mon blog n'est pas encore visible mais voilà j'ai ajouter une image avec la méthode que tu expliques (en mettant l'image entre la date et le titre) le problème c'est que sur mozilla mon image est totalement ) gauche de la page existe-t-il des solutions où est-ce que je dois supprimer l'image?
    De plus j'ai ajouté un gadget newsletter de blogger dans mon pied de page il est visible avec google chrome mais pas avec mozilla firefox!
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faudrait que je regarde directement ton blog. Si tu ne souhaites pas mettre ton blog en public tu peux m'ajouter en auteur. Pour cela ajoute cette adresse e-mail (sylphid1820@gmail.com) dans Paramètres > Basique > Autorisations > Ajouter auteurs.

      Supprimer
    2. Coucou! c'est fait je t'ai ajouté gros merci à toi ne fais pas attention aux articles c'est des essai!

      Supprimer
    3. Je t'ai envoyé un mail ;)

      Supprimer
  30. Merci pour tes nombreux tutos !

    J'ai forcément eu un bug dans toutes ces manip' :D

    J'ai mis des typo Google font + une petite image.
    Et quand je regarde si la modification HTLM fonctionne, elle est visible 1 fois sur 2 (sans que je change rien !), quand je regarde sur mon blog, aucun changement (le menu et les titres du blog ne sont pas censés avoir la même typo !) et encore plus bizarre: quand je vais dans "modèle > personnalisé" pour voir la tête de mon titre, tous fonctionne avec les typos que j'ai installé.

    Dans le genre bizarre...

    voilà le code en question pour les titres:

    h3.post-title {
    font-family: 'Amatic SC', cursive;
    font-size: 22px;
    text-align: left;
    color: #5b5b5b;
    background-color: #ffffff;
    background-image: url('http://img15.hostingpics.net/pics/149954Capturedcran20151201154541copie.png');
    background-repeat: no-repeat; /* Pas de répétition de l'image */
    background-position-x: 0%; /* Position horizontale de l'image */
    background-position-y: 130%; /* Position verticale de l'image */
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 60px; /* Espace à gauche des titres */
    }

    Et pour le menu:

    /* Tabs
    ----------------------------------------------- */
    /* Espacement et Bordure du Premier Lien de la Barre de Navigation */
    .tabs-inner .section:first-child ul {
    margin: none;
    }

    /* Fond et Bordure de la Barre de Navigation */
    .tabs-inner .widget ul {
    background: #A9CEC9;
    text-align: center;
    border-width: 30px;
    }

    /* Police et Couleur des Liens */
    .tabs-inner .widget li a {
    font-family: 'Dancing Script', cursive;
    margin-right: 60px;
    font-size: 25px;
    color: #FEFEFE;
    }

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

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

    }

    Merci :)


    RépondreSupprimer
    Réponses
    1. Bonjour Lou,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème directement sur ton blog ?

      Supprimer
  31. Bonjour,
    Avant tout, merci pour cet article.
    Je souhaitais changer la couleur du titre de mes articles en #d9c09e, mais malheureusement le titre reste noir :(
    Pouvez-vous m'aider s'il vous plaît?

    Merci d'avance.

    Lenny

    PS: Mon blog est aliceetlenny.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lenny,
      Il y a une erreur dans ton code couleur, il manque le d au début du code.
      Voici le code CSS où il y a l'erreur :

      h3.post-title a, h3.post-title a:visited {
      color: #9c09e;
      background-color: #ffffff;
      }

      Supprimer
    2. Bonjour, c'est encore moi...

      Je n'ai toujours pas trouvé ce que j'aurais dû mettre à la place...
      Peux-tu m'aider s'il-te-plaît.

      Merci encore
      Et bonnes fêtes !

      Supprimer
    3. Ca y est j'ai trouvé !
      Je te remercies pour ton aide ;)

      Supprimer
  32. Bonjour Catherine,

    C'est mon premier blog et je suis en plein apprentissage.
    Je souhaiterais personnaliser le titre de mon premier post qui est encore en mode brouillon mais j'ai une question toute bête. Je suis certaine d'avoir bien éxécuté tous tes codes et pourtant je ne vois pas le titre modifié quand je regarde l'aperçu de mon premier article.
    Faut-il avoir déjà publié pour voir le résultat ?
    Merci d'avance pour tous ces autos ! J'adore le design de ton blog et ta façon simple d'expliquer !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Normalement tu devrais voir les titres correctement en aperçu. As-tu réussi à régler le problème ?

      Supprimer
  33. Hello ! Merci pour tous tes articles, moi qui n'y connaissais rien du tout, grâce à ton blog j'ai pu petit à petit construire le mien!
    J'avais une question en tête mais je ne savais pas trop où t'en parler : J'aimerais pouvoir délimiter la page de mes articles avec une fine bordure noire de chaque côté, des lignes qui continuent tout le long de la page, sans rupture entre les articles. Désolée de t'embêter avec cette question, mais je ne savais pas où la poser :)
    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour Mae,
      C'est possible. Le code va varier selon ton thème. Mais tu peux essayer avec ceci :

      #main {
      border-left: 1px solid #000000;
      border-right: 1px solid #000000;
      }

      Remplace :
      - 1px par l'épaisseur de la bordure en pixels
      - solid par le style de la bordure (solid, dashed, etc.)
      - #000000 par le code de la couleur de la bordure

      Supprimer
    2. Merci beaucoup, et si j'aimerais que ces lignes prennent l'ensemble du blog, du haute (bannière comprise) au bas du blog?

      Supprimer
    3. Bonjour Mae,
      Tu peux essayer avec le code CSS suivant à la place :

      #content-outer {
      border-left: 1px solid #000000;
      border-right: 1px solid #000000;
      }

      Supprimer
  34. Coucou Catherine :) Je ne sais pas trop où poser la question donc je la pose ici comme c'est un article sur la mise en forme du texte ^^. Je cherche désespérément à mettre les liens dans l'article (et seulement ces liens-ci et pas tous ceux du blog (titres etc) en couleur. Pour l'instant, aucun de mes essais n'a été concluant et ça changeait par la même occasion le lien du titre etc.
    Je te remercie d'avance si tu peux m'aider, pour ton temps et ta réponse :-)

    RépondreSupprimer
    Réponses
    1. Bonjour Claire,
      Effectivement je n'ai pas fait d'article sur ça mais je devrais ^^
      Pour changer la couleur des liens des articles seulement utilise le code CSS suivant :

      /* Couleurs des liens des articles */
      .post-body a {
      color: #b6ddda;
      }

      Remplace le code couleur par celle de ton choix ;)
      Si la couleur n'est pas prise en compte, rajoute !important avant le signe ; comme ceci :

      /* Couleurs des liens des articles */
      .post-body a {
      color: #b6ddda !important;
      }

      Supprimer
    2. Oh merci beaucoup Catherine! :) Oui, tu devrais écrire un article sur ça haha! ;)

      Supprimer
  35. Hello, désolée de t'embêter encore une fois avec mes questions mais encore une fois j'ai besoin de ton aide ^^'

    Alors par contre, ma question est un peu hors-sujet, mais j'espère que tu pourras quand même m'éclairer : j'ai installer un slider sur mon blog avec un aperçu d'article, jusque là tout va bien sauf que j'aimerais qu'il n'apparaisse que sur la page d'acceuil, alors que là il apparaît partout : articles, catégories...

    Merci :D

    RépondreSupprimer
    Réponses
    1. Bonjour Mae,
      Peux-tu me donner le lien de ton blog pour que je puisse voir ?

      Supprimer
  36. Oui oui bien sûr,

    http://maehae.blogspot.fr/

    J'espère ne pas t'embêter

    RépondreSupprimer
    Réponses
    1. Bonjour Mae,
      Je n'ai pas accès à ton blog, seuls les lecteurs peuvent le voir. Il faut soit le mettre en public, soit m'envoyer une invitation au blog.

      Supprimer
  37. Bonjour catherine,

    je me permets de t'écrire car je cherche à changer non pas mes titres mais les titres de mes labels situés au dessus de mes titres. C'est envoyant ce template que l'envie m'a prise : http://demo.yotemplates.com/?theme=Beauteous2016
    actuellement les miens sont rikiki http://mesptitsbonbons.blogspot.fr/
    mais je n'arrive pas trouver dans le code html à quoi cela correspond :-/, est ce que tu saurais me l'indiquer?
    Un grand merci par avance!

    RépondreSupprimer
    Réponses
    1. Bonjour Clementine,
      Pour changer l'apparence des libellés tu peux utiliser les codes CSS de ce tutoriel :
      http://ladybirdr.blogspot.fr/2015/10/modifier-lapparence-des-libelles-dans.html#modlabel

      Supprimer
  38. Bonjour Catherine,

    Je t'écris ce commentaire aujourd'hui pour avoir un petit conseil concernant le blog que je met en place, les images dans la page d'accueil sont trop grandes à mon goût, et cela se voit, elles ne sont pas nettes. J'aimerais modifier ceci mais je ne vois pas vraiment comment faire ..

    J'ai tenté de modifier en compressant une image jpeg mais ça ne change rien.

    J'aimerais avoir ton avis là dessus stp :)

    http://ceppaf-64.blogspot.fr/

    Merci beaucoup !

    A très vite

    RépondreSupprimer
    Réponses
    1. Bonjour,
      La meilleure solution est de faire l'inverse. Augmenter la résolution des images. Il te faut utiliser des images qui font au moins 675 pixels de large pour éviter cette pixellisation.

      Supprimer
  39. merci beaucoup j'ai pu mettre une image sur le titre article sur mon blog 2 - pour mes commentaires/réponses il faut que je revoie, mais bon cela fait bien aussi ...mdr -- un grand merci Mamy Annick

    RépondreSupprimer
  40. coucou, j'ai un petit problème (très embêtant!).
    Je ne trouve pas le code: h3.post-title, .comments h4 { quand je le cherche, rien ne se passe.
    Peut-tu m'éclairer?
    PS: Merci beaucoup pour tes supers tutoriels, sans eux, mon blog serais beaucoup moins beau!!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux chercher le code CSS commençant par :

      h3.post-title {

      A noter que tu as ce code plusieurs fois. Il faut supprimer les codes en trop et n'en garder qu'un, sinon ils entreront en conflit :/

      Supprimer
  41. Coucou, d'abord merci pour tout tes tutoriels, tu m'as beaucoup aidé jusqu'à maintenant! :)
    J'ai juste un problème, je n'arrive plus à modifier les titres de mes articles, j'ai essayer plusieurs fois de plusieurs manières différentes mais rien ne fonctionne.. est-ce que tu aurais une solution ? Ou est-ce que tu voudrais bien essayer de le faire toi si je te donne mon adresse? :)
    Merci tu me sauverais !

    RépondreSupprimer
    Réponses
    1. Bonjour Eléonore,
      J'ai remarqué que tu avais plusieurs codes CSS pour définir la couleur des liens des titres. Ils entrent en conflit. Il faut avoir une seule copie de chaque code CSS ;)

      Remplace tes codes :

      h3.post-title a:link {color:lavender;}
      h3.post-title a:visited {color:lavender;}
      h3.post-title a:hover {color:lavender;}
      h3.post-title a:active {color:#00000;}h3.post-title a:link {color:lavender;}
      h3.post-title a:visited {color:lavender;}
      h3.post-title a:hover {color:;}
      h3.post-title a:active {color:#000000;}.jump-link {
      text-align: center; /* Alignement de l'image : center = centré ; left = gauche ; right = droite */
      margin-top: 15px; /* Espace au-dessus de l'image */
      margin-bottom: 0; /* Espace en-dessous de l'image */
      }h3.post-title a:link {color:#d5a6bd ;}
      h3.post-title a:visited {color:#d5a6bd ;}
      h3.post-title a:hover {color:#d5a6bd ;}
      h3.post-title a:active {color:#d5a6bd ;}

      Par :

      h3.post-title a:link {
      color:#d5a6bd; /* Couleur des liens des titres d'articles */
      }

      h3.post-title a:visited {
      color:#d5a6bd; /* Couleur des liens des titres d'articles quand visités */
      }

      h3.post-title a:hover {
      color:#d5a6bd; /* Couleur des liens des titres d'articles au survol de la souris */
      }

      .jump-link {
      text-align: center; /* Alignement de l'image : center = centré ; left = gauche ; right = droite */
      margin-top: 15px; /* Espace au-dessus de l'image */
      margin-bottom: 0; /* Espace en-dessous de l'image */
      }

      Remplace maintenant les codes des couleurs des liens par ceux que tu souhaites utiliser ;)

      Supprimer
  42. Coucou ! Alors pour ma part je n'ai pas de titre.. je n'arrive pas à le trouver dans les codes, comme s'il avait été supprimé ! Est-ce que tu saurais comment je pourrais les remettre ? Ne pas avoir de titres, c'est un peu embêtant... :'(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient de ton thème. Malheureusement les thèmes gratuits (et même les versions payantes) des site de type ThemeXpose, BloggerTemplates, VeeThemes, SoraTemplates, etc., sont pleins d'erreurs ! Désolée :/

      Supprimer
  43. Bonjour,
    Merci beaucoup pour tous ces tutos exceptionnels ! Bien compris comment faire pour ajouter une image à un titre, mais dans ce cas, si j'ai vraiment bien compris, cela s'appliquera à tous les titres du blog, avec toujours la même image
    J'ai 3 logos qui correspondent à mes catégories d'article, et pour le moment j'ajoute l'image (selon le thème de l'article) en début d'article. Mais du coup il apparrait sous le titre dans le fil des actualités, comme dans l'affichage de chaque l'article. Pas très joli. Aurais tu un moyen de faire apparaitre cette image/logo au dessus du titre ? Et bien évidemment, en fonction de la catégorie, pas le meme pour tout le blog.
    Merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est tout à fait possible, mais un peu délicat à mettre en place. Je t'aurais bien proposé de le réaliser pour toit mais malheureusement je ne prend plus de projets jusqu'en Mars car mon planning est déjà bien rempli :/

      Supprimer
  44. Recoucou je viens encore t'embêter ^^"
    Je n'ai eu aucun problème pour changer la forme du titre d'un article mais le soucis c'est que des que je fais une modification sur le blog, n'importe laquelle, la couleur du titre devient grise au lieu de rester noire ! Y aurait il un code afin de "verrouiller" la couleur ou alors j'ai fait une erreur quelque part ? Merci :D

    http://minie-moi.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Ce changement de couleur vient de tes paramètres pour tes liens. Il y a 3 couleurs pour les liens :
      - liens non visités (pour toi noir)
      - liens survolés par la souris (pour toi marron)
      - liens visités (pour toi gris)

      Pour définir la couleur des liens de tes titres, ajoute les codes CSS suivants :

      /* Liens des titres */
      h3.post-title a {
      }

      /* Liens des titres au survol de la souris */
      h3.post-title a:hover {
      }

      /* Liens des titres visités */
      h3.post-title a:visited {
      }

      Ajoute à ces codes les codes couleurs que tu souhaites utiliser. Colle ces codes CSS avant la ligne suivante dans ton thème :

      .post-body {

      Et voilà ;)

      Supprimer
  45. Merci beaucoup de ta réponse, j'ai appliqué à la lettre tes indications mais ça ne marche toujours pas :'( maintenant les liens non visités sont gris au lieu de noir et ne changent pas de couleur quand je passe la souris dessus. Par contre ils redeviennent noirs quand on clique dessus :o J'ai fait une erreur de manipulation peut être ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Actuellement tu as défini la couleur noir pour les titre non visités, orange pour les titres au survol de la souris, et gris pour les titres visités. Si tu souhaites que les titres restent, noirs mêmes visités, alors retrouve ce code :

      /* Liens des titres visités */
      h3.post-title a:visited {
      color: #AFAFAF ;
      }

      Remplace #AFAFAF par #000000 comme ceci :

      /* Liens des titres visités */
      h3.post-title a:visited {
      color: #000000;
      }

      Supprimer
  46. Bonjour ! J'ai voulu centrer les titres de mes articles et c'est ce que j'ai fait. Mais pour je ne sais quelle raison, les dates qui étaient encadrés ont disparues. J'ai contrôler dans mise en page > configurer les articles et tout est comme avant qu'elles ne disparaissent...

    RépondreSupprimer
    Réponses
    1. Bonjour Alissia,
      Tes dates sont cachées par le fond blanc de tes titres. Retrouve ton code :

      h3.post-title {
      font-family: Coming Soon;
      font-size: 33px;
      text-align: center;
      color: #000000;
      background-color: #ffffff;
      }

      Supprime la ligne :

      background-color: #ffffff;

      Et voilà ;)

      Supprimer
  47. Merci Catherine pour tes tutos qui sont toujours super bien expliqués !

    RépondreSupprimer
  48. Bonjour,

    Vos tutos sont vraiment géniaux!! Merci beaucoup!
    Par contre, j'ai bien suivi votre tuto pour mettre une image à côté des titres des articles et (sans savoir pourquoi), je ne parviens pas à changer la couleur de la police.

    Et concernant les images, elles se mettent en taille réelle ce qui n'a pas l'effet escompté. Comment faire pour réduire une image tout en gardant sont URL?

    D'avance, merci pour votre réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner l'adresse de ton blog pour que je puisse voir le problème ?

      Supprimer
  49. Bonjour Catherine,

    Merci pour tous tes tutos très précieux et bien expliqués !
    Malheureusement pour celui-ci je sèche... j'ai ajouté la police sur blogger comme tu indiques mais au moment de chercher h3.post-title, .comments h4 { ou même h3.post-title ... et bien rien ne se passe !
    Est-il possible que cette partie s'appelle autrement ? ou qu'elle n'existe pas ?
    Est-ce que je peux l'ajouter quelque part dans le code ?

    Merci pour ta réponse !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux ajouter le code avant la ligne suivante de ton thème si tu ne le trouves pas :

      ]]></b:skin>

      Supprimer
  50. Bonjour, c'est que fois que j'ai enté le code j'ai ceci

    <![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name: Ethereal
    Designer: Jason Morrow
    URL: jasonmorrow.etsy.com
    ----------------------------------------------- */

    comment faire?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le code que tu as donné est l'en-tête de ton code CSS c'est tout à fait normal.

      Ajoute :

      h3.post-title {
      font-family: Arial;
      }

      En changeant Arial pour le nom de la police que tu souhaites utiliser avant la ligne :

      ]]></b:skin>

      Comme ceci :

      h3.post-title {
      font-family: Arial;
      }

      ]]></b:skin>

      Et voilà ;)

      Supprimer
  51. Hello, merci pour ce tuto.
    Alors j'ai une question: je ne trouve pas dans mon code le h3.post title que ce soit seul ou avec comment mais j'ai trouvé un h1.post-title. Est ce que je peux faire les modifications de police dans le h1 ou cela va t-il poser problème?
    De plus, j'ai essayé de copier le lien d'une police Google Fonts comme indiqué dans le tutoriel à ce sujet sauf que cela a totalement modifié l'apparence de mon menu. Et même en supprimant la ligne, je n'arrive pas à retrouver l'apparence de mon menu. D'ailleurs, à ce sujet, je ne comprends pas pourquoi dès que je touche au code, l'apparence de mon menu est modifiée, surtout que là je ne touchais qu'à la police des titres et je n'avais pas fait de sauvegarde donc je ne sais pas comment rétablir l'apparence du menu.
    http://simplymaissa.blogspot.fr/
    Merci d'avance
    Maïssa

    RépondreSupprimer
    Réponses
    1. Bonjour Maïssa,
      Je pense sincèrement que le problème vient de ton thème. Les thèmes issus de ces sites (Sora Templates, etc.) sont pleins d'erreurs. Mêmes les versions payantes. Je dé-conseil fortement les thèmes de ces sites mêmes s'ils sont gratuits voir très peu chers.
      Malheureusement d'ici je ne peux pas savoir pourquoi le code qui génère tes menus déroulants bug quand tu modifies ton thème.
      Si tu ne trouves pas le code h3.post title, tu peux le rajouter manuellement avant la ligne :

      ]]></b:skin>

      Ne touche pas au h1, il correspond au titre de ton blog ;)

      Supprimer
  52. Bonsoir Catherine !

    Je commence petit à petit à voir le bout de mon blog (même si je doute que tout sera au point mais pour le reste je verrai petit à petit),

    - J'aimerai modifier mon titre + ce qui est écrit dessous : police, taille, centrer. Sauf que je ne trouve pas le code CSS que je dois modifier.

    - J'aimerai aussi que la police de mes articles soit une de celles que j'ai choisies, mais pareil, je ne sais pas quel code CSS correspond pour modifier tout ça.

    Merci d'avance,

    Maïlys.

    RépondreSupprimer
    Réponses
    1. Bonjour Maïlys,
      Si par le titre tu parles du titre du blog alors je vois que tu as déjà réussi à modifier le titre. Néanmoins il y a une petite erreur dans ton code CSS, il manque le signe ; à la fin de la ligne :

      background-color: #FFFFFF

      De ce code :

      /* Titre du blog */
      .Header h1 {
      font-family: 'Alex Brush', cursive;
      color: #222224;
      text-align: center;
      background-color: #FFFFFF
      letter-spacing: 2px;
      font-size: 100px;
      }

      Pour le texte sous le titre du blog, c'est la description. Utilises ce code CSS pour le modifier :

      /* Description du blog */
      .Header .descriptionwrapper {
      }

      Pour la police des titres des articles, je vois que tu as aussi réussi à les modifier ;)
      Il faut utiliser ce code CSS :

      h3.post-title {
      }

      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