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

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Remarque : A cause d'un trop grand nombre de commentaires sur cet article, il y a des problèmes de chargement des commentaires. Je vous invite donc à ajouter votre commentaire sur ce nouvel article spécialement créé pour cela ! ;)
Suite à un problème avec les commentaires, merci de laisser votre commentaire sur cet article dédié ! Merci ;)
Suite à de nombreuses demandes, aujourd'hui je vous propose un tutoriel assez différent de ceux que je vous propose habituellement. C'est un gros changement visuel du blog : afficher les articles en miniatures, avec une disposition en grille. La première photo, le titre, la date et le lien vers l'article complet sont affichés pour chaque article. L'article complet n'est pas affecté, seul la liste des articles du blog l'est, et tout cela en utilisant seulement du CSS !

Je vous propose 2 versions de présentation des miniatures. Les modifications expliquées dans le tutoriel sont basées sur la première version, mais sont applicables à la 2e ! ;)

Voici des aperçus avec et sans barre latérale :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Sommaire

  1. Faire une sauvegarde du thème
  2. Ajouter le code CSS
    1. Version 1
    2. Version 2
  3. Créer les miniatures
  4. Personnaliser l'apparence des miniatures

Faire une sauvegarde du thème

Première chose à faire avant de commencer : faire une sauvegarde du thème pour pouvoir revenir en arrière si besoin.

Cliquez sur Modèle à partir du tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran.
Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier :)

Ajouter le code CSS

Allez maintenant dans Modifier le code HTML :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.

Collez le code suivant dans cette boîte :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
Vous trouverez ce code 2 fois. Celui qui nous intéresse est celui avec le plus petit nombre à gauche.
Par exemple, pour moi c'est celui-ci :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger


Version 1

Collez tout le code suivant :
<style type='text/css'>

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

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

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

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

.post-body a img {
border: none;
box-shadow: none;
margin: 0;
padding: 0;
}

.post-body a {
margin: 0 !important;
}

/* ------------- Apparence ------------- */

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;
}

h3.post-title.entry-title a {
color: #525253;   /* Couleur Titres */
font-family: 'Georgia';   /* Police Titres */
font-size: 20px;   /* Taille Titres */
font-weight: 300;
}

h3.post-title.entry-title a:hover {
color: #000000;   /* Couleur Titres quand survolés par la souris */
}

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

.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 */
}

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

.jump-link a {
color: #525253;   /* Couleur Liens vers articles */
letter-spacing: 1px;
font-size: 11px;   /* Taille Liens vers articles */
font-weight: 100;
font-family: 'Verdana';   /* Police Liens vers articles */
text-decoration: none;
text-transform: uppercase;   /* Liens vers articles en Majuscules */
}

.jump-link a:hover {
color: #000000;   /* Couleur Liens vers articles quand survolés par la souris */
}

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

.post-footer {
display: none;
}

.post-outer {
position: relative;
}

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

</style>
Juste après cette ligne de code, comme ceci :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger


Version 2

Collez tout le code suivant à la place :
<style type='text/css'>

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

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

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

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

.post-body a img {
border: none;
box-shadow: none;
}

.post-body a {
margin: 0 !important;
}

/* ------------- Apparence ------------- */

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;
}

h3.post-title.entry-title a {
color: #525253;   /* Couleur Titres */
font-family: 'Georgia';   /* Police Titres */
font-size: 20px;   /* Taille Titres */
font-weight: 300;
}

h3.post-title.entry-title a:hover {
color: #000000;   /* Couleur Titres quand survolés par la souris */
}

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

.date-header span {
color: #ffffff;   /* Couleur Dates */
background: #bbbbbb;   /* Couleur de fond des Dates */
letter-spacing: 2px;
font-size: 11px;   /* Taille Dates */
font-weight: 100;
font-family: 'Verdana';   /* Police Dates */
padding: 5px;
text-align: center;
}

.jump-link {
display: none;
}

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

.post-footer {
display: none;
}

.post-outer {
position: relative;
overflow: visible;
}

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

</style>

Créer les miniatures

Pour que les miniatures s'affichent correctement il est important de bien suivre les conseils qui suivent !

1 - Les articles doivent commencer par une image, si possible en paysage.
2 - Version 1 : Il faut ajouter un marqueur d'expansion sous l'image, comme ceci :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Si vos articles sont déjà créés, vous devrez ajouter un marquer d'expansion. Sinon il n'y aura pas de liens Plus d'infos >> en bas de la miniature. Mais l'article sera toujours accessible en cliquant sur le titre :)

3 - Pour ajouter un lien vers l'article sur les images, allez sur la page de création de l'article. Cliquez sur Lien permanent à droite de l'écran, et copiez l'url de l'article (clique-droit > Copier) :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Sélectionnez votre image en cliquant dessus. Cliquez sur Associer en haut de la page et collez cet url dans Adresse Web :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Décochez l'option Ouvrir ce lien dans une nouvelle fenêtre. Cliquez sur Ok. Et voilà ! :)

Personnaliser l'apparence des miniatures

Vous pouvez personnaliser les couleurs des textes et des fonds, les polices des textes, le nombre de colonnes, etc :
  1. Nombre de colonnes
  2. Modifier la hauteur des images
  3. Les titres
  4. Les dates
  5. Lien vers la page de l'article (Version 1)
  6. Couleurs des fonds (Versions 1)
  7. Couleurs des fonds (Version 2)

Nombre de colonnes

Par défaut le nombre de colonnes est de 2. Pour avoir 3 colonnes, il suffit de remplacer :
width: 47%;   /* 2 colonnes = 47% / 3 colonnes = 31% */
Du 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;
}
Par :
width: 31%;   /* 2 colonnes = 47% / 3 colonnes = 31% */
Comme expliqué dans le commentaire en orange :)
Ce qui donne :
.date-outer {
display: inline-block;
width: 31%;   /* 2 colonnes = 47% / 3 colonnes = 31% */
height: auto;
overflow: hidden;
margin: 0 5px -50px 5px;
position: relative;
}
Visuellement on obtient (sans barre latérale) :

Afficher les articles en miniatures, disposés en grille avec CSS pour Blogger

Modifier la hauteur des images

Pour modifier la hauteur des images, il faut changer la valeur en pixels de la ligne suivante :
height: 270px;   /* Hauteur des images */
du code :
.post.hentry, .entry-content {
height: 270px;   /* Hauteur des images */
overflow: hidden;
}
Et de la ligne suivante :
height: 270px;   /* Hauteur des images */
du code :
.post-body img {
width: auto;
height: 270px;   /* Hauteur des images */
margin: 0;
padding: 0;
}
Vous pouvez essayer différentes valeurs et les prévisualiser avant de sauvegarder en cliquant sur Prévisualiser le modèle.

Si vous voulez 2 colonnes avec une barre latérale, ou 3 colonnes sans barre latérale, essayez 210px par exemple.
Si vous voulez 2 colonnes sans barre latérale, essayez 290px par exemple.

Les titres

Pour changer l'alignement des titres il faut changer la valeur de la ligne suivante :
text-align: center;   /* Alignement Titre : left / center / right */
Du 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;
}
Pour un alignement à gauche remplacez center par left.
A l'inverse, pour un alignement à droite remplacez center par right.

Pour changer la couleur, la police et la taille des titres, il faut modifier le code suivant :
h3.post-title.entry-title a {
color: #525253;   /* Couleur Titres */
font-family: 'Georgia';   /* Police Titres */
font-size: 20px;   /* Taille Titres */
font-weight: 300;
}
Remarque : Le site code-couleur est très utile pour trouver le code de la couleur que vous voulez ;)

Pour changer la couleur des titres quand survolés par la souris il faut modifier le code suivant :
h3.post-title.entry-title a:hover {
color: #000000;   /* Couleur Titres quand survolés par la souris */
}

Les dates

Pour changer l'alignement des dates il faut modifier la valeur de text-align du code suivant :
h2.date-header {
bottom: 58px;
z-index: 999;
left: 1px;
position: absolute;
width: 100%;
text-align: center;   /* Alignement Dates : left / center / right */
}
Pour changer la couleur, la police et la taille des dates, il faut modifier le code suivant :
.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 */
}

Lien vers la page de l'article (Version 1)

Pour changer l'alignement des liens vers la page de l'article, il faut modifier la valeur de text-align du code suivant :
.jump-link {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
text-align: center;   /* Alignement Liens vers articles : left / center / right */
z-index: 999;
}
Pour changer la couleur, la police et la taille des liens vers la page de l'article, il faut modifier le code suivant :
.jump-link a {
color: #525253;   /* Couleur Liens vers articles */
letter-spacing: 1px;
font-size: 11px;   /* Taille Liens vers articles */
font-weight: 100;
font-family: 'Verdana';   /* Police Liens vers articles */
text-decoration: none;
text-transform: uppercase;   /* Liens vers articles en Majuscules = uppercase | Minuscules = initial */
}
Pour changer la couleur des liens quand survolés par la souris il faut modifier le code suivant :
.jump-link a:hover {
color: #000000;   /* Couleur Liens vers articles quand survolés par la souris */
}

Couleurs des fonds (Version 1)

Pour changer la couleur de fond des titres (blanc par défaut), il faut changer la valeur de background du code suivant :
.post-outer:before {
display: block;
position: absolute;
height: 90px;
width: 100%;
content: &#39;&#39;;
background: #ffffff;   /* Couleur de fond Titres */
bottom: 18px;
left: 0;
z-index: 99;
opacity: 0.8;
}
Pour changer la couleur de fond des dates et liens vers la page de l'article, il faut changer la valeur de background du code suivant :
h2.date-header:before {
display: block;
position: absolute;
height: 43px;
width: 100%;
content: &#39;&#39;;
background: #BBBBBB;   /* Couleur de fond Dates et Lien vers articles */
bottom: -24px;
left: 0;
z-index: -1;
}

Couleurs des fonds (Version 2)

Pour changer la couleur de fond des dates, il faut changer la valeur de background du code suivant :
.date-header span {
color: #ffffff;
background: #bbbbbb;   /* Couleur de fond des Dates */
letter-spacing: 2px;
font-size: 11px;
font-weight: 100;
font-family: 'Verdana';
padding: 5px;
text-align: center;
}
Et voilà pour la personnalisation ! A vous de jouer sur les couleurs, les polices, et de trouver ce qui vous convient ;)

Bon blogging !

Suite à un problème avec les commentaires, merci de laisser votre commentaire sur cet article dédié ! Merci ;)

Autres articles

287 commentaires:

  1. Carrément excellent ! Je me penche sur le sujet dès que possible !

    RépondreSupprimer
  2. Hello ! J'ai voulu appliquer tout ça à mon blog mais j'ai (encore) tout cassé je crois bien... J'ai bien tout suivie mais ça me donne un résultat vraiment bizarre ! :(

    RépondreSupprimer
    Réponses
    1. Salut Alyce !
      Je t'envoie un mail :)

      Supprimer
  3. Je t'aime; veux-tu m'épouser? ;)

    RépondreSupprimer
  4. Super tutoriel! Depuis le temps que je cherchais comment faire!!
    Dis moi, est ce que c'est possible d'afficher le nombre de commentaires? Parce que j'ai cherché et essayé diverses choses mais ça ne marche pas...
    J'utilise la version 2 :)
    J'espère que tu pourras m'aider...
    Bisous!

    RépondreSupprimer
    Réponses
    1. J'ai trouvé un moyen de faire apparaître le nombre de commentaires. Dans cet exemple ils sont placés juste au dessus du titre.

      Cherches le code suivant :
      <div class='post-outer'>

      Tu en trouveras 2 exemplaires. Celui qui nous intéresse est le premier (avec le plus petit nombre à gauche).
      Colle le code suivant juste au-dessus de cette ligne :

      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <span class='prev-comm'>
      <b:include data='post' name='comment_count_picker'/>
      </span>
      </b:if>

      Comme ceci :

      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <span class='prev-comm'>
      <b:include data='post' name='comment_count_picker'/>
      </span>
      </b:if>
      <div class='post-outer'>

      Retournes sur le code CSS de ton affichage en miniatures, en cherchant par exemple la ligne suivante :

      /* Code pour la VERSION 2 */

      Ajoutes les lignes suivantes :

      span.prev-comm {
      font-family: 'Verdana'; /* Police des commentaires */
      font-size: 12px; /* Taille de police des commentaires */
      letter-spacing: 1px; /* Espacement des caractères des commentaires */
      position: absolute;
      bottom: 93px;
      text-align: center;
      width: 100%;
      z-index: 999;
      background: #ffffff; /* Couleur de fond des commentaires */
      padding: 10px 0;
      }

      a.comment-link {
      color: #E5C87C; /* Couleur du lien des commentaires */
      text-decoration: none;
      }

      a.comment-link:hover {
      color: #525253; /* Couleur du lien des commentaires quand survolé par la souris */
      }

      Et voilà ! Tu n'as plus qu'à changer la police et les couleurs comme tu le souhaites :)
      N'hésites pas si tu as des questions

      Supprimer
    2. Bonjour,
      Depuis que j'ai modifier mon blog (encore merci pour ce tuto d'ailleurs) on ne peut plus laisser de commentaires sous mes articles. J'utilise le modèle 1. J'aimerais que les commentaires n'apparaissent pas sur les miniatures, mais seulement en dessous des articles. Est-ce que cela est possible ? Merci de ton aide.
      Bises.
      Lisa

      Supprimer
    3. Bonjour Lisa,

      Tu sembles avoir supprimé la partie des commentaires... Pourtant ce n'est pas du tout au même endroit que là où tu colles le code de ce tutoriel.
      Si tu as bien fait une sauvegarde avant de faire les modifications charge-la comme expliqué au début du tutoriel.
      As-tu changé récemment le format des commentaires pour Google + ? Ou as-tu changé qui peut ajouter des commentaires à ton blog (dans Paramètres > Publications et commentaires) ?

      Supprimer
    4. Bonsoir, merci d'avoir pris le temps de me répondre.
      J'avais désactivé les commentaires parce que "aucun commentaire" apparaissait de manière pas du tout ordonnée et esthétique au milieu de mes grilles d'articles. Mais même en le réactivant on ne peut pas ajouter de commentaires dans mes articles. Je vais recharger mon ancien modèle, et tout recommencer depuis le début pour voir. Mais je n'avais fait aucune motif sur les commentaires. Je vais me plonger dans tout ça, je te dirais ce que ça donne ! C'est très gentil à toi de prendre le temps de répondre à tout le monde !!!

      Supprimer
    5. Re bonsoir, j'ai chargé l'ancien modèle et j'ai plus les commentaires non plus .... c'est grave Docteur ?!

      Supprimer
    6. Peux-tu réactiver les commentaires pour que je puisse voir ce que ça donne ?

      Supprimer
    7. Ils sont activés, c'est bien ça mon problème lol
      Je comprends pas pourquoi on les voit plus alors que moi tout m'indique qu'ils sont activés !

      Supprimer
    8. Ah oui effectivement, il n'y a même plus écrit "Aucun commentaire"...
      Le problème peut venir de plusieurs choses. Je t'envoi un mail pour t'expliquer comment on va faire

      Supprimer
  5. Merci pour le partage.
    Pour ma part, impossible de la faire, les articles restent sur une seule colonne !!!

    RépondreSupprimer
    Réponses
    1. Salut, j'ai regardé ton blog et je pense que c'est parce que tu utilise le modèle Blogger Picture Window. Je me suis basée sur le modèle Simple pour faire cet affichage.

      Supprimer
  6. Merci pour ton retour, je regarderais en changeant le modele.
    En tout cas, félicitations pour ton blog très bien fait et plein d'infos utiles

    RépondreSupprimer
    Réponses
    1. Parfait, tout fonctionne parfaitement !!!
      Merci pour ton retour, c"est nickel.

      Supprimer
  7. Merci Catherine, je pense que je le ferai dès que le blog aura repris un peu de poil de la bête ! En plus tes deux modèles sont superbes, j'adore !!!

    bises !

    RépondreSupprimer
  8. Aaah merci beaucoup pour ce tuto ! ça fait des mois que j'en cherche un. merci merci !! en plus tu expliques tellement bien, tu es juste géniale !

    RépondreSupprimer
  9. Bonjour, tout d'abord je te remercie vraiment pour ce super tuto ! Je suis tombé dessus par hasard alors que je cherchais a faire cette mise en page depuis super longtemps ! Le problème c'est que pour moi ça n'a pas été concluant ... Je n'ai qu'un seul article qui s'affiche, je ne comprend pas pourquoi. Pourrais tu m'aider ?
    Merci d'avance !
    Ludivine Moon

    RépondreSupprimer
    Réponses
    1. Salut Ludivine Moon,
      il y a un problème avec ton code. Je t'envoie un e-mail lundi pour t'expliquer comment régler le problème :)

      Supprimer
    2. Super, merci de ta réponse !
      J'attend Lundi, bon week end :)

      Supprimer
    3. Ça y est je t'ai envoyé un mail :)

      Supprimer
  10. Coucou ! Alors j'ai essayé mais les articles restent en une seule colonne, pourtant, j'ai bien le modèle simple...
    Un conseil ?
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Salut My Little Bliss,

      Essaye de diminuer le pourcentage de width du code suivant :

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

      Essaye 41% par exemple.

      Supprimer
  11. Vraiment super méga génial :) Depuis le temps que j'essaye de trouver un template comme ça je vais enfin pouvoir le faire moi même, tout chipoter et tout modifier , j'adore ça :) Un grand merci je vais essayer ça ...

    Ah tiens je me demandé, comment fais tu pour le faire sans que nous nous en rendions compte ? Parce que pendant que je vais changer tout le design si quelqu'un vient sur le blog il risque de voir des articles plus en ligne, pas en belle mise en page ou autre ... Tu aurais une solution ? Peut être faire un autre blog pour faire la mise en page et puis l'enregistrer et la télécharger sur le bon ?

    RépondreSupprimer
    Réponses
    1. C'est exactement ça ! :)
      Je créé un blog test où je copie tous les widgets et le menu. J'ai 4 articles tests publiés à des dates différents. Je modifie le thème de ce blog test au rythme que je souhaite, et quand c'est prêt je sauvegarde le thème et le transfert ici :)
      Il faut ensuite vérifier tous les widgets, mettre à jour le contenu et vérifier que tout est en place. Et voilà :)

      Supprimer
    2. Je pense que je prévoir ça aussi pour la prochaine modification parce qu'ici le blog est extrémement laid à cause de toutes les modifications en cours lol ... Je vais prévoir cela :)

      Supprimer
  12. Bonjour Catherine !
    Merci pour ce joli code, j'ai enfin sauté le pas grâce à toi...
    J'ai cependant quelques soucis...
    Certains de mes articles ne s'alignent pas. Et problème plus important, mon lien "articles plus anciens" ne fonctionne plus.
    A quoi cela peut-il être du?
    (J'ai du bidouiller ton code en rajoutant un interlignage, et en modifiant la largeur du deuxième fond, qui ne concordait plus avec mes images après avoir fait la manipulation "marqueur d'expansion + lien permanent)

    Merci d'avance pour tes précieux conseils!

    RépondreSupprimer
    Réponses
    1. Salut Stefelle,

      Dans le code CSS de l'affichage en miniature, cherches le code commençant par :

      h2.date-header:before {

      et changes la valeur de width pour 100% :

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

      Ensuite cherches le code suivant :

      .post-body a img {

      Et remplaces

      margin: 0 0 0 -12px;

      par :

      margin: 0 -3px 0 0;

      Comme ceci :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 -3px 0 0;
      padding: 0;
      }

      Cherches ensuite le code :

      h2.date-header {

      Et changes

      bottom: 58px;

      pour

      bottom: 55px;

      Comme ceci :

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

      Pour finir ajoutes ce code :

      #blog-pager {
      margin: 3em 0;
      }

      Et voilà !
      Petite remarque, si tu as une bordure autour de tes images elle se verra dans l'aperçu :)

      Supprimer
    2. Bonjour Catherine !
      Et bien hier soir sur mon écran c'était toujours décalé malgré les modifications, certaines images semblaient plus petites alors qu'elles ont toutes la même taille sans bordure...
      Mais ici avec un autre écran tout à l'air ok, étrange... =)
      J'aurais du prendre web comme option, c'est magique comment le CSS rend tout beau! Je suis admirative...
      Merci énormément :-)

      Supprimer
  13. Bonjour,

    Je souhaiterai te contacter pour une modification de mon design. J'aimerai le laisser comme tel sauf mettre les articles en miniature (2x2 ) et mettre un effet zoom quand on passe sur l'image ( si possible) et laisser la colonne de droite ( si possible ) ..

    Je sais pas, si tu propose tes " soins " . Prendre la main de mon blog pour, m'aider, et a quel tarif .

    Peut tu me contacter par mail, pour ta réponse. lec.angeliq@gmail.com

    Je te remercie par avance, et ton blog est génial .

    RépondreSupprimer
  14. Bonjour Catherine,
    je souhaitais te dire merci, merci beaucoup pour tes conseils de personnalisation de blog.J'étais un peu perdue entre les modèles personnalisés in-modifiable, et les modèles proposé par blogger laids au possible à l'heure où il fallait que je fasse mon propre portefolio sur blogspot. Grâce à tes conseils, je pense pouvoir faire un blog présentable et agréable qui me servira de carte de visite. J'ai plus qu'à travailler toutes les étapes, j'ai déjà commencé.
    Alors merci beaucoup !!

    Je te souhaite une excellente soirée
    Hélène

    RépondreSupprimer
  15. Je suis trop contente j'ai réussi à le faire :) Il me restera à changer les photos pour qu'elles soient toutes de la même grandeur et faire tous les liens ...
    Un tout grand merci en tout cas :)

    RépondreSupprimer
  16. J'adore toutes tes explications! Vraiment merci bcp pour ton aide, j'ai pu effectuer qqs modifications comme une grande grâce à toi :D
    Par contre, si on souhaite la version 1 mais conserver la barre latérale? (J'ai peut-être mal lu ton article mais il me semble que ce n'est pas précisé...)
    Merci par avance^^

    RépondreSupprimer
    Réponses
    1. Salut Chrystelle,

      Les 2 versions se présentent avec la barre latérale si tu en as une. En fait on ne touche pas à la barre latérale, seulement à la partie Articles :)

      Supprimer
  17. Coucou,
    Je te remercie d'avoir fait ce tuto que je cherche depuis la création de mon blog haha. Halléluia! :D
    Juste une question, j'aimerais donc installer mon menue en grille mais le soucis est avec mes photos.. Je n'arrive vraiment pas à cadrer la choses.. Un conseil ou une astuces?
    Encore milles merci pour ce tuto :D.

    RépondreSupprimer
    Réponses
    1. Salut !
      Je ne sais pas trop ce que tu veux dire par cadrer, mais j'ai vu que tu as des bords arrondis sur tes images. Pour éviter de voir ces bords arrondis, on peux décaler les images dans l'aperçu. Pour cela, cherches le code suivant dans code de l'affichage en miniature :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Et changes la valeur de margin pour : -35px 0 35px 0;
      Comme ceci :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: -35px 0 35px 0;
      padding: 0;
      }

      :)

      Supprimer
    2. Merci pour le "nouveau" code :) Je m'en occupe dès que possible! Et encore merci pour tes fabuleux tutos qui m'aident pas mal :)
      Bisous!

      Supprimer
  18. Bonjour Catherine !

    Tout d'abord merci pour tous ces articles très clairement expliqués, tu m'as beaucoup aidé ! :)
    Ensuite, j'ai une petite question : j'aimerai (après avoir ajouté ce code) modifier l'espacement entre mes articles (j'ai deux colonnes pour l'instant, je vais peut être passer à trois), sur le côté donc (entre deux miniatures d'articles) et au-dessus/en-dessous (entre deux miniatures l'une au dessus de l'autre) car le résultat est beaucoup trop compact à mon gout.

    Je ne sais pas si ma question est très claire, j'espère que tu pourras m'aider !
    Merci encore !

    RépondreSupprimer
    Réponses
    1. Bonjour Noémie !

      Pour modifier l'espace entre les articles il faut changer la valeur de margin du code suivant dans le code de l'affichage en miniature :

      .date-outer {
      display: inline-block;
      width: 44%;
      height: auto;
      overflow: hidden;
      margin: 0 5px -50px 5px;
      position: relative;
      }

      Pour faire plus simple remplace ce code par celui-ci :

      .date-outer {
      display: inline-block;
      width: 44%;
      height: auto;
      overflow: hidden;
      margin-top: 0px; /* Espace au-dessus des articles */
      margin-right: 48px; /* Espace à droite des articles */
      margin-bottom: 0; /* Espace en-dessous des articles */
      margin-left: 0; /* Espace à gauche des articles */
      position: relative;
      }

      Par défaut l'espace en-dessous des articles était à -50px, ceci explique pourquoi tes liens "Articles plus anciens", "plus récents" et "Accueil" ne fonctionnaient plus. Dans le nouveau code j'ai défini l'espace à 0, ce qui règle le problème :)

      Ensuite j'ai remarqué qu'au niveau de tes images, certaines étaient décalés à gauche ou à droite. Tu peux remplacer le code suivant (toujours dans le code de l'affichage en miniature) :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 -3px 0 -12px;
      padding: 0;
      }

      Par :

      .post-body a img {
      min-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 -15px 0 -13px;
      padding: 0;
      }

      Pour les espaces blanc au-dessus des images c'est sûrement à cause d'un retour à la ligne au-dessus de l'image quand tu as créé l'article. Tu peux le supprimer dans modifier l'article. Et voilà :)

      Supprimer
    2. Merci beaucoup d'avoir prit le temps de me répondre ! :)
      Le résultat est parfait !

      Pour les espaces blancs au dessus de mes images et le fait que certaines ont l'air décalée, c'est en réalité parce que j'avais ajouté un bord blanc à la photo, mais comme j'ai supprimé les bordures des images grace à ton article, il faut juste que je remette les images sans cadre.

      En tout cas merci beaucoup ! Ca se rapproche du résultat que je souhaitai, vivement le prochain tuto ! :)

      Supprimer
  19. Ah oui et deuxième question : comme évoqué dans un précédent commentaire, mon lien "articles plus anciens" ne fonctionne pas non plus, j'ai lu ta réponse mais ça ne m'a pas aidé, aurais-tu une solution?

    (d'ailleurs, si tu as un code pour afficher le numéro des pages, ça m'intéresse si jamais tu cherches des idées pour de prochains articles ;) )

    Merci encore !

    RépondreSupprimer
  20. Hello,

    j'ai moi aussi voulu faire pareil, mais ça donne n'importe quoi...je désespère...

    RépondreSupprimer
    Réponses
    1. Salut !

      Quelle version as-tu essayé ?

      Supprimer
    2. la version 1, mais en fait ça partait bien, mais je suis bien trop perdue sur les explications, les photos apparaissent très mal sur les miniatures et les titres je n'arrivais pas à faire un changement de taille correct...bref je me perds trop

      Supprimer
  21. ♥ encore un énorme merci pour ce tutoriel ! moi aussi j'ai toujours un soucis de décalage , mais c'est parce qu'il faut bien que toute les miniatures soient de la même taille et que le jump link soit placé à la meme hauteur dans chaque article sinon ca décale tout ! c'est normal si je n'ai plus mon lire la suite ?!

    RépondreSupprimer
    Réponses
    1. Salut Rose Mademoiselle !

      En fait le problème de décalage de tes photos viens du code qui définit la hauteur de tes images.

      Cherche le code suivant dans le code de l'affichage en miniature :

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

      Et remplaces-le par :

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

      Ensuite tes titres sont décalés et une partie est coupée. Cherches :

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

      Et 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: 60px;
      position: absolute;
      bottom: 11px;
      }

      Cherches aussi le code suivant :

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

      Et remplaces-le par :

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

      Et voilà :)

      Dans la version 2 je n'ai pas mis le lien "Lire la suite" mais vu que tu as mis le lien vers l'article sur tes images, et qu'on peut y accéder en cliquant sur le titre, ce n'est pas très grave.

      Supprimer
  22. Oh merci énormément (j'avais augmenté la taille des images volontairement , je ne pensais pas que cela aurait tout décaler !) !penses-tu qu'il me soit possible d'afficher une partie du texte de mon article ?! en tout cas encore merci beaucoup ♥

    RépondreSupprimer
  23. Hello,

    Tout d'abord un grand merci pour tes tutos! Ils sont supers ! Et notamment celui là car je rêve d'avoir des vignettes en page d'accueil !

    J'ai essayé la version 1 avec 2 colonnes et tout fonctionne bien... lorsque je n'ai que deux articles de publiés !
    Dès que je publie plus d'articles, mes vignettes ne sont que sur la colonne de gauche et leur présentation ne va pas (la date n'apparait pas et le "read more" non plus).

    Aurais-tu une idée de pourquoi ça me fait cela ?

    D'avance un grand merci pour ta réponse, et merci pour tes articles et le temps que tu y consacres!

    MyLittleHoneyPot

    RépondreSupprimer
    Réponses
    1. Bonjour MyLittleHoneyPot,

      C'est sûrement parce que tu publies des articles le même jour, car Blogger regroupe les articles postés le même jour. C'est pour cela que les dates ne s'affichent pas sur tous les articles.

      Je peux t'envoyer un e-mail pour t'expliquer comment régler le problème. Peux-tu m'envoyer un e-mail avec l'adresse de ton blog ?

      Catherine

      Supprimer
  24. Coucou, comme d'hab', super tuto (même si je me suis encore emmêlé les pinceaux !)
    Chez moi, ça fait un résultat bizarre : le titre recouvre trop l'image et le titre et la date sont superposés :/
    PS : Aurais-tu une solution afin de faire des images en format paysage ?

    Angéla du blog TheNailArtZone.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Salut Angéla,

      Je t'envoie un e-mail avec les détails :)

      Supprimer
  25. Je souhaiterais vraiment arriver à avoir des miniatures, je me suis encore penchée dessuset je n'y arrive vraiment pas. Pourrais-tu essayer de voir ce qui ne va pas? Merci par avance

    RépondreSupprimer
    Réponses
    1. Désolée je pensais t'avoir répondu ! Je t'envoi un mail tout de suite !

      Supprimer
  26. J'ai le droit de te dire que je t'aime ou tu vas avoir peur?
    J'utilise les affichages dynamiques pour l'instant mais j'aimerais passer aux affichages classiques avec une disposition plus... dynamique :p Ton tutoriel tombe à point!
    Il faudra juste que je prenne le temps de m'y pencher car à première vue Blogger vire le code à chaque fois qu'on fait une modif sur le design donc je pense que je vais suer pour faire ça bien ^^

    RépondreSupprimer
  27. Je suis tombé sur ton blog avec le dossier hellocoton et je lis tes articles pour customiser son blogger et waouhhh c'est génial ce que tu proposes. J'ai fais quelques essais et ça marche, je suis encore plus "super méga contente " car ça fait quelques temps que je voulais refaire un peu ma mise en page et que je galerais et avec tes articles c'est simple et je comprend la marche a suivre en deux ou trois lectures ;) Parce que mes précédents essais furent une cata ....
    Je pense appliquer certaines petites motif que tu proposes.
    Alors un grand merci pour ses articles et tes conseils
    Mandy

    RépondreSupprimer
  28. Bonjour je te remercie de tout le mal que tu te donne à mettre ses tutoriels à la portée de tout le monde , j'ai suivi avec attention chacun de tes articles sans me heurter à de réels problème mais la je t' avoue que je suis bloquer sur l ' alignement des miniatures sa ne ressemble pas à ton exemple .
    je te remercie d 'avance.

    RépondreSupprimer
    Réponses
    1. Salut Urban Dandys,

      C'est parce que tu as des articles qui sont postés le même jour. Blogger regroupe les articles postés le même jour, et comme ce tutoriel ne modifie que l'apparence avec du CSS, alors ça fait planter l'affichage ^^.
      C'est possible de régler le problème en changeant un peu le code de ton blog, ou alors en évitant de poster des articles le même jour.
      Pour changer la date d'un article il suffit d'aller sur Articles à partir de ton tableau de bord puis de cliquer sur Modifier sous le nom de ton article quand tu le survoles avec la souris. Sur la droite de l'écran clique sur Date de publication puis sélectionne Configurer la date et l'heure et choisi la nouvelle date de publication :)

      En plus de cela, il y a un espace au-dessus de ton image sur l'article Puma xs-850 x BWGH dark denim ce qui le décale vers le bas. Il suffit de supprimer cet espace sur la page de modification de l'article.

      Pour finir il y a quelques changements à apporter pour corriger quelques problèmes.
      Va dans Modèle à partir de ton tableau de bord et clique sur Modifier le code HTML. Dans le code de l'affichage en miniature, cherches le code :

      .date-outer {
      display: inline-block;
      width: 31%;
      height: auto;
      overflow: hidden;
      margin: 0 5px -50px 5px;
      position: relative;
      }

      Et remplaces-le par :

      .date-outer {
      display: inline-block;
      width: 31%;
      height: auto;
      overflow: hidden;
      margin: 0 5px -20px 5px;
      position: relative;
      }

      Cherches maintenant celui-ci :

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

      Et remplaces-le par :

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

      Cherches le code suivant :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Et remplaces-le par :

      .post-body a img {
      border: none;
      box-shadow: none;
      margin: -35px 0px 0 -12px;
      padding: 0;
      }

      Et pour finir cherches le code :

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

      Et remplaces-le par :

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

      Voilà ! :)

      Supprimer
  29. Salut, merci pour le tuto, il est vraiment top!
    J'apprends énormément parce à ton blog donc MERCI.
    Cependant j'ai une question: Est-il possible de supprimer le lien de l'image juste sur la page d’accueil du blog à la place d'associer l'image à l'article? Parce que j'aimerais bien garder le fait de pouvoir agrandir mon image quand je clique dessus dans mon article mais pas sur l'écran d'accueil parce que c'est assez horrible. Je ne sais pas si j'ai été compréhensible...

    Merci d'avance. :)

    RépondreSupprimer
    Réponses
    1. Salut !
      Pour cela il faut changer pas mal de code. Mais je vais sûrement faire un nouveau tutoriel avec une technique différente pour afficher ses articles en miniatures qui permettra d'inclure cette fonction ;)

      Supprimer
  30. Mon dieu, je découvre ton blog par le Guide Hellocoton du Blogging, et je me dis que je fais enfin pouvoir avoir mon propre design sous blogger grâce à toi.
    J'ai le template galauness que beaucoup ont, car il se présente sous la forme de grille. Mais j'aimerais quelques de plus personnaliser. Je pense que je vais réussir grâce à toi.
    2015 sera l'année du changement de design sur mon blog.
    Je te tiendrais au courant.

    Si on a d'autres questions concernant des choses que l'on souhaite réaliser sur son blog, peut-on te contacter?

    RépondreSupprimer
  31. Mince, je viens de lire que dans les commentaires que si on a publie des articles le même jour ça pose problème. ça m'est arrivé plusieurs fois de publier le même jour :(
    alors je ne sais pas si ça va marcher.

    RépondreSupprimer
    Réponses
    1. Salut Cia,
      Oui c'est un soucis avec cette technique de mise en page des articles.
      On peut régler ce problème en changeant un peu de code HTML.
      Par contre un détail important, si tu as un thème spécial installé sur ton blog je ne suis pas sûre à 100% que mon tutoriel fonctionne. Car j'ai créé la mise en page à partir du thème Simple de Blogger. Mais les thèmes à télécharger, payants ou gratuits, peuvent beaucoup modifier le code du blog...
      Mais tu peux toujours modifier l'apparence de tes articles en miniatures que tu as déjà avec ton thème, c'est plus simple je pense.
      Si tu veux je peux te dire quels sont les codes CSS à changer :)

      Supprimer
    2. En fait j'aimerais un thème bien à moi avec des articles en grilles, car mon blog est vraiment multi-thématique et je trouve que c'est bien en page d'accueil de s'en rendre compte. Mais sur mon blog actuellement, je n'aime ni la sidebar à gauche, ni ne pas la voir en page d'accueil. Et dès que j'ai essayé de changer quelque chose dans le code, ça a raté. Donc peut-être qu'avoir un thème bien à moi serait mieux.
      Je suis en train de créer un nouveau design à partir d'un thème simple de blogger (avec un autre compte blogger pour faire des tests). Je bidouille en peu avec tes conseils pour voir ce que ça donner. Et après je testerai de l'intégrer sur mon blog.
      J'ai bien compris qu'il fallait repartir de la base même du thème simple. J'espère y arriver :)

      Supprimer
  32. Bonjour,

    J'ai un peu (beaucoup) besoin d'aide concernant cet affichage. Je l'ai fais sur mon blog.. Mais certaines photos ne s'affichent pas de la même taille.. J'ai essayé de trouver le code (je suis TRES novice) mais je ne sais pas où le trouver ! De plus, certaines dates au dessus des articles n'apparaissent pas et parfois il y a un trou blanc sans article. Vous pourriez m'aider?

    Merci !

    RépondreSupprimer
  33. Bonjour,
    Je pensais avoir noté un commentaire mais je ne le vois pas et je ne me souviens pas s'ils sont modérés ou non.. Je disais donc que je n'arrivais pas à trouver comment aligner les images. Je ne sais pas ou je dois modifier le code car je ne le trouve pas (article individuel ou code de modele)
    Aussi, je disais que des trous blancs apparaissaient, choses résolues, je pense que c'était des brouillons inutiles ! Je les ai viré et j'ai aussi modifié la date de certains articles car j'ai vu que tu en parlais dans les commentaires donc toutes les dates apparaissent au dessus de chaque articles :)
    Il me reste donc à trouver pour l'alignement. Merci de ton aide.
    Gwen

    RépondreSupprimer
    Réponses
    1. Bonsoir Gwen,
      En fait le problème vient de certaines photos qui sont plus petites que d'autres.
      Pour régler ce problème on peut agrandir un peu les photos et les centrer.

      Pour cela cherches le code suivant dans le code des l'affichage en miniature :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Et remplaces-le par :

      .post-body a img {
      max-width: 200%;
      border: none;
      box-shadow: none;
      margin: 3px 0 0 -63px;
      padding: 0;
      }

      Cherches ensuite le code suivant :

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

      Et remplaces-le par :

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

      Maintenant pour régler un petit problème d'alignement du fond des dates et lien vers l'article, cherches :

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

      Et remplaces-le par :

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

      Et voilà pour l'alignement :)

      Supprimer
  34. Autre question (je suis relou ^^) peut-on changer la couleur du "plus d'infos" voir même le texte? Je ne le retrouve pas dans le code..
    Merci à toi

    RépondreSupprimer
    Réponses
    1. Pour changer l'apparence du lien "plus d'infos" il faut changer les codes :

      .jump-link a {
      color: #525253; /* Couleur Liens vers articles */
      letter-spacing: 1px;
      font-size: 11px; /* Taille Liens vers articles */
      font-weight: 100;
      font-family: 'Verdana'; /* Police Liens vers articles */
      text-decoration: none;
      text-transform: uppercase; /* Liens vers articles en Majuscules */
      }

      .jump-link a:hover {
      color: #000000; /* Couleur Liens vers articles quand survolés par la souris */
      }

      Si tu veux changer le texte en lui-même, alors va dans Mise en page puis clique sur Modifier sur le widget Articles du blog.
      A la ligne "Texte du lien de la page d'articles" tu trouveras le texte de "plus d'infos". A toi de mettre le texte que tu souhaites et d'enregistrer :)

      Et voilà ! ;)

      Supprimer
    2. Un très grand merci pour tes réponses rapides et complètes !

      Supprimer
  35. merci pour cet article complet et super! il m'a beaucoup aidé!

    RépondreSupprimer
  36. Merci de ta rapidité Catherine c'est super il me reste quelque petit bémol : lorsque j ouvre l un de mes articles la disposition des photo et toutes décaller .
    J ai l'un de mes articles qui n'est pas aligner avec les autres et je me demande si c est pas a cause de l'espace entre la photo et le marqueurs d'expansion.
    Merci .

    RépondreSupprimer
    Réponses
    1. Effectivement. Ça semble venir de l'alignement des images. Vérifie sur la page de modification des articles que tes images sont bien centrés, et non alignés à droite. Si ce n'est pas le cas il suffit de cliquer sur l'image et de sélectionner Centrer dans la liste de liens qui apparaît en-dessous de l'image. Si ça ne règle pas le problème tu peux aussi essayer de sélectionner l'image, et cliquer sur l'outil Alignement dans la barre d'outils en haut de la zone de création de l'article. Sélectionne ensuite Centrer.

      Supprimer
  37. Merci pour ce tutoriel que je recherchais depuis longtemps !
    Pour ma part ça ne marche pas du tout mais alors pas du tout : la présentation ne change pas d'un pouce.
    En fait déjà, il semble que je n'ai qu'une ligne "" (lors de la recherche il n'y en a qu'une qui sort), c'est peut-être pour ça ? En plus elle est tout au fond du code vers la ligne 1300.
    Je pense que mon cas est désespéré mais si tu as une astuce...

    RépondreSupprimer
    Réponses
    1. Essaye de rajouter le code juste après la ligne :

      </head>

      En rajoutant :

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

      Avant le code CSS, et :

      <b:else/>
      </b:if>

      Après le code CSS.

      Supprimer
    2. Ca marche ! Le titre est un peu trop séparé de la photo mais je vais bidouiller le CSS. Merci beaucoup :)

      Supprimer
    3. Ah juste une dernière petite questions. je n'ai que 4 modules s'affichant par page. Pourtant j'ai bien spécifié que je souhaite afficher 10 articles par pages. Y'a t-il une ligne de code à changer ?

      Supprimer
    4. Juste pour dire que j'ai trouvé la réponse à ma question : Blogger limite le poids des pages à 1 mo et cela représente 4 articles pour moi (beaucoup de photos). Du coup, faute d'avoir trouvé un moyen de contourner cela, je dois laisser tomber ta belle présentation :(

      Supprimer
  38. Bonjour, je viens de publier un nouvel article et la hauteur de l'image est différente. J'ai pourtant essayé plusieurs hauteur d'image mais il y a toujours ce décalage avec mon premier article. Si tu peux passer voir mon blog et si tu as une solution ce serait génial! merci beaucoup.

    RépondreSupprimer
  39. Désolé du précédent com, ça vient de s'afficher normal^^en tout cas tes autos sont supers!

    RépondreSupprimer
  40. Wahou!!!! c'est génial... je suis parvenue à faire tout ce que je souhaitais.
    Mais les miniatures s'installent" de manière aléatoire à 3, 2 ou 1 par ligne... étrange.
    Y a-t-il une solution?

    RépondreSupprimer
    Réponses
    1. Ça peut arriver quand il y a des articles postés le même jour car Blogger les regroupe en colonne. Si ce n'est pas le cas essaye de réduire le pourcentage de la ligne max-width de 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;
      vertical-align: top;
      }

      Supprimer
    2. Oui, c'est surement à cause des articles posté le même jour.. j'ai réduit mais le problème persiste...Merci pour ton aide!

      Supprimer
  41. Bonsoir, c'est encore moi.. J'ai fais toutes les modif' sur pc avec un écran 23 pouces il me semble et la, je me mets sur mon mac 11 pouces et tout est décalé.. Est-ce que tu sais, comment je pourrais faire?? Merci :)

    RépondreSupprimer
    Réponses
    1. Salut Gwen,

      Je vais bientôt faire un nouveau tutoriel avec une nouvelle version de l'affichage en miniature qui réglera pas mal de problèmes de décalage des photos, des titres, etc.

      Supprimer
  42. Bonjour Catherine,

    Tout d'abord merci pour tes tutos absolument géniaux, tu as beaucoup de mérite!

    Ensuite j'avais une question, mon titre se met sur l'image de la miniature et lorsque j'essaie de le descendre ça coupe mon texte, je pense que tu pourras le constater en allant voir.

    Merci de bien vouloir m'aider, j’espère que j'aurais été assez compréhensible.

    Plein de bisous,
    Elora.

    RépondreSupprimer
    Réponses
    1. Salut Elora,

      Cherches le code suivant dans le code de l'affichage en miniature :

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

      Et remplaces-le par :

      .post.hentry, .entry-content {
      max-height: 240px;
      overflow: visible;
      }

      Ça devrait régler le problème

      Supprimer
  43. Bonjour LadyBird,

    Je reviens t'embetter , car je n,'ai pas trouver de solution pour intégrer une partie du texte de mon article a mes miniatures ( comme sur ce blog ici --> http://www.julieworldofbeauty.com/ ) , aurais-tu une solution pour moi s'il te plait ?! J'utilise la version 2 avec 2 colones ! Merci d'avance , si tu as le temps de me repondre ♥ un très bon week-end .

    RépondreSupprimer
    Réponses
    1. Bonjour Rose Mademoiselle,

      Je vais faire une nouvelle version d'affichage en miniature qui réglera pas mal de problèmes et inclura un résumé de l'article.
      En attendant tu peux faire apparaître les premières lignes de ton article en changeant un peu de code CSS.

      Cherches le code suivant dans le code de l'affichage en miniature :

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

      Et remplaces-le par :

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

      :)

      Supprimer
  44. Bonjour ! J'ai une petite question.. (oui je suis encore la ^^)
    J'aimerais trouver le moyen de faire une "barre sous blog" comme tu as ici, sous tes articles, le fond complètement bleu, tu vois? C'est juste des gadget? Je cherche un moyen de dissocier le bas du blog, des articles, soit par un encadré, soit par un un fond de couleur différent comme toi..
    Un prochain tuto? ^^

    Merci de ton aide !

    RépondreSupprimer
    Réponses
    1. Oui, c'est le pied de page avec ses gadgets que j'ai déplacé sous le blog pour qu'il puisse faire toute la largeur de la page.
      Je pourrais l'expliquer dans un tuto :)

      Supprimer
    2. Génial ! J'attends ça avec impatience :) Merci encore pour tout ce que tu fais !

      Supprimer
  45. Coucou, est-il possible de rapprocher le texte du titre de l'image sur la version 2 ?
    Merci d'avance. :)

    RépondreSupprimer
    Réponses
    1. Bonjour, oui c'est possible, il suffit de changer la valeur de bottom du code suivant :

      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: 0;
      }

      Une valeur positive (ex: 10px) déplacera le texte du titre vers le haut et une valeur négative (ex: -10px) déplacera le titre vers le bas.

      Attention à bien changer ce code seulement dans le code de l'affichage en miniature commençant par /* Code pour la VERSION 1 */ ou /* Code pour la VERSION 2 */

      Et voilà :)

      Supprimer
  46. Un IMMENNNNNSSSSSEEEE merci pour cet article ! Je voulais depuis je ne sais pas combien de temps (peut être depuis mon premier blog ya 4 ans) je cherchais comment faire des petites vignettes avec des résumés et maintenant c'est fait !!!

    Merci tout plein pour ce post <3

    Tu peux voir ce que ça donne ici : monsacadosvert.blogspot.com

    RépondreSupprimer
  47. J'essaie de mettre en pratique des très précieux conseils... toutes tes explications sont hyper claires et c'est vraiment super un grand merci!!!!
    Mais j'ai plusieurs problèmes:
    - les miniateures se mettent tout à fait n'importe comment d'une page à l'autre ça change. Pourquoi et que faire pour y remédier.
    - Le titre se met au milieu de la photo
    - La date ne s'affiche pas
    - le lien ne se met pas au bon endroit lui non plus...
    Au vu de tout ça, ça ne ressemble pas à grand chose du coup!
    Peux-tu m'aider?
    http://emivaphotos.blogspot.be/
    Merci!

    RépondreSupprimer
    Réponses
    1. Bonjour Emilie,
      Je vais faire un nouveau tutoriel avec une méthode différente pour afficher les articles en miniature qui réglera beaucoup de problèmes d'affichage.

      Supprimer
  48. Ouups je n'avais pas vu ta réponse de l'autre jour...déjà merci... si tu peux m'aider aussi pour le reste ;-)

    RépondreSupprimer
  49. Bonjour, j'ai découvert ton blog il y a quelques mois, et je dois dire qu'enfin grâce à toi, je peux donner une apparence sympa à mon blog. Pour avoir chercher vraiment longtemps de bon conseils pour "arranger" mon blog, je dois dire que je reste bloquée sur tes conseils. C'est vraiment très bien expliqué, même si parfois je n'arrive pas à tout faire.
    Merci encore :)

    RépondreSupprimer
  50. Coucou,

    Ah le Saint Graal!
    Je cherche depuis un moment à faire ça mais sans y arrivé. Par contre moi ce que j'aimerai c'est avoir la miniature, et un extrait de texte en dessous avec un lire la suite!

    Seule hic je suis sous wordpress, tu saurai comment faire???

    Merci

    RépondreSupprimer
    Réponses
    1. Salut Laura,
      Ce tutoriel ne marche que sur Blogger. Je n'ai pas cherché comment le faire avec Wordpress, qui fonctionne d'une manière complètement différente. Désolée :/

      Supprimer
  51. Bonjour, nous avons essayé de faire la version 1 sur notre blog, mais rien ne s'affiche comme prévu, et nous ne sommes pas très douées en informatique. Les articles ne s'affichent pas en colonne mais les uns en dessous des autres et leur taille ne convient pas du tout, même en ayant essayé de modifier des paramètres ! On aimerait aussi pouvoir enlever le menu déroulant et faire en sorte que nos articles soient rangés par catégories mais on n'arrive pas à mettre plusieurs articles dans la même catégorie sans que ça en crée une nouvelle...

    Merci de ton aide.

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie Jade,

      Vous avez ajouté 2 fois cette ligne :

      <style type='text/css'>

      Avant la ligne :

      /* Code pour la VERSION 1 */

      Supprimez-en une et les articles apparaîtront en grille :)

      Ensuite pour l'affichage, SOUS la ligne :

      /* Code pour la VERSION 1 */

      Cherchez le code suivant :

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

      Et remplacez-le par celui-ci :

      .date-outer {
      display: inline-block;
      width: 31%;
      height: auto;
      overflow: hidden;
      margin: 0 5px -20px 5px;
      position: relative;
      }

      Ensuite cherchez le code suivant :

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

      Et remplacez-le par :

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

      Cherchez le code suivant :

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

      Et remplacez-le par :

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

      Pour finir, cherchez le code :

      .jump-link {
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 999;
      }

      Et remplacez-le par :

      .jump-link {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 999;
      }

      Supprimer
    2. Merci beaucoup pour ton aide!
      On aimerait aussi savoir comment mettre plusieurs articles différents dans une catégorie pour que lorsqu'on clique sur le nom de la catégorie tous les articles s'affichent sans le menu déroulant.

      Supprimer
    3. Tu peux ajouter le même libellé à plusieurs articles. C'est la seule manière d'afficher plusieurs articles sous 1 libellé.
      Sur la page de création/modification de l'article à droite de l'écran, clique sur Libellé et sélectionne le libellé souhaité dans la liste proposée. Pas besoin de créer une nouvelle, il suffit de sélectionner une existante :)

      Dans ton menu tu n'auras alors qu'a créer un lien, mode par exemple, sans menu déroulant qui renvoi vers les articles comportant le libellé mode.
      L'adresse url de ce lien sera de type :

      http://adresse-du-blog.blogspot.fr/search/label/mode

      Supprimer
  52. Bonjour Catherine,
    Merci pour tous ces articles, j'ai passé une partie de la nuit à transformer mon blog, mais je suis loin d'avoir fini !
    J'ai quelques questions :
    - comment aligner tous mes articles (ils sont en décalés ...)
    - j'aimerai retirer le bande sur lequel apparait le titre de l'article, descendre le titre (qu'il ne soit pas au centre de l'image) et retirer la date ...
    Je te remercie.
    Belle journée.
    Frédérique (http://histoire-de-coudre.blogspot.fr/)

    RépondreSupprimer
    Réponses
    1. Bonjour Frédérique,

      Le problème des articles décalés vient du fait que certains de tes articles sont postés le même jour. Blogger regroupe les articles postés le même jour et ils apparaissent l'un en dessous de l'autre ce qui fausse l'affichage.
      Pour régler ce problème tu peux simplement changer la date de quelques articles, d'un jour par exemple, sur la page de création/modification de l'article (Dans Articles clique sur l'article que tu souhaites modifier).

      Ensuite pour régler le problème des titres.
      Commence par rechercher dans le code de l'affichage en miniature (commençant par /* Code pour la VERSION 2 */), le code suivant :

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

      Et remplaces-le par :

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

      Ensuite cherches le code suivant :

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

      Et supprime-le.

      Maintenant pour les dates.
      Cherches le code suivant (toujours dans la partie de l'affichage en miniature) :

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

      Et remplaces-le par :

      h2.date-header {
      display: none;
      }

      Sauvegardes.
      Voilà ça devrait régler le problème :)

      Supprimer
    2. Merci Catherine, c'est exactement ce que je voulais.
      Grâce à toi, je commence à comprendre les codes ...
      Concernant les dates, j'avais justement modifié celles de mes articles afin d'obtenir 2 colonnes. Mais j'en ai qui ont toujours des décalages ... Du coup, j'ai augmenté l'espace avant et après mon image.
      Il me reste encore un truc qui ne va pas : lorsque je clique sur l'image de l'article, un message d'indique que la page n'existe plus ... Si je clique sur le titre de l'article, celui-ci s'ouvre. Je veux pouvoir ouvrir l'article en cliquant sur l'image.
      Comment procéder ?
      Je te remercie.
      Frédérique

      Supprimer
    3. Bonjour Catherine,
      Cest bon pour le lien de l'article sur la photo, j'ai réussi.
      Par contre, comment fais tu pour enlever le message "Affichage des articles dont le libellé est Cours de couture. Afficher tous les articles"
      Je te remercie.
      Frédérique
      PS : J'adore la nouvelle forme de mon blog !!!! Grâce à toi

      Supprimer
    4. Je suis contente que ça te plaise ! :)
      Pour supprimer le message cherches le code suivant :

      /* Content

      Juste au-dessus colle ceci :

      .status-msg-wrap {
      display: none;
      }

      Et voilà ! :)

      Supprimer
  53. Coucou :)
    Tout d'abord je voulais juste te dire MERCI pour ce super tuto, très bien expliqué et pas trop compliqué mais qui donne un sujet résultat! :D
    Je t'ai découvert grâce au guide du blogging et tu es dans les favoris de mon navigateur tellement que je compte passer souvent!

    Par contre j'ai un petit problème :( Donc je suis toutes les étapes pour la version 2, je personnalise ce qu'il faut, sauf que les titres passent par dessus les images et son illisible. Au début j'ai pensé à modifié la taille des titres, le marging, et même de mettre des nombre en négatif! Ca fait pas mal de temps que je m'énerve sur le code donc ton aide serait vraiment la bienvenue! Je voudrais donc savoir comment faire pour régler à quelle hauteur on veut notre titre sous la photo (par exemple moi sur mon blog je ne veux pas que le titre chevauche la photo, je le veux bien en dessous pour qu'il soit bien visible -je ne sais pas si tu vois ce que je veux dire :(-)

    Merci d'avance ♥

    Julie

    P.S: Je te laisse le lien de mon blog pour que tu puisses constater comment son les titres: www.mavieenblonde.blogspot.fr

    P.P.S: Peut être que c'est par ce que j'ai modifié le code de mon blog avant de modifié la largeur de la colonne de droite? Quand elle était vers 400 px, les titres allait bien mais depuis que je l'ai repassé à 300px c'est la cata! :(

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      De ce que je peux voir il n'y a que quelques articles dont le titre chevauche l'image. Commence par chercher ce code :

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

      On va changer la ligne :

      bottom: 0;

      par :

      top: 235px;

      Change aussi la ligne :

      height: 55px;

      par :

      height: 59px;

      Ensuite, on va ajouter la ligne suivante pour éviter que tes titres dépassent 2 lignes (le titre sera coupé mais ça évitera qu'ils ne dépassent trop) :

      overflow: hidden;

      Sauvegardes.
      Maintenant il y a 2 de tes articles qui ont un espace au-dessus de la première image ce qui la décale vers le bas et chevaucher le titre. Va sur la page de création/modification de l'article et supprime l'espace au-dessus des articles et ça devrait régler le problème :)

      Supprimer
    2. Coucou!
      Je viens de faire tout ce que tu m'as dit et magie ça marche!
      Merci merci merci!

      Supprimer
  54. Hello !
    Merci beaucoup pour ce tuto !! Je compte le réaliser mais comment puis je le faire uniquement pour mes catégories/labels et non pour ma page d'accueil ??

    Je te remercie par avance ! :)

    RépondreSupprimer
    Réponses
    1. Bonsoir Aly,

      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.
      Au-dessus de la ligne suivante :

      <style type='text/css'>

      Ajoutes :

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

      Et en-dessous de la ligne suivante :

      </style>

      Ajoutes :

      </b:if>

      Voilà :)

      Supprimer
    2. Je viens tout juste de voir ta réponse; je vais essayer !
      Merci beaucoup !!!!

      Supprimer
    3. J'ai essayé ça marche sur le principe car il n'y a que mes libellés ! Mais ça fait la casa, les articles ne s'ouvre pas en format normal, il reste miniatures avec le titre sur le texte dans un petit carré, je ne comprends pas !

      Supprimer
    4. Essaye de rajouter la ligne suivante :

      <b:else/>

      Avant :

      </b:if>

      Supprimer
    5. Merci beaucoup pour ton aide mais ça ne marche pas du tout .. En plus, mes photos ne sont même pas toutes de la même taille, c'est l'horreur ! Je vais abandonné ce projet je pense ...

      Supprimer
    6. Le problème vient sûrement de ton thème :/
      Si tu le souhaites, je peux te l'installer directement en l'adaptant à ton thème. C'est une modification que je propose dans mon pack à 30 € ;)
      Envoie-moi un mail si ça t'intéresse :)

      Supprimer
  55. Bonjour merci pour ce tuto top :)
    J'ai fais mon blog grâce a vos tuto super bien expliquer.
    Aujourd'hui j'ai essayer de faire celui ci , j'ai des soucis :/
    J'ai des blanc .. Et aussi je ne vois plus le LIRE PLUS ?
    Seriez vous comment je pourrais faire ?
    Et les image son trop grosse on voit rien :/
    Merci de votre réponse :)

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Le lien Lire plus à disparu car il te manque un point-virgule après le code de la couleur (première ligne):

      .jump-link a {
      color: #eee7e4 /* Couleur Liens vers articles */
      letter-spacing: 1px;
      font-size: 11px; /* Taille Liens vers articles */
      font-weight: 100;
      font-family: 'Verdana'; /* Police Liens vers articles */
      text-decoration: none;
      text-transform: uppercase; /* Liens vers articles en Majuscules */
      }

      Rajoutes-le et le lien devrait réapparaître ;)

      Je te conseil d'augmenter l'espace de la photo en remplaçant le code suivant :

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

      Par :

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

      Aussi remplace le code suivant :

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

      Par :

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

      Pour augmenter l'espace entre tes miniatures.

      Que veux-tu dire par des "blancs" ?

      Supprimer
    2. Merci de votre réponse , j'avais réussi grace a vos explication a d'autre :)
      Le blanc c'étais des brouillons :/ je les est enlever est tout a était aligné .
      Merci encore de votre réponse :)

      Supprimer
  56. Un grand, un énorme merci pour tes tutoriels qui m'ont beaucoup aidé, celui ci en particulier !
    Après un long moment de bidouillages, j'arrive presque à obtenir le rendu souhaité. Pourrais tu m'aider pour finaliser ?
    J'aimerais en fait que les titres ne soient pas soulignés lorsqu'on les survole, et qu'ils ne fassent qu'une ligne maximum, et non deux. Que les longs titres se terminent par trois petits points par exemple.

    Merci pour ton aide, ton blog est super, vraiment, merci beaucoup ! :D

    RépondreSupprimer
    Réponses
    1. Bonjour Sally,

      Pour supprimer le soulignement des titres cherches le code suivant dans le code de l'affichage en miniature :

      h3.post-title.entry-title a {
      color: #121514;
      font-family: 'PT Sans Narrow';
      font-size: 14px;
      font-weight: 300;
      }

      Et ajoutes la ligne suivante avant le } :

      text-decoration: none;

      Comme ceci :

      h3.post-title.entry-title a {
      color: #121514;
      font-family: 'PT Sans Narrow';
      font-size: 14px;
      font-weight: 300;
      text-decoration: none;
      }

      Pour que les titres ne fassent qu'une ligne maxi, cherches le code suivant :

      h3.post-title.entry-title {
      text-align: center;
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 59px;
      position: absolute;
      top: 170px;
      }

      Remplace ce code par :

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

      Par contre avec cette méthode d'affichage en miniature il n'est pas possible d'ajouter 3 petits points. Mais les titres ne dépasseront pas 1 ligne :)

      Supprimer
    2. Coucou,

      Merci beaucoup beaucoup ! Non seulement tu réponds aux commentaires, tu nous aides tous, mais en plus tu le fais bien, en détaillant, etc. J'apprécie, vraiment. Merci beaucoup ! :D

      Supprimer
  57. Salut! Pourrais tu nous dire comment tu fais pour afficher les articles en grille quand on clique sur un libellé? J'aimerai bien mettre mes libellés en grille. Haha je ne sais pas si tu vois? ^^ Merci, je t'avais envoyé un mail mais je n'ai pas eu de réponses peut être que tu ne l'as pas reçu! Si tu pouvais m'apporter ton aide ca serait super gentil!! Bisous ! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      J'ai tellement d'e-mails et de commentaires qu'il m'arrive d'en louper, désolée ! ^^'
      Pour appliquer l'affichage à tes libellés seulement il faut coller le code de la version de ton choix après la ligne :

      </head>

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

      <style type='text/css'>

      Ajoutes :

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

      Et en-dessous de la ligne suivante :

      </style>

      Ajoutes :

      </b:if>

      Voilà :)

      Supprimer
    2. Merci beaucoup! Je comprends c'est normal! En tout cas c'est gentil de m'avoir répondu, je vais essayé pour voir si ça marche :) Bisou

      Supprimer
    3. Re coucou. J'ai ajouté les 2 lignes de codes mais ça ne marche pas. Peut être que c'est mon modèle de blog qui bloque, je ne sais pas. Il faut ajouté autre chose à part et ? Je te remercie :)

      Supprimer
    4. Effectivement je pense que le soucis vient de ton thème. Mais comme je ne le connais pas je ne peux pas te donner de réponse :/

      Supprimer
    5. J'ai peut-être une solution !
      Essaye de coller le code Avant la ligne suivante :

      </body>

      Et non après la ligne :

      </head>

      Supprimer
    6. Coucou! Merci d'avoir répondu je n'avais pas vu! Alors je comprends pas trop du coup, je recherche /body et qu'est ce que je dois coller avant? ^^ Désolé haha ! Si tu veux je peux t'envoyer mon thème tout ce que tu veux :/ j'aimerais trop avoir ces grilles en libellés snif snif J'ai trouvé mon thème ici: http://mairagall.com/producto/radiance/ ! Je peux t'envoyer mon modèle? je l'ai téléchargé si ca peut aider :) Merci beaucoup!! Bisou

      Supprimer
    7. Colles le code CSS de l'affichage en miniature de ton choix (donné dans le tutoriel) avant la ligne :

      </body>

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

      <style type='text/css'>

      Ajoutes :

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

      Et en-dessous de la ligne suivante :

      </style>

      Ajoutes :

      </b:if>

      Voilà :)

      Supprimer
    8. Youpiiiii ça marche ! :) merci beaucoup !! Par contre j'ai essayé de trafiquer un peu pour enlever le surplus de blanc au dessus de mes photos , mais je n'y arrive pas :/ bisous!

      Supprimer
    9. Pour supprimer l'espace au-dessus de tes photos cherches le code suivant dans le code de l'affichage en miniature (commençant par /* Code pour la VERSION 1 */) :

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

      Et rajoutes le code suivant avant le signe } :

      margin-top: 0;

      Comme ceci :

      .post.hentry, .entry-content {
      height: 250px;
      overflow: hidden;
      margin-top: 0;
      }

      Colle le code suivant juste après le précédant :

      .post-header {
      display: none;
      }


      Ensuite Il y 2 petites erreurs dans ton code.
      Cherches le code suivant :

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

      Et change la valeur de height pour 250px et non -250px :

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

      Cherche aussi ce code :

      .post-body a img {
      max-width: 130%;
      border: none;
      box-shadow: none;
      margin: -35px 0 35px 0;
      padding: 0;
      }

      Et supprime cette ligne :

      max-width: 130%;

      Ce qui donne :

      .post-body a img {
      border: none;
      box-shadow: none;
      margin: -35px 0 35px 0;
      padding: 0;
      }

      Voilà ! ;)

      Supprimer
    10. Super!!! :D Merci beaucoup pour ton aide! Tu es super sympa :) bisous !

      Supprimer
  58. Bonsoir,
    Je viens de découvrir votre blog grâce au guide de Hellocoton et il tombe juste à pic !!!
    Merci beaucoup pour ce tuto ! je pense que grâce à lui, puis grâce à vos différentes réponses aux commentaires j'ai fait qqchose de pas trop mal...

    Seule petite question, quand je suis dans ma page d'accueil ( j'ai demandé à voir 10 articles) je n'arrive plus à cliquer sur "articles plus ancien" et voir les autres ...
    est-ce lié?

    En tout cas merci encore pour ton aide ! c'était super !

    RépondreSupprimer
    Réponses
    1. Bonjour,

      Pour régler ce problème ajoutes le code suivant :

      #blog-pager {
      margin-top: 50px !important;
      }

      En-dessous de la ligne :

      /* Code pour la VERSION 2 */

      Et voilà :)

      Supprimer
  59. Merci beaucoup pour ce tuto ! Je viens de modifier le design de mon blog ;)

    RépondreSupprimer
  60. Encore un super tuto, merci, depuis le temps que je voulais un affichage en grille!

    Merci encore! <3

    RépondreSupprimer
  61. Petite question tout de même: comment ne pas afficher le nombre de commentaires sur la page d'accueil? J'ai "8 mots doux" par exemple qui s'affiche en haut de chaque aperçu d'article! :/

    RépondreSupprimer
    Réponses
    1. Salut Julie,

      Ajoutes en-dessous de la ligne :

      /* Code pour la VERSION 1 */

      Les codes suivants :

      span.post-comment-link {
      height: 17px;
      content: '';
      display: block;
      }

      span.post-comment-link a {
      display: none;
      }

      Pour rectifier le petit décalage de la barre rose change la valeur de bottom du code suivant :

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

      Pour ceci :

      bottom: 54px;

      ;)

      Supprimer
    2. Oh merci de la réponse très rapide! :)
      C'est top et ça fonctionne, merci encore, et douce soirée à toi!

      Supprimer
    3. Hello, je ne vois pas mon commentaire, je ne sais pas s'il est passé! :/
      Je disais que la barre "rose" qui contient mon "lire la suite" et la date dépasse de chaque photo en largeur.. :/ Est-ce que c'est modifiable, ou est-ce que cela vient de la taille de mes photos?

      Merci d'avance et douce journée!
      (mon blog: http://www.julinfinity.com)

      Supprimer
    4. Bonjour Julie, oui je n'ai pas eu le temps de modérer les commentaires c'est pour ça que tu ne le trouvais pas ^^

      Pour ta barre rose, elle dépasse en largeur ou en hauteur ? Ça peut venir de la taille de tes photos mais on peut y remédier en zoomant un peu sur les photos.

      Supprimer
    5. Bonjour, ce n'est rien je comprends!
      Elle dépasse en largeur des photos, je te te donne le lien pour que tu puisses voir par toi même: http://www.julinfinity.com
      ^^

      Supprimer
    6. Cherches le code suivant dans le code de l'affichage en miniature :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Et remplaces-le par :

      .post-body a img {
      border: none;
      box-shadow: none;
      }

      Ensuite cherches :

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

      Et remplaces-le par :

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

      Puis cherches :

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

      Et remplaces-le par :

      .post.hentry, .entry-content {
      height: 270px;
      overflow: hidden;
      text-align: center;
      }

      Et enfin ajoutes le code suivant juste après le précédent :

      .post-body a {
      margin: 0 !important;
      }

      Certaines de tes photos sont trop petites et il restera donc un espace autour d'elles (comme pour "Mon Instax Mini 8 Fujifilm (bons plans & astuces inside)" et "Dragons 2: un chef-d'oeuvre à consommer sans modération!"), mais le problème de décalage des autres photos sera réglé ;)

      Supprimer
    7. Hello!

      Je viens d'essayer merci, effectivement tout est aligné! Bon je fais ma relou une dernière fois, mais le zoom est énorme sur les photos, on ne voit plus qu'un petit détail de la photo et plus du touuuut le sujet principal (par exemple sur mon article smoothie on voit juste un morceau de paille alors que la photo initiale présente de loin le smoothie...)
      Il n'y a aucun moyen de dézoomer un peu?

      Je te remercie encore, et désolée pour toutes ces questions ^^

      Supprimer
    8. Effectivement, et c'est une petite erreur de ma part. Entre les copier-coller on s'y perd ^^

      Retrouve ton code suivant :

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

      Et remplace la ligne :

      min-height: 270px;

      Par

      height: 270px;

      Et voilà ! ;)

      Supprimer
    9. Si tu veux dé-zoomer encore un peu tu peux changer cette même ligne par :

      height: 252px;

      Mais si tu diminues trop alors on verra des espaces autour de tes images un peu plus petites.

      Supprimer
    10. Je viens seulement de voir ton mail ! ^^'

      Supprimer
    11. Tu es gé-niale! J'ai réduit encore un petit peu et c'est bon, il faudra qu'à l'avenir je n'utilise que des photos en paysage et ça devrait être parfait!
      Merci encore Catherine!
      <3

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

    RépondreSupprimer
  63. coucou, j'ai créer un "blog test" pour tester le design avant de le mettre sur mon vrai blog et c'est une vrai catastrophe pour moi ! Je n'arrive vraiment pas à avoir le même design que la première version, cela ressemble à rien ! Je suis complètement perdu donc si tu pourrais m'aider... : http://pllbloggertest.blogspot.fr/

    En tout cas j'aime beaucoup tes tutos, ils m'ont permis de me familiariser avec les codes HTML. :)

    RépondreSupprimer
    Réponses
    1. Bonjour Pretty Shiley,

      Tout d'abord tes articles apparaissent en 1 seule colonne car tu as posté ces articles le même jour. C'est un petit bug qui a lieu à cause de Blogger qui regroupe automatiquement les articles postés le même jour. On peut y remédier de 2 manières :
      - changer la date à laquelle l'article à été posté : Dans Articles clique sur ton article, puis clique sur Date de publication à droite de l'écran. Choisi ici une date de publication différente.
      - changer le code HTML de ton thème mais c'est plus compliqué et trop long à expliquer ici.

      Ensuite pour régler le problème de l'affichage.
      Pour enlever la bordure autour de la date :
      Cherches dans le code de l'affichage en miniature (commençant par /* Code pour la VERSION 1 */) le code suivant :

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

      Et rajoutes :

      border: none;
      float: none;

      Avant le } comme ceci :

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

      Ensuite cherches :

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

      Et remplace la ligne :

      left: 0;

      par :

      left: -1px;

      Ensuite cherches :

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

      Et remplace-le par :

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

      Cherches maintenant :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Remplace-le par :

      .post-body a img {
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Et pour finir cherches :

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

      Remplace-le par :

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

      Ça devrait régler les problèmes :)

      Supprimer
    2. Oh la la, il y avait pas mal d'erreur :').
      merci ! Merci infiniment ! :D

      Supprimer
  64. Bonjour désolé encore de venir vous appelé a l'aide :/
    J'ai un gros soucis j'ai voulu faire le menu déroulant j'avais tout enregistrer puis j'y arrivais pas du tout , donc j'ai effacer mais j'ai du effacer quelque chose qu'il ne fallait pas :/
    Mes article et les commentaire n'on plus la même écriture et la couleurs que j'avais mis j'ai essayer de chercher dans la version 1 pour mettre en mignature et en grille mais tout est normal :/ de quoi sa pourrais venir svp ?
    Je sais pas si vous allez me comprendre : http://doux-bonheurs.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. As-tu changé l'apparence dans Modèle > Personnaliser ?

      Supprimer
  65. bonsoir,
    merci beaucoup pour toute ces explications, elles m'ont beaucoup servi.
    Par contre parfois j'ai des trous, les vignettes de s'aligne pas, je sais pas quoi faire pour améliorer cela. Si vous avez le temps de passer sur mon blog (pour comprendre ce que je dis lol) et si vous avez l'explication, elle sera la bienvenue. Merci encore

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie,

      Le problème vient du fait que tes article sont postés le même jour. Blogger regroupe les articles postés le même jour et du coup elles apparaissent en 1 seul colonne ce qui créé des trous. La méthode la plus simple est de changer la date de publication de certains articles.
      Va dans Articles puis clique sur le nom de l'article. Sur la droite de l'écran clique sur Date de publication. Ici tu pourras choisir une autre date.
      Ça devrait régler le problème :)

      Supprimer
    2. merci beaucoup je vais essayer ta technique

      Supprimer
    3. merci beaucoup d'avoir pris le temps de me répondre, j'ai juste un dernier problème, sur mon dernier billet publié, la date de l'article ne s'affiche pas sur la vignette mais en dessous ce qui fait un gros gros trou entre chaque ligne, je n'arrive pas à trouver la solution :-/ et une dernière chose est ce qu'il y a une solution pour ne pas avoir de trou si jamais je veux publier plusieurs article le même jours ?

      Supprimer
    4. Bonjour Mélanie,

      Cherches le code de ton affichage en grille, et cherches le code suivant :

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

      Remplaces-le par :

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

      Ensuite cherches le code suivant :

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

      Et remplaces-le par :

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

      Puis cherches le code suivant :

      .post-body a img {
      max-width: 100%;
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Remplaces-le par :

      .post-body a img {
      border: none;
      box-shadow: none;
      margin: 0 0 0 -12px;
      padding: 0;
      }

      Et cherches le code suivant :

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

      Remplaces-le par :

      .post-body img {
      width: auto;
      height: 210px;
      }

      Ensuite colles le code suivant juste après le précédent :

      .post-body a {
      margin: 0 !important;
      padding: 0;
      }

      Pour régler le problème des articles postés le même jour je vais t'envoyer un e-mail ça sera plus simple :)

      Supprimer
    5. merci beaucoup ! tout est ok maintenant franchement c'est super ce que tu fais. mille merci

      Supprimer
  66. Merci beaucoup pour ce super tuto! J'ai finalement choisi de ne garder qu'une seule colonne car visuellement cela faisait fouillis avec mes photos ;-) Mais c'est nettement plus 'propre' que ce que j'avais avant!
    Comme je tricote aussi, j'ai mis deux liens vers ton blog ;-)

    RépondreSupprimer
  67. Bonjour!
    Peut-on faire un retour au modèle d'avant sans les affichages miniatures?
    (Je voudrais revenir au tout début, lorsque je n'avais rien changer)
    Suffit-il de supprimer le code CSS du modèle en miniature?
    Merci
    A bientôt, Gf

    RépondreSupprimer
    Réponses
    1. Bonjour Gorgeous Flake,
      Oui il suffit de supprimer le code CSS de l'affichage en miniature de :

      <style type='text/css'>

      à

      </style>

      Supprimer
  68. Bonjour! tout d'abord merci pour ces précieux conseils! je suis en plein "test" avant de lancer mon blog et j'ai essayé de mettre les articles en grille, cela a fonctionné sur les 2 premiers articles puis lorsque j'ai voulu ajouter des articles, la date ne s'affichait plus sur certaines miniatures... Est ce que tu as une idée d'où cela peut venir? voici l'adresse de mon blog au cas ou : http://ohmysimpleblog.blogspot.fr/ merci beaucoup

    RépondreSupprimer
  69. Re bonjour, je t'ai écris pour un problème d'affichage de mes articles en grille (http://ohmysimpleblog.blogspot.fr/) mais finalement j'ai réussi à résoudre mon problème en lisant une réponse que tu avais déjà fait en commentaires! Cela venait de la date de publication des artcicles.. merci encore pour ton blog riche en conseils ;)

    RépondreSupprimer
  70. Je ne comprends pas il me dit qu'il y a une erreur d'analyse

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Il me semble que le problème est réglé ? L'affichage fonctionne :)
      Par contre petite remarque pour éviter le chevauchement du titre avec la date, cherches le code suivant :

      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: 51px;
      }

      Et rajoutes la ligne suivante avant le signe } :

      overflow: hidden;

      Comme ceci :

      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: 51px;
      overflow: hidden;
      }

      :)

      Supprimer
  71. bonsoir
    vraiment tes tutoriels sont juste au top
    moi qui viens de créer un blog et qui suis nul en design je suis ravie
    gros bise et prends soin de toi ma belle

    RépondreSupprimer
  72. Bonjour j'ai réussis à appliquer le modele version 1 mais le problème est que cela me fait des trous ou il n'y a pas d'article que faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour Emma,
      Si tu as des articles postés le même jour, le problème peut venir de ça.
      Pour y remédier tu peux changer la date de publication des articles en cliquant sur Articles puis sur le nom de l'article. Sur la droite de l'écran cliques sur Date de publication. Ici tu pourras choisir une autre date :)

      Supprimer
  73. Bonsoir, je me permet de vous écrire, j'ai essayer votre version 2 mais celle-ci ne marche pas... J'ai juste les photos des articles comme ceci :
    Article 1
    Article 2
    ...
    Ils ne sont pas les uns à côté des autres mais les uns en dessous des autres...
    Je ne sais pas comment faire..

    Merci de votre aide, Delphine
    http://Delphi-world.blogspot.com

    RépondreSupprimer
  74. J'écris a nouveau un message pour modifier ma question. J'ai finalement réussi à installer le modèle 1, le seul problème c'est que mes photos ne ce mettent pas correctement dans le cadre...

    Merci d'avance, Delphine
    Delphi-world.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Delphine,
      Il me semble que tu as finalement changé la mis en forme non ?

      Supprimer
  75. Bonsoir,
    J'ai bien mis mes articles en format grille et tout fonctionne
    J'aimerais savoir comment on peut faire pour afficher le texte que l'on a mis avant la ligne de séparation, en quelque sorte que l'intro soit visible sur la page d'accueil ?
    Merci d'avance pour ton aide !
    Charlotte du blog Women's World http://womens-world-blog.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Il n'est pas possible d'ajouter un extrait de l'article avec la méthode expliqué dans ce tutoriel. Il faut changer le code HTML de ton thème, ce qui est plus compliqué à expliquer. Je peux néanmoins te proposer de le faire en prestation :)
      En fait, au lieu de simplement changer l'apparence des articles on va créer un affichage automatique en aperçu. Cette modification entre dans le pack à 30 €. Si tu es intéressée envoi-moi un mail :)

      Supprimer
    2. Merci de ta proposition
      Je vais y réfléchir je te recontacte dès que j'ai choisi ! ;)

      Supprimer
  76. C'est encore moi, en voulant changer de police je me suis bloquée je n'arrive plus à définir la police de mes titres ni de ma barre d'onglets je voulais mettre la police Josefin Sans que j'avais auparavant mais je n'y arrive pas. Peux tu m'aider ?
    Merci mille fois
    Charlotte
    http://womens-world-blog.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Charlotte,
      Il y a quelques petites erreurs dans ton code : il manque les point-virgules à la fin des 2 première lignes du code suivant :

      h3.post-title.entry-title a {
      color: #000000
      font-family: 'Josefin Sans'
      font-size: 18px; /* Taille Titres */
      font-weight: 300;
      }

      Rajoutes-les comme ceci :

      h3.post-title.entry-title a {
      color: #000000;
      font-family: 'Josefin Sans';
      font-size: 18px; /* Taille Titres */
      font-weight: 300;
      }

      Et ça devrait marcher :)

      Supprimer
  77. Bonjour Catherine,

    Tout d'abord, un grand, grand MERCI pour ce tuto très bien fait ! J'ai installé la V1 mais j'ai deux soucis : le 1er c'est que je n'ai que 3 articles qui s'affichent en page d'accueil (sur les autres pages, j'en ai bien 6). Le second c'est que j'ai des articles qui ont disparu de certaines de mes catégories, alors qu'ils ont toujours le libellé... Aurais-tu une idée ?

    RépondreSupprimer
    Réponses
    1. Bonjour Théodora,
      C'est plutôt étrange. En tout cas ça ne devrait pas venir du code du tuto car il ne fait que modifier l'apparence des articles. Vérifie dans Mise en page > Articles du blog > Modifier que tu as bien 6 articles à la ligne : Nombre d'articles sur la page principale.
      Vérifie également dans Paramètres > Publication et commentaires que tu as aussi 6 articles sur la page principale à la première ligne : Afficher au plus ?

      Pour les articles qui ont disparu vérifie bien l'écriture des libellés, elle doit être exactement la même (majuscules, espaces et accents) pour tous les articles et dans le lien de ta catégorie

      Voilà, j'espère que ça pourra t'aider :)

      Supprimer
  78. Merci pour ta réponse ! J'avais effectivement oublié de regarder les paramètres de la page principale mais même en modifiant je n'ai toujours que trois articles sur cette page snif. Je vais peut être revenir au modèle de base du coup et retaper tout ton code j'ai peut être supprimé quelque chose qu'il ne fallait pas...

    RépondreSupprimer
    Réponses
    1. Essaye d'appliquer ta sauvegarde faite en début de tutoriel, avant de faire les modifications.

      Supprimer
    2. J'ai supprimé malencontreusement ma sauvegarde ! Ceci dit, j'ai repris un thème blogger, juste pour voir, et même sous ce thème, je n'arrive plus à avoir plus de trois articles sur la page principale... Du coup je retravaille ton tuto avant d'essayer de trouver l'explication...

      Supprimer
    3. J'ai un autre souci, c'est que mes titres ne se mettent pas en-dessous de l'article, mais dessus... J'ai essayé de les baisser mais du coup ça coupe en fait la police...

      Supprimer
  79. Bonjour,

    J'éspère que tu verras mon commentaire, je t'ai découverte par hasard et j'ai flashé sur ce thème cependant, j'ai bataillée pendant plus de deux heures sur les modifications de code.. Et cela ne rends pas comme je le souhaite. Est ce qu'il faut supprimer les codes déjà existant ? Ou pas du tout ou juste les rajouter ? Est ce que tu peu m'aider ? Ce serai pour la version 1 . Je te laisse mon mail si jamais ont peu échanger. maevagallinari@hotmail.fr Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Eva,
      Non il n'y a rien à supprimer. As-tu essayé sur un blog test ? Car si tu as posté des articles le même jour, Blogger regroupe ces articles en une et même colonne ce qui décale tout l'affichage. Pour y remédier simplement tu peux changer la date des articles en allant dans Articles puis en cliquant sur le nom de l'article. Sur la page de création/modification des articles cliques sur Date de publication pour changer la date de publication :)
      Si tu souhaites apporter des modifications à l'affichage il faut savoir qu'il ne faut qu'une seule version du code CSS. Il faut donc modifier le code que tu as copié et collé dans ton thème. S'il y a plusieurs fois le code de l'affichage en miniature le navigateur ne saura pas lequel prendre en compte.
      Voilà :)

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