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


Ayant des problèmes de chargement des commentaires trop nombreux sur l'article original, je vous invite à laisser votre commentaire ici :)

Autres articles

373 commentaires:

  1. Bonjour !

    J'ai bien réussi à tout mettre en page, le seule problème est que plus personne ne peut commenter et j'ai fait exactement ce que tu as dit dans ton article, ainsi que dans les commentaires car j'ai vu que je n'étais pas la seule. Si tu peux m'aider stp, car c'est assez embetant que mes lectrices ne peuvent pas commenter... En tout cas merci beaucoup pour ton article, depuis le temps que je voulais le faire ! Bisous à toi et bon weekend :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,
      C'est un problème lié à Blogger car ajouter le code CSS n'affecte pas les commentaires.
      As-tu bien fait une sauvegarde de ton thème avant de faire les modifications ? Si oui, peux-tu l'appliquer à ton blog en allant dans Modèle > Sauvegarder/Restaurer. Cliques sur Choisissez un fichier et sélectionne le ficher .xml de ton thème sauvegardé.

      Si les commentaires ne reviennent pas, cliques sur Accéder au widget en haut de la page et sélectionne Blog1.
      Tu devrais tomber sur un code qui ressemble à :

      <b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

      Remplaces Blog1 par Blog2. Sauvegardes. Puis changes à nouveau Blog2 en Blog1, et sauvegardes.

      Dis-moi ce que ça donne.

      Supprimer
  2. Bonjour Catherine :)
    Merci beaucoup pour ce tuto vraiment très pratique, je l'ai appliqué pour mes libellés mais j'ai quelques petites questions ^^
    Les titres de mes articles ne s'affichent pas en entier (j'ai essayé de réduire la taille mais ça n'améliore pas vraiment^^), est-ce que tu aurais une petite astuce pour qu'ils s'affichent complètement? :)
    Et est ce qu'il est possible de centrer les images? (en mettant "center" quelque part)^^
    Et dernière petite question: j'ai ajouté le bouton Pinterest à mes images sauf que du coup, il s'affiche en énorme sur mes miniatures :-S Tu crois que je devrais le supprimer tout court ou il y a une solution?
    Merci beaucoup d'avance pour ton aide et ton temps Catherine, merci merci merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Claire,

      Malheureusement avec cette méthode simple qui n'utilise que du CSS, on est limité. On ne peut pas facilement faire apparaître tout le titre, ni centrer les images :/
      Tu peux augmenter la taille de la zone des titres mais du coup, quand tu as un petit titre il se retrouve perdu dans un grand espace vide. Pas très joli ^^

      Par contre si tu veux, je propose une méthode différente pour afficher les articles en miniature dans mes designs. Comme elle demande de modifier le code HTML et se fait au cas par cas, je la propose en prestation. Envoi-moi un petit message via la formulaire de contact (page Design) si tu es intéressée ;)

      Supprimer
  3. Bonsoir, j'ai utilisé la version 1! Aucun soucis mais j'aimerais un petit renseignement :)
    Peut-être que je t'en demande trop mais j'aimerais savoir si c'était possible que quand le lien (titre) soit survolé par la souris il puisse devenir une image? Voilà je te fais de gros bisous et tes tutos me servent beaucoup :)

    RépondreSupprimer
    Réponses
    1. Bonjour laëtitia,
      C'est possible en jouant sur le CSS. Ajoutes le code suivant au code CSS de ton affichage en miniature :

      h3.post-title.entry-title a:hover {
      color: transparent !important;
      content: url('http://adresse.fr/image.png'); /* Adresse URL de ton image */
      position: relative;
      top: 0;
      }

      Remplaces http://adresse.fr/image.png par l'adresse url de ton image. Tu peux utiliser la méthode expliquée dans mon dernier tutoriel pour créer une url ;) http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Supprimer
  4. Hello,
    En premier merci pour TOUS tes tutos grâce à toi j'ai pu me créer un blog qui petit à petit me ressemble:)
    J'ai suivi ton tuto et ça à plutôt bien marché mais le probléme c'est que les images sont décales dans la miniature. Tu saurais comment je peux arranger sa.
    Et petite demande en plus tu saurais comment on pourrais faire en sorte que le blog prenne toute la page( comme sur ton exemple de version), au lieu d'être centré.
    Merci d'avance pour ta réponse.
    Kisses :)

    http://beautyfauxpas.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux essayer de décaler les photos à gauche si tu le souhaites mais elles ne seront pas centrées avec cette méthode CSS.
      Trouves le code CSS de ton affichage en miniature suivant :

      .post-body img {
      width: auto;
      height: 270px;
      margin: 0;
      padding: 0;
      }

      Remplaces-le par :

      .post-body img {
      width: auto;
      height: 270px;
      margin: 0 0 0 -10px;
      padding: 0;
      }

      Remplaces -10px par la valeur de ton choix sachant q'une valeur négative déplacera tes images vers la gauche.

      Pour que le blog prenne toute la largeur, il faut augmenter la taille de ton blog dans Modèle > Personnaliser.
      De plus, tu peux supprimer la barre latérale dans cette même interface.

      Supprimer
    2. Au fait je t'ai mentionnée du coup dans mon nouvel article, vu que c'est grâce à toi que j'ai mon nouveau design :)

      Supprimer
  5. Merci beaucoup ça arrange quand même les images. Franchement j'aime vraiment ce que tu fais ça arrange énormément les personnes qui souhaites se lancer dans le blogging comme moi. Donc merciiiiiiiiiii :)
    Au fait je sais pas si tu le fera, mais est-ce-que tu arriverais a faire un tuto pour customiser la barre latérale, du genre nouvelle barre de recherche etc.
    Bon courage :)

    RépondreSupprimer
    Réponses
    1. Merci ^^
      C'est marrant que tu parles de barre de recherche, c'est mon prochain tutoriel prévu pour vendredi ! ;)

      Supprimer
    2. Comme quoi je tombe bien alors:)
      Par contre j'ai un petit souci mais je n'arrive plus a répondre aux commentaires en cliquant sur répondre. Tu serais à quoi c'est dû ?

      Supprimer
    3. C'est bizarre. Vas sur Modèle > Modifier le code HTML. Cliques sur Accéder au widget en haut de la page et sélectionne Blog1.
      Tu devrais tomber sur un code qui ressemble à :

      <b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>

      Remplaces Blog1 par Blog2. Sauvegardes. Puis changes à nouveau Blog2 en Blog1, et sauvegardes.

      Dis-moi ce que ça donne.

      Supprimer
    4. Non ça ne marche toujours pas le lien reste vide, comme s'il ne redirigeais vers rien.

      Supprimer
    5. C'est vraiment bizarre :/
      As-tu fais une sauvegarde de ton thème ? Si oui tu peux essayer de restaurer ton thème en cliquant sur Modèle > Sauvegarder/Restaurer et sélectionner ton fichier de sauvegarde.
      Sinon, je peux essayer de régler le problème pour toi mais par prestation car cela peut prendre du temps et j'ai d'autres projets planifiés.
      Si cela t'intéresse envoie-moi un message grâce au formulaire de contact (lien dans la page Design) pour réserver ta place dans mon planning ;)

      Supprimer
  6. Bonjour ! Merci encore une fois pour ce tuto !
    J'ai choisis la version , Les images et le titre semblent avoir bien fonctionner, le problème c'est la date : J'avais modifier pour que celle-ci soir sous forme ronde. Est ce que je dois modifier le code de la version 2 pour qu'elle devienne rectangle, ou est-ce que je dois reprendre l'autre tuto et tout remettre à zéro pour ensuite refaire mes articles en grille ?
    Merci d'avance pour ta réponse.

    RépondreSupprimer
  7. Finalement j'ai réussie à remettre la date en rectangle ! (En espérant que tu n'aies pas perdue de temps avec mon autre commentaire :/)
    Sauf que maintenant, lorsque je veux prévisualiser mon travail, voilà ce que ça me dit :

    "Impossible de charger l'aperçu du modèle : Erreur d'analyse XML, ligne 740, colonne 7 : The element type "style" must be terminated by the matching end-tag "< /style >".."

    J'ai rajouter des espaces entre < et le mot style, pour pouvoir publier le commentaire, sinon je ne pouvais pas..
    Je ne sais plus quoi faire..
    Merci de ton aide par avance..

    RépondreSupprimer
    Réponses
    1. Bonjour, il y a un problème dans ton code, il manque un bout de code mais je ne peux pas te dire ce que c'est car il faut voir ton code HTML, désolée :/

      Supprimer
    2. J'ai finalement recommencé en téléchargent le modèle que j'avait avant de commencer le tuto :)
      Par contre, mes photos ne se centre pas..
      selonlapparence.blogspot.com

      Supprimer
    3. Bonjour,
      Tu peux essayer de décaler les photos à gauche si tu le souhaites mais elles ne seront pas centrées avec cette méthode CSS.
      Trouves le code CSS de ton affichage en miniature suivant :

      .post-body img {
      width: auto;
      height: 290px;
      margin: 0;
      padding: 0;
      }

      Remplaces-le par :

      .post-body img {
      width: auto;
      height: 290px;
      margin: 0 0 0 -55px;
      padding: 0;
      }

      Remplaces -55px par la valeur de ton choix sachant q'une valeur négative déplacera tes images vers la gauche.

      Supprimer
  8. Bonjour! tout d'abord merci infiniment pour ton tuto, j'ai tout fait étape par étape et j'ai obtenu le grille mais dans celle ci il y a des places vides, disant entre les miniatures on trouve la place d'une autre miniature mais qui est vide et ça me donne l'impression que mon accueil n'est pas bien organisé. pouvez vous m'aider? merci encore une fois!

    RépondreSupprimer
    Réponses
    1. Bonjour Wafa,
      As-tu posté des articles le même jour ? Si oui c'est ce qui cause ce problème. Blogger regroupe par défaut les articles postés le même jour, qui vont apparaître en colonne ce qui créé des espaces blancs. Pour facilement régler ce problème tu peux modifier la date de tes articles sur la page de modification des articles en cliquant sur Date de publication à droite de l'écran ;)

      Supprimer
    2. Merci Catherine!!!
      J'avais le même problème. J'ai cherché par moi même mais IMPOSSIBLE de trouver. Et là hop hop en 2sc tu nous donnes la solution! MERCI d'être aussi dispo sur les commentaires. Et encore merci pour tes fabuleux tutos!!

      Supprimer
  9. Bonjour Catherine,
    Comme à l'accoutumé, je te remercie pour ces nombreux tutos qui nous aident tous et toutes à faire des blogs qui nous ressemblent !!
    Moi j'ai un petit soucis sur mon blog. Le thème de celui-ci inclut déjà que les articles soit sous forme de vignette. J'ai fait le choix de ne mettre que 6 articles par page, de fait il faut cliquer sur la petite flèche en bas à droite des articles pour aller sur la page suivante... Sauf que cette petite flèche, bah elle n'est pas cliquable, et je ne sais pas pourquoi. La flèche du milieu, qui renvoie vers le haut de page marche très bien, mais celle là bah rien :( . C'est embêtant, surtout pour ma page d'accueil que je ne souhaite pas charger comme une mule (pour l'onglet Norvège, j'ai mis à 9 le nombre d'articles en attendant que le problème soit résolu).

    Saurais-tu m'aider à fixer ça ? J'avoue avoir essayer de fouiner dans le html, mais y a trop de choses qui me dépassent, je ne sais pas comment associer cette flèche à un envoie sur la next page.

    Lien de mon blog : http://lapprentie-baroudeuse.blogspot.fr/

    Autre question, depuis que ton design a changé, je vois que l'onglet "prestations" a disparu. Tu as arrêté ?

    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Erica,

      Je t'ai trouvé un moyen de contourner le problème. C'est du bidouillage mais ça semble fonctionner.

      Remplace ton code CSS suivant :

      #blog-pager-older-link, #blog-pager-older-link a {
      background: url(http://3.bp.blogspot.com/-tbzf4Ulntl0/UPC0ySykCuI/AAAAAAAAAa4/pvLOSscnlKs/s1600/post-navi.png) no-repeat right top;
      float: center;
      width: 26px;
      height: 26px;
      text-indent: -9999px;
      }

      Par celui-ci :

      #blog-pager-older-link, #blog-pager-older-link a {
      background: url(http://3.bp.blogspot.com/-tbzf4Ulntl0/UPC0ySykCuI/AAAAAAAAAa4/pvLOSscnlKs/s1600/post-navi.png) no-repeat right top;
      width: 26px;
      height: 26px;
      text-indent: 0;
      color: transparent;
      }

      Ma page prestations à été remplacé par ma page design, je n'ai pas arrêté ;)

      Supprimer
    2. En effet ca marche :D !!! Merci beaucoup. En revanche, maintenant j'ai le même problème dans l'autre sens, c'est la fleche précedente qui n'est pas cliquable !! J'ai compris ou faire les changements :

      #blog-pager-newer-link, #blog-pager-newer-link a {
      background:url(http://3.bp.blogspot.com/-tbzf4Ulntl0/UPC0ySykCuI/AAAAAAAAAa4/pvLOSscnlKs/s1600/post-navi.png) no-repeat left top;
      float:center;
      width:26px;
      height:26px;
      text-indent:-9999px;

      Et j'ai réussi à rendre cette fleche cliquable, sauf que je n'ai plus le petit dessin de la fleche, c'est maintenant écrit "articles plus anciens" et "articles plus récents" donc je pense avoir la mauvaise methode (ou du moins les mauvais chiffres) !! As-tu une idee du pourquoi du comment ?

      Supprimer
    3. Bonjour Erica,
      Oui c'est bien ce code qu'il faut modifier. Remplace la dernière ligne :

      text-indent:-9999px;

      Par

      text-indent: 0;
      color: transparent;

      Attention à ne pas supprimer le signe } qui ferme le code CSS ;)

      Supprimer
  10. Bonjour,
    J'ai essayé de mettre mes articles en miniatures selon la version 2, mais je ne comprends pas pourquoi les photos ne sont pas de la même grandeur. Alors que je les ai toutes configuré de la même taille ... certaines sont même coupées. Aurais-tu une idée de quoi cela peut venir ?
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Emma,
      Remplace ton code suivant :

      .post-body img {
      width: auto;
      height: 270px; /* Hauteur des images */
      margin-left: 1px;
      padding: 0;
      }

      Par celui-ci :

      .post-body img {
      width: 100%;
      height: auto;
      margin-left: 1px;
      padding: 0;
      }

      Tes photos rempliront le cadre des miniatures. Mais elles seront forcément coupées si elles n'ont pas les mêmes proportions que le cadre.

      Supprimer
  11. Bonsoir,
    Tout d'abord merci pour tous tes tutos qui sont toujours aussi clairs et complets, j'ai enfin un blog qui me ressemble et j'ai réussi à tout faire toute seule grâce à toi !
    Ce tuto m'intéresse beaucoup mais seulement pour mes catégories. J'aimerais qu'en cliquant sur une catégorie dans mon menu les articles s'affichent en miniature, est-ce possible ?
    Autre question un peu HS, j'aimerais que mon image d'en-tête soit de la largeur de l'écran et donc pas seulement du corps de mon blog, pourrais-tu m'expliquer comment faire ?
    Merci encore pour ta patience :)

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,

      Pour l'appliquer seulement à tes pages de catégories/libellés colle le code de la version de ton choix après la ligne :

      </head>

      En rajoutant 2 lignes de code.
      1- Au-dessus de la ligne suivante :

      <style type='text/css'>

      Ajoutes :

      <b:if cond='data:blog.searchLabel'>

      2- En-dessous de la ligne suivante :

      </style>

      Ajoutes :

      </b:if>

      Voilà :)

      Pour l'en-tête à 100% de largeur, c'est un tutoriel que j'ai prévu de faire ;)

      Supprimer
  12. Bonjour Catherine, comment fait on pour décaler un peu plus vers le bas le lien "lire la suite" qui est sur mon cas trop coller à la date ? merci beaucoup !!!!

    RépondreSupprimer
    Réponses
    1. Bonjour Vanessa,

      Remplace le code suivant du code CSS de tes articles en miniature :

      h2.date-header:before {
      display: block;
      position: absolute;
      height: 43px;
      width: 100%;
      content: '';
      background: #BBBBBB;
      bottom: -24px;
      left: -1px;
      z-index: -1;
      }

      Par :

      h2.date-header:before {
      display: block;
      position: absolute;
      height: 43px;
      width: 100%;
      content: '';
      background: #BBBBBB;
      bottom: -15px;
      left: -1px;
      z-index: -1;
      }

      Et le code suivant :

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

      par :

      .date-header span {
      color: #ffffff;
      background: transparent;
      letter-spacing: 3px;
      font-size: 11px;
      font-weight: 100;
      font-family: 'Verdana';
      top: -5px;
      position: relative;
      }

      Et voilà ;)

      Supprimer
  13. Bonjour,

    Je repose ma question ici du coup vu que je suis au bon endroit ah ah
    Comment puis-je faire pour que les visiteurs de mon blog voient les articles s'afficher en miniature quand ils cliquent sur les archives ? Est-ce que je peux faire le même procédé que pour la partie Catégories / Libellés comme tu l'as expliqué pour Pauline ? ;)

    Bonne soirée, et merci encore pour ton aide !
    Berry Cherry Beauty

    RépondreSupprimer
    Réponses
    1. Bonjour Berry Cherry,
      Oui tu peux faire comme expliqué à Pauline en utilisant le code suivant :

      <b:if cond='data:blog.pageType == "archive"'>

      à la place de :

      <b:if cond='data:blog.searchLabel'>

      Supprimer
  14. Bonjour Catherine, encore moi, du coup je ne sais pas si c'est à cause de ce modèle mais je n'ai plus le bouton "j'aime" de Facebook sous mes articles, je pense avoir bien installé le code (perso les boutons de partage déjà présents ne m'intéresse pas) d'après toi, il y a moyen de l'obtenir quand même ce bouton "j'aime" avec ce modèle ? merci

    RépondreSupprimer
    Réponses
    1. Bonjour Vanessa,
      Avec mon tutoriel pour l'affichage en miniature des articles, le pied des articles est caché sur la page d'accueil, c'est donc normal que ce bouton ne s'affiche plus.
      Par contre, le tutoriel n'affecte pas les pages des articles, donc si ce bouton à disparu de la page des articles ce n'est pas normal :/
      Je peux essayer de regarder d'où vient le problème si tu veux, mais par prestation. Si cela t'intéresse, envoie-moi un message avec ce formulaire : http://ladybirdr.blogspot.com/p/formulaire-de-contact.html

      Supprimer
    2. ah :/ ça dépend du prix de la prestation... ceci dit les boutons de partage de blogger ne s'affiche pas non plus :(

      Pour la page d'accueil pas de souci, j'ai bien compris que c'était caché, je parlais bien de la page des articles ;)

      Supprimer
  15. Bonjour !
    Alors je t'explique.
    Je voudrais que le première article de mon blog soit en entête (seul)
    et qu'à la suite, lorsque l'on descend mes articles soit en colonne
    Est-ce possible ? Si oui commennt faire ?
    je te donne un exemple pour que tu visualise mieux :) ici : http://www.popandsoda.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      C'est possible, mais cela demande d'ajouter un code pour générer le dernier article publié, puis de cacher le premier article de la liste d'articles.
      C'est compliqué à expliquer comme ça. Mais c'est une prestation que je peux réaliser pour toi. En plus du premier article en en-tête, je peux utiliser une autre méthode que celle de mon tutoriel pour afficher tes articles en grille. Cette méthode modifie directement le code HTML du thème, mais est plus flexible et personnalisable. Par exemple, on peut afficher au choix :
      - la première image (avec un lien vers l'article automatique)
      - le titre (en entier)
      - la date
      - les libellés
      - un extrait de l'article
      - un bouton "Lire la suite" automatique (pas besoin d'insérer de marqueur d'expansion)
      - le nombre de commentaires
      - les boutons sociaux

      Si cela t'intéresse, envoie-moi un message avec le formulaire suivant : http://ladybirdr.blogspot.com/p/formulaire-de-contact.html

      Supprimer
  16. Bonjour Catherine.
    Tout d'abord, merci beaucoup pour ce tuto qui me plaît beaucoup et m'aide beaucoup pour refaire peau neuve à mon blog.
    J'ai plus ou moins tout réussi à faire... Sauf que la date a disparue. Il me semblait l'avoir enlevé à une époque et je ne sais plus comment la remette :/
    Ensuite, je ne sais pas pourquoi, j'ai tout essayé, mais je m'arrive pas à mettre un fond derrière le texte "Plus d'information".
    Aurais-tu une solution ? Merci du temps que tu consacre aux commentaires et merci pour tout tes tutos :D
    Bisous

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Les problèmes viennent du fait que tu as supprimé la date. Il faut la rajouter à nouveau mais pour cela il faut modifier le code HTML de ton blog. Je peux le faire pour toi si tu le veux mais par prestation. Si cela t'intéresse, envoie-moi un message via ce formulaire : http://ladybirdr.blogspot.com/p/formulaire-de-contact.html

      Supprimer
  17. Bonjour

    Cela fonctionne seulement sous un modèle simple de blogger?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le tutoriel à été créé avec le modèle simple de Blogger. Tu peux l'ajouter à un autre thème mais visuellement, ce sera différent sur un autre thème :/

      Supprimer
    2. Cela ne fonctionne pas avec mon template j'ai juste une image au centre les unes derrières les autres. Pas de titre rien ... C'est incompatible dommage car visuellement c'est superbe.

      Supprimer
    3. J'ai finalement réussi a faire une entourloupe , en bidouillant a voir sur le long terme si cela ne me génére pas de panne ailleurs toute façon j'ai sauvegardé mon modèle avant travaux au cas ou . J'ai réussi a installer la version 2 . En réussissant à faire ce que je voulais c'est à dire le résumé seulement sur la page d'accueil . Le résultat est superbe. A force de persévérance on y arrive ...

      Supprimer
  18. Bonjour,

    J'ai essaye la version 2, mais autant j'ai un article qui s'affiche correctement, autant le deuxième ne s'affiche absolument pas comme il faut, le texte déborde sur l'image et l'image n'a pas le même format, je dois changer le format de l'image ? ou modifier quelque chose dans le code?
    Merci, je suis un peu perdu dans tout ca, et ton blog m'aide beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu m'envoyer le lien vers ton blog pour que je puisse voir le problème ?
      Sans regarder je dirais qu'il faut que tu modifie la taille de tes images dans tes articles ;)

      Supprimer
  19. Bonsoir-bonsoir !

    Quel ressource ces tuto ! MERCI !!!
    J'ai mis mes articles en forme suivant la version 2 et depuis, je n'arrive qu'à avoir 7 articles visibles sur ma page principale...J'ai changé ce paramètre dans google dans la partie 'mise en page' et dans les paramètres de publication de blogger mais ça ne change rien...
    Est-ce que ça peut être dû à une mauvaise manip dans le code ?
    Merci infiniment !

    Marie / mon blog : http://radiobuisson.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Blogger limite l'affichage des articles sur la page d'accueil s'ils sont trop lourds (qu'ils contiennent trop de photos par exemple), pour limiter le temps de chargement de la page. Pour y remédier tu peux choisir de n'afficher que 6 articles sur la page d'accueil, pour éviter que le dernier soit tout seule sur la ligne. Ou alors, tu peux alléger tes articles en mettant moins de photos. Tu peux, par exemple, diviser un article en 2 parties (2 articles) ;)

      Supprimer
    2. Coucou Catherine, j'ai aussi ce problème, qui me rends folle soit dit en passant :) Du coup je compresse les photos au max, j'essaye d'équilibrer les articles, un court et un long...Bref c'est bien casse tête...Et malgré tout ça, parfois il n'y a peine que 4 ou 5 articles qui s'affichent. N'y a t'il pas une solution, une petite manip a faire pour régler ce soucis?
      Je le dis a chaque fois, mais j'ai envie de le répéter, Un grand MERCI pour tout tes chouettes tutos qui embellissent ma vie de Blogueuse :)

      Supprimer
    3. Bonjour Isisya,
      Effectivement il y a une solution.
      Blogger limite le nombre d'articles affichés par page s'ils sont trop lourds (trop de photos par exemple). Pour régler ce problème il faut ajouter des marqueurs d'expansion aux articles. Comme ça, Blogger ne chargera que ce qui se trouve avant le marqueur sur les pages d'index (dont l'accueil), et pourra afficher plus d'articles.
      Pour ajouter un marqueur d'expansion aux articles : http://ladybirdr.blogspot.com/2015/02/afficher-un-apercu-darticle-ajouter-et.html

      Supprimer
    4. Super je vais aller voir ça :)
      Merci merci merci !!!!

      Supprimer
  20. Bonjour, voilà j'ai un problème mon dernier article est décalé comparé aux autres... et dès que je publie un nouvel article tout se redécale à nouveau.. voici mon blog oiù il y a le problème http://redness-beauty.blogspot.fr/

    Merci beaucoup de m'aider!
    le blog est super ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cela peut venir de plusieurs choses :

      1 - Combien d'articles visibles max as-tu spécifié dans Mise en page > Articles du blog > Modifier, à la ligne "Nombre d'articles sur la page principale" ?
      Il faut que ce soit un nombre pair.

      2 - As-tu posté les articles le même jour ? Si oui, Blogger regroupe par défaut les articles postés le même jour en une seule colonne. Il te suffit de modifier la date de publication d'un des 2 articles ;)

      3 - Si tout cela ne marche pas, alors il se peut que tes articles soient trop lourds. Blogger limite l'affichage des articles sur la page d'accueil, s'ils contiennent trop de photos par exemple, pour limiter le temps de chargement de la page. Pour y remédier tu peux choisir d'afficher que 4 articles sur la page d'accueil, pour éviter que le dernier soit tout seule sur la ligne. Ou alors, tu peux alléger tes articles en mettant moins de photos. Tu peux, par exemple, diviser un article en 2 parties (2 articles) ;)

      Supprimer
  21. J'adore !!! Merci beaucoup pour tout tes articles ils m'ont beaucoup aidée !!

    Bisous

    RépondreSupprimer
  22. Bonjour Lady bird !

    Encore merci pour tout ces tutos aussi bien expliqué les uns que les autres.
    En pleine création d'un blog avec ma meilleure amie, c'est moi qui gère l'apparence du blog. Cependant j'ai suivi à la lettre tes explications, seulement la barre grise de la date est décalé sur la gauche par rapport à l'image et j'ai essayé de la décalé sur la droite j'ai réussi mais de l'autre côté impossible je ne sais pas quoi changer. De plus, le lien "lire la suite" est nommé par trois petits points je ne sais pas comment le renommé.

    Encore merci pour tout et gros bisous ma belle !

    RépondreSupprimer
  23. Déjà un immense merci pour ces tutos, je n'ai jamais touché au codage de ma vie et je comprends tes tutos ^^
    J'ai un problème avec la mise en page des colonnes, ça semble fonctionner à part pour un article qui reste bloqué tout seul à la première ligne, et je vois que la ligne de date n’apparaît pas.
    Mon blog: http://thewolfsshadow.blogspot.fr/
    Je voulais faire 2 colonnes mais je les voyais bien plus larges sur ton tuto que sur mon résultat... Pas seulement la largeur du cadre en fait, mais la largeur de la photo en miniature, elles sont différentes alors que j'ai mis toutes mes photos en taille "grand".
    Et j'ai un problème aussi avec la barre latérale (je crois?) car ça me fait une ligne à droite mais toutes les infos qui étaient dedans sont parties en bas de la page.
    Ça serait super gentil si tu pouvais m'aider, parce que j'ai bien tout suivi, tout le reste de ce que j'ai fait à fonctionné sauf ça...

    RépondreSupprimer
    Réponses
    1. Bonjour Tiffani,
      Pour le problème des colonnes, cela vient du fait que tu as posté des articles le même jour. Blogger regroupe les articles postés le même jour en une même colonne. Pour y remédier, tu peux changer la date de publication de tes articles, sinon il faudrait modifier le code HTML de ton blog ce qui est plus complexe.
      Pour la barre latérale, je la vois correctement de mon ordinateur :)

      Supprimer
  24. Il fallait le savoir pour les dates, c'est bizarre qu'ils les bloquent par date ^^ Merci beaucoup :)
    Oui, entre temps j'ai compris le problème, les gadgets dans la mise en page étaient partis en bas de page quand je testais la largeur du blog, rien de grave :)
    En tout cas, encore merci pour ces tutos et tes réponses à nos problèmes d'applications :)

    RépondreSupprimer
  25. Salut! Je suis tombée sur ton blog un peu par hasard il y a quelques semaines et je le trouve vraiment formidable! J'ai pu suivre facilement certains de tes tutos pour personnaliser mon blog, mais celui-ci me pose un petit problème.

    J'ai utilisé la version 2 pour mon blog, mais les articles n'apparaissent pas correctement:
    - malgré l'alignement au centre les dates apparaissent à droite de l'image
    - la partie inférieure des titres est coupée

    J'ai essayé de modifier au niveau du code, etc, mais je n'arrive pas à corriger le problème.

    Je te remercie d'avance pour ta réponse, et merci encore pour tes super tutos :)

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

      Supprimer
  26. Bonjour !!

    Tout d'abord mille merci pour cet article que j'ai trouvé via le guide du blogging HC !
    J'ai réussi avec la version 1 d'avoir 2 colonnes d'articles, comme je voulais.
    Seul hic, chez moi la bande blanche en bas de la miniature est vide, rien d'écrit dessus, le titre est au dessus de la miniature, complètement détaché, donc je ne comprends pas ? :s

    Je ne sais pas si le lien fonctionnera mais c'est pour illustrer mes propos afin que tu comprennes mieux !

    Je te remercie beaucoup par avance de ta réponse et du temps que tu prendras pour me répondre !

    http://www.servimg.com/view/10030021/5293

    A bientôt ! :)

    Sabrina

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

      Supprimer
  27. Salut ! Comme tout le monde je vais commencer par te remercier chaleureusement ! Tes tutos sont de très bonne qualité :) (T'as eu une formation html?)

    J'ai juste un p'tit souci sur ce dernier tuto, j'ai un lien "PLUS D'INFOS -->" qui s'affiche sur un seul de mes 4 articles, et en plus par dessus la date. Pourrais je le supprimer définitivement tout simplement ?
    Merci beaucoup :)
    Bonne continuation !
    http://lenormanditinerant.blogspot.fr/
    Flo

    RépondreSupprimer
    Réponses
    1. Bonjour Flo,
      Merci ^^ Non j'ai pas eu de formation en HTML, j'ai tout appris toute seule :)
      Oui tu n'es pas obligé d'afficher le lien lire la suite si tu ne le souhaites pas. Les lecteurs peuvent accéder à l'article par le titre de l'article et l'image, si tu as bien rajouté l'adresse de l'article sur l'image ;)

      Supprimer
  28. Hey ! Merci d'avoir pris le temps de me répondre :)
    Ma question sous entendait "Comment on fait ?" haha! Mais en fait j'ai trouvé tout seul, un peu par hasard je l'avoue :p
    Tandis que j'y suis, j'aurais aimé remplir complètement les 4 encarts de la grille à l'accueil comme ton tuto avec la première image de l'article (comme tu le tutorialises, sisi ça se dit), mais les encarts sont remplit qu'à la moitié ou au 3/4 avec l'image... une solution ? (http://lenormanditinerant.blogspot.fr/)
    Merci beaucoup,
    bonne continuation !
    Flo

    RépondreSupprimer
    Réponses
    1. Bonjour Flo,
      En fait j'ai expliqué comment faire dans le tutoriel pour le lien sur les images ;)
      Pour tes images qui ne prennent pas toute la largeur, remplace le code suivant de ton affichage en miniature :

      .post-body img {
      width: auto;
      height: 330px;
      margin-left: 1px;
      padding: 0;
      }

      Par :

      .post-body img {
      width: auto;
      min-width: 100%;
      height: auto;
      margin-left: 1px;
      padding: 0;
      }

      Et voilà ;)

      Supprimer
    2. Oups désolé j'ai pas vu :/ Merci encore ! =D

      Je suis allé z'yeuter weebly que tu connais certainement ! La conception est très intuitive et simple, mais en même temps la customisation du blog à partir du thème donné parait tendue ! En tout cas je n'ai pas trouvé de tuto comme les tient aussi bien fait, je reste donc sur blogger haha :p
      Bon courage pour les prochains tutos (j'ai hâte! :p)

      Supprimer
    3. UN MILLIARD de merci pour ta réponse et ta question du coup Le normand itinérant ! J'avais ce soucis de photos je m'y penchais depuis un moment sans trouvé la réponse !
      BREF MERCIIII GROS COMME CA !!! tu m’enlèves une épine du pied !
      Bon weekend !

      Supprimer
  29. Bonjour,
    Tout d'abord merci beaucoup! J'ai suivi beaucoup de tes tutos ces derniers jours et j'ai vraiment amélioré le design du blog grâce à toi.
    Par contre, j'ai un souci. Seulement deux de mes articles s'affichent sur ma page d'accueil...
    Est ce que tu aurais une idee de ce qui cause le problème?

    Merci d'avance.
    A bientôt

    Ed

    RépondreSupprimer
    Réponses
    1. Bonjour Ed,
      Blogger limite l'affichage des articles sur la page d'accueil s'ils sont trop lourds, pour réduire le temps de chargement de la page. Pour remédier à ce problème, essaye de sauvegarder tes photos "pour le web" avec un programme d'édition de photos. Essaye aussi de sauvegarder tes photos à la même largeur que tes articles (866pixels). Cela réduira la taille de tes images (en terme de poids et largeur), et allégera tes articles ;)
      Vérifies également que dans Mise en page > Articles tu as bien précisé plus de 2 articles à afficher sur la page d'accueil.
      Si cela ne marche pas, alors il faut mettre moins de photos par article.

      Supprimer
  30. ok, merci beaucoup, je vais regarder tout ca!

    RépondreSupprimer
  31. Bonjour,

    merci pour ce super tuto ! Je l'ai installé sur mon blog et cela fonctionne super ! Cependant, sur la page principale, mes miniatures sont encadrés par un cadre de couleur beige que je n'arrive pas à retirer. Je t'aurai bien envoyé un image pour que tu puisses voir exactement mais je n'ai pas ton mail donc je te donne l'adresse de mon blog (http://blogdemademoiselle.blogspot.fr).

    Je te remercie d'avance... beaucoup :),

    Aurore

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Ajoute la ligne suivante :

      border: none !important;

      Avant le signe } du code suivant de ton affichage en miniature :

      .post-outer {
      position: relative;
      }

      Comme ceci :

      .post-outer {
      position: relative;
      border: none !important;
      }

      Et voilà ;)

      Supprimer
  32. Bonjour Catherine,

    Tout d'abord, merci pour tous ces supers tutos que tu nous proposes !

    Souhaitant faire quelques changement graphiques sur mon blog, jai essayé d'intégrer la version 2. Tout fonctionne bien en apparence, cependant quand je clique sur l'image des articles, cela m'ouvre l'image en grand au lieu d'emmener vers l'article... Je te laisse voir par toi-même : http://mes-petites-tambouilles.blogspot.fr/

    J'ai farfouillé dans le code HTML mais je n'ai trouvé aucune solution. Sais-tu comment je peux régler cela ?

    Je te remercie d'avance pour ton aide.
    A bientôt,

    Delphine

    RépondreSupprimer
  33. Bonjour, merci pour tous tes tutoriels blogger ça m'a permis de vraiment enjoliver mon blog et je t'en suis très reconnaissante !
    Par contre, arrivée à ce tutoriel j'ai eu un petit soucis : en effet je voulais faire une grille de 2 articles en largeur sauf que ça n'en met qu'un seul et quand j'essaie d'en mettre 3, ça en met 2 mais avec un gros blanc sur la droite. Saurais-tu à quoi ce problème est dû ?

    Merci d'avance encore et encore !

    Et voici mon blog pour que tu puisses voir : http://showyourglitters.blogspot.be/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il faut rectifier la largeur des articles. Change le pourcentage de width du code de ton affichage en miniature suivant :

      .date-outer {
      display: inline-block;
      width: 47%;
      height: auto;
      overflow: hidden;
      margin: 0 5px -15px 5px;
      position: relative;
      vertical-align: top;
      }

      Pour 42%, comme ceci :

      .date-outer {
      display: inline-block;
      width: 42%;
      height: auto;
      overflow: hidden;
      margin: 0 5px -15px 5px;
      position: relative;
      vertical-align: top;
      }

      Et tu auras une grille sur 2 colonnes ;)

      Supprimer
    2. Oh merci beaucoup, tu es la sauveuse de mon blog ! :D

      Supprimer
  34. Bonjour Catherine,

    Finalement, j'ai trouvé comment faire pour le lien des images vers l'article ! En effet, j'ai sauté la partie où tu en parles dans le tuto... Du coup c'est résolu :)

    Merci beaucoup !
    A bientôt,

    Delphine

    RépondreSupprimer
  35. Hello !

    Alors , tout d'abord ... un GRAND merci pour tes tutos , qui m'aident à rendre mon blog plus joli <3
    Tes articles sont au top , bien expliqués , & simples à appliquer . T'es parfaite quoi !

    Ensuite , j'aurais deux petites questions .
    Je viens d'appliquer tes conseils pour mettre en miniature les articles , donc ça c'est bon nikel , tout va bien ( enfin jusque là je n'ai pas encore eu d'echos de problêmes ) .
    Par contre je voudrais savoir si il est possible d'afficher le nombre de commentaires & les libellés au niveau des miniatures ?
    & ensuite , est ce que tu saurais nous faire un tuto pour ajouter genre un " diapo " défilant avec genre les 3 derniers articles ou un truc du genre . Vois tu ce que je veux dire ?

    Merci encore ! Bisettes .

    http://annabellew.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Anabelle,
      Malheureusement avec la méthode proposée dans le tutoriel ce n'est pas possible. Dans ce tuto, on modifier seulement l'apparence des articles sans toucher au code HTML du blog. Pour ajouter les libellés, et les commentaires il faut modifier directement le code HTML du blog. Si cela t'intéresse je propose cette autre méthode en prestation, envoie-moi un message avec le formulaire de contact disponible sur la page Design ;)

      Supprimer
  36. bonjour !
    très bon article
    j'ai juste un problème .. une fois que j'ai terminé toutes les étapes
    que j'ai modifié mes articles pour qu'ils commencent tous par une photo..
    pas moyen d'afficher en 2 colonnes
    et des articles se perdent
    ils ne sont plus du tout visible sur le blog
    si tu pouvais m'aider à comprendre
    merci beaucoup pour ton aide en tout cas !

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

      Supprimer
  37. Merci pour cet article très très très utile encore une fois! J'adore le rendu!
    Cependant j'ai un petit souci de présentation ... j'ai relu l'article en long en large et en travers je n'ai pas trouvé d'info (je suis peut-être un peu miro aussi tu me diras ...) alors je me permets de te demander ici : J'aimerai bloquer le nombre de miniatures à un nombre précis, est-ce possible? Quand je clique sur mon blog, la première page affiche 7 miniatures, la seconde 8, et la troisième 4, et ainsi de suite .... J'aimerai le bloquer à 8 partout, pourrais-tu me dire comment je dois faire?

    Merci d'avance! Eloïse, de http://bigoudenblues.blogspot.fr/

    RépondreSupprimer
  38. Ok je crois avoir rectifié la donne (j'ai ajouté des marqueurs d'expansion après les photos même si j'ai le modèle 2, et ça a marché on dirait) mais cela dit, si tu sais (enfin si tu veux bien me dire lol parce que je ne doute pas que tu saches haha) comment modifier le nombre de miniatures affichées (donc le nombre de lignes en fait) je suis preneuse !! :) Merci!
    Eloise, de http://bigoudenblues.blogspot.fr

    RépondreSupprimer
  39. Ghaaa je viens de trouver encore (c'est directement dans l'onglet mise en page, et aperçu des articles) désolée pour le dérangement haha, j'ai tout trouvé seule, je réfléchirais à deux fois avant de poster des commentaires inutilement ;)
    Merci quoi qu'il en soit pour le tuto!!!

    RépondreSupprimer
    Réponses
    1. Pas de soucis, tant que tout marche ;)

      Supprimer
  40. Bonsoir,

    Je te relaisse un commentaire car je ne sais plus si je l'avais fait ou pas pour te dire que j'ai passé encore aujourd'hui plusieurs heures sur ces codes HTML et pas moyen de comprendre pour quoi je n'ai qu'une miniature qui s'affiche avec le titre à 3 km et la date pratiquement au milieu ! J'en perd mes cheveux !

    Tu pourrais m'aider ?

    http://testblogiamninis.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Ninis,
      As-tu essayé de rajouter un autre article test ? Car il semble manquer des codes HTML au flux d'articles de la page d'accueil. Peut-être parce qu'il n'y a qu'un article ?

      Supprimer
    2. Bonjour Ninis,
      As-tu essayé de rajouter un autre article test ? Car il semble manquer des codes HTML au flux d'articles de la page d'accueil. Peut-être parce qu'il n'y a qu'un article ?

      Supprimer
    3. Non j'ai essayé avec au début 3 article puis 2 et ensuite à nouveau 3 aujourd'hui en faisant attention aux dates et rien ne change, c'est l'article le plus récent qui apparaît bizarrement :/

      Supprimer
    4. Quand je regarde le code de ton blog il ne montre qu'un article alors qu'il devrait montrer une flux d'articles. As-tu touché au code HTML de ton blog ?
      Sinon vérifie que tu as bien mis plus d'un article à afficher dans les paramètres de ton blog.
      Le tutoriel pour afficher les articles en miniatures n'est que du code CSS il ne modifie pas le code HTML de ton blog. donc le problème ne vient pas de là mais directement du code HTML de ton blog.
      Tu peux aussi essayer de chercher le code suivant :

      <b:widget id='Blog1'

      Remplace Blog1 par Blog2. Sauvegardes et rechange Blog2 pour Blog1 et sauvegarde à nouveau.

      Supprimer
    5. Pour être sûr j'ai repris le template que tu avais créé au départ ( en décembre je pense ) et j'ai juste ajouté le CSS et pourtant cela ne marche toujours pas :(
      Je ne comprend pas..

      Supprimer
    6. Bonjour Ninis,

      Je n'ai plus accès à ton blog test :/
      Tu peux me donner accès en ajoutant mon adresse e-mail dans Paramètres > Basique > Autorisations. Comme ça le blog test reste privé mais je peux voir le problème ;)
      Ajoute l'adresse suivante : sylphid1820@gmail.com

      Supprimer
  41. Bonsoir Catherine !
    Tout d'abord un grand merci pour tout tes tutoriels bien pratique pour remodeler le design de nos blogs ! Tout est vraiment bien expliqué on y prend plaisir !

    J'ai opté pour la version numéro 1, que j'aimerais en deux colonnes sauf qu'en appliquant le code mes articles continuent à s'afficher les uns à la suite des autres.. De plus, mes images sont coupés et je n'arrive pas à régler le problème. Saurais-tu me guider? Merci beaucoup !

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Le problème vient de ton thème. C'est un thème de BloggerTemplate, le problème c'est que la structure du blog est différente d'un blog de base sur Blogger, le code donné dans mon tutoriel ne marchera pas avec ton thème. Désolée :/

      Supprimer
  42. Bonjour,

    Tout d'abord un grand merci et félicitations pour cet article.

    Je l'ai mis en version2 sur mon blog mais j'ai un souci avec les photos. Je les ai tout d'abord mises au format que j'avais récupéré (souvent plus grande que les 270px définis dans le code) puis ensuite au format 270px de hauteur. Dans les 2 cas mes photos est tronquées (réduites).

    Peux tu m'indiquer les consignes à suivre pour les dimensions des photos ?
    Quelle différence entre les 2 propriétés "height" entre ".post.hentry, .entry-content" et ".post-body img" ?
    Merci par avance de ton aide.

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

      Supprimer
    2. voici le lien de mon blog : http://rennesenfamille.blogspot.fr/

      Par exemple sur l'article "Écomusée du Pays de Rennes" (en bas de page d'accueil), j'ai un petit bout de mon image. Cette image sur l'article a pour dimension "653px × 270px" à savoir les 270px indiqués dans ton code (/* Hauteur des images */).

      Supprimer
    3. En regardant ton blog, la taille de l'encart des miniatures est de 366 pixels de large par 270 pixels de haut. Donc pour que les images entrent en entier dans l'aperçu elles doivent faire ces dimensions. Si une image est plus large ou haute elle sera coupée car sortira du cadre de l'aperçu ;)

      Supprimer
  43. Bonsoir j'ai un peu près réussi à faire ta présentation mais je ne sais pas comment faire des onglets, peux tu m'expliquer si c'est possible d'en créer? Voici mon blog:
    http://juliangotcreationbijouxandco.blogspot.fr


    Merci :) :$

    RépondreSupprimer
    Réponses
    1. Bonjour Julia,
      Que veux-tu dire par des onglets ?

      Supprimer
  44. Je suis au début du codage et j'ai juste changé la taille au 31 pour cent pour avoir 3 colonnes mais ça me fait ça ... Serais tu me dire pourquoi?http://ananasgivre.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Je suis allée voir ton blog et les articles s'affichent bien en 3 colonnes. Est-ce que tu as réglé le problème ?

      Supprimer
    2. Pblm regle pour ca mais jai dautre pblm je viens de t ecrire sur fb

      Supprimer
  45. Bonjour petit oiseau !
    Déjà merci, grâce à toi mon blog me ressemble et le trouve ce tutoriel vraiment à la hauteur de tout le monde. Cependant, sur mon blog (je suis sur blogger) je demande l'affichage de 10 article en page d'accueil et ça ne fonctionne pas. Que faire ? cela a-t-il un rapport avec cet HTLM ?
    Je t'embrasse.

    www.autourdechloe.com

    RépondreSupprimer
    Réponses
    1. Bonjour Chloé,
      C'est sûrement à cause de la taille de tes articles. Blogger limite l'affichage des articles sur la page d'accueil s'ils sont trop lourds (comportent trop de photos par exemple), pour réduire le temps de chargement de la page. Pour remédier à ce problème, il suffit d'ajouter des marqueurs d'expansion dans tes articles, après la première image par exemple. Cela créé une "coupure" dans ton article et Blogger ne chargera que ce qui se trouve au-dessus de cette coupure sur la page d'accueil ;)

      Supprimer
    2. Je vais de ce pas essayer cela & je te dis quoi. Merci pour cette réponse rapide en tout cas.

      Supprimer
    3. Un grand MERCI Catherine ! Car tout fonctionne parfaitement. Merci beaucoup.

      Supprimer
  46. Salut ! Merci pour tes explications toujours claires, tu m'as permise d'apprendre beaucoup de choses ! Je t'avoues que là je suis bloqué, j'ai tenté de faire la version 2 (comme je l'avais fait 2 fois auparavant sur deux thèmes blogger différents sans jamais avoir de problèmes) et là impossible, j'ai pourtant bien mis le code mais rien ne s'affiche sur mon site... http://www.larry-cow-ver.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient sûrement de ton thème. Le tutoriel à été créé avec le thème simple de Blogger. Si tu as acheté un thème alors le code HTML de base du blog est sûrement différent ce qui explique pourquoi cela n'a aucun effet sur ton blog. Désolée :/
      Par contre si tu es intéressée je peux modifier l'affichage des articles de ton blog pour toi. J'utilise une méthode différente de celle expliquée dans mon tutoriel. L'avantage c'est que tu peux décider d'afficher au choix, et dans l'ordre de ton choix, les éléments suivants :
      - La première image de l'article
      - Le titre
      - La date
      - L'auteur
      - Un extrait plus ou moins long de l'article (les premières lignes)
      - Un lien "lire la suite" automatique
      - Le nombre de commentaires
      - Les libellés
      - Des boutons de partage sur les réseaux sociaux

      Si cela t'intéresse je peux le faire mais seulement en tant que prestation. Envoie une demande de devis accessible à la page Design ;)

      Supprimer
  47. Bonjour Catherine! Je tenais à te remercier vivement pour tous tes tutoriels et toutes tes explications. Je viens de créer mon blog il y a presque un mois, et c'est grâce à toi que j'ai pu le rendre un peu plus sympa qu'à l'origine et apprendre quelques notions du codage html. Merci énormément pour ton travail ! Ton blog est une mine d'or et est absolument magnifique !
    Par contre j'ai seulement un petit soucis par rapport à l'espace entre les 2 lignes d'articles. J'ai essayé de modifier beaucoup de chiffres dans le code html pour voir si cet écart pouvait se modifier mais en vain :/ Je te laisse le lien de mon blog si tu as le temps d'y jeter un coup d'oeil : http://une-petite-melody.blogspot.fr/
    Je te remercie encore chaudement ! Ton travail est incroyable. Je te souhaite une bonne soirée !

    RépondreSupprimer
    Réponses
    1. Bonjour Mélody,
      Merci pour ton message ! Je suis contente de pouvoir aider en partageant quelques astuces ^^
      Pour l'espace entre tes articles, retrouve ce code :

      /* Code pour la VERSION 1 */
      .date-outer {
      display: inline-block;
      width: 27%; /* 2 colonnes = 47% / 3 colonnes = 31% */
      height: auto;
      overflow: hidden;
      margin: 0 5px -25px 5px;
      position: relative;
      vertical-align: top;
      }

      Et remplace cette ligne :

      margin: 0 5px -25px 5px;

      Par :

      margin: 0 5px 25px 5px;

      Et voilà ;)

      Si tu veux augmenter ou diminuer l'espace modifie la valeur de 25px sur cette ligne ;)

      Supprimer
    2. Merci infiniment ! C'était tout bête en fait ahah, mais ça m'avait vraiment pris la tête ! Merci encore, et continue ton blog est top top top ! Je te fais de gros bisous ! :)

      Supprimer
  48. Coucou :) j'ai construis mon blog grâce à tes supers tutos ! Bon, je ne suis pas une experte en la matière donc j'aurai besoin d'un peu d'aide.. Tout d'abord, pour la présentation en grille de mes articles, les photos ne sont pas toutes de la même taille ;( et le "lire l'article" ne s'affiche pas ! En espérant que tu puisse me répondre et me dire quel problème j'ai, je te fais de gros bisous.
    Léna.

    RépondreSupprimer
    Réponses
    1. Bonjour Léna,
      Tout d'abord certaines photos sont décalées vers le bas. Ceci est due à des espaces qui se trouvent avant les photos dans tes articles. Il te suffit de supprimer ces espace avant les photos dans le mode création / modification de ton article.

      Ensuite retrouve le code suivant dans le code de ton affichage en miniature :

      .post.hentry, .entry-content {
      height: 350x; /* Hauteur des images */
      overflow: hidden;
      }

      Remplace ce code par :

      .post.hentry, .entry-content {
      height: 390px; /* Hauteur des images */
      overflow: hidden;
      }

      Sauvegarde et ça devrait être mieux ;)

      Supprimer
    2. Merci beaucoup ! J'ai enfin réussis hihi
      Bisous, Léna ♥

      Supprimer
  49. Bonjour Catherine!
    Encore merci pour ce tuto qui rend les blogs plus moderne je trouve!
    Cependant, j'ai un petit pb quant à l'affichage de Plus d'infos et de la date... Je crois que ca se chevauche bizarrement... Saurais tu pourquoi il y a un cadre blanc aussi à la place du titre?
    Je n'ai pas réussi à faire comme la version 1....
    Merci bcp pour ton aide !
    Bon dimanche !

    Sandrine
    http://honeymooney.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Sandrine,
      As-tu réglé le problème ? Car cela s'affiche correctement de mon côté ;)

      Supprimer
    2. Hello Catherine ! Oui j'ai bidouillé les paddings et margins et c'est rentré dans l'ordre...! Merci beaucoup ! Bonne journée

      Supprimer
  50. Tu m'as beaucoup aidé jusqu'à présent je t'en remerci j'ai mes grilles mais ça n'a pas le look que je sohaiterais ... J'ai trouvé ce template qui est exactement ce que je veux niveau grille mais je ne sais pas quel parti du code prendre ni ou le mettre dans le code de mon blog :/ Voici le code si jamais tu savais quoi faire (je ne peu pas coller le code donc je te met le lien : http://www.borneotemplates.com/2012/08/galauness.html)

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      Malheureusement il n'est pas possible d'obtenir le rendu du thème Galauness avec ce tutoriel.
      Ce tutoriel ne modifier que l'apparence des articles avec du CSS. Or pour obtenir le rendu que tu souhaites il faut modifier le code HTML de ton thème. Si tu le souhaites je peux le faire pour toi par prestation. Envoie-moi un message par le formulaire accessible à la page Design ;)

      Supprimer
  51. Décidément les problèmes n'en finissent plus avec ma page d'accueil :( aucune photo n'a la même taille... J'ai compris que mes photos iPhone avaient une taille différente des photos que je prends avec mon Reflex et je ne m'en suis pas trop occupée, mais maintenant mon dernier article est complètement décalé... :( En espérant que tu puisses m'aider ! http://www.dancinginnowhere.com

    RépondreSupprimer
    Réponses
    1. Bonjour Marie-Charlotte,
      Retrouve ce code :

      .post.hentry, .entry-content {
      height: 260px; /* Hauteur des images */
      overflow: hidden;
      }

      Remplace-le par :

      .post.hentry, .entry-content {
      height: 300px; /* Hauteur des images */
      overflow: hidden;
      }

      Retrouve ensuite :

      .post-body img {
      width: auto;
      height: 260px; /* Hauteur des images */
      margin: 0;
      padding: 0;
      }

      Remplace-le par :

      .post-body img {
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      }

      Supprimer
  52. Bonjour,

    J'ai découvert ton blog récemment et je dois dire qu'il m'aide énormément. Tes articles sont très complets et très clairs.
    J'ai suivi le tuto pour la version 1 et je voudrais savoir si il est possible de modifier le texte "Plus d'infos" pour le remplacer par quelque chose de plus personnel.

    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour, oui il suffit d'aller dans Mise en page et de cliquer sur Modifier sur le gadget Articles. A la ligne "Texte du lien de la page d'articles :" Remplace le terme "Plus d'infos" par ce que tu souhaites utiliser ;)

      Supprimer
  53. Coucou!
    J'ai une question pour toi est-ce que c'est possible d'avoir une disposition différente:
    L'image de l'article à gauche et sur la droite le résumé de l'article
    Idem en dessous je suis claire?lol
    Merci!!!!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement ce n'est pas possible avec ce tutoriel. Pour cela il faut directement modifier le code HTML du blog. Si cela t'intéresse je le fais par prestation. Envoie-moi un message avec le formulaire disponible sur la page Design ;)

      Supprimer
  54. Coucou,
    J'ai finalement réussi à mettre en place les miniatures et j'ai une question : Est ce que c'est normale que lorsque je vais sur un article quand il s'affiche la date ne se trouve plus en dessous mais au dessus du titre ? Pas moyen de le remettre en bas :/
    Tu pourrais m'expliquer ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est parce que tu as choisi la version 2. Dans cette version la date est en haut de l'image.
      Néanmoins si tu souhaites déplacer la date en bas voici quelques changements que tu peux faire.

      Dans tes codes d'apparence des articles en miniature, retrouve le code suivant :

      .post {
      margin: 0 0 45px 0 !important;
      }

      Remplace-le par :

      .post {
      margin: 0 0 60px 0 !important;
      }

      Ensuite cherche :

      .post.hentry, .entry-content {
      height: 320px; /* Hauteur des images */
      overflow: hidden;
      }

      Remplace-le par :

      .post.hentry, .entry-content {
      height: 325px;
      overflow: hidden;
      }

      Cherche ensuite :

      h3.post-title.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 52px;
      position: absolute;
      bottom: 0;
      }

      Remplace-le par :

      h3.post-title.entry-title {
      text-align: center;
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 52px;
      position: absolute;
      bottom: 19px;
      overflow: hidden;
      }

      Cherche le code suivant :

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

      Et remplace-le par :

      h2.date-header {
      bottom: 20px;
      z-index: 999;
      left: 1px;
      position: absolute;
      width: 100%;
      text-align: center;
      }

      Pour finir cherche :

      .post-outer:before {
      display: block;
      position: absolute;
      height: 65px;
      width: 100%;
      content: '';
      background: #ffffff;
      bottom: 0;
      left: 0;
      z-index: 99;
      opacity: 1;
      }

      Et remplace-le par :

      .post-outer:before {
      display: block;
      position: absolute;
      height: 80px;
      width: 100%;
      content: '';
      background: #ffffff;
      bottom: 0;
      left: 0;
      z-index: 99;
      opacity: 1;
      }

      Supprimer
    2. Merci beaucoup Catherine de ta réponse, apparemment ce n'est pas mon plus gros problème ! On vient de me dire que sur version mobile qui est celle proposé par blogger pour les mobiles le "lire la suite" ne fonctionne plus du tout ! Donc impossible pour les lecteurs de voir le reste de l'article ? Je suis obligée de le mettre en version personnalisée ?

      Merci pour ton aide ! Tu fais un travail remarquable

      Supprimer
    3. Bonjour,
      Mmh effectivement je te conseil d'utiliser une version mobile de ton blog. En allant sur ton blog avec mon mobile c'est la version web qui s'affiche mais elle n'est pas adapté aux portables : texte trop petit, et donc liens trop petits aussi :/
      Tu peux utiliser le modèle personnalisé qui doit reprendre les couleurs de ton design, par exemple.

      Supprimer
    4. Je viens de le mettre en version mobile personnalisée.. c'est une catastrophe ^^

      Supprimer
    5. Oula oui, il y a un énorme espace à gauche de ton blog.
      Rajoute ce code :

      .mobile .main-inner .columns {
      padding-left: 0 !important;
      }

      Avant la ligne :

      @font-face {

      Supprimer
    6. Je l'ai fait et cela ne s'affiche que sur une moitié de la page :/

      Supprimer
    7. Coucou
      Je ne sais plus si je t'ai répondu donc je remet au cas ou, j'ai bien mis ce que tu m'as demandé mais j'ai toujours un problème avec l'affichage, il ne se met que sur un coté de de la page et je préfère ne pas bidouiller avec ça, je ne m'y connais pas du tout avec avec la version mobile :/

      Merci d'avance

      Supprimer
    8. Rajoute ce code à la suite :

      .mobile-date-outer.date-outer {
      width: 94% !important;
      }

      Supprimer
  55. Bonsoir Catherine :)
    Je suis sur blogger, et je souhaiterai mettre la mise en page en grille comme la version 1 seulement quand je clic en même temps sur ctlr + f et que je rentre le code que tu as donner , ça ne trouve pas ... comment dois-je procédé ? :(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne suis pas sûre que le tutoriel marche avec ton thème Blogger. Celui que tu utilises est assez spécial.
      J'ai basé le tutoriel sur le thème Simple de Blogger (celui avec l'aperçu blanc).

      Supprimer
  56. Bonjour Catherine,
    Je t'avais déjà envoyé un commentaire l'année dernière car j'avais pas mal de problème avec cette grille ! Et cette année j'ai réussi, enfin ! Merci encore pour ces précieux conseils et ton assistance ! Mettre les mains dans le code seule, c'est dur..!

    J'ai donc réussi à mettre les grilles, trouvé pourquoi mes miniatures n'étaient pas uniformes (je redimensionne les photos au même format au fur et à mesure et ça a l'air de très bien marcher :D).
    Par contre les dates ne s'affichent pas du tout et je ne comprends pas pourquoi. J'ai essayé de bidouiller et le seul truc que j'avais réussi à faire, c'est de les faire apparaitre comme elles étaient avant (quand l'article est en plein écran) et en décalé des miniatures ..
    De plus, le nombre de commentaires s'affiche au dessus du titre (j'aimerais le faire apparaitre en dessous :/) et j'aimerais aussi changer l'intitulé (mettre "X commentaires" au lieu de "X comments : "). Aurais-tu une solution s'il te plait ?
    Je te remercie !
    Je te remercie :)

    RépondreSupprimer
    Réponses
    1. Bonjour Aly,

      Pour modifier le terme commentaires tu peux utiliser ce tutoriel : http://ladybirdr.blogspot.com/2014/12/changer-le-lien-et-les-titres.html

      Pour tes dates, le problème vient de l'apparence de tes dates sur les pages d'articles qui entre en conflit avec l'apparence des dates de l'affichage en miniature.

      On peut rajouter du code CSS pour replacer les dates au bon endroit. Où souhaites-tu les faire appraitre ? En haut de l'image ou sous le titre ?

      Supprimer
    2. Bonjour Catherine, merci pour ta réponse !

      Je vais suivre le tutoriel de ce pas ! :D
      Pour les dates, je pensais les ajouter en haut de l'image !

      Supprimer
  57. Bonjour
    j'utilise le tutoriel miniature photo grille depuis le début tout allait bien faut que la background de mes dates s'affiche en blanc alors qu'il est correctement indiqué que la couleur est la suivante #667882 je ne comprends pas. Merci de votre aide.
    Bisous.

    RépondreSupprimer
    Réponses
    1. Bonjour Chloe,
      J'ai répondu à ton mail ;)

      Supprimer
  58. Bonjour Lady Bird,
    Tout d'abord un grand bravo pour ces tutos, c'est vraiment très utile et bien fait.
    J'ai voulu implémenter la version 2 sur mon blog mais ... j'ai un pied sur la miniature qui n'est pas très joli... j'aurais bien aimé mettre le titre de l'article (quitte à l'enlever de l'image) voire un "plus d'infos) car du coup je dois m'amuser à sauter quelques lignes dans mes articles pour que cela ait un peu plus de gueule.
    Le blog en question : http://feuilledematch.blogspot.fr/
    Merci de ton aide

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour éviter de sauter des lignes au début de tes articles remplace le code suivant :

      .post.hentry, .entry-content {
      height: 310px; /* Hauteur des images */
      overflow: hidden;
      }

      Par :

      .post.hentry, .entry-content {
      height: 310px; /* Hauteur des images */
      overflow: hidden;
      position: relative;
      top: 25px;
      }

      Et le code suivant :

      h3.post-title.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0px;
      padding: 00px;
      height: 52px;
      position: absolute;
      top: 25px;
      }

      Par :

      h3.post-title.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0px;
      padding: 00px;
      height: 52px;
      position: relative;
      top: 10px;
      }

      Pour ajouter le lien plus d'infos il faut ajouter un marqueur d'expansion à ton article (voir la partie "Créer les miniatures" du tutoriel), mais comme tu utilises la version 2 et que tu as modifié un peu le code (titre en haut, etc.) je ne sais pas où ce lien va apparaître ^^

      Supprimer
    2. Merci Catherine, j'arrive désormais à mettre le titre en haut.. par contre le lire la suite ne s'affiche toujours pas. Mais je m'en passerai car le site est désormais plus lisible.
      Prochaine étape m'attaquer au menu déroulant sur mon autre blog voyage. J'ai vu que tu avais un topic sur cette fonctionnalité... je te poserai quelques questions encore probablement ;o)
      Bonnes fêtes de fin d'année

      Supprimer
  59. Merci de ton aide Catherine effectivement il me manquait le */
    J'aurais une autre question concernant ma barre de navigation, j'ai un espace blanc au dessus que je n'arrive pas a supprimer. J'ai tout essayé, est-ce normal ?

    www.autourdechloe.com

    Bisous & merci.

    RépondreSupprimer
    Réponses
    1. Bonjour Chloe,
      L'espace vient d'un code qui définit un espace au-dessus de tous tes gadgets de 30px (dont le gadget HTML de ton menu). Tu peux rectifier cela en ajoutant le code CSS suivant :

      #HTML3 {
      margin-top: 0 !important;
      }

      Avant la ligne suivante par exemple :

      /* Columns

      Ensuite pour supprimer l'espace à droit et à gauche de ton menu ajoute le code CSS à la suite du précédent :

      .tabs.section {
      margin: 0 !important;
      }

      Et voilà ;)

      Supprimer
  60. Coucou ! J'ai un soucis, j'ai appliqué la 1ère version à mon blog, mais la date de publication s'affiche en dessous de l'article, mais laisse un énorme espace blanc.. Que faire ? (vous pouvez voir sur mon blog ce que ça fait si vous ne comprenez pas) Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois aucun article sur ton blog, est-ce normal ?

      Supprimer
  61. Coucou, j'ai un petit problème !
    J'ai voulu ajouter une deuxième barre latérale à droite mais mes miniatures d'articles ne se mettent plus en grille :( les dates ne sont pas visibles non plus...
    J’espère que tu pourras m'aider !
    Bises, Léna ♥

    RépondreSupprimer
    Réponses
    1. Bonjour Léna,
      Effectivement ça va tout décaler ^^
      J'ai vu que tu as supprimé l'affichage par contre, du coup je ne peux pas te dire comment rectifier le problème :/
      Tu peux essayer sur un blog test avant de l'appliquer sur ton blog final.

      Supprimer
    2. Coucou :)
      J'ai re-changé l'affichage avec les deux barres latérales + l'affichage des miniatures en grille avec le modèle 1 et effectivement ça ne fonctionne pas, la taille des miniatures est peut être trop grande... je suis perdue ^^
      J'aimerais avoir mes miniatures d'articles sur deux colonnes entre les deux barres latérales, j'aimerai aussi avoir mon image "lire la suite" qui apparaît en dessous de chaque miniatures !
      En espérant que tu puisses m'aider, je te fais de gros bisous ♥

      Supprimer
    3. Bonjour Léna,
      Tout d'abord tu as 2 lignes de code en trop.
      Tu as 2 fois :

      <style type='text/css'>

      Avant les codes CSS. Supprimes en 1 sur les 2.
      Tu as aussi 2 fois cette ligne :

      </style>

      Après les codes CSS. Supprimes en 1 sur les 2.

      Ensuite retrouve ce code :

      h2.date-header:before {
      display: block;
      position: absolute;
      height: 43px;
      width: 100%;
      content: '';
      background: #BBBBBB; /* Couleur de fond Dates et Lien vers articles */
      bottom: -24px;
      left: -1px;
      z-index: -1;
      }

      Remplace-le par :

      h2.date-header:before {
      display: block;
      position: absolute;
      height: 68px;
      width: 100%;
      content: '';
      background: #ffffff; /* Couleur de fond Dates et Lien vers articles */
      bottom: -10px;
      left: -1px;
      z-index: -1;
      }

      Retrouve ce code :

      .jump-link {
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 100%;
      text-align: center; /* Alignement Liens vers articles : left / center / right */
      z-index: 999;
      }

      Et remplace-le par :

      .jump-link {
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 100%;
      text-align: center; /* Alignement Liens vers articles : left / center / right */
      z-index: 999;
      }

      Retrouve ce code :

      .post.hentry, .entry-content {
      height: 170px; /* Hauteur des images */
      overflow: hidden;
      }

      Et remplace-le par :

      .post.hentry, .entry-content {
      height: 284px; /* Hauteur des images */
      overflow: hidden;
      }

      Retrouve ce code :

      h3.post-title.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 52px;
      position: absolute;
      bottom: 51px;
      }

      Et remplace-le par :

      h3.post-title.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 52px;
      position: absolute;
      bottom: 70px;
      }

      Pour finir retrouve ce code :

      .post-outer:before {
      display: block;
      position: absolute;
      height: 90px;
      width: 100%;
      content: '';
      background: #ffffff; /* Couleur de fond Titres */
      bottom: 18px;
      left: 0;
      z-index: 99;
      opacity: 0.8;
      }

      Et remplace-le par :

      .post-outer:before {
      display: block;
      position: absolute;
      height: 90px;
      width: 100%;
      content: '';
      background: #ffffff; /* Couleur de fond Titres */
      bottom: 52px;
      left: 0;
      z-index: 99;
      opacity: 0.8;
      }

      Supprimer
  62. Bonjour,
    est-il possible d'appliquer ce format d'articles uniquement sur une page voulue, et non sur le blog en entier ? En fait je voudrais mettre ce format sur uniquement 4 pages, et garder la disposition intacte sur ma page d'accueil et pour le reste. Est-ce possible ? Merci à toi
    Justine
    biancojustine.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Justine,
      Oui c'est tout à fait possible. Il faut utiliser des "balises conditionnelles". Il faut ajouter un bout de code avant et un bout de code après.

      Le code à ajouter avant tout le code CSS est :

      <b:if cond='data:blog.url == "URL"'>
      <style type='text/css'>

      Remplace URL par l'adresse url de la page sur laquelle tu souhaites appliquer l'affichage.
      Colle ensuite ceci après le code CSS :

      </style>
      </b:if>

      Colle l'ensemble du nouveau code avant la ligne :

      </body>

      Si tu veux appliquer l'affichage à plusieurs pages, le plus simple serait de copier les codes les uns après les autres en changeant l'URL pour celle de chaque page.

      Supprimer
  63. Bonjour Catherine, depuis plusieurs jours je me suis rendue compte que seulement 5 articles s'affichaient lorsque l'on allait sur mon blog: en bas à droite il y a un vide au lieu d'avoir un article. Du coup, savez vous comment faire pour combler ce trou ? J'ai déjà essayer de modifier le nombre d'articles par page dans les paramètres de blogger mais rien ne change ...

    Merci beaucoup,
    Enola

    RépondreSupprimer
    Réponses
    1. Bonjour Enola,
      C'est sûrement à cause de la taille de tes articles. Blogger limite l'affichage des articles sur la page d'accueil s'ils sont trop lourds (comportent trop de photos par exemple), pour réduire le temps de chargement de la page. Pour remédier à ce problème, il suffit d'ajouter des marqueurs d'expansion dans tes articles, après la première image par exemple. Cela créé une "coupure" dans ton article et Blogger ne chargera que ce qui se trouve au-dessus de cette coupure sur la page d'accueil ;)
      J'ai fait un tutoriel pour savoir comment ajouter des marqueurs d'expansion : http://ladybirdr.blogspot.com/2015/02/afficher-un-apercu-darticle-ajouter-et.html

      Supprimer
  64. Coucou, aurais-tu une astuce à me donner pour qu'au survol d'une image, un texte apparaisse, comme sur ce blog: http://www.leblogdebetty.com/voyages/

    Merci d'avance pour ta réponse !!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      L'idée est noté dans ma liste de tutoriels à faire ;)

      Supprimer
  65. Bonjour,

    Un grand merci pour tes super tuto et notamment celui-ci qui m'a été d'une grande aide !
    C'est vraiment super ce que tu fais, continue ! :) Tes tutos sont clairs, accessibles et vraiment complets.

    Encore merci et longue vie à ton blog

    Bonne journée

    RépondreSupprimer
  66. Coucou ! Déjà, merci beaucoup pour toute tes astuces, tu me sauves la vie !
    J'ai appliqué le premier modèle, sans barre latérale, j'ai réussi comme une grande à baisser ou monter "Plus d'infos" et la date mais j'ai un petit problème que je n'arrive pas à résoudre seule... J'aimerais diminuer la taille du carré gris clair qui se met sur la photo avec le titre de l'article...

    Merci d'avance pour ta réponse !

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

      Supprimer
  67. Bonsoir!

    Tout d'abord je tiens à vous remercier pour ce tuto qui est très bien expliqué, cependant (je pense que cela viens de mon Template ou je ne sais pas) mais je n'ai plus que 5 articles qui apparaissent...
    Ainsi que la date qui n'apparait pas en entier...
    Puis-je vous demander un petit coup de pouce svp? (mon blog est en mode privé le temps du changement mais si cela ne vous gène pas, je peux vous envoyer mon code par mail?! )
    Je ne fais rien avant d'avoir votre réponse et merci par avance du temps que vous prenez à nous répondre individuellement.

    Belle soirée

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour les 5 articles affichés cela vient de Blogger qui limite le nombre d'articles affichés par page s'ils sont trop lourds (trop de photos par exemple). Pour régler ce problème il faut ajouter des marqueurs d'expansion aux articles. Comme ça, Blogger ne chargera que ce qui se trouve avant le marqueur sur les pages d'index (dont l'accueil), et pourra afficher plus d'articles.
      Pour ajouter un marqueur d'expansion aux articles : http://ladybirdr.blogspot.com/2015/02/afficher-un-apercu-darticle-ajouter-et.html

      Supprimer
    2. Pour la date, il faut que je vois le blog test pour trouver la cause du problème

      Supprimer
  68. Bonsoir et merci pour ce très chouette tuto :)
    J'ai réussi à tout fait niquel, j'ai pris la version 1 mais j'ai cependant un petit soucis, le "plus d'infos" au lieu d'être juste en dessous du titre et donc sur le fond blanc à opacité réduite, il se trouve en fait SUR la date, donc en juxtaposition avec celle-ci, elles se chevauchent du coup...
    Saurais-tu m'aider?
    Le cooooode c'est dur :(
    Un grand merci d'avance ! <3

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

      Supprimer
    2. Oui voici c'est moi, c'est le blog de ma maman que je lui fais ( du coup je suis connecté avec son compte google + ) : http://escaleindienne.blogspot.be
      En plus la date ne se met que sur certains articles, pas sur tous... :/

      Supprimer
    3. Bonjour Sophie,
      Pour placer correctement le lien "lire la suit", il faut déplacer la date qui est un peu basse.

      Retrouve ce code :

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

      Remplace la valeur de bottom (54px) par 61px comme ceci :

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

      Et voilà ;)

      Supprimer
  69. Bonjour Catherine,
    J'ai mis en application ton tuto sur "AFFICHER LES ARTICLES EN MINIATURE", tout va bien sur la formule web, en revanche, ça ne va pas du tout sur la formule mobile.
    Peux-tu me dire où ça pêche stp ?

    WEB : http://turfjeusimple.blogspot.fr/
    MOBILE : http://turfjeusimple.blogspot.fr/?m=1

    Merci encore une fois pour ton aide.
    Pierre

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      C'est tout à fait normal que la version web et mobile ne soient pas les mêmes car la version web et la version mobile sont des pages différentes de structure totalement différente. C'est automatique et fait pour améliorer la lisibilité sur mobile.
      Par contre, la largeur des articles sur mobile n'est pas à 100% de la largeur de la page. Ajoute ce code :

      .mobile .date-outer {
      display: block !important;
      width: 93% !important;
      max-width: 100% !important;
      }

      Juste après :

      /* Mobile
      ----------------------------------------------- */

      Le reste des problèmes d'affichage vient de tes gadgets qui sont trop grands et pas adaptés aux mobiles.

      Supprimer
    2. Super ! ça marche ! Tu es extra !
      Pour l'affichage du nombre de commentaires ?
      Encore merci pour tout ce que tu fais... c'est magique !

      Supprimer
  70. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  71. C'est encore moi... ;)
    Peut-on afficher le nombre de commentaires ?
    Merciiiiiiiiiiiiiii !

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      Tu peux essayer avec ceci :
      Retrouve le code suivant dans le code CSS de ton affichage en miniature :

      .post-footer {
      display: none;
      }

      Remplace-le par ceux-ci :

      .post-footer {
      display: initial;
      }

      span.post-comment-link {
      position: absolute;
      top: 137px;
      text-align: center;
      display: block;
      width: 100%;
      left: 0;
      z-index: 999;
      }

      Supprimer
    2. Super... ça marche ! Rien ne te résiste ! ;)
      Encore merci pour tout !

      Supprimer
  72. Hello !

    Ton article est exactement ce que je cherchais... mettre mes articles en grille, les uns à côté des autres!
    Sauf que voilà, lorsque je cherche dans mon modèle ceci "" rien n'est trouvable... donc en fait je ne peux rien faire dès le début...

    Saurais tu ce que je dois faire?

    Merci d'avance,
    Aurore @aurorefrg
    www.carnetsdaurore.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Pas de soucis, colle le code CSS avant la ligne :

      </body>

      En rajoutant 2 lignes de code.
      1- Au-dessus de la ligne suivante :

      <style type='text/css'>

      Ajoutes :

      <!-- Affichage sur index-->
      <b:if cond='data:blog.pageType == "index"'>

      2- En-dessous de la ligne suivante :

      </style>

      Ajoutes :

      </b:if>

      Il y aura sûrement des ajustements à faire dans les codes CSS à cause de ton thème qui n'est pas le même.

      Supprimer
  73. Cela ne marche pas... Ahlala je suis perdue, je n'y comprends rien c'est énervant!
    J'ai ceci qui apparaît "Impossible de charger l'aperçu du modèle : Erreur d'analyse XML, ligne 1866, colonne 3 : The element type "b:if" must be terminated by the matching end-tag "".."

    RépondreSupprimer
    Réponses
    1. Il doit manquer ce code :

      </b:if>

      Vérifies que tu as bien tous les codes. Au final cela devrait ressembler à ceci :

      <!-- Affichage sur index-->
      <b:if cond='data:blog.pageType == "index"'>

      <style type='text/css'>

      /* Code pour la VERSION 1 ou 2 */
      /* Le code de ton affichage en miniature ici */

      </style>

      </b:if>

      </body>

      Supprimer
  74. Bonjour, dans un premier temps je souhaitais te remercier ton blog est d'une grande aide. Cependant j'ai un petit soucis, le lien lire la suite ce positionne sur la date et non en dessous. Pourrais-tu m'aider ? merci je te met l'adresse de mon blog http://www.mademoisellececy.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Mademoiselle Cécy,
      Je ne vois pas les liens lire la suite donc je ne peux pas te donner une réponse exacte. Mais tu peux essayer de déplacer les dates vers le haut en remplaçant la valeur de bottom du code suivant :

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

      Remplace la valeur de bottom (54px) par 61px comme ceci :

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

      Supprimer
  75. Bonjour Catherine ! encore un super tuto ! Mon blog ressemble de plus à ce que je veux grâce à toi ! merci merci merci !
    J'ai réussi comme un grand à régler certains décalages, en revanche je me demande comment faire disparaître le fond blanc/transparent derrière mes vignettes (celui de la catégorie "Articles") car quand je passe par la personnalisation du Template je ne trouve rien. Si tu as une petite idée...
    Belle journée, à bientot
    www.monsieuratch.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ajoute le code suivant :

      .main-outer {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      }

      Avant la ligne suivante de ton code :

      ]]></b:skin>

      Supprimer
  76. Hello :) après pas mal de périples j'ai réussit a faire mes petites miniatures sauf que je rencontre un assez lourd problème : lorsque je clique sur les titres des articles je tombe sur les commentaires que j'ai reçu, mais pas l'article en question... De plus je n'ai plus mon image "Lire la suite" que j'avais crée suite à un autre de tes tutos..
    Je souhaitais également savoir comment conserver la barre latérale tout en ayant 3 colonnes ? Lorsque je place ma barre latérale à droite il m'est impossible de faire 3 colonnes... :/

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphanie,
      Peux-tu me donner le lien vers ton blog pour que je puisse regarder tout ça ?
      Pour avoir trois colonnes, il faut diminuer la valeur de width dans ce code :

      .date-outer {
      display: inline-block;
      width: 47%; /* 2 colonnes = 47% / 3 colonnes = 31% */
      height: auto;
      overflow: hidden;
      margin: 0 5px -50px 5px;
      position: relative;
      }

      Le code donné dans le tutoriel modifie seulement l'apparence et non le code HTML des tes articles. Le lien de tes commentaires doit donc être trop proche du titre de l'article, ce qui explique pourquoi on est renvoyé vers les commentaires.

      Pour l'image du lien "lire la suite", il doit simplement être caché. Mais il faut que je regarde ton blog pour voir comment.

      Supprimer
    2. Bonjour,
      Voilà le lien de mon blog : http://fairysfox.blogspot.fr/ :)
      J'ai réussit a tout régler sauf le lien lire la suite (mais c'est pas si grave que ça) et le renvoi vers les commentaires (un peu plus grave).

      Supprimer
    3. Bonjour Stéphanie,
      Le problème vient en fait du code pour l'affichage en miniature qui est mal placé.
      Coupe tout le code de ton affichage en miniature, à partir de :

      <style type='text/css'>

      /* Code pour la VERSION 2 */

      Jusqu'à :

      </style>

      Colle-le juste avant la ligne suivante :

      </body>

      Rajoute entre </style> et </body> le code suivant :

      </b:if>

      Comme ceci :

      </style>
      </b:if>

      </body>


      Et rajoute avant les lignes :

      <style type='text/css'>

      /* Code pour la VERSION 2 */

      Le code suivant :

      <!-- Affichage sur index-->
      <b:if cond='data:blog.pageType == "index"'>

      Comme ceci :


      <!-- Affichage sur index-->
      <b:if cond='data:blog.pageType == "index"'>

      <style type='text/css'>

      /* Code pour la VERSION 2 */


      Pour l'image de ton lien "lire la suite" c'est normal qu'il ne s'affiche pas, car il est caché dans cette version d'affichage. Mais tu peux remplacer le code suivant de ton affichage en miniature :

      .jump-link {
      display: none;
      }

      Par :

      .jump-link {
      display: block;
      bottom: 5px;
      position: absolute;
      left: 0;
      padding-top: 8px;
      width: 100%;
      background: #fff;
      }

      Supprimer
    4. Bonsoir, j'ai essayé de remettre tout mon code à la place correcte, mais dès que j'insère le le problème se pose et ça ne marche pas...

      Supprimer
  77. Bonjour,

    Merci pour ce super tuto ! Tout fonctionne, c'est parfait. Seulement une question me taraude !!! Comment faire pour avoir cette présentation en page d'accueil sans la barre latérale ? Mais que celle-ci soit par contre sur mes autres pages.

    J'espère que je n'en demande pas trop.

    Merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour Matilde,
      Tu peux ajouter un code qui permet d'appliquer d'autres codes seulement à certaines pages du blog.

      Pour cacher la barre latérale sur la page d'accueil (et les autres pages d'index) ajoute ceci :

      <!-- Affichage sur index-->
      <b:if cond='data:blog.pageType == "index"'>

      <style type='text/css'>

      /* Code CSS ici */

      </style>

      </b:if>

      Avant la ligne suivante dans ton code HTML :

      </body>


      Remplace maintenant la ligne :

      /* Code CSS ici */

      Par ceci :

      aside .sidebar {
      display: none !important;
      }
      .main-inner .columns {
      padding: 0 !important;
      }

      Supprimer
  78. Bonjour,

    Je te remercie beaucoup pour tes tutos qui sont super bien expliqués!

    Je me permets de te poser une petite question parce que, même si tout fonctionne, je me retrouve avec la date qui n'est pas centrée, ainsi que le "lire davantage" et le titre que j'aimerais rehaussé!

    De plus, je sais que mes photos actuelles ne sont pas en "paysage" comme préconisé, mais est-ce qu'il y a un moyen de les faire apparaître en entier?

    Je te laisse mon blog: http://lesamoursdorees.blogspot.fr et te remercie encore,

    Aurélie

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Pour les dates, le problème venait très certainement des dates en rond. On peut tout de même le corriger avec du CSS.
      Pour le lien "lire la suite", le problème vient de l'image. Mais on peut le corriger avec du CSS.
      Pour les photos, ce n'est pas possible avec la méthode utilisée dans ce tutoriel. Pour cela il faudrait modifier directement le code HTML de ton blog.

      Supprimer
  79. Bonjour Catherine !
    J'espère vivement que tu pourras m'aider. J'ai un problème que j'essaie de résoudre depuis 2h... j'en peux plus!!
    J'ai téléchargé un nouveau thème blogger qui s'appelle "bridal free version". J'ai changé les couleurs, installé le widget d'instagram, customisé la barre de navigation... Mais je veux mettre les articles en mode "grille" seulement le titre de mes articles ne s'affiche pas dans l'endroit créé pour cela (càd en bas, dans l'espace "blanc transparent"), et il y a mon nom ainsi que la date et les commentaires qui s'affichent alors que je ne les veux pas. Je te laisse l'adresse de mon blog pour que tu te rende un peu plus compte et que tu puisses m'aider.
    En l'attente de ta réponse...
    http://wordsfromcamille.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      As-tu changé ton thème ?
      Le problème venait sûrement de ton thème. Est-ce que c'était un thème gratuit de type ThemeXpose, Soratemplates, etc. ? Ces thèmes sont pleins d'erreurs, mêmes les versions payantes ! :/

      Supprimer

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

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

Newsletter

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