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 de la date des articles

Après l'apparence des titres de la barre latérale, aujourd'hui je vais vous expliquer comment modifier l'apparence de la date de vos articles.

Modifier l'apparence de la date des articles

Choix du format des dates

Tout d'abord allez dans Paramètres à partir de votre tableau de bord Blogger, puis dans Langue et mise en forme :

Modifier l'apparence de la date des articles

Vous pourrez modifier le format de la date affiché dans Format des en-têtes de date.

Une fois que vous avez choisi le format de date qui vous convient, passons à la personnalisation de l'apparence des dates.

Personnalisation de l'apparence des dates

Allez dans Modèle à partir de votre tableau de bord :

Modifier l'apparence de la date des articles

Puis cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran.
Ensuite cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre modèle au cas où :

Modifier l'apparence de la date des articles

Cliquez sur Modifier le code HTML :

Modifier l'apparence de la date des articles

Cliquez sur le triangle noir à gauche du code suivant <b:skin>...</b:skin> :

Modifier l'apparence de la date des articles

Vous obtiendrez :

Modifier l'apparence de la date des articles

Cliquez n'importe où dans la boîte de code, puis appuyez sur Ctrl et F en même temps.
Une boite de recherche apparaît en haut à droite de la boîte de code.
Entrez le code suivant et appuyez sur Entrer :
.date-header span {
Vous allez tomber sur le code suivant :

Modifier l'apparence de la date des articles

C'est ce code CSS qu'il faut modifier pour changer l'apparence de la date des articles.
Ici vous pourrez définir la police, la couleur, la taille du texte, la couleur de fond, etc.

Par exemple, je souhaite que la date des articles soit positionnée à gauche des titres, avec une bordure et un fond blanc comme ceci :

Modifier l'apparence de la date des articles

En d'autres mots, je veux que les dates soient :
  • en police Trebuchet MS
  • de taille 11 pixels (11px)
  • de couleur gris foncé (#5b5b5b)
  • avec un espace entre les caractères de 1 pixel (1px)
  • une bordure solide (solid) d'épaisseur 1 pixel (1px) de couleur gris foncé (#5b5b5b)
  • un espace entre le texte et la bordure de 5 pixels (5px)
  • disposé à gauche des titres
  • avec un espace entre la date et le titre de 10 pixels (10px)

Ce qui donne :
.date-header span {
color: #5b5b5b;                /* couleur du texte  */
font-family: Trebuchet MS;     /* police  */
font-size: 11px;               /* taille du texte  */
letter-spacing: 1px;           /* espace entre les caractères du texte  */
border-width: 1px;             /* taille de la bordure  */
border-style: solid;           /* style de la bordure  */
border-color: #5b5b5b;         /* couleur de la bordure  */
padding: 5px;                  /* espace entre la bordure et le texte  */
float: left;                   /* définit la disposition à gauche des titres */
margin-right: 10px;            /* espace entre la date et le titre  */
}
Modifier l'apparence de la date des articles

Et voilà ! Vous avez modifié l'apparence de la date de vos articles !

Pour plus d'information sur les différents codes CSS pour changer l'apparence des textes, liens, etc, je vous conseil de lire l'article sur la personnalisation de la barre de navigation.

A bientôt pour un nouveau tutoriel ! ;)

Autres articles

93 commentaires:

  1. Merci encore, c'est parfait ce que tu fais ! Continue !
    Autres idées : comment augmenter sa visibilité ? Acheter un domaine sur 1&1 ou autre ?
    Merci d'avance !

    RépondreSupprimer
  2. Coucou ! Merci pour ces tutos !
    Moi j'aimerais savoir comment enlever les pointillés de "articles plus anciens, articles plus récents, accueil" et les pointillés tout en dessous du blog !
    Merci beaucoup :)

    PS: je ne sais pas si tu as vu mon autre message d'aide par rapport au menu déroulant !

    Bisous

    RépondreSupprimer
    Réponses
    1. Salut Ninis,

      Pour enlever les pointillés de "articles plus anciens, articles plus récents, accueil" cherches le code CSS suivant :

      .blog-pager {

      Tu devrais tomber sur

      .blog-pager {
      background: $(paging.background);
      }

      Change la valeur de background par transparent comme suit :

      .blog-pager {
      background: transparent;
      }

      Pour les pointillés en dessous du blog cherches le code suivant :

      .footer-outer {

      Tu devrais tomber sur :

      .footer-outer {
      border-top: $(footer.bevel) dashed #bbbbbb;
      }

      Change la valeur de border-top par none comme ceci :

      .footer-outer {
      border-top: none;
      }

      Et voilà ! ;)

      Supprimer
  3. Hello ton article est super, il m'a beaucoup aidé étant donné que je me suis lancée dans la création de mon blog. si je peux me mettre un tuto sur comment encadrer le titre de son article, le personnalisé peut-être pas mal car j'ai beaucoup galéjer à le faire et au final j'ai trouvé toute seule mais j'espère avoir bien placé mon code en tout ça marche. Très bonne continuation à toi.

    RépondreSupprimer
  4. Coucou, je te remercie pour tes précieux conseils. Est-ce que tu sais comment mettre la date sous le titre de l'article ? J'ai tenté deux/trois manips mais rien ne change... :(

    RépondreSupprimer
  5. Bonjour, je suis entrain de créer (non sans mal) un blog culinaire, et je suis ravie d'être tombée sur ton blog! J'ai essayé deux tutos pour l'en tête de date (le cercle et ce tutos la ) et finalement je préfère celui que j'avais mis à la base. Par contre j'aimerai que comme ton modèle, mon encadré dépasse vers l’arrière plan. Est ce que tu pourrais me dire comment faire si c'est pas trop difficile?
    Merci!
    http://vousreprendrezbien1kilo.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Laure,

      Pas de soucis il suffit de rajouter à ton code commençant par :

      .date-header span {

      La ligne suivante avant le } :

      margin-left: -75px !important;

      Cette ligne définit la marge à gauche de la date. En indiquant une valeur négative on la déplace à gauche :)
      J'ai mis -75px mais tu peux augmenter ou diminuer ce nombre pour mettre ce qui te convient.

      Bonne soirée,

      Catherine

      Supprimer
    2. Fait, mercie ! Par contre j'ai l'écriture qui commence aussi au debut du bandeau de date, pour qu'elle commence à la marge est ce qu'il faut que je modifie ca ; margin: $(date.header.margin); ?

      Supprimer
    3. Changes la ligne qui commence par :

      padding

      Remplace la valeur par 5px 5px 5px 20px, comme ceci :

      padding : 5px 5px 5px 20px;

      Sachant que :
      - la 1ère valeur définit l'espace au-dessus du texte
      - la 2e définit l'espace à droite du texte
      - la 3e définit l'espace en-dessous du texte
      - la 4e définit l'espace à gauche du texte

      Joue avec les valeurs pour trouver ce qui te convient :)

      Supprimer
  6. Bonjour! super article, bien construit et bien clair, merci :-)
    J'aimerais un fond de couleur, au lieu du blanc par défaut. Pourrais-tu me dire comment procéder ? Merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour Emy,
      Rajoutes ce code :

      background-color: #eeeeee;

      Avant le signe } du code CSS.
      Changes le code hexadécimal #eeeeee par le code de la couleur que tu souhaites utiliser. Pour trouver ce code tu peux aller sur le site http://www.code-couleur.com/ ;)

      Supprimer
  7. Encore un énorme merci pour toute l'aide que tu peux apporter à nous, débutantes bloggeuses ;)

    RépondreSupprimer
  8. je voudrais mettre la date fixe sur mes titres d'articles en forme ronde et que tout les articles soit avec la date meme s'il y a 2 jours avec la meme dates. et j'aimerai qu'elles soit legerement vers le haut ou vers le bas ! je sais pas si c'est possible car j'ai un probleme avec ma mise en page de modele

    RépondreSupprimer
    Réponses
    1. Effectivement ton thème est différent, je t'ai répondu sur ton commentaire précédent mais au cas où je remets ma réponse ici ;)

      Cherches le code suivant dans le code de ton thème :

      /* Content

      Juste au-dessus de cette ligne colles :

      abbr.published {
      position: absolute;
      top: 9px;
      left: 11px;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background: rgb(238, 198, 160);
      text-align: center;
      font-size: 10px;
      padding: 18px 10px 2px;
      }

      Ensuite cherches ton code suivant :

      h3.post-title {
      margin-top: 15px;
      background: rgba(84, 47, 47, 0.88);
      padding: 27px;
      text-align: -webkit-center;
      background-clip: padding-box;
      margin-top: 5px;
      text-shadow: 3px 3px 3px #000000;
      background: rgba(6, 22, 89, 0.88);
      background-image: url(http://2.bp.blogspot.com/-9xCHLmlzlhE/VT11CqknRZI/AAAAAAAAQ30/yFDMULOH-og/s1600/44.png);
      border-bottom: 7px solid rgba(124, 4, 104, 0.99);
      font: normal normal 37px Yanone Kaffeesatz;
      color: #ffffff;
      }

      Et remplaces-le par :

      h3.post-title {
      padding: 27px 27px 27px 47px;
      text-align: -webkit-center;
      background-clip: padding-box;
      margin-top: 5px;
      text-shadow: 3px 3px 3px #000000;
      background: rgba(6, 22, 89, 0.88);
      background-image: url(http://2.bp.blogspot.com/-9xCHLmlzlhE/VT11CqknRZI/AAAAAAAAQ30/yFDMULOH-og/s1600/44.png);
      border-bottom: 7px solid rgba(124, 4, 104, 0.99);
      font: normal normal 37px Yanone Kaffeesatz;
      color: #ffffff;
      }

      Et voilà ;)

      Supprimer
  9. Olala ! Ton blog est une vraie mine d'or ! J'ai changé tellement de choses grâce à tes tutoriels qui sont tellement clairs et tellement bien réalisés ! Et ton blog est vraiment très beau !

    J'ai mis ma barre de menu au dessus du titre, je l'ai fixé en haut et j'ai mis l'affichage en miniatures et en grilles ! Et je crois que je ne vais pas m’arrêter là ^^

    J'aurais juste une petite question : est-ce qu'il serait possible que le premier article soit sur toute la largeur alors que les suivants restent en grille ? Je ne sais pas si c'est bien clair... j'ai essayé de bidouiller mais je n'ai pas réussi (T_T)

    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Nastasia, oui c'est possible, ajoutes les codes suivants à la suite des codes de ton affichage en miniature :

      .date-outer:first-child {
      width: 100%;
      height: auto;
      }

      .date-outer:first-child .post.hentry, .date-outer:first-child .entry-content {
      height: 480px;
      overflow: hidden;
      }

      .date-outer:first-child img {
      width: 100%;
      height: auto;
      }

      Supprimer
    2. Tu es juste magique ! Merci beaucoup ! C'est parfait !

      Je te souhaite une très très bonne continuation en espérant pouvoir encore venir pêcher pleins de nouvelles idées ^^

      Supprimer
  10. Hello !
    Merci pour ce superbe tuto (encore et toujours d'ailleurs!)

    Juste une petite question, comment faire en sorte que la date soit en dessous du titre de l'article?

    Merci d'avance.
    http://www.lisapasellini.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lisa, c'est un tutoriel qui est marqué sur ma liste de tutoriels à faire ;)

      Supprimer
  11. Bonjour !
    Alors j'ai un petit problème sur mon Blogger. J'ai centrée la date de mes articles mais j'aimerais désormais qu'elle apparaisse à gauche. Pouvez-vous m'aider ?
    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cela dépend de ton code CSS. Peux-tu me donner le lien vers ton blog pour que je puisse regarder ça ?

      Supprimer
    2. Retrouves ton code suivant :

      .date-header {
      text-align:center;
      }

      Et remplace center par left comme ceci :

      .date-header {
      text-align: left;
      }

      Supprimer
  12. Merci beaucoup pour cet article. Je m'aide beaucoup de tes tutos pour configurer mon blog
    J'ai un problème je sais pas si tu peux m'aider...
    J'ai acheté mon nom de domaine sur 1&1 j'ai fais toutes les configurations et depuis j'ai un soucis.
    Quand je tape www.helcuisine.fr (l'adresse de mon blog) -> sa donne sa ...
    mais moi je voudrais que les derniers articles publiés soit visible comme sa ... http://www.helcuisine.fr/?m=0

    Merci d'avance
    Hélène

    RépondreSupprimer
    Réponses
    1. Mon problème est résolu, désolé de t'avoir dérangé

      Supprimer
    2. Bonjour Hélène,
      En entrant les 2 liens dans mon navigateur j'obtiens la même mise en page.
      Mais le 2e lien ressemble au lien de la version mobile du blog (avec ?m=1 après l'adresse du blog). Tu souhaiterais un affichage des articles en aperçu comme en version mobile ?

      Supprimer
    3. Mon problème a été résolu entre temps, merci beaucoup d'avoir pris le temps de me répondre. Encore Merci.

      Supprimer
  13. Bonsoir LadyBirdr ! tout d'abord merci beaucoup pour tous ces tuto, ils sont très utiles!
    J'ai une petite question. J'aimerai centrer ma date, mais je ne trouve pas comment faire :/ Peux tu m'éclaircir ?
    Bonne soirée !

    RépondreSupprimer
    Réponses
    1. Bonjour Mel,
      Comme tu as changé l'apparence de la date sur ton blog, je ne peux pas t'éclairer :/

      Supprimer
  14. J'ai mis mes articles en grille comme dans ton tutoriel. Tout s'est très bien passé. Puis après, j'ai modifier l'apparence des dates comme je le voulais sur la grille. Encore une fois, 0 problème.
    Ensuite, je suis passé a la modification des dates dans mes articles : ils sont positionnés comme je le voulais mais lorsque je vais sur mon blog : sur la grille : les dates des articles ne sont plus centrés. Comment faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Audrey,
      Tu as dû ajouter une ligne de code pour les dates des articles qu'il n'y a pas dans le code des dates des miniatures.
      Il te suffit de rajouter la même ligne en changeant la valeur. Par exemple si tu as ajouté un espace avec padding ou margin alors qu'il n'y en avait pas sur les dates des miniatures, alors rajoute :

      margin: 0;

      ou

      padding: 0;

      ou équivalent. Le but est de corriger la modification que tu as apporté sur la page d'article ;)

      Supprimer
  15. Merci beaucoup pour tes brillants tutoriels ! Tu aides beaucoup et en plus j'en apprends tous les jours sur le code HTML grâce à toi ! :D Je te fais un peu de pub sur ma page facebook car tu le mérites ! Bisous ♥

    RépondreSupprimer
  16. Je n'arrive pas a mettre le titre et la date sur la même ligne :(

    RépondreSupprimer
    Réponses
    1. Bonjour Margaux,
      Sur mon ordi, tes dates sont à droite est-ce normal ?
      Si oui, il te suffit de rajouter ces 2 codes :

      top: 44px; /* Valeur positive déplace l'élément vers le bas */
      position: relative; /* Important */

      avant le signe } du code commençant par :

      .date-header span {

      Et voilà ;)

      Supprimer
  17. Ouiiiiii c'est bon ! Merci beaucoup.

    RépondreSupprimer
  18. Coucou,

    Un grand merci pour tout tes tuto ! J'ai fait ce que tu as precise dans ton post pour changer l'apparence de la date des articles, cela marche cependant je n'ai pas la ligne du bas pour fermer le rectangle… sais tu ce que je dois faire?

    Merci beaucoup d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Chloe,
      Rajoute le code suivant sous celui donné dans ce tutoriel :

      h2.date-header {
      margin-bottom: 10px !important;
      }

      Supprimer
  19. GENIAL ! merci beaucoup ! ça marche :)

    et, désole de ma réponse tardive !
    belle journée et weekend !

    RépondreSupprimer
  20. Salut,

    Merci pour la clarté de tes tutos et pour prendre le temps de répondre à tous nos problèmes!
    Cependant, je rencontre deux problèmes avec mon blog.
    Premièrement, en ce qui concerne la date qui est affiché en dessous du titre de l'article car elle s'affiche "à l'anglaise" et sur le modèle "format de date et d'heure" et non sous "format des en-têtes de date".
    Deuxièmement, j'aimerai changer le "read more" de mes articles en "lire la suite" mais cela ne fonctionne pas (j'ai suivi ton tuto qui explique comment faire en allant dans "mise en page" et "articles du blog" et aussi en essayant de modifier à partir du code html mais je n'ai pas réussi).
    Je te laisse l'adresse de mon blog pour que tu puisses y jeter un coup d'oeil si tu as le temps! http://mathyle.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      Le problème vient du fait que tu as installé un thème qui modifie le code HTML de ton blog. A moins de modifier directement le code HTML de ton thème tu ne peux pas changer ces éléments.

      Supprimer
    2. Merci pour ta réponse! Justement j'ai essayé de modifier le code html mais cela n'a pas fonctionné...

      Supprimer
    3. Si tu le souhaites, je peux le faire pour toi par prestation. Envoie-moi un message avec le formulaire de contact accessible sur la page Design ;)

      Supprimer
  21. Bonjour,
    J'adore ton blog, tes tutoriels m'aident beaucoup pour mon blog !
    J'ai changé le design de mon blog récemment, maintenant la date des articles se trouve en-haut de l'article, avant le titre. Mais avant la date était présentée sous l'article de cette façon : "Rédigé par auteur, le date à heure". Je voudrais retourner à cette présentation de la date mais ne me rappelle plus comment j'avais fait. Aurais-tu une idée pour m'aider ?

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Tiphaine,
      Peux-tu m'envoyer le lien vers ton blog pour que je puisse voir ?

      Supprimer
    2. Oui bien sûr le voilà : http://mesaventuresglobetrottesques.blogspot.fr/

      Supprimer
    3. Pour déplacer la date sous ton titre, il faut déplacer son code HTML sous le code HTML du titre. Je pense en faire un tutoriel car c'est pas évident à expliquer dans un commentaire ;)

      Supprimer
    4. Oui c'est bien ce qu'il me semblait mais j'étais un peu perdue. J'attends ce tuto avec impatience :)

      Supprimer
  22. Bonsoir, j'aurais aimé mettre le titre en dessous du titre de mes articles mais rien ne se passe. Tu saurais comment faire? J'attends ta réponse avec impatience :)

    RépondreSupprimer
    Réponses
    1. Bonjour Lily,
      Veux-tu dire déplacer la date sous le titre des articles ? Si oui, alors il faut modifier le code HTML du blog. C'est déjà sur ma (longue) liste de tutoriels à faire ;)
      Si tu as d'autres idées de tutoriels n'hésites pas à utiliser ce formulaire ;)
      http://ladybirdr.blogspot.fr/p/suggestion-de-tutoriel.html

      Supprimer
  23. Bonjour ,
    Merci pour ton blog et ce chouette tutorial , j ai essaye de coller ton example mais j ai un petit soucis. je n ai pas pu trouver le code :".date-header span { " j ai du le rajouter moi meme mais quand je sauvegarde ,y'a ce message qui apparait:

    Error parsing XML, line 2, column 6: The processing instruction target matching "[xX][mM][lL]" is not allowed.

    Que dois je faire?
    Cordialement!

    RépondreSupprimer
    Réponses
    1. Bonjour Josiane,
      C'est très bizarre. Tu as dû ajouté ou supprimé un morceau de code sans faire exprès. Retourne sur la page Modèle, tu devrais avoir un message d'alerte te demandant de sauvegarder. Continue sans sauvegarder et retournes sur la page Modifier le code HTML pour recommencer la manip ;)

      Supprimer
  24. Salut Catherine.
    J'ai télécharger un template pour mon blog, il s'affiche bien mise à part les dates des articles. En effet, à la place de la date est écrit "undefined undefined, undefined" j'ai essayer de modifier le paramètre d'affiche de la date (version française, anglophone, etc..) mais rien n'y fait. Aurais-tu une idée ? Peut-être dois-je trafiquer le code html/css... Merci pour ton aide. Je suis un peu triste que tout fonctionne sauf la date :(...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu reçu un document d'instructions pour l'installation de ton thème ? J'ai déjà vu ce problème quelque part et il me semble que la réponse était donné dans des explications lié au template.

      Supprimer
  25. Bonjour,
    j'aimerai faire comme toi, mettre la date sous le titre de l'article c'est possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible mais il faut modifier le code HTML du blog.
      J'en fais un tuto promis ;)

      Supprimer
    2. En attendant ton tutoriel, j'aimerai au moins centrer la date mais cela ne fonctionne pas, j'ai même essayé avec !important
      (sur ce blog http://blogtestmiss.blogspot.fr/)

      Supprimer
    3. Ça ne marche pas sur ce code CSS, il faut appliquer l'alignement à son contenant :

      .date-header {
      text-align: center;
      }

      Supprimer
  26. Bonjour Catherine !
    Est- il possible de modifier la taille des titres des posts indépendamment de ceux qui figurent sur les miniatures en grille (j'ai suivi ton tuto) ?
    L'idée ça serait de les mettre en plus grand car ils font riquiqui sur la page de chaque article, mais de conserver leur taille sur l'affichage des miniatures... Je ne sais pas si c'est très clair ce que je dis ha ha

    http://pasdethique.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Elo,
      Les codes CSS de l'affichage en miniature ne s'appliquent qu'aux miniatures. Tu peux donc modifier les titres de tes articles indépendamment. Le plus simple est d'aller dans Modèle > Personnaliser > Avancé. Ici tu peux modifier les polices des principaux éléments de ton blog, dont les titres des articles ;)

      Supprimer
  27. Bonjour !

    Merci pour ce tuto qui a l'air génial, mais impossible de l'appliquer sur mon blog, rien ne se passe !

    Aurais-tu une idée ?

    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est normal, le problème vient de ton thème. Mes tutoriels sont basés sur les thèmes de base de Blogger. Les thèmes téléchargés ont un code HTML différent, donc les codes CSS à utiliser sont différents aussi. Désolée :/

      Supprimer
  28. Bonjour ! Tout d'abord merci énormement pour tout les tutoriels que tu nous donnes.
    J'ai une petite question:
    Je souhaiterais mettre la date et les libellés en dessous de mon titre d'article. Comment puis-je faire?
    Merci de ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour cela il faut modifier le code HTML de ton thème. C'est beaucoup trop compliqué à expliquer par commentaire ou email, mais l'idée est noté sur ma liste de tutoriels à faire ;)

      Supprimer
  29. Hello!
    Je suis désolée mon post n'a pas vraiment de rapport... J'ai un petit soucis au niveau de la taille de ma police dans les articles. Actuellement je la règle en "normal" avec la police Time (sous blogger) mais lorsque je publie mon article, l'écriture est très petite... je suis déjà allée dans Personnaliser > Avancé > Texte de la page et j'ai modifié la taille mais rien n'y fait...
    Je te laisse le lien de mon blog pour que tu puisses voir ce que ça donne sur mon article test
    http://www.lusineaplumes.com/

    merci beaucoup
    Laetitia

    RépondreSupprimer
    Réponses
    1. Bonjour Laëtitia,
      As-tu réussi à régler le problème ?

      Supprimer
  30. Bonjour,
    Je viens de découvrir votre site , il est super.
    J'ai un petit soucis que je n'arrive pas a résoudre.
    Sous la date de publication de mon article il y a des pointillés, mais exclusivement avec Mozilla Firefox, pas avec Explorer , comment les supprimer ???
    Si vous avez une réponse je suis preneur
    Mon blog est
    http://blogdesergio63.blogspot.fr/

    Merci d'avance
    Sergio63

    RépondreSupprimer
    Réponses
    1. Bonjour Sergio,
      Je ne vois aucun pointillé sous tes dates. J'ai vérifié sur Mozilla, Explorer et Chrome. As-tu réglé le problème ?

      Supprimer
  31. Bonjour, chouette tuto, comme toujours, je cherche à mettre la date avec les libellés en-dessous de l'article, est-ce réalisable ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible en modifiant le code HTML de ton thème. C'est délicat à réaliser car on touche directement à la structure du blog. Mais je note sur ma liste de tutoriels à faire ;)

      Supprimer
  32. Bonjour,
    Oui j'ai réglé le problème en affichant la dte en haut à guche de l'article.
    J'ai une autre question, j'aurai voulu qu'il y ai moins de marge au fond du gadget, c'est a dire sous le texte ou l'image.
    Car j’arrive a diminuer en haut "la j'ai partagé", mais je ne trouve pas pour le bas.
    Merci d'avance
    Sergio63

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour modifier la marge autour des gadgets tu peux utiliser ce code CSS :

      aside .widget {
      margin-top: 30px; /* Marge au-dessus des gadgets */
      margin-bottom: 30px; /* Marge en-dessous des gadgets */
      }

      A coller avant la ligne :

      ]]></b:skin>

      Supprimer
  33. Bonjour,
    Merci pour le code, mais en vérité je pense que pour résoudre mon problème il me faut modifier l'écart entre les gadgets.
    Existe t'il un code pour rapprocher les gadgets.
    Merci d'avance
    Sergio63

    RépondreSupprimer
    Réponses
    1. Bonjour Sergio,
      Tu peux rapprocher tes gadgets avec ces codes CSS. Il suffit de réduire la valeur de 30 pixels ;)

      Supprimer
  34. Bonjour,
    Il y a quelques jours je vous ai envoyé un messages pour des marges, j'ai résolu le problème.
    Mais j'ai une autre question a vous demander.
    Je voudrais un code"si c'est possible" pour avoir les coins arrondi de mes images sur les articles.
    Merci d'avance
    Sergio63

    RépondreSupprimer
  35. Bonsoir,
    Désole pour ce nouveau message, mais c'est pour vous signaler que j'ai trouvé pour les coins arrondis de mes images.
    Encore bravo pour votre site.
    Toutes mes excuses
    Sergio63

    RépondreSupprimer
  36. Bonjour,
    J'ai encore un petit soucis, je m'explique
    J'ai créé un livre d'or avec une page et je voudrais que mes commentaires récents soit en premier et non l'inverse, c'est adire que lorsque l'on ouvre le livre d'or le dernier commentaire soit le premier en haut de la page.
    J'ai cherché sur le net et je n'ai pas trouvé.
    Merci d'avance
    Sergio63

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement je ne pense pas que cela soit possible. Les commentaires sur Blogger sont chargés par Blogger. Ils ne sont pas stockés directement sur le blog :/

      Supprimer
  37. Coucou, j'adore tes tutos et ça m'aide beaucoup comme je débute sur mon blog mais sur celui-ci je n'ai pas la même chose que toi.
    A la place de .date-header span { j'ai :
    h2.date-header {
    font: $(date.font);
    color: $(date.text.color);
    }
    Du coup je ne sais pas comment faire :/

    Merci d'avance, Céleste

    RépondreSupprimer
    Réponses
    1. Bonjour Céleste,
      Ce n'est pas grave, ce code marche aussi bien. Utilise celui que tu as ;)

      Supprimer
  38. Réponses
    1. Bonjour Amira,
      Retrouve ton code CSS commençant par :

      h2.date-header {

      Juste après cette ligne colle :

      text-align: center;

      Ensuite, cherche ton code CSS suivant :

      .date-header span {
      color: #828988; /* couleur du texte */
      font-family: Trebuchet MS; /* police */
      font-size: 9px; /* taille du texte */
      letter-spacing: 1px; /* espace entre les caractères du texte */
      border-style: none; /* style de la bordure */
      padding: 5px; /* espace entre la bordure et le texte */
      float: center; /* définit la disposition à gauche des titres */
      margin-right: 10px; /* espace entre la date et le titre */
      }

      Remplace les 2 dernières lignes :

      float: center; /* définit la disposition à gauche des titres */
      margin-right: 10px; /* espace entre la date et le titre */

      Par :

      margin: 0; /* espace entre la date et le titre */

      Et voilà ;)

      Supprimer
  39. Bonsoir, j'ai essayé de modifier l'apparence de la date de mes articles mais le rendu est totalement inattendu !
    Voici le lien de mon blog, qui vous permettra peut-être de voir d'où vient mon erreur.
    http://em-avie.blogspot.fr/
    Je vous remercie d'avance,
    Emma

    RépondreSupprimer
    Réponses
    1. Bonjour Emma,
      Les codes de tes miniatures entrent en conflit avec les codes des articles.
      Retrouve les codes CSS de tes miniatures. Cherche ce code :

      h2.date-header {
      bottom: 54px;
      z-index: 999;
      left: 1px;
      position: absolute;
      width: 100%;
      text-align: center; /* Alignement Dates : left / center / right */
      }

      Ajoute ces lignes avant le signe } :

      border-radius: 0 !important;
      display: initial;
      top: auto !important;
      background: transparent;
      height: initial;

      Ensuite cherche ce code :

      .date-header span {
      color: #ffffff; /* Couleur Dates */
      background: transparent;
      letter-spacing: 3px;
      font-size: 11px; /* Taille Dates */
      font-weight: 100;
      font-family: 'Verdana'; /* Police Dates */
      }

      Ajoute les lignes suivantes avant le signe } :

      width: auto;
      height: auto;
      margin: 0;
      padding: 0;
      position: relative;

      Ensuite ajoute le code suivant après le code CSs ci-dessus :

      .date-posts .post-header {
      display: none;
      }

      Par contre, tu as un petit bug d'affichage à cause de tes articles qui sont postés à la même date. Blogger regroupe les articles postés le même jour en colonne. Pour éviter ceci change la date de publication de tes articles ;)

      Supprimer
  40. Hello ! Tout d'abord merci énormément pour tous tes tutoriels ! J'ai un petit problème avec la disposition de la date. En effet, après avoir bien rentré le même code, la date ne s'affiche pas à gauche de mes titres.
    Voici le lien de mon blog qui te permettra, je l'espère, de trouver mon erreur :https://my-cute-nails.blogspot.fr/
    Merci d'avance :)
    Emmy

    RépondreSupprimer
    Réponses
    1. Bonjour Emmy,
      Je vois que tu as opté pour un autre affichage ;)

      Supprimer
  41. Bonjour,

    Saviez-vous comment on enlever carrément la date et l'heure?

    Merci d'avance, et merci aussi pour tout vos conseils du dessus

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu devrais pouvoir supprimer la date et l'heure dans les paramètres du blog. Va dans Mise en Page, clique sur Modifier sur le gadget Articles du blog. Décoche la date et l'heure et enregistre ;)

      Supprimer
  42. Bonjour,
    Je ne sais pas ce que j'ai fait de faut, mais les dates ont disparues...
    Savez-vous d'où vient ce problème ?
    merci d'avance pour votre réponse :p

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tes dates sont cachés par le fond de tes articles. Il suffit d'ajouter un petit code qui les force à apparaître par dessus.
      Retrouve le code CSS commençant par :

      h2.date-header {

      Avant le signe } colle :

      z-index: 99999;

      Et voilà ;)

      Supprimer
  43. Oh merci beaucoup ! Je commençais vraiment à croire que je n'allais plus les retrouver... :)

    RépondreSupprimer
  44. Bonjour,
    Ton blog m'a bien aidé (et les commentaires aussi). Une vraie mine d'infos !
    Merci beaucoup ♥

    www.apoca-lipsticks.blogspot.com

    RépondreSupprimer

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

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

Newsletter

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