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 globale du pied d'article sur Blogger

1 mois sans tutoriels ! Je n'ai pas eu beaucoup de temps à y consacrer à cause du travail. Mais cela veut aussi dire que ma petite entreprise marche bien :D

J'ai quand même réussi à prendre du temps pour vous concocter plusieurs tutoriels pour modifier l'apparence du pied d'article ;)
Tout d'abord on s'intéresse à l'apparence globale (fond, polices, couleurs, bordures), puis on verra comment modifier spécifiquement l'apparence de son contenu.

C'est parti pour les explications pour modifier l'apparence globale du pied d'article !

Sommaire

  1. Sauvegarde du thème
  2. Où placer les codes CSS
  3. Modifier le fond du pied d'article
  4. Modifier la bordure du pied d'article
    1. Supprimer la bordure
    2. Ajouter une(des) bordure(s)
    3. Ajouter une marge entre la bordure et le contenu
  5. Modifier l'espace autour du pied d'article
  6. Modifier le texte du pied d'article de manière générale
  7. Modifier la couleur des liens de manière générale
  8. Modifier la couleur des liens du pied d'article au survol de la souris
  9. Rectifier l'alignement centré des boutons de partage de Blogger.

Sauvegarde du thème

Je ne le répéterai jamais assez, cette étape est très importante au cas où vous feriez une erreur ! Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Modifier l'apparence globale du pied d'article sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Où placer les codes CSS

Pour modifier l'apparence globale du pied d'article nous allons ajouter des codes CSS à notre thème.
Cliquez sur Modifier le code HTML :

Modifier l'apparence globale du pied d'article sur Blogger

Cliquez sur la flèche noir à gauche de <b:skin>...</b:skin> puis 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, collez :
.post-footer {
Appuyez sur Entrer.
Vous devrez tomber sur un code qui ressemble à ceci :
.post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;

  color: $(post.footer.text.color);
  background-color: $(post.footer.background.color);
  border-bottom: 1px solid $(post.footer.border.color);

  line-height: 1.6;
  font-size: 90%;
}
Si le contenu entre les signes { et } est différent ce n'est pas grave. S'il vous manque des lignes il vous suffit de les rajouter avant le signe }.
C'est ce code CSS que nous allons modifier.

Modifier le fond du pied d'article

Pour modifier la couleur de fond, remplacez $(post.footer.background.color) de la ligne suivante par le code couleur de votre choix :
background-color: $(post.footer.background.color);
Pour trouver le code d'une couleur vous pouvez utiliser le site code-couleur.

Par exemple, si je souhaites remplacer la couleur de fond par du blanc, j'écris :
background-color: #ffffff;

Modifier la bordure du pied d'article

Supprimer la bordure

Pour supprimer la bordure, remplacez la ligne suivante :
border-bottom: 1px solid $(post.footer.border.color);
Par :
border: none;

Ajouter une(des) bordure(s)

Pour ajouter une bordure au pied d'article, ajoutez les lignes suivantes qui vous intéressent :
border-top: 1px solid #CDDBC2;   /* Bordure en haut */
border-left: 1px solid #CDDBC2;   /* Bordure à gauche */
border-right: 1px solid #CDDBC2;   /* Bordure à droite*/
Après le signe }.
Remplacez les valeurs comme vous le souhaitez sachant que :
  • 1px - correspond à l'épaisseur de la bordure en pixels
  • solid - correspond au style de la bordure. Elle peut être solid, dashed, dotted, double (remarque: double ne marche qu'avec une épaisseur suppérieur à 2px)
  • #CDDBC2 - correspond au code couleur
N'oubliez pas de remplacer $(post.footer.border.color) de la ligne :
border-bo(post.footer.border.color);
Pour que la bordure en bas du pied d'article s'accorde au reste de la bordure ;)

Ajouter une marge entre la bordure et le contenu

Pour ajouter de l'espace entre la bordure et le contenu du pied d'article, modifiez les valeurs de la ligne :
padding: 5px 10px;
Sachant que :
  • 5px - correspond à l'espace en pixels au-dessus et en-dessous du contenu
  • 10px - correspond à l'espace à gauche et à droite du contenu
Par exemple si je souhaites ajouter un espace de 15 pixels au-dessus et en-dessous, et un espace de 20 pixels à gauche et à droite du contenu, j'écris :
padding: 15px 20px;
Visuellement on obtient :.

Modifier l'apparence globale du pied d'article sur Blogger

Modifier l'espace autour du pied d'article

Pour modifier l'espace autour du pied d'article, remplacez la ligne :
margin: 20px -2px 0;
Par :
margin: 20px -2px 0 -2px;
Remplacez maintenant les valeurs par celles que vous voulez dans l'ordre suivant :
margin: au-dessus à droite en-dessous à gauche;
Une valeur positive ajoutera de l'espace autour du pied d'article, et une valeur négative diminuera l'espace.

Par exemple, je souhaites ajouter de l'espace au-dessus du pied d'article, et rectifier l'alignement à gauche et à droite pour qu'il soit aligné au texte de l'article. J'écris :
margin: 40px 0 0 0;
Ce qui donne :

Modifier l'apparence globale du pied d'article sur Blogger

Modifier le texte du pied d'article de manière générale

Pour modifier la police en générale, ajoutez la ligne suivante avant le signe } :
font-family: 'PT sans', sans-serif;   /* Police du texte */
Remplacez la valeur de font-family par le nom de la police que vous souhaitez utiliser.
Si vous voulez utiliser une police Google font, n'oubliez pas de l'installer avant ! ;)

Pour modifier la taille de la police, remplacez 90% de la ligne :
font-size: 90%;
Par la valeur en pixels que vous souhaitez donner à votre texte, 12px par exemple.

Vous pouvez également ajouter de l'espace entre les caractères, transformer le texte en majuscules, modifier l'alignement du texte, avec les codes suivants :
letter-spacing: 1px;   /* Espacement des caractères en pixels */
text-transform: uppercase;   /* Texte en majuscules : normal = normal | uppercase = majuscules */
text-align: center;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
Pour modifier la couleur du texte, remplacez $(post.footer.text.color) du code :
color: $(post.footer.text.color);
Par le code de la couleur que vous souhaitez, #424243 par exemple.

Visuellement on obtient :

Modifier l'apparence globale du pied d'article sur Blogger

Modifier la couleur des liens de manière générale

Pour modifier la couleur des liens en général du pied de page, nous allons ajouter un nouveau code CSS à la suite de .post-footer.

Collez le code suivant :
.post-footer a {
    color: #FB9274;   /* Couleur des liens */
}
Après le signe } du code .post-footer, comme ceci :
.post-footer {
  margin: 40px 0 0 0;
  padding: 15px 20px;

  color: $(post.footer.text.color);
  background-color: #ffffff;

  line-height: 1.6;
  font-size: 90%;

  border-top: 1px solid #CDDBC2;   /* Bordure en haut */
  border-left: 1px solid #CDDBC2;   /* Bordure à gauche */
  border-right: 1px solid #CDDBC2;   /* Bordure à droite*/
  border-bottom: 1px solid #CDDBC2;   /* Bordure en bas */
  font-family: 'PT sans', sans-serif;   /* Police du texte */
  letter-spacing: 1px;   /* Espacement des caractères en pixels */
  text-transform: uppercase;   /* Texte en majuscules : normal = normal | uppercase = majuscules */
  text-align: center;   /* Alignement du texte : left = à gauche | center = centré | right = à droite */
}

.post-footer a {
  color: #FB9274;   /* Couleur des liens */
}
Remplacez le code couleur #FB9274 par celui que vous voulez.

Modifier la couleur des liens du pied d'article au survol de la souris

Pour modifier la couleur des liens au survol de la souris, ajoutez le code suivant à la suite des précédents :
.post-footer a:hover {
  color: #F5565B;   /* Couleur des liens au survol de la souris */
}
Remplacez le code couleur par ce que vous voulez.

Si vous voulez supprimer la soulignement des liens au survol de la souris, ajoutez la ligne suivante :
text-decoration: none;   /* Supprime le soulignement du texte au survol de la souris */
Avant le signe } comme ceci :
.post-footer a:hover {
  color: #F5565B;   /* Couleur des liens au survol de la souris */
  text-decoration: none;   /* Supprime le soulignement du texte au survol de la souris */
}
Visuellement on obtient :

Modifier l'apparence globale du pied d'article sur Blogger

Rectifier l'alignement centré des boutons de partage de Blogger.

Pour rectifier l'alignement centré des boutons de partage, ajoutez le code suivant à la suite des précédents :
/* Rectifie l'alignement centré des boutons de partage */
.post-share-buttons.goog-inline-block {
    margin-left: 70px;
}
On obtient :

Modifier l'apparence globale du pied d'article sur Blogger

Et voilà pour aujourd'hui ! Dans les prochains tutoriels on verra comment modifier l'apparence des libellés, et du lien vers les commentaires ;)

Bon blogging !

Autres articles

124 commentaires:

  1. Ouh tellement contente de retrouver un de tes tutos et surtout que ta petite entreprise marche bien! C'est vraiment génial! Et tu le mérites amplement!
    Je vais appliquer ce tuto dès aujourd'hui, merci beaucoup Catherine! C'est super! :)

    RépondreSupprimer
    Réponses
    1. De rien!! Merci à toi haha! ^^

      Supprimer
    2. Bon, finalement, je n'ai fait que centrer et mettre en majuscules les commentaires mais ça rend encore mieux qu'avant! ^^ merci Catherine :) Tu n'aurais pas un petit tuto sur les icônes de réseaux sociaux pour partager l'article en préparation par hasard? ^^
      Ah et j'ai une question qui n'a rien à voir, mais si tu peux m'aider, sais-tu comment modifier la couleur de tous les liens mais seulement dans les articles et pas les titres et tous les autres liens du blog? Ce serait vraiment top! :)

      Supprimer
  2. J'améliore mon blog de jour en jour grâce à ton blog merci ! :)

    RépondreSupprimer
  3. J'ai fait mais rien n'est mit correctement :/

    RépondreSupprimer
    Réponses
    1. Il y a des petites erreurs dans ton code. Il manque un ' à la fin de la police et il faut supprimer le signe +. Remplace cette ligne :

      font-family: 'Princess+Sofia; /* Police du texte */

      Par :

      font-family: 'Princess Sofia'; /* Police du texte */

      Ensuite, il te manque la ligne pour la bordure sous le pied d'article, est-ce normal ?
      Si non, rajoute ceci avant le signe } du même code CSS :

      border-bottom: 1px solid #cfbfd9;

      Ensuite, les caractères sont en majuscules, si tu souhaites supprimer cela, remplace la ligne :

      text-transform: uppercase;

      Par :

      text-transform: initial;

      Pour finir, tu ne peux pas centrer les réactions, c'est normal qu'il restent sur la gauche.

      Supprimer
    2. Oh merciiiiiiiii , je n'arriver pas à mettre la ligne en bas et grâce à toi sa me la mise :)

      Pour les réactions pas grave je les est désactiver :D

      Je voulais te demander est t'il possible que mes libellé soit au dessus des boutons de partage ? J'ai essayer dans la configuration d'article quand je valide sa ne chance pas :/
      Pour les boutons de partage est ce possible de les faire apparaître d'une autre manière plus jolie ? Pourrais tu en faire un tuto ?
      Et pour l'encadrement pour écrire un commentaire est possible de le rendre également plus joli quand gris pas beau ?

      Je t'en demande beaucoup :) Encore merci à toi t'ai adorable ♥

      Supprimer
    3. Si ça ne fonctionne pas dans la configuration des articles il faut les déplacer manuellement dans le code HTML du blog. C'est délicat comme manipulation. SI tu le souhaites je peux le faire pour toi ? Envoie-moi un mail ;)
      J'ai un tutoriel de prévu pour les boutons de partage (c'est très demandé ^^)
      Par contre c'est impossible de modifier l'apparence du formulaire de commentaire car il est géré par Blogger et non par le blog :/

      Supprimer
    4. Merci beaucoup t'ai adorable :D
      Je t'envoi un mail :D

      Ah dommage que se soit gérer par Blogger :/

      Supprimer
  4. Merci pour ce super tuto !! Grâce à toi, j'ai vraiment réussi à modeler mon blog à mon image !! Tes tutoriels sont si "abordables", clairs et faciles à suivre, que ça devient un vrai plaisir de bidouiller le code HTML ! Encore merci !

    RépondreSupprimer
  5. Salut Miss,
    Le tutoriel est génial, je l'attendais depuis longtemps.
    Je voulais savoir comment faire disparaître le pied de page sur la page d'accueil. Mes articles sont affichés comme "aperçu" et j'aimerais que le pied de page ne soit présent que sur la page de l'article et non l'accueil. C'est possible si mes souvenirs sont bons ? Sur mon blog je n'ai que la bordure du pied de page qui apparaît.
    http://gameofbeautymode.blogspot.fr/

    Bises

    RépondreSupprimer
    Réponses
    1. Oui c'est possible, ajoute le code suivant avant la ligne </body> :

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <style type='text/css'>

      .post-footer {
      display: none;
      }

      </style>
      </b:if>

      Supprimer
    2. Bonjour,
      Merci beaucoup, ça fonctionne :D

      Supprimer
  6. Merci pour ce tutoriel, parfait comme toujours ! Grâce à toi, j'embellis mon blog petit à petit :-) Merci !
    Ps : Contente de savoir que ta petite entreprise fonctionne bien. C'est mérité !

    RépondreSupprimer
  7. Coucou! Je me permets de te poser une question qui n'a pas grand chose à voir avec ton article mais je ne savais pas où la poser.
    J'ai suivi ton tutoriel pour faire la newsletter et en fait j'ai mis mon formulaire sur une autre page. Je veux donc mettre un lien vers cette page dans un widget.
    Je l'ai fait et j'ai essayé de me débrouiller avec le code CSS (je débute...) et tout fonctionne (les bordures, la couleur de fond etc...), tout SAUF la couleur du lien...
    J'essaie de mettre le lien en blanc mais ça ne fonctionne pas. Et j'essaie de trouver aussi comment changer l'apparence du lien au survol de la souris mais je n'y arrive pas non plus.
    (http://byvinciane.blogspot.fr)

    Je ne sais pas si tu pourras m'aider mais ce serait vraiment super cool.
    D'ailleurs, j'ai fait vraiment beaucoup de choses sur mon blog grâce à tes tutoriels, c'est vraiment génial, merci beaucoup!

    À bientôt!

    RépondreSupprimer
    Réponses
    1. Bonjour Vinciane,
      Voici les codes CSS actuels de ton gadget :

      .newsletter {
      background-color: #ffffff;
      color: #ffffff;
      font-family: Oswald;
      font-size: 15px;
      text-align: center;
      text-decoration: none;
      letter-spacing: 1px;
      border-style: solid;
      border-width: 3px;
      border-color: #9D8B89;
      width: 100%;
      padding: 20px 15px 20px 15px;
      box-sizing: border-box; /* Important */
      }

      .newsletter:hover {
      background-color: #ffffff
      color: #E99D95;
      }

      La première partie, rien à dire. Pour les liens il faut rajouter un a après le nom de l'élément. Il faut donc ajouter un code CSS pour les liens de ton gadget :

      .newsletter a {
      }

      Et remplacer ton code pour les liens au survol de la souris :

      .newsletter:hover {
      background-color: #ffffff
      color: #E99D95;
      }

      Par :

      .newsletter a:hover {
      background-color: #ffffff
      color: #E99D95;
      }

      Et voilà ;)

      Supprimer
    2. Merci beaucoup pour ta réponse, je vais essayer ça!! :)

      Supprimer
  8. Merci pour ce tutoriel simple, et clair ! J'ai pu changer mon pied d'article tout laid ! Hi hi

    Mais j'ai un petit soucis... Les bords que j'ai appliqué à mes pieds d'articles s'appliquent aussi aux pages que j'ai créées (Galeries, A propos etc.) alors que c'est vide... J'ai essayé de trifouiller le code HTML de la page (comme pour enlever la colonne de droite) mais je n'ai pas réussi...

    Voici mon blog : https://chup-nails.blogspot.com

    Merci encore pour ton travail ! <3
    Des bisous !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Rajoute le code suivant à la suite de tes codes pour cacher la colonne de droite :

      .post-footer {
      display: none;
      }

      Et voilà ;)

      Supprimer
    2. Ouiii ! Ca fonctionne !! Merci ! <3

      Supprimer
  9. j'ai un petit sushi ça ne se met pas a la ligne comme toi (snif) mes libellés et mon aucun commentaires sont sur le meme ligne!

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Rajoute le code suivant à la suite des codes du tutoriel :

      .post-footer span {
      display: block;
      }

      Le problème vient du fait que tes éléments du pied d'article sont dans le même contenant. Le code ci-dessus les force à se mettre à la ligne ;)

      Supprimer
  10. Salut !
    Je me demandais comment monter les noms des libellés en haut de l'article ? J'ai essayé de couper-coller la partie 'post-labels' dans le 'post-header' mais ça ne fonctionne pas. Je me suis arrêtée là pour ne pas bousiller tout le travail que je fais depuis des semaines sur mon blog ! C'est simple comme manip ?

    RépondreSupprimer
    Réponses
    1. Bonjour Célia,
      Il faut effectivement déplacer le post-labels au-dessus ou en-dessous du titre de l'article (post-title) ;)
      N'oublie pas de faire des sauvegardes de ton thème si tu as peur de faire des erreurs ;)

      Supprimer
  11. Bonjour Catherine, je ne savais pas ou poser la question donc je la met là mais ça n'a pas de rapport avec ce tuto .
    Quand je partage l'adresse de mon blog sur facebook, ça met automatiquement une photo d'un article que j'ai écris au début du blog et je voulais savoir si tu savais( ou quiconque lit ce message) comment faire pour choisir la photo que l'on veut. Bien entendu celle qui apparait est loin d'être la plus jolie !
    Merci !

    RépondreSupprimer
    Réponses
    1. Si tu veux vraiment choisir la photo, alors ajoute une photo manuellement à ton post Facebook en plus du lien. Ensuite supprime la photo du lien en cliquant sur la petite croix qui apparaît en haut à droite (il me semble) de la photo quand tu la survole avec la souris ;)

      Supprimer
  12. BOnjour, j'aimerai savoir si tu avais (ou pouvais) faire un tutoriel pour l'apparence des boutons de partage. J'aimerai pouvoir changer leur forme, par exemple de manière ronde, leur couleur, etc etc :)
    Merci !

    RépondreSupprimer
    Réponses
    1. C'est déjà sur ma liste de tutoriels à faire ;)

      Supprimer
  13. Bonjour Catherine,

    J'ai un soucis avec les images de mes articles j'ai téléchargé un thème, mais depuis, impossible de pouvoir changer la position de mes images (centre etc). Je n'ai pas trouvé de tuto pour cela, donc je me permet d'écrire sous cet article !

    Lorsque c'est en brouillon pas de problème, tout est aligné, une fois sur mon blog tout s’aligne à gauche.. y'a t-il une solution à ce problème ?

    Je vous remercie d'avance !
    Mon blog : http://heilani.blogspot.fr/

    Emilie

    RépondreSupprimer
    Réponses
    1. Bonjour Emilie,
      Cherches ce code :

      /*** Post Entry ***/

      Juste en-dessous tu trouveras ceci :

      .post-entry {
      padding: 0 0px;
      text-align: center;
      text-align: justify;
      }

      Supprime la dernière ligne avant le signe }, comme ceci :

      .post-entry {
      padding: 0 0px;
      text-align: center;
      }

      Sauvegardes et ça devrait marcher ;)

      Supprimer
  14. Coucou ! Merciiiii pour ce tuto ! J'ai une petite question comment on fait pour "élargir" la mise en page, j'ai l'impression que ma barre latéral et mes articles sont trop centrés, pas assez large, tu pourrais m'aider ?

    Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour Ninis,
      Il te suffit d'aller dans Modèle > Personnaliser > Ajuster la largeur. Ici tu peux ajuster al largeur de ton blog et de ta barre latérale ;)

      Supprimer
  15. Encore une fois merci pour ce tutoriel, l'effet du pied de page est tout de suite plus "pro"!!

    RépondreSupprimer
  16. Merci beaucoup Catherine, merci merci ! C'est génial :)

    RépondreSupprimer
  17. Bonsoir ! :)

    Je suis tes tutos et je commence à me faire à tous ces codes grâce à ton blog et franchement MERCI !
    Alors par contre, en dehors de la création du blog et de la mise en page, j'ai un GROS problème, et peut-être que d'autres personnes l'ont aussi... Je suis constamment obligé de forcer le navigateur pour voir les modifications de mes codes CSS. (Avec Ctrl F5) notamment ma barre de navigation, le bas d'article etc...
    Je fais beaucoup de changements car je n'suis jamais satisfaite du résultat ( trop perfectionniste), le problème c'est que les visiteurs ne savent pas forcément que j'ai modifié police, tailles et j'en passe... D'après mes recherches c'est une histoire de mise en cache et je me demandais comment remédier à cela, s'il y a un code à modifier quelque part et où... c'est frustrant de ne pas voir son blog suivre les modifications automatiquement !

    Si jamais tu as une idée, je suis preneuse !
    Sur ce, bonne soirée
    Elodie

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      Si tu fais un changement après qu'une page de ton blog a déjà été chargée, c'est tout à fait normal que tu ne vois pas le changement. C'est pour cela qu'il faut recharger la page quand tu fais un changement. Mais ne t'inquiète pas, si tu fais des changements sur ton blog, tes visiteurs les verront automatiquement la prochaine fois qu'ils visiteront ton site ;)

      Supprimer
  18. Bonjour...

    C'est encore et toujours moi :(
    J'ai essayé la méthode que vous m'aviez donné pour aligner les images et le texte mais je n'ai pas la ligne justify :/

    Merci beaucoup de prendre du temps pour aider tout le monde, je trouve ça génial !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu modifié ton thème ? Car je ne trouve plus les codes que je t'ai conseillé :/

      Supprimer
  19. Bonjour bonjour !

    Ce que tu m'avais c'était cela :

    /*** Post Entry ***/

    Juste en-dessous tu trouveras ceci :

    .post-entry {
    padding: 0 0px;
    text-align: center;
    text-align: justify;
    }

    Supprime la dernière ligne avant le signe }, comme ceci :

    .post-entry {
    padding: 0 0px;
    text-align: center;
    }

    J'ai actuellement changé mon tête car l'autre me poser beaucoup de problème :/
    En revanche je me suis retrouvée avec 3 footers en bas de page, je ne sais pas si c'est possible d'en avoir qu'un (étant donner que cela est un thème téléchargé) car je trouve plus jolis lorsque la barre d'insta est tout le long du blog et non à 1/3 :/

    Merci ^^

    RépondreSupprimer
    Réponses
    1. En fait c'est sur ton blog que je ne trouve plus ce code.

      Pour le pied de page, as-tu essayé de modifier ses paramètres dans Modèle > Personnaliser > Mise en page ?
      Si oui, alors tu peux rajouter le code de ton gadget Instagram manuellement dans ton code HTML juste avant cette ligne :

      <div class="footer" id="footer1">

      Supprimer
    2. Ah oui ?

      J'essaye cela, je te dis si cela a fonctionné :) Merci !

      Par contre y'a t-il un code spécifique pour les commentaires ? car j'ai l'impression que l'on ne peut pas commenter sur mon blog, il n'y a pas ce petit carré je ne sais pourquoi :/

      Supprimer
    3. J'ai regardé la mise en page et c'est écrit : "Non disponible pour ce modèle" :/

      Supprimer
    4. C'est bizarre car je le vois dans ton code :/
      Essaye :

      <div class='footer' id='footer1'>

      Supprimer
    5. C'est peut être parce que c'est un thème téléchargé :/
      Je vais t'envoyer une capture d'écran par mail pour te montrer !

      Le code que tu m'as donné je l'ai, j'ai suivis ce que tu m'as dis, en passant par SnapWidget, je remplie, je copie et colle et cela me trouve des erreurs donc cela ne fonctionne pas :/


      Lorsque j'ajoute le code de SnapWidget dans un des footers en bas de page, il est petit et coupe le gadget car il y a 3 footers et même en essayant d'en supprimer 2, le footer reste petit (pas toute la largeur du bas de la page) et impossible de le centrer :/

      J'espère que tu as compris mes explications :)

      Supprimer
    6. J'ai vu que tu avais changé de thème ^^
      Du coup tu as réussi à mettre le gadget en pied de page :)
      Pour mettre ton gadget à 100% de la page vas sur ton gadget. Tu devrais avoir un code HTML qui ressemble à ceci :

      <iframe src="http://snapwidget.com/sc/?u=ZW1pbGlldmN6fGlufDE1MHwzfDN8fG5vfDV8bm9uZXxvblN0YXJ0fHllc3xubw==&amp;ve=291015" title="Instagram Widget" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:1000px; height:150px"></iframe>

      Trouve :

      width:1000px;

      Et remplace 1000px par 100% !important comme ceci :

      width:100% !important;

      Sauvegarde et le gadget devrait se mettre à 100% de la page ;)

      Supprimer
    7. Oui j'ai tout changé et tout refais à neuf car je tombe sur des template non complet du moins pas ce que je recherchais ! :)
      Merci beaucoup Catherine j'essaye cela de suite !

      Est-ce normal que j'ai un espace blanc en bas de ma page ?

      Supprimer
    8. Tu veux parler d'un espace blanc entre ton pied de page et le gadget Instagram ?
      Si oui, tu peux le supprimer avec ce petit code CSS :

      #HTML4 {
      margin-bottom: -34px;
      }

      Supprimer
    9. Merci d'avoir répondu Catherine !

      L'espace dont je te parlais a disparu tout seul, tant mieux :)

      Supprimer
  20. Bonjour Catherine !

    Encore une fois, un très chouette tuto !!! Moi mon souci, c'est que le "Publié par Theodora à 07:30" se met sur 3 lignes ! Aurais-tu la solution ?

    RépondreSupprimer
    Réponses
    1. Bonjour Théodora,
      Je ne vois pas cette ligne : Publié par Theodora à 07:30
      Sur ton blog :/

      Supprimer
  21. Bonsoir,
    Merci pour ce tutoriel ! Je l'ai suivi à la lettre et j'ai bien les bonnes couleurs, l'encadré... Le seul petit problème c'est que les boutons de partage et les libellés ne s'affichent pas dans l'encadré alors que je les ai bien cochés dans la partie "configurer les articles" dans "mise en page".
    Merci de prendre du temps pour nous aider :)

    RépondreSupprimer
    Réponses
    1. Malheureusement c'est un problème plutôt fréquent.
      Pour régler ce problème il faut modifier le code HTML de ton thème.
      Cherche :

      <span class='post-labels'>

      Tu devrais trouver un code comme celui-ci :

      <span class='post-labels'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'/>
      </b:loop>
      </b:if>
      </span>

      Supprime les lignes :

      <b:if cond='data:post.labels'>

      et

      </b:if>

      De ce code.

      Ensuite cherche :

      <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>

      Remplace cette ligne par :

      <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>

      Dis-moi ce que ça donne.

      Supprimer
  22. Merci de ton aide ! J'ai bien cherché les deux lignes que tu m'as donné avec ctrl + F mais je ne les trouve pas du coup je ne peux pas avoir accès aux codes que je dois modifier/supprimer :/

    RépondreSupprimer
    Réponses
    1. Si tu ne les trouves pas c'est peut-être pour ça qu'ils ne s'affichent pas. Dans ce cas, cherche :

      <div class='post-footer-line post-footer-line-1'>

      Tu devrais trouver ce code 2 fois. Celui qui nous intéresse est le 2e, celui avec le plus grand nombre à gauche.
      Juste après ce code colle :

      <span class='post-labels'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'/>
      </b:loop>
      </b:if>
      </span>

      <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>

      Supprimer
    2. C'est parfait, ça fonctionne ! Le seul petit hic c'est que les libellés et les boutons de partage sont sur la même ligne. J'aimerais que ce soit les commentaires en premier, en dessous les boutons de partage et en dernier les libellés si c'est possible :)
      Et j'ai une dernière petite question : est-ce qu'il est possible d'afficher cet encadré (commentaires + partage + libellés) seulement pour les articles et pas dans les pages "à propos" et "contact" ?
      Merci encore de prendre du temps pour nous aider :)

      Supprimer
    3. Bonjour,
      Dans ce cas, il faut déplacer ces codes juste avant la ligne :

      <div class='post-footer-line post-footer-line-3'>

      Au lieu de :

      <div class='post-footer-line post-footer-line-1'>

      Tu peux cacher le pied d'article sur les pages en ajoutant le code suivant :

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style type='text/css'>
      .post-footer {
      display: none;
      }
      </style>
      </b:if>

      Avant la ligne :

      </body>

      Supprimer
    4. Bonsoir,
      Merci d'avoir répondu Catherine ! J'ai bien cherché la ligne que tu m'as donné pour déplacer mes codes mais encore une fois je ne la trouve pas, à croire que le code de mon blog est plein d'erreurs...
      En tout cas j'ai bien réussi à cacher le pied d'article sur mes pages, merci encore pour ton aide :)

      Supprimer
    5. C'est sûrement parce que tu n'as aucun gadget dans cette partie. Dans ce cas cherche :

      <div class='post-footer-line post-footer-line-3'/>

      Avec un signe / avant le >. Remplace cette ligne par :

      <div class='post-footer-line post-footer-line-3'>

      Ensuite ajoute :

      </div>

      A la fin du code pour tes libellés et boutons de partage.

      Supprimer
    6. J'ai bien suivi tes indications mais ça ne fonctionne toujours pas, les différents éléments ne sont pas dans l'ordre que je souhaiterais (commentaires/partage/libellés) même en ayant déplacé le code :(
      Je ne vais pas t'embêter plus longtemps, je pense que je vais laisser cet encadré tel qu'il est même s'il n'est pas tout à fait comme je le voulais ^^ Merci beaucoup Catherine d'avoir pris le temps de m'aider !

      Supprimer
    7. Ah j'ai mal compris l'ordre ! ^^
      Il faut placer le code des commentaires avant le code des libellés, donc le code est :

      <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>

      <span class='post-labels'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'/>
      </b:loop>
      </b:if>
      </span>

      As-tu trouvé le 2e code commençant par :

      <div class='post-footer-line post-footer-line-3'

      Pour passer au 2e code il faut appuyer sur Entrer 2 fois quand tu fais la recherche. Pour être sûre que tu modifies le bon code, il faut que son numéro (sur la gauch) soit le plus grand.

      Supprimer
    8. J'ai eu du mal, mais j'ai enfin réussi ! ^^
      De mon côté je n'avais qu'un code <div class='post-footer-line post-footer-line-3' donc je n'ai pas eu besoin d'appuyer 2 fois sur Entrer ! Je te remercie encore pour ta patience :)

      Supprimer
  23. Bonsoir,

    Merci pour ce tuto. J'aurais une question, c'est possible d'enlever les boutons de partage ? Je trouve que sa casse tout .. Et j'en vois pas l'utilité. Merci beaucoup, bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Normalement tu peux les supprimer dans Mise en Page > Articles (Modifier). Décoche la case à côté des boutons de partage et sauvegarde.
      S'ils ne disparaissent pas alors tu peux ajouter un petit code CSS pour les cacher. Rajoute le code CSS suivant :

      .post-share-buttons.goog-inline-block {
      display: none;
      }

      Supprimer
  24. J'ai bien réussie à modifier comme je voulais, sauf que ça a supprimer les logos de partage que j'avais mit à l'aide d'un tes articles. Comment faire pour les récupérer, tout en gardant mon pied d'article comme il est maintenant ?

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Le seul moyen est de rajouter à nouveau les boutons de partage.
      Pour info un nouveau tutoriel pour créer des boutons de partage personnalisée en HTML et CSS sera publié mardi ;)

      Supprimer
  25. Bonsoir, j'adore mon pied de page, mais je voudrais savoir s'il est possible d'avoir un code pour pouvoir mettre mes boutons de partage à gauche de mon pied de page, et que le reste, ben reste à droite ^^
    Parce que là tout est à droite, et je trouve que esthétiquement ce n'est pas très beau ...
    Merci pour ta réponse ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En allant sur ton blog, je remarque que ton pied de page est centré et non à droite.
      Je ne comprends pas trop la question :/

      Supprimer
    2. Bonjour,

      Je ne comprends pas, je n'arrive pas à retrouver cette partie dans mon codage. Néanmoins, quand tu regardes directement sur mon blog au niveau du pied de page, tout est à droite, le libellé, les commentaires et les boutons de partages. Le truc que je souhaite essayer de changer, c'est de pouvoir mettre les boutons de partages à gauche pour qu'esthétiquement, ça fasse plus joli :)
      Est-ce que tu arrives à voir ?

      Supprimer
    3. Ah oui tu veux parler du pied d'article et non du pied de page. Le pied de page est la partie de ton blog avec ton gadget Instagram et les icônes de traduction ^^

      Pour centrer tes boutons à gauche rajoute la ligne :

      text-align: left !important;

      Avant le signe } de ton code :

      .btn-partage {
      margin-right: 0 !important;
      }

      Et voilà ;)

      Supprimer
    4. Aaaaaah pardon oui je me suis totalement trompée de mot dans mon charabia ! Merci beaucoup, tu me sauves, ça a super bien fonctionné, tu es juste géniale !
      Ton blog est une vraie mine d'or pour moi, tu m'as énormément aidé dans le design de mon blog. Honnêtement, sans ton blog et toi, mon blog n'en serais clairement pas là aujourd'hui.
      Alors je tiens sincèrement à te remercier pour tout ce que tu fais. :)

      Supprimer
  26. Bonjour,
    Merci beaucoup pour tous ces tutos très clairs et précis. N'étant pas une pro des codes, j'ai un petit soucis avec mon pied d'article et je ne vois pas où est mon erreur. J'ai modifié l'apparence des libellés qui me convient mais je n'arrive pas à modifier l'apparence du texte "commentaires" et "envoyer un commentaire" qui est devenu pour moi maintenant "Petits mots" et "Envoyer un petit mot" (grâce à toi bien sûr!). J'aimerais juste changer la police et la taille. Mon blog est encore en invisible mais est ce que tu peux m'envoyer ton adresse mail que je te mette en lecteur privé? Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour modifier l'apparence de ces titres, il faut utiliser ce code CSS :

      .comments h4 {
      font-family: 'Arial' !important; /* Police du texte */
      font-size: 16px !important; / Taille de la police */
      }

      Ajoute ce code CSS juste avant la ligne :

      /* Content

      Remplace ensuite Arial par le nom de la police que tu souhaites utiliser, et 16px par la taille de la police.

      Supprimer
  27. Bonjour, j'aimerai savoir comment faire pour que dans le pied de l'article, juste en dessous de lire la suite ça fasse comme trois colonnes. se que je veux dire, c'est que en dessous il y ait d'abord les libellés, après un petit trait vertical ensuite les boutons de partages encore un trait vertical et ensuite le nombre de commentaires. (je ne sais pas si j'ai été compréhensible ^^)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Par défaut Blogger ne propose pas de faire ceci. Mais on peut sûrement tricher avec du code CSS. Je vais regarder ça de plus près pour en faire un tuto ;)

      Supprimer
  28. Rebonjour !!
    Je recommence car je viens de comprendre qu'il fallait mettre l'URL pour que tu puisse aller voir.. (tu vois un peu le niveau) J'avais demandé de l'aide à propos des boutons de partages qui ne s'affichent pas, même quand on coche dans Mise en page... et toujours pas en essayant toutes les manip de ce tuto.
    De plus je rajoute que j'aimerais bien que l'intitulé "aucun commentaire" et tout le blabla des commentaires soit dans le pied de l'article... et en plus petit car là, c'est énooorme !! Je trouve pas de tuto la dessus, je vais continuer à chercher !
    Merci en tout cas encore, tu sauve la vie de tout le monde on dirait !! J'ai hâte que mon blog soit présentable pour le montrer a mes amis, pour l'instant je le bidouille encore (et j'ai peur. lol)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois les boutons de partage par défaut sur ton blog. Mais je ne trouve pas le code des boutons de partage personnalisés dans ton thème.

      Pour les titres Aucun commentaire et Enregistrer un commentaire, ils font partie de la partie des commentaires. Tu peux néanmoins réduire la taille de la police de ces titres avec le code CSS suivant :

      .comments h4 {
      font-size: 16px;
      }

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

      ]]></b:skin>

      Et remplace 16px par la taille de la police que tu souhaites utiliser.

      Supprimer
  29. Coucou Catherine :)
    Je me demandais si c'était possible d'enlever le pied d'article pour les pages ? :)
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux la cacher avec le code CSS suivant :

      .post-footer {
      display: none;
      }

      Supprimer
  30. Merci pour ta réponse,
    le problème c'est que ça l'enlève bien pour mes pages mais aussi pour mes articles une fois ouvert :/

    RépondreSupprimer
    Réponses
    1. Dans ce cas, si tu souhaites cacher le pied de page seulement sur la page d'accueil supprime le code que je t'ai donné ci-dessus.
      Ajoute ensuite le code suivant :

      <!-- Pages d'index -->
      <b:if cond='data:blog.pageType == "index"'>
      <style type='text/css'>
      .post-footer {
      display: none;
      }
      </style>
      </b:if>

      Avant la ligne suivante de ton code HTML :

      </body>

      Supprimer
    2. Je me suis mal exprimée :/
      En fait j'ai fait des pages pour mes catégories, du coup ce n'est pas sur mes articles que je veux cacher le pied d'article mais sur mes pages, je te mets un lien :)
      http://www.watercolorcake.fr/p/tutoriels.html
      Merci encore pour ta patience :)

      Supprimer
    3. Ah d'accord, si tu souhaites cacher le pied de page seulement sur les pages alors utilise le code suivant :

      <!-- Pages -->
      <b:if cond='data:blog.pageType == "static_page"'>
      <style type='text/css'>
      .post-footer {
      display: none;
      }
      </style>
      </b:if>

      Supprimer
    4. Super c'est ça !
      Merci beaucoup! :)

      Supprimer
  31. Bonjour Catherine,
    Merci pour ce tuto; J'ai un petit problème avec la police. Je n'arrive pas à la désolidariser du corps du texte et donc je ne parviens pas à changer sa taille dans le pied de page. Peux-tu m'aider ? http://julescoton.blogspot.be/ mille fois merci

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      As-tu réglé le problème ?

      Supprimer
  32. Bonjour ! :) Petit soucis, je n'arrive pas à centrer mes libellés ... As-tu une solution ??
    Tout le reste est ok, mais eux persistent à se mettre à gauche ...

    RépondreSupprimer
    Réponses
    1. Bonjour Cha,
      On dirait que tu as réglé le problème ? ;)

      Supprimer
  33. Bonsoir!

    J'ai modifié mon pied d'article, tout va bien.
    Cependant, j'aurais aimer que tout le pieds soit sur la même ligne.. et je ne sais pas comment je peux faire puisque j'ai tout modifié grâce à tes tutos.

    Si tu peux faire quelque chose, je te remercie d'avance! Bonne soirée :)

    RépondreSupprimer
    Réponses
    1. Bonjour Alexis,
      Je vois que tu as réussi à tout aligner sur la même ligne ;)

      Supprimer
  34. Bonjour Catherine!
    En effet hier soir je me suis vraiment penché à fond sur le problème et l'idée de déplacer les boutons dans une autre div, celle du dessus, m'est venue aha. Et ça a fonctionné malgré que j'ai du faire des modifications de "padding"!
    Merci beaucoup! Il me reste plus qu'à la page de contact (j'ai commenté sur ton article de la page de contact) :)

    RépondreSupprimer
  35. Bonjour Catherine,
    Tout d'abord, merci de partager la passion du code, je ne pensais pas trouver ça créatif et enrichissant. Mon blog évolue tous les jours un peu plus grâce à vous et c'est très gratifiant d'être en mesure de le faire soi-même.
    J'avais une question : de mon côté, impossible de trouver ce fameux : .post-footer { ! Je l'ai trouvé manuellement dans la partie "post" : le mien ne comporte qu'une ligne : ".post-footer {
    margin: 1.5em 0 0;
    }"
    J'ai essayé de remplacer par les lignes que vous donniez au début mais aucun changement. Quoique je fasse, il ne se passe rien. Je ne dois pas être au bon endroit, que faire? Merci d'avance ! A bientôt

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il me semble que cela fonctionne maintenant ;)

      Supprimer
  36. Bonjour Catherine,
    J'ai regardé dans les autres commentaires mais je n'ai pas trouvé de solution à mon problème:
    J'aimerais que mon pied d'article soit comme ceci:
    12 COMMENTAIRES
    --boutons de partage--
    Catégories: HEVEA, SEBIO (-->exemples)
    donc sur trois lignes

    Pour l'instant j'ai "COMMENTAIRES" + les boutons de partage sur la 1e ligne
    et à la 2e ligne les catégories HEVEA, SEBIO mais sans le mot "catégories" devant.

    Peux-tu m'aider?

    Merci pour ton blog génial

    Tiphaine

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine,
      As-tu essayé de modifier la position des éléments dans le gadget Articles du blog dans Mise en page ?
      Si oui, et la position des éléments reste la même, alors tu peux tricher en ajoutant les codes CSS suivants :

      /* Nombre de commentaires sur une ligne à part */
      span.post-comment-link {
      display: block;
      margin: 0;
      }

      /* Correction de l'alignement */
      span.post-author.vcard, .post-timestamp, .reaction-buttons, .post-icons {
      display: none;
      }
      .post-share-buttons.goog-inline-block {
      margin-left: 52px;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
    2. Merci beaucoup. Je n'ai pas dû le faire finalement. Je ne sais plus pourquoi -_-
      J'ai encore quelques questions:
      j'ai tenté de changé la couleur de 0 COMMENTAIRE
      mais je n'y suis pas parvenue. Pourtant j'ai pu changé la casse, la police, empêcher le soulignement.
      J'aimerais qu'il ait la même couleurs que les libellés en gris #AAAAAA et au survol qu'il y ait un background en #F0F0F0
      Et je voudrais la mise en forme suivante

      boutons RS
      LIBELLÉS (sans le mot libellés, j'avais suivi ton tuto pour ça et ça avait marché, merci beaucoup!)
      COMMENTAIRE

      J'ai essayé de changer l'ordre des éléments dans le gadget de l'article de la mise en page mais ça ne fonctionne pas.

      Une dernière question:
      Est-il possible que les bordures ne prenne pas tout le long du "main" (ici je n'en ai mis qu'une en dessous).
      Dans l'idéal, je voudrais soit une bordure en bas plus étroite et centrée, soit le top du top un rectangle dont les bordures gauche et droite soit rapprochée des élément du pied d'article.
      J'espère que tu pourras m'aider.
      Bises
      Tiphaine
      https://beaute-et-legerete.blogspot.be

      Supprimer
    3. Bonjour Tiphaine,
      Est-ce le titre Commentaires sous le pied d'article que tu souhaites centrer au boutons de partage et libellés ?
      Si oui, alors il faut utiliser le code CSS suivant car il ne fait pas partie du pied d'article :

      #comments h4 {
      }

      Pour la bordure, retrouve ce code CSS :

      .post-footer {
      margin: 30px -2px 0 0;
      padding: 5px 10px;
      color: #AAAAAA; /* Couleur des liens */
      background-color: #ffffff;
      border-bottom: 1px solid #CACAFF;
      line-height: 1.6;
      font-size: 100%;
      font-family: 'Calibri'; /* Police du texte */
      text-transform: uppercase; /* Texte en majuscules : normal = normal | uppercase = majuscules */
      text-align: center; /* Alignement du texte : left = à gauche | center = centré | right = à droite */
      }

      Remplace la ligne :

      border-bottom: 1px solid #CACAFF;

      Par :

      border: 1px solid #CACAFF;

      Ensuite remplace la ligne :

      margin: 30px -2px 0 0;

      Par :

      margin: 30px auto 0;

      Ajoute la ligne suivante avant le signe }

      max-width: 300px; /* Largeur max du pied d'article */

      Remplace 300px par la largeur souhaitée.

      Pour finir, rajoute le code CSS suivant :

      .post-footer-line.post-footer-line-1 {
      display: none;
      }

      A la suite du code CSS précédent. Ce code cachera la première ligne de ton pied d'article qui est vide mais prend de la place.

      Supprimer
  37. Bonjour Catherine
    Merci pour tous ces tutos si précieux!
    J'ai fait un test sur mon blog "test" et cela fonctionne. Par contre, j'ai aussi le " PUBLIÉ PAR NATIEAK À 07:22" qui se déplace au centre avec "aucun commentaire" alors que je ne le vois pas sur votre exemple . Ai-je fait une erreur? En soi, ce n'est pas si mal mais le problème est le centrage des boutons de partages qui , vis à vis de la première ligne ( publié par...) , ne se centre pas correctement. Comment faire pour atteindre la perfection? ^^
    Voici le lien de mon blog test: https://blogdetestaucuninteret.blogspot.fr/
    Encore merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le "PUBLIÉ PAR NATIEAK À 07:22" est à modifier dans les paramètres de tes articles. Va dans Mise en Page et clique sur Modifier sur le gadget Articles du blog. Ici tu peux cocher et décocher les éléments que tu souhaites faire apparaître dans l'en-tête et le pied d'article ;)
      Pour l'alignement, ce ne sont pas les boutons de partage qui posent problème, mais des contenants vides pour les autres éléments du pied de page.
      Tu peux cacher les contenants vides en ajoutant le code CSS :

      .reaction-buttons, .post-icons, .post-backlinks {
      display: none;
      }

      A la suite des codes CSS pour ton pied d'article.
      De plus, il y a une marge à droite de lien des commentaires, ce qui décale encore plus cette ligne vers la gauche. Ajoute ce code pour rectifier l'alignement :

      .post-comment-link {
      margin-right: 0;
      }

      De même ajoute ce code à la suite des codes CSS pour ton pied d'article.

      Supprimer
  38. Merci Catherine pour votre réponse.
    J'ai essayé de mettre en pratique ce tuto sur mon blog principal mais j'ai un soucis. En effet, les commentaires restent sur la même ligne que les logos de partage. Je n'arrive pas à comprendre pourquoi car je n'avais pas rencontrer ce soucis sur mon blog test.
    Dois-je ajouter un code quelque part afin d'avoir la même disposition que dans le tuto?
    Encore merci Catherine

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a 3 lignes d'éléments dans le pied d'article. Tu peux réorganiser ces éléments dans les paramètres des articles. Va dans Mise en page, clique sur Modifier sur le gadget Articles du blog. En bas de la fenêtre tu peux déplacer par glisser-déposer les éléments de ton pied d'article.

      Supprimer
  39. Bonjour Catherine
    C'est encore moi!
    Je m'aperçois que depuis que j'ai fait les modifications hier soir, mes dates et mes titres d'articles ne sont plus centrés, pourtant le code h2.date-header{text-align:center;}
    h3.post-title {text-align:center;} sont toujours présents dans la case "ajouté un css" (modèle puis personnalisé , avancé et ajouter un css)
    Comment faire pour les recentrer?
    D'avance merci
    Belle journée

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que tu as dû régler le problème car tes titres et dates sont bien centrés ;)

      Supprimer
  40. Encore un super tutoriel merci beaucoup!

    RépondreSupprimer
  41. Bonjour Catherine,
    Vraiment désolé, je te pose beaucoup de question en ce moment !
    J'ai téléchargé un thème, du coup je ne sais pas comment faire pour modifier mon pied d'article... J'aimerais enlever les boutons de partage et le "undefined undefined,undefined by Amandine". En fait j'aimerais qu'il y est juste "CONTINUE READING" et en dessous le nombre de commentaires.
    Merci d'avance, tu m'est d'une grande aide !!!
    Mon blog : http://wild--amanda.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Amanda,
      Tu peux cacher ces éléments avec du code CSS. Ajoute :

      .post-meta .col-md-4:first-child, .post-meta .col-md-4:last-child {
      display: none !important;
      }

      .col-md-4 {
      width: 100% !important;
      float: none !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Si tu souhaites supprimer les bordures à gauche et à droite du nombre de commentaires retrouve ce code :

      .post-comments-footer {
      text-align: center;
      border-left: 4px double #eee;
      border-right: 4px double #eee;
      }

      Remplace :

      border-left: 4px double #eee;
      border-right: 4px double #eee;

      Par :

      border: none;

      Et voilà ;)

      Supprimer
  42. Merci beaucoup pour ton travail formidable

    RépondreSupprimer
  43. Bonjour Catherine,

    J'ai mis en place ton code pour supprimer le pied d'article sur ma page d'accueil, et je t'en remercie.

    J'aurais 3 petites questions :

    1/ En fait, j'aurai souhaité malgré tout laisser uniquement le nombre de commentaires sur la page d'accueil... est-ce possible ?

    2/ Sur les pages des articles l'auteur et la date sont sur une ligne différente... peut-on les rassembler sur la même ligne et ainsi ne faire apparaître que 3 lignes (Auteur + date / boutons réseaux sociaux / libellés) ?

    3/ Sur les pages autres que les articles n'apparaissent pas ni l'auteur, ni la date... est-ce possibles de le mettre ? Si la réponse est non, pouvons-nous supprimer les lignes manquantes car le pavé est très grand pour seulement les boutons des réseaux sociaux ?

    Merci.

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

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      Voici les réponses à tes questions :

      1 / Au lieu de cacher le contenant du pied d'article, il faut cacher tous les éléments du pied d'article, sauf le nombre de commentaires. Remplaces donc le code CSS qui cache le pied d'article sur la page d'accueil par :

      .post-footer span, .post-share-buttons.goog-inline-block {
      display: none;
      }

      span.post-comment-link {
      display: block !important;
      }

      2 / Pour mettre la date sur la même ligne que l'auteur, ajoutes le code CSS :

      .post-footer-line.post-footer-line-1 div {
      display: inline-block;
      }

      3 / La date et l'auteur n'apparaissent pas sur les pages, seulement les articles. Tu peux cacher les éléments vides du pied d'article en ajoutant ce code CSS :

      .post-footer span {
      display: none;
      }

      Dans un code conditionnel pour les pages statiques.

      Supprimer
    2. Bonjour Catherine, je te remercie pour tes explications toujours très claires.
      Le résultat est parfaitement comme je le souhaitais !
      Encore un grand merci pour tout le temps que tu nous consacres à tous !
      Pierre

      Supprimer
  44. Coucou Catherine! :)

    Merci beaucoup pour ton merveilleux travail. Tes tutos sont vraiment géniaux.

    J'ai récemment eu l'idée de relooker mon blog et j'ai utilisé beaucoup de tes tutoriels dont celui-ci pour modifier le pied d'article et également pour modifier les boutons de partage.

    Le problème ces que depuis que j'ai réalisé ces changements, les boutons de partage et tout le pied de page en général apparaît sur les pages suivantes : plus sur le blog, me contacter et la page des mentions légales. Habituellement je trouve le problème par moi-même ou en lisant tes commentaires mais rien ne marche... :/

    Pourrais-tu m'aider s'il te plaît?

    Voici le lien de mon blog : http://www.beauteendelire.com/

    Merci! :)

    P.S : Autre questions hors sujet. Est-ce que tu compte faire un ou des tutoriels pour bien personnaliser la version mobile de nos blog ?

    RépondreSupprimer
  45. Coucou Catherine!

    Au final j'ai réussi à trouver solution à mon problème en lisant plus attentivement et en recherchant une solution a un autre de mes problèmes qui était d'enlever le titre (comme celui d'un article) des pages statiques.

    J'ai simplement remplacé la commande donnée dans le code par celle du pied de page concerné (en particulier la ligne 2 comme cité dans ton tutoriel pour les boutons de partage en CSS).

    Et cela a marché. :D

    Enfin bref ton blog est une vraie mine d'or et grace à lui je comprends de mieux en mieux le language HTML et CSS.

    Un énorme merci!

    Danny

    RépondreSupprimer
  46. Bonsoir !
    J'ai fait ce tutoriel, mais la police d'écriture ne veut pas changer, ni toutes les modifications appliquées au lien et au passage de la souris sur le lien...
    Merci d'avance de ton aide !

    Voilà le lien de mon blog :http://thecutestlifeisnow.blogspot.fr

    Pauline-Anaïs

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline-Anaïs,
      Tu as une erreur dans tes codes CSS. Tu as peut-être collé les codes pour les liens à l'intérieur du code pour l'apparence globale du pied d'article. C'est-à-dire que tu les as collés avant le signe } de ce code.
      Commence par retrouver ton code :

      .post-footer {
      margin: 20px -2px 0;
      padding: 5px 10px;
      color: black;
      text-align : center;
      text-transform : uppercase;
      background-color: #FEEAF1; ;
      border-bottom: 3px solid #FEEAF1;
      line-height: 1.6;
      font-family: 'Arial'!important; /* Police du texte */
      font-size: 90%;
      text-decoration : bold!important;
      .post-footer a {
      color: #FB0F65; /* Couleur des liens au survol de la souris */
      text-decoration: underlined;
      }
      .post-footer a:hover {
      color: #FB0F65; /* Couleur des liens au survol de la souris */
      text-decoration: none; /* Supprime le soulignement du texte au survol de la souris */
      }
      }

      Supprime le 2e } à la fin de ce code, et ajoute un } avant la ligne :

      .post-footer a {

      Comme ceci :

      .post-footer {
      margin: 20px -2px 0;
      padding: 5px 10px;
      color: black;
      text-align : center;
      text-transform : uppercase;
      background-color: #FEEAF1; ;
      border-bottom: 3px solid #FEEAF1;
      line-height: 1.6;
      font-family: 'Arial'!important; /* Police du texte */
      font-size: 90%;
      text-decoration : bold!important;
      }
      .post-footer a {
      color: #FB0F65; /* Couleur des liens au survol de la souris */
      text-decoration: underlined;
      }
      .post-footer a:hover {
      color: #FB0F65; /* Couleur des liens au survol de la souris */
      text-decoration: none; /* Supprime le soulignement du texte au survol de la souris */
      }

      Ensuite pour le texte en gras la ligne que tu as entré est fausse. Remplace :

      text-decoration : bold!important;

      Par :

      font-weight: bold !important;

      Tu peux également ajouter !important à la couleur car elle n'est pas pris en compte.

      Supprimer
  47. Bonjour,
    Super tutoriel, merci :)
    J'en profite pour vous demander de l'aide ^^'
    Voilà mon souci, j'ai vu qu'il était possible, dans le widget "configurer les articles" sous blogger, de changer le mot commentaire par un autre. Ainsi, au lieu de voir X commentaires, il est marqué X mots, messages, ... Or, mon souci, c'est que ça ne fonctionne pas sur mon blog. Je suis aller dans le widget pour changer le mot commentaire par un autre mais ce changement n'apparaît pas sur mon blog. J'ai essayé de mon côté de régler le problème, mais là, je ne sais plus quoi faire.
    Merci par avance

    RépondreSupprimer
  48. Bonsoir, c'est re-moi ^^'
    En feuilletant sur ton blog, j'ai trouvé le tutoriel dont j'avais besoin pour remplacer le mot commentaire ! Merci pour ce tutoriel simple et claire.
    Désolée pour le dérangement ^^'

    RépondreSupprimer
  49. Franchement, merci pour tout ton travail et tout ce partage ! Je ne sais pas ce que je ferais sans ton blog ! Je débute et en à peine 2 semaine j'ai réussi à installer plein de petits trucs !

    Merci, merci, merci !

    http://eva-cadabra.blogspot.fr/

    RépondreSupprimer
  50. Deuxième tuto de la soirée réussi ! Merci ! :)

    RépondreSupprimer
  51. Bonjour !
    Tout d'abord, merci pour tous ces tutos. Grâce à toi j'ai pu personnaliser mon blog comme je le voulais. J'ai un petit soucis avec mon pied d'article.

    Voilà, j'ai tout mis dans la ligne 1 pour que l'ensemble soit sur une même ligne sauf que les boutons sont toujours en dessous. Je voudrais que le "écrit par Marine P." soit à gauche, les boutons au centre et le bouton des commentaires à droite sur une même ligne. Mais j'ai beau regarder dans mon code HTML, je ne vois pas d'où vient le soucis.

    Merci D'avance !

    https://explore-nagoya.blogspot.jp/

    RépondreSupprimer

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

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

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