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

Créer une galerie d'images simple, avec un effet fade-in

On m'a récemment demandé comment ajouter des images côte à côte pour former comme une petite galerie d'images. Du coup je vous ai créé un exemple de galerie d'images à 2 ou 3 colonnes, dont on peut ajouter des bordures, un fond, et qui affiche l'image dans une nouvelle fenêtre quand on clique dessus. En bonus, je vais vous expliquer comment ajouter un petit effet fondu "fade-in" au survol de l'image avec la souris ;)

Créer une galerie d'images simple, avec un effet fade-in

C'est parti pour les explications !

Le code HTML

Commençons par le code HTML de notre galerie. Elle est la même quelque soit le nombre de colonnes choisi.

A partir du tableau de bord allez dans Mise en page :

Créer une galerie d'images simple, avec un effet fade-in

Cliquez sur Ajouter un gadget :

Créer une galerie d'images simple, avec un effet fade-in

Puis sélectionnez HTML/ JavaScript dans la liste de gadgets proposés :

Créer une galerie d'images simple, avec un effet fade-in

Dans le fenêtre qui s'ouvre, ajoutez un titre à votre gadget si vous voulez, et collez le code suivant dans la partie Contenu :
<!-- Début Galerie -->
<div id="galerie_photo">
<div class="GPimg" style="background-image:url('http://adresse.com/image-01.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-01.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-02.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-02.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-03.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-03.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-04.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-04.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-05.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-05.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
<div class="GPimg" style="background-image:url('http://adresse.com/image-06.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-06.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
</div>
<!-- Fin Galerie -->
Comme ceci :

Créer une galerie d'images simple, avec un effet fade-in

Dans cet exemple la galerie est composée de 6 images. Il est tout a fait possible d'en rajouter en ajoutant le code d'image suivant avant le dernier </div> (en bleu ci-dessus):
<div class="GPimg" style="background-image:url('http://adresse.com/image.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>
Pour enlever un code d'image il faut bien supprimer à partir de <div class jusqu'au </div> suivant.

Maintenant ajoutons les images à proprement parler :)
Remplacez chaque lien surligné ci-dessous par le lien de l'image souhaité, sachant qu'il faut indiquer le lien 2 fois :

Créer une galerie d'images simple, avec un effet fade-in

Cliquez sur Enregistrer, et déplacez votre gadget où vous voulez sur votre blog.
Voilà pour le code HTML :)

Le code CSS

Maintenant il faut définir le visuel de notre galerie d'images.
Pour cela, allez dans Modèle à partir du tableau de bord puis cliquez sur Modifier le code HTML :

Créer une galerie d'images simple, avec un effet fade-in

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

Créer une galerie d'images simple, avec un effet fade-in

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

Cliquez n'importe où dans la boîte de code, puis appuyez sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code tapez :
/* Content
Puis appuyez sur Entrer.

Disposition à 3 colonnes

Pour la disposition à 3 colonnes, collez le code suivant juste au-dessus de /* Content :
#galerie_photo {
max-width: 100%;
text-align: center;
}

#galerie_photo .GPimg {
max-width: 32%;
width: 32%;
height: 87px;       /* Hauteur des images */
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
}
Comme ceci :

Créer une galerie d'images simple, avec un effet fade-in

Disposition à 2 colonnes

Pour la disposition à 2 colonnes, collez le code suivant juste au-dessus de /* Content :
#galerie_photo {
max-width: 100%;
text-align: center;
}

#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;       /* Hauteur des images */
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
}
On obtient visuellement :


Remarque : Il faudra ajuster la valeur de la hauteur des images en fonction de votre blog, pour qu'elles apparaissent carrés. Mais vous n'êtes pas obligés, vous pouvez également faire en sorte que les images aient une forme rectangulaire ;)

Ajouter des bordures et un fond

Pour ajouter une bordure autour des images il faut ajouter les codes suivants :
border-style: solid;
border-size: 1px;
border-color: #6C6C6C;
Au code :
#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
}
Comme ceci :
#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
border-style: solid;     /* Style de la bordure */
border-size: 1px;        /* Largeur de la bordure */
border-color: #6C6C6C;   /* Couleur de la bordure */
}
Le style de bordure peut être :
  • solid = plein
  • dashed = en tirets
  • dotted = en pointillés

Pour trouver le code hexadécimal (#6C6C6C) de la couleur souhaitée, vous pouvez utiliser le site Code Couleur.


Pour ajouter une bordure et/ou un fond à la galerie, il faut ajouter les codes suivants :
border-style: solid;
border-size: 1px;
border-color: #6C6C6C;
background-color: #d7dcdf;
Au code :
#galerie_photo {
max-width: 100%;
text-align: center;
}
Comme ceci :
#galerie_photo {
max-width: 100%;
text-align: center;
border-style: solid;         /* Style de la bordure */
border-size: 1px;            /* Largeur de la bordure */
border-color: #6C6C6C;       /* Couleur de la bordure */
background-color: #d7dcdf;   /* Couleur du fond */
}
De plus, vous pouvez ajouter un espace entre la bordure de la galerie et les images pour que ça soit plus joli. Pour cela ajoutez :
padding-top: 7px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
Comme ceci :
#galerie_photo {
max-width: 100%;
text-align: center;
border-style: solid;
border-size: 1px;
border-color: #6C6C6C;
background-color: #d7dcdf;
padding-top: 7px;      /* Espace au-dessus des images */
padding-right: 5px;    /* Espace à droite des images */
padding-bottom: 3px;   /* Espace en-dessous des images */
padding-left: 5px;     /* Espace à gauche des images */
}
Modifiez les valeurs en pixels (5px) comme vous le souhaitez ;)

Visuellement on obtient :

Créer une galerie d'images simple, avec un effet fade-in

Ajouter un effet "fade-in" au survol des images

L'effet fade-in consiste à faire apparaître de manière plus clair ou plus visible quelque chose quand on le survol avec la souris.
Pour obtenir cet effet sur les images de votre galerie, ajoutez les codes suivants :
opacity: 0.6;
transition-duration: 0.4s;
Au code :
#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
border-style: solid;     /* Style de la bordure */
border-size: 1px;        /* Largeur de la bordure */
border-color: #6C6C6C;   /* Couleur de la bordure */
}
Comme ceci :
#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
border-style: solid;     /* Style de la bordure */
border-size: 1px;        /* Largeur de la bordure */
border-color: #6C6C6C;   /* Couleur de la bordure */
opacity: 0.6;
transition-duration: 0.4s;
}
Ajoutez également le code suivant à la suite :
#galerie_photo .GPimg:hover {
opacity: 1;
transition-duration: 0.4s;
}
Au final le code ressemble à ceci :
#galerie_photo .GPimg {
max-width: 49%;
width: 49%;
height: 132px;
display: inline-block;
background-position: 50% 50%;
background-size: cover;
padding: 0;
margin: 0;
border-style: solid;     /* Style de la bordure */
border-size: 1px;        /* Largeur de la bordure */
border-color: #6C6C6C;   /* Couleur de la bordure */
opacity: 0.6;
transition-duration: 0.4s;
}

#galerie_photo .GPimg:hover {
opacity: 1;
transition-duration: 0.4s;
}
Et visuellement on obtient :

Créer une galerie d'images simple, avec un effet fade-in

Et voilà pour ce petit tutoriel ! Vous savez maintenant comment créer une petite galerie d'images ! ;)

Autres articles

97 commentaires:

  1. J'adore ! J'ai déjà vu quelque chose dans le genre pour les photos d'instagram et je trouve ça vraiment sympa ! :)

    RépondreSupprimer
    Réponses
    1. Oui, c'est une alternative au widget Instagram, pour ceux qui ne l'auraient pas ou qui souhaitent afficher d'autres images :)

      Supprimer
  2. Bonjour,

    Est-il possible d'installer le même effet fade-in pour la bannière d'un blog ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est tout à fait possible, il suffit de trouver le code de ta bannière pour l'appliquer.
      Tu peux essayer d'ajouter ces codes à ton blog :

      #header-inner {
      overflow: hidden;
      opacity: 0.6; /* Opacité par défaut 0.6=60% */
      transition-duration: 0.4s;
      }

      #header-inner:hover {
      opacity: 1; /* Opacité quand on survol la bannière avec la souris 1=100% */
      transition-duration: 0.4s;
      }

      Supprimer
    2. Bonjour,

      Comment trouve-t-on le code de la bannière ? Bisous

      Supprimer
    3. Bonjour, ça dépend de ce que tu souhaites faire mais un code pour la bannière est :

      header {
      }

      Rajoutes ce code dans le code CSS de ton thème.
      Cliques sur Modèle puis sur Modifier le code HTML. Cliques sur le triangle noir à gauche de :

      <b:skin>...</b:skin>

      Cliques n'importes où dans la boîte de code puis appuies sur Ctrl et F en même temps. Dans la boîte de recherche colles :

      /* Content

      Et appuies sur Entrer.
      Colles le code de la bannière juste avant cette ligne.

      Supprimer
  3. Comment fait tu pour rendre carré les photos ? j'ai repris les memes données que toi pour la hauteur d'images, en vain...
    on peut centrer ce qu'on voit de l'image dans ce carré ?
    MERCI en tout cas, tres utile !

    RépondreSupprimer
    Réponses
    1. Salut Sandra,

      Quel est l'adresse de ton blog ? Je pourrais jeter un œil et te dire combien de pixels tu dois définir en hauteur pour que tes photos soient carrés :)

      Supprimer
    2. Juste pour savoir, pour que la galerie forme une colonne avec une photo à chaque fois , c'est tout autre chose ou des petites modifs ?

      http://sandphotographies.blogspot.fr/p/visite-guidee.html

      Merci beaucoup, grâce à des partageuses comme toi on peut apprendre plein de choses MERCI !

      Supprimer
    3. Salut Sandra,

      Pour ta galerie il y a un peu de code à changer.
      Cherches le code suivant :

      #galerie_photo {
      max-width: 100%;
      text-align: center;
      }

      Et remplace-le par :

      #galerie_photo {
      max-width: 50%;
      margin: 0 auto;
      }

      Ensuite cherches le code suivant :

      #galerie_photo .GPimg {
      max-width: 49%;
      width: 49%;
      height: 132px;
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      }

      Et remplace les 2 premières valeurs par 100%, comme ceci :

      #galerie_photo .GPimg {
      max-width: 100%;
      width: 100%;
      height: 132px;
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      }

      Et voilà ! ;)

      Supprimer
  4. Il me reste ce probléme et celui de mon menu qui est décalé je ne comprends pas pourquoi. Tu saurais ?
    Merci

    RépondreSupprimer
    Réponses
    1. En fait ton blog entier est un peu décalé...
      C'est plutôt compliqué à tout rectifier, mais voici déjà un début :

      Cherches le code suivant :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: $(content.width);
      max-width: $(content.width);
      _width: $(content.width);
      }

      Et remplaces-le par :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 1100px;
      max-width: 1100px;
      _width: 1100px;
      }

      Cherches ensuite le code suivant :

      .main-inner .fauxcolumn-left-outer {
      width: $(main.column.left.width);
      }

      Et remplace-le par :

      .main-inner .fauxcolumn-left-outer {
      width: 0;
      }

      Cherches ensuite le code suivant :

      .main-inner .fauxcolumn-center-outer {
      left: $(main.column.left.width);
      right: $(main.column.right.width);
      /* IE6 does not respect left and right together */
      _width: expression(this.parentNode.offsetWidth -
      parseInt("$(main.column.left.width)") -
      parseInt("$(main.column.right.width)") + 'px');
      }

      Et remplace-le par :

      .main-inner .fauxcolumn-center-outer {
      left: 0;
      right: 250px;
      _width: expression(this.parentNode.offsetWidth - parseInt("260px") - parseInt("250px") + 'px');
      }

      Cherches ensuite le code suivant :

      .main-inner .columns {
      padding-left: $(main.column.left.width);
      padding-right: $(main.column.right.width);
      }

      Et remplace-le par :

      .main-inner .columns {
      padding-left: 0;
      padding-right: 250px;
      }

      Cela supprimera la barre latérale gauche qui décalait tout le blog vers la droite. Ça devrait sembler plus centré maintenant.

      Pour décaler ton menu vers la droite ajoutes ce code :

      #HTML2 {
      margin-right: 20px;
      }

      Augmente, ou diminue la valeur de 20 pixels (20px) à ce que tu veux :)
      Tu peux aussi diminuer l'espace au-dessus du menu en rajoutant la ligne :

      margin-top: -140px;

      Comme ceci :

      #HTML2 {
      margin-right: 20px;
      margin-top: -140px;
      }

      Une valeur négative déplacera le menu vers le haut.

      Et voilà ;)

      Supprimer
    2. J'ai tout fais sauf, décaler le menu vers la droite car je ne sais pas ou mettre le code...

      Merci d'avoir pris le temps de regarder en tout cas!

      Supprimer
    3. Salut Sandra,
      Tu peux ajouter le code avant le code suivant :

      /* Content

      :)

      Supprimer
    4. Merci beaucoup pour ton aide et de prendre le temps de répondre ! Bonne continuation ;)

      Supprimer
  5. Salut Lady B, merci pour ce tuto galery que je cherche depuis un bout de temps. Au plaisir

    www.letoucans.blogspot.com

    RépondreSupprimer
  6. C'est super ça aussi. Du coup, est-ce que le code du début fonctionnerait dans un article ou une page afin de créer une galerie des looks. Je cherche à créer un lookbook comme sur les blogs avec une image, un titre et un renvoie vers l'article mais je m'arrache les cheveux.
    Donc je me demande si cette galerie pourrait servir à mon idée.
    Bise

    RépondreSupprimer
    Réponses
    1. Salut Cia,

      Oui ça marche si tu le mets sur une page. Clique sur l'onglet HTML en haut à gauche avant de coller le code sinon ça ne marchera pas. Pour ajouter du texte à la page il faudra ensuite retourner sur Rédiger.

      Par contre je te conseil d'utiliser plutôt un code comme celui-ci, ce sera beaucoup plus simple pour modifier la mise en page ;) :

      <!-- Début Galerie -->

      <div id="galerie_photo">

      <div class="GPbox"><a href="URL LIEN"><img src="http://3.bp.blogspot.com/-ityBJXddlK8/UBGJ2eQTqvI/AAAAAAAAAhg/NW5tt-ue1Yw/s1600/2012-07-17-361+copie.png" /><h3 class="GPtitle">Titre de la photo</h3></a></div>

      <div class="GPbox"><a href="URL LIEN"><img src="http://3.bp.blogspot.com/-ityBJXddlK8/UBGJ2eQTqvI/AAAAAAAAAhg/NW5tt-ue1Yw/s1600/2012-07-17-361+copie.png" /><h3 class="GPtitle">Titre de la photo</h3></a></div>

      <div class="GPbox"><a href="URL LIEN"><img src="http://3.bp.blogspot.com/-ityBJXddlK8/UBGJ2eQTqvI/AAAAAAAAAhg/NW5tt-ue1Yw/s1600/2012-07-17-361+copie.png" /><h3 class="GPtitle">Titre de la photo</h3></a></div>

      <div class="GPbox"><a href="URL LIEN"><img src="http://3.bp.blogspot.com/-ityBJXddlK8/UBGJ2eQTqvI/AAAAAAAAAhg/NW5tt-ue1Yw/s1600/2012-07-17-361+copie.png" /><h3 class="GPtitle">Titre de la photo</h3></a></div>

      <div class="GPbox"><a href="URL LIEN"><img src="http://3.bp.blogspot.com/-ityBJXddlK8/UBGJ2eQTqvI/AAAAAAAAAhg/NW5tt-ue1Yw/s1600/2012-07-17-361+copie.png" /><h3 class="GPtitle">Titre de la photo</h3></a></div>

      <div class="GPbox"><a href="URL LIEN"><img src="http://3.bp.blogspot.com/-ityBJXddlK8/UBGJ2eQTqvI/AAAAAAAAAhg/NW5tt-ue1Yw/s1600/2012-07-17-361+copie.png" /><h3 class="GPtitle">Titre de la photo</h3></a></div>

      </div>

      <!-- Fin Galerie -->

      Chaque image et titre associé, sont dans la même "boîte" (ou div) appelée GPbox. Le code de cette boîte est :

      .GPbox {
      }

      Chaque image est associée au code :

      .GPbox img {
      }

      Chaque titre est associé à :

      h3.GPtitle {
      }

      Tu peux également ajouter directement le code CSS en-dessous du code HTML directement sur la page (toujours sous l'onglet HTML) en ajoutant <style type="text/css"> avant le code CSS et </style> après le code CSS.

      Et voilà ! :)

      Supprimer
    2. Super merci, j'essaie sur mon blog test mais malheureusement les images ne sont pas mis en rangées. Elles sont comme d'habitude une par ligne. Je me demande si j'ai oublié de changer quelque chose.
      Bises

      Supprimer
  7. Bonsoir,
    Je voudrais essayer de faire une galerie enfin un slideshow avec une seule photo, je pensais trouver une solution dans cet article mais non ... Est ce que tu pourrais nous faire un tuto là dessus ou me dire comment faire ?
    Bises

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je pense que ça pourrait intéresser pas mal de personnes, je vais le noter sur ma liste de tutoriels à faire ;)

      Supprimer
    2. Oh oui! Ça m'intéresserait beaucoup aussi! :)

      Supprimer
  8. super tutoriel tu expliques très bien les étapes vraiment chapeau
    sinon je voulais te demander comment faire pour que cette galerie d'image soit "reliée" a notre compte instagram enfin je sais pas trop si tu m'as compris
    gros bisou et continue

    RépondreSupprimer
    Réponses
    1. Bonjour, si tu souhaites créer une galerie d'images de ton flux Instagram il faut utiliser un gadget externe à Blogger, j'ai fais un tutoriel sur le sujet ici : http://ladybirdr.blogspot.com/2014/09/ajouter-un-widget-instagram.html :)

      Supprimer
  9. Top aussi! Mais j'aurais une question : comment je peux ajouter une rangée (ligne de photos côte à côte, avec un léger espace entre) de photos de ce style avec effet faded en dessous de mon logo, juste avant les articles ? Histoire que ceux-ci renvoient vers certains de mes articles. Je te remercie! :-)

    http://emysphr.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Emy,

      Tu peux utiliser ce tutoriel, il suffit de déplacer ton gadget sous ta bannière une fois que tu l'as créé.

      Pour ajouter les liens vers tes articles, au lieu d'utiliser le code donné dans le tutoriel pour ajouter une photo, utilises celui-ci :

      <a href="LIENARTICLE"><div class="GPimg" style="background-image:urlundefined'http://adresse.com/image-06.jpg');cursor:pointer;" onclick=window.openundefined"http://adresse.com/image-06.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div></a>

      Remplaces LIENARTICLE par l'adresse url du lien de l'article. Et voilà ;)

      Supprimer
  10. Merci beaucoup pour ce tutoriel et pour tous les autres, j'ai passé mon weekend sur ton site et mon blog ressemble enfin à quelque chose !
    J'ai juste une question pour ce tuto : comment faire pour ne pas rendre les images "cliquables" ? Parce que sur mon blog elles ne sont là que pour la déco, donc je n'ai pas besoin que le pointeur se transforme en main ni de la pop-up qui s'ouvre.
    En tout cas, encore merci pour tous ces conseils !

    RépondreSupprimer
    Réponses
    1. Bonjour Drema,
      Il faut faire une petite modification de la ligne de code à utiliser pour une image.

      Au lieu d'utiliser :

      <div class="GPimg" style="background-image:urlundefined'http://adresse.com/image.jpg');cursor:pointer;" onclick=window.openundefined"http://adresse.com/image.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>

      Utilises le code suivant :

      <div class="GPimg" style="background-image:urlundefined'http://adresse.com/image.jpg')"></div>

      Supprimer
    2. Ah oui super ! C'est vrai que maintenant que je vois le code, ça me paraît logique :) Merci beaucoup !

      Supprimer
  11. Bonjour,
    J'ai découvert ton blog il y a quelques semaines déjà, je le visite très régulièrement mais c'est la première fois que je commente :-) Je voulais vraiment te remercier pour tous tes conseils qui m'ont été d'une aide précieuse ! Grâce à toi, j'ai enfin pu modeler le design de mon blog pour le mettre à mon image. Avant je n'aurais jamais osé aller toucher au code CSS, mais tes tutoriels sont tellement bien expliqués que je me suis lancé et ne le regrette absolument pas ! Alors MERCI pour tout et très bonne continuation à ton blog ! Je suis sûre que les idées d'articles ne manquent pas, d'ailleurs je languis de lire tes prochains tutos.

    Si je peux me permettre de te donner une idée d'article, pourrais-tu nous expliquer comment donner un effet fade-in (ou fade-out) aux images des catégories de la colonne de droite quand on passe le curseur de la souris dessus ? J'imagine que cela doit ressembler un peu à ce tutoriel-ci sauf qu'il faudrait qu'il n'y ait qu'une seule colonne et que les images pointent vers des liens. Je te remercie par avance. Bonne journée ! A très bientôt !

    RépondreSupprimer
    Réponses
    1. Merci, je suis contente de pouvoir aider :)
      Je note l'idée sur ma longue liste de tutoriels à faire ^^

      Supprimer
  12. Bonjour Catherine, j'abandonne pour le police Googles Fonts, je suis vraiment déçue de ne pas comprendre... :/

    Du coup, je voudrais donner à mes images sur la page d'accueil cet effet fade in, est ce que c'est possible ?

    Merci,
    Lucie

    RépondreSupprimer
  13. bonjour j'ai découvert ton blog en juillet et je te remercie de la clarté de tes tutos pour une fille qui n'est pas très experte en informatique comme moi! j'essaie de créer un site pour mon groupe d'art Contemporain à partir de blogger car notre asso n'a pas les moyens de payer un site alors avec tes supers tutos j'essaie de faire ...
    j'ai un petit soucis avec la galerie de 6 photos elle s'est mis en 1 colonne et l'aspect fade in n'apparait pas j'ai forcément fait une erreur si tu peux m'aider merci tout plein
    http://collectifart14.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour mettre les photos sur 2 colonnes, il suffit de diminuer la largeur des images. Remplace :

      #galerie_photo .GPimg {
      max-width: 49%;
      width: 49%;
      height: 100px; /* Hauteur des images */
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      border-style: solid;
      border-size: 1px;
      border-color: #6C6C6C;
      }

      Par :

      #galerie_photo .GPimg {
      max-width: 49%;
      width: 43%;
      height: 100px; /* Hauteur des images */
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      border-style: solid;
      border-size: 1px;
      border-color: #6C6C6C;
      }

      Ensuite, il y a un problème dans le code CSS de la galerie qui empêche l'effet fade-in.

      Voici ton code :

      #galerie_photo {
      max-width: 100%;
      text-align: center;
      opacity: 0.6;
      transition-duration: 0.4s;
      #galerie_photo .GPimg:hover {
      opacity: 1;
      transition-duration: 0.4s;
      }
      border-style: solid;
      border-size: 1px;
      border-color: #6C6C6C;
      background-color: #e4baf1;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      padding-left: 3px;
      }

      Il semblerait que tu ai inséré le code pour l'effet au survol dans le code de la galerie. Du coup ça ne fonctionne pas.

      Remplace tout ce code par :

      #galerie_photo {
      max-width: 100%;
      text-align: center;
      opacity: 0.6;
      transition-duration: 0.4s;
      border-style: solid;
      border-size: 1px;
      border-color: #6C6C6C;
      background-color: #e4baf1;
      padding-top: 3px;
      padding-right: 3px;
      padding-bottom: 3px;
      padding-left: 3px;
      }

      #galerie_photo .GPimg:hover {
      opacity: 1;
      transition-duration: 0.4s;
      }

      Supprimer
  14. super! la galerie apparait bien en 2 colonnes mais je ne vois pas l'effet fade in ? merci pour ton aide c'est vraiment sympa !

    RépondreSupprimer
    Réponses
    1. Rajoute la ligne :

      opacity: 0.5;

      Avant le signe } du code :

      #galerie_photo .GPimg {
      max-width: 49%;
      width: 43%;
      height: 100px; /* Hauteur des images */
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      border-style: solid;
      border-size: 1px;
      border-color: #6C6C6C;
      }

      Comme ceci :

      #galerie_photo .GPimg {
      max-width: 49%;
      width: 43%;
      height: 100px; /* Hauteur des images */
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      border-style: solid;
      border-size: 1px;
      border-color: #6C6C6C;
      opacity: 0.5;
      }

      Supprimer
  15. Coucou, ton blog m'aide vraiment beaucoup, merci pour tout ce que tu fais ! Dis, je voulais savoir, comment est-ce que je pourrais voir pour que le lien qui renvoie à la photo ne soit pas une fenêtre pop-up mais s'ouvre dans un nouvel onglet ?

    RépondreSupprimer
    Réponses
    1. Bonjour Tiffany,
      Quand je clique sur une de tes images elle s'ouvre bien dans un onglet et non dans une nouvelle fenêtre. Cela peut venir de tes préférences de navigateur :)

      Supprimer
  16. C'est encore moi, j'ai réussi à me créer une galerie... Mais est-il possible d'en avoir un lien à part ? Pour que je puisse l'insérer dans un onglet ? Je ne sais pas si je suis claire... Je ne veux pas que la galerie apparaisse sur mon blog en bas des articles (ce qui est le cas ici http://thewolfsshadow.blogspot.fr/ ) mais j'aimerai un lien à mettre dans mon onglet Gallerie à côté de celui d'accueil...
    Merci beaucoup pour ton aide :)

    RépondreSupprimer
    Réponses
    1. Bonjour Tiffani,
      Au lieu d'ajouter le code dans un gadget HTML/JavaScript, colle-le dans une page. Attention à bien cliquer sur HTML en haut à droite de l'écran, à côté de Rédiger, avant de coller le code HTML de ta galerie dans ta page.
      Ensuite, il te suffit de récupérer l'adresse URL de ta page (comme pour ta page de présentation), et de l'ajouter au code de ton lien Galerie dans ton menu ;)

      Supprimer
  17. Merci beaucoup, ça fonctionne ;)

    RépondreSupprimer
  18. Bonsoir Catherine,
    Un grand merci pour tout le temps que tu passes à faire tes postes, c'est absolument GENIAL ! Je suis en train de complètement refaire mon blog grâce à ton aide (je passe d'un modèle dynamique à un modèle simple donc je reprends tout depuis le début). Après plusieurs heures d'acharnement, mon blog commence enfin à ressembler à quelque chose, même s'il y a encore quelques petites erreurs par-ci par-là.

    Je viens de rajouter une galerie d'image et il y a une chose étrange qui se passe : lorsque j'utilise le code que tu as donné dans ton tuto, tout apparaît bien. Mais quand j'utilise le code que tu as donné à Emy (24 mars 2015) pour rajouter le lien de l'article aux photos j'entre dans un monde obscure... Je peux cliquer avec le curseur dans l'espace Galerie Photo, ce qui m'amène bien à l'article mais... mes photos (miniatures) n'apparaissent pas du tout dans cet espace Galerie en fait ! En gros elles sont bien là, mais transparentes. Aurais-tu une idée de ce qui provoque ça ?
    http://poussepoussecuisine.blogspot.co.il/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a un petit problème dans le code HTML que j'ai donné.
      Voici ce que tu as :

      <div class="GPimg" style="background-image:urlundefined'http://2.bp.blogspot.com/-o5OHM5UQIQw/UlBFowEAM9I/AAAAAAAABxc/OWTl5_AZ9cg/s1600/IMG_2298.JPG');cursor:pointer;" onclick="window.openundefined&quot;http://2.bp.blogspot.com/-o5OHM5UQIQw/UlBFowEAM9I/AAAAAAAABxc/OWTl5_AZ9cg/s1600/IMG_2298.JPG&quot;,&quot;demo&quot;,&quot;width=800,height=600,left=150,top=200,toolbar=0,status=0,&quot;)"></div>

      Il manque le signe ( avant de l'adresse URL de l'image, qui à été remplacé par undefined. Tu devrais avoir ceci :

      <div class="GPimg" style="background-image:undefined'http://2.bp.blogspot.com/-o5OHM5UQIQw/UlBFowEAM9I/AAAAAAAABxc/OWTl5_AZ9cg/s1600/IMG_2298.JPG');cursor:pointer;" onclick="window.openundefined&quot;http://2.bp.blogspot.com/-o5OHM5UQIQw/UlBFowEAM9I/AAAAAAAABxc/OWTl5_AZ9cg/s1600/IMG_2298.JPG&quot;,&quot;demo&quot;,&quot;width=800,height=600,left=150,top=200,toolbar=0,status=0,&quot;)"></div>

      Supprimer
  19. Bonsoir,

    Je suis désolée, j ai encore une question, et j ai vu que tu n avais pas encore eu le temps de te pencher sur la première. ;-)
    Alors quand tu auras le temps, j ai encore un souci. J ai réussi à créer une ligne de photos comme je le voulais dans mon pied de page, mais je n'arrive pas à centrer le menu et je voudrais aussi modifier la police, j'ai essayé de bidouiller mais pas moyen. Si tu as une solution ça m intéresse. Merci beaucoup d'avance. Voici l adresse de mon blog : http://handiski4me.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Estelle,
      Veux-tu parler de la liste de liens "HANDISKI4ME aime lire" ?

      Supprimer
    2. Bonsoir Catherine,

      Oui et aussi, la Team Handiski4me, merci d avance

      Supprimer
    3. Pour centrer les liens dans ton gadget du pied de page tu peux utiliser le code CSS suivant :

      #LinkList2 li {
      text-align: center; /* Centre le texte */
      list-style: none; /* Supprime la puce du point de la liste */
      }

      Si tu souhaites centrer le gadget dans le pied de page alors tu peux soit le déplacer dans la 2e zone de gadget, au centre, soit la déplacer sous ton gadget "Team Handiski4me".

      Pour modifier les polices des gadgets du pied de page, voici un tutoriel que j'ai écrit sur le sujet ;)
      http://ladybirdr.blogspot.com/2015/05/modifier-le-pied-de-page.html

      Supprimer
    4. merci Catherine j essaie les modifs demain et te tiens au courant!!!

      Supprimer
    5. Bonjour Catherine,

      Je n'ai pas eu le temps de revenir vers toi avant, excuse-moi! J'ai donc réussi à remodifier mon pied de page grâce à ton super tuto! Cependant, je continue à faire mon boulet : Je comprends bien le code que tu me donnes pour centrer les gadgets, et c'est ce que je voudrais, mais je ne sais pas où le coller. Peux tu éclairer ma lanterne?
      De plus, mes titres : TEAM HANDISKI4ME restent désespéremment noir ainsi que mon English, Deutsch...? Je pense qu il y a une astuce avec les lignes de code mais j ai pas trouvé!!
      Merci d'avance et merci de ta patience ;-)

      Supprimer
    6. Bonjour Estelle,

      Pour la couleur des titres des gadgets, remplace ton code suivant :

      footer .widget h2 {
      text-align: center; /* Alignement du texte */
      border-bottom: 1px solid #ddd; /* Bordure sous le titre */
      padding-bottom: 10px; /* Espace sous le titre avant la bordure */
      margin-bottom: 10px; /* Espace sous le titre après la bordure */
      font-family: 'Georgia'; /* Police du titre */
      text-transform: uppercase; /* Lettres en majuscules | normal = apparence normal*/
      letter-spacing: 1px; /* Espace entre les lettres */
      font-size: 14px; /* Taille de la police du titre */
      font-weight: 300; /* Epaisseur de la police du titre */
      color: #FE9A2E; /* Couleur du titre */
      }

      Par celui-ci :

      footer .widget h2 {
      text-align: center; /* Alignement du texte */
      border-bottom: 1px solid #ddd; /* Bordure sous le titre */
      padding-bottom: 10px; /* Espace sous le titre avant la bordure */
      margin-bottom: 10px !important; /* Espace sous le titre après la bordure */
      font-family: 'Georgia' !important; /* Police du titre */
      text-transform: uppercase; /* Lettres en majuscules | normal = apparence normal*/
      letter-spacing: 1px; /* Espace entre les lettres */
      font-size: 14px !important; /* Taille de la police du titre */
      font-weight: 300 !important; /* Epaisseur de la police du titre */
      color: #FE9A2E !important; /* Couleur du titre */
      }

      J'ai simplement rajouté :

      !important

      juste après la valeur sur certaines lignes pour forcer le navigateur à les prendre en compte.

      Pour centrer la liste de ton gadget Archives rajoute ce code :

      #ArchiveList {
      text-align: center !important;
      }

      Juste après ton code pour centrer la liste de liens ;)

      Supprimer
    7. Super, un grand merci Catherine! Ca marche ;-) Je retiens le coup du !important Mais maintenant c est mon gadget s'abonner qui ne veut pas se centrer (enfin pas le titre mais en dessous). J ai compris le truc de text align center, mais pourrais tu juste me dire le début de la ligne de code s'il te plait.
      Merci je crois que je pourrais créer un hashtag #jesuisunboulet !! Désolée!

      Supprimer
    8. Pas de soucis, ce gadget est un piège. Il faut utiliser le code CSS suivant pour centrer ces boutons :

      #Subscribe1 .subscribe-wrapper .subscribe {
      margin: 0 auto !important;
      }

      Supprimer
    9. excuse moi j ai pas eu beaucoup de temps ces jours-ci, mais parfait ça marche !!! Un grand merci!!! Sais tu s'il est possible de créer une manière plus simple pour que les personnes puissent s'abonner sous blogger? Car pour l instant pas moyen d'avoir des abonnés!

      Supprimer
    10. Tu peux utiliser le gadget d'inscription "Suivre les mises à jour par e-mail" qui ajoute un petit formulaire. Le lecteur entre son adresse e-mail et reçoit un e-mail quand un nouvel article est publié.

      Supprimer
  20. Bonjour Catherine,

    Merci pour ta réponse mais ça ne fonctionne toujours pas. Si j'ai bien compris, il faut remplacer le mot undefined par le signe (. Dans l'exemple que tu m'as donné, undefined est toujours là, tu as juste enlevé url qui était collé à undefined. J'ai tenté avec ton code mais ça ne fonctionne pas non plus. J'ai tenté en replaçant undefined par ( et ça ne fonctionne pas non plus.
    Je n'arrive pas à te mettre mon nouveau code car le site me dit qu'il ne peut pas accepter mon texte HTML (grrrr). Mais en gros, j'ai enlevé url et j'ai changé les 2 undefined par (.

    Je ne sais pas si j'ai tout compris de travers ou s'il y a un autre problème, en tout cas rien ne semble fonctionner...

    RépondreSupprimer
    Réponses
    1. Effectivement j'ai fait une erreur dans le code ^^'

      Il faut avoir url(' entre background-image: et l'adresse url de l'image.

      Comme ceci :

      <div class="GPimg" style="background-image:urlundefined'http://3.bp.blogspot.com/-j0-sh0fO3Xc/UpHYcw8okzI/AAAAAAAACSc/wvmxGPC7iDs/s1600/Photo4.png');cursor:pointer;" onclick="window.openundefined&quot;http://3.bp.blogspot.com/-j0-sh0fO3Xc/UpHYcw8okzI/AAAAAAAACSc/wvmxGPC7iDs/s1600/Photo4.png&quot;,&quot;demo&quot;,&quot;width=800,height=600,left=150,top=200,toolbar=0,status=0,&quot;)"></div>

      Supprimer
    2. Argh !!!

      Les erreurs viennent du convertisseur que j'utilise pour ajouter des codes HTML aux commentaires...
      Je le fais manuellement :

      <div class="GPimg" style="background-image:url('http://3.bp.blogspot.com/-j0-sh0fO3Xc/UpHYcw8okzI/AAAAAAAACSc/wvmxGPC7iDs/s1600/Photo4.png');cursor:pointer;" onclick="window.open("http://3.bp.blogspot.com/-j0-sh0fO3Xc/UpHYcw8okzI/AAAAAAAACSc/wvmxGPC7iDs/s1600/Photo4.png","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")"></div>

      Supprimer
    3. Super, ça marche maintenant !!!
      Un gros gros gros merci :-)

      Supprimer
  21. Bonjour Cathy,

    Je voulais savoir si cela est possible d'insérer dans un article un diaporama ou slider automatique de quelques photos qui tournent en boucle ? J'ai vu qu'on pouvais faire plus ou moins ça avec Picasa mais je trouve que le diapo est vraiment pas très beau ... J'aimerais bien faire le même principe que le slider du widget instagram.

    Merci beaucoup pour ta réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est effectivement possible. Je note l'idée sur ma liste de tutoriels à faire ;)

      Supprimer
  22. Bonjour, j'ai fais toutes les manipulations qu'il fallait, j'ai cliqué ensuite sur enregistrer mais ils me disent que je n'ai pas enregistré et que je vais tout perdre, sais-tu pourquoi ...? Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est une petite erreur qui arrive souvent. N'en tiens pas compte ;)

      Supprimer
  23. Coucou et merci pour ce super tuto !
    Par contre mo c'est la casa, j'ai pris le code de 3 colonnes et au final je n'en ai que 2, et puis l'effet Shade In ne fonctionne pas et mes images ont un voile blanc dessus, surement celui du Sahe In
    Aurais-tu une solution?
    Un grand merci à toi :)

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

      Supprimer
    2. Oui voici c'est moi, c'est le blog de ma maman que je lui fais ( du coup je suis connecté avec son compte google + ) : http://escaleindienne.blogspot.be

      Supprimer
    3. Bonjour Sophie,
      Je vois bien 3 colonnes pour le gadget, et 2 lignes.
      Pour l'effet Fade-in, retrouve ce code :

      #galerie_photo {
      max-width: 100%;
      text-align: center;
      opacity: 0.6;
      transition-duration: 0.4s;
      }

      Supprime la ligne :

      opacity: 0.6;

      Retrouve maintenant ce code :

      #galerie_photo .GPimg {
      max-width: 32%;
      width: 32%;
      height: 87px; /* Hauteur des images */
      display: inline-block;
      background-position: 50% 50%;
      background-size: cover;
      padding: 0;
      margin: 0;
      }

      Et ajoute cette ligne avant le signe } :

      opacity: 0.6;

      Et voilà ;)

      Supprimer
    4. Ca fonctionne super, merci beaucoup !!!

      Supprimer
  24. Bonsoir Catherine,

    C'est encore moi pour mes cours^^

    Je voudrais savoir comment pouvoir faire cette petite galerie photo mais avec des photos de mon ordinateur ? donc comment je trouve le lien à copier coller dans le code HTML ?

    merci beaucoup par avance pour ton aide :)

    RépondreSupprimer
    Réponses
    1. Bonjour Marvin,
      Tu peux ajouter tes images à un brouillon d'article sur Blogger pour générer une adresse URL : http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Supprimer
  25. Bonjour
    Depuis hier je dévore tes articles, tu expliques vraiment bien les étapes pour créer un blog!! Par contre, je n'ai pas trouvé de réponse à ma question: dans un article j'aimerai rajouter une galerie photo en colonne sachant que ces photos proviennent non pas d'un site mais de mon ordi, Comment puis je incorporer cet effet de colonne ou mieux faire un déroulement de photos dans mon article?
    Merci de ta réponse
    Bon dimanche !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      On peut recréer cet effet dans un article avec les images d'un article. Je note l'idée d'en faire un tutoriel car c'est long à expliquer par commentaire ;)

      Supprimer
  26. bonjour Catherine,
    Cela fait longtemps que je cherche à faire une galerie photos sur mon blog et ce que tu proposes correspond exactement à ce que je veux réaliser :) .
    J'ai essayé ton code avec div class="GPbox" car je souhaiterais faire des galeries photos sur des pages. J' ai mis le CSS aussi sur la page. J'obtiens comme résultat : la 1ère photo en miniature et centrée et les autres photos apparaissent en grand et aucun effet fade-in sur les photos...
    Voici le lien de ma page : http://filacroquer.blogspot.be/p/pendentifs-colliers.html

    Merci beaucoup pour ton aide.
    bonne soirée

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai vu que tu as utilisé une autre solution ;)

      Supprimer
  27. Wow ! merci pour cet excellent tuto. Je pensais que blogger était limité au niveau personnalisation et grâce à ton blog et à tes explications ultra claires et précises, je me régale à ajouter ma petite touche perso à mon blog, et ça marche !

    RépondreSupprimer
  28. Tout d'abord, merci beaucoup pour tout tes tutos, ils sontexellents et, grâce à toi, mon blog commence à ressembler à quelque chose^^.
    Je voulais savoir si il était possible de créer une galerie d'image en pied de page, comme sur ton blog.
    J'ai essayé plusieurs trucs, mais la galerie ne veux pas faire 100% de la largeur de la page.
    J'espère que tu pourras m'aider.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible, mais pour cela il faut créer une nouvelle section de gadgets avant son pied de page. Je vais faire un tutoriel sur le sujet ;)

      Supprimer
  29. Ton blog est vraiment superbe! Une vraie mine d'or pour personnaliser son blog.
    Je me suis lancé il y a un an sur blogger (www.lolita-vernise.blogspot.com) et je cherche depuis comment faire une galerie photo. L'explication que tu donnes dans ton article fonctionne pour faire un Widget sur le coté du blog, mais comment fait-on pour faire une galerie photo sur une page complete? Pour te donner un exemple j'aimerai créer une galerie dans ce style: http://www.nail-art.fr/galerie-nail-art/
    J'espère que tu as la réponse à mon interrogation.
    Merci d'avance et je vais continuer à dévorer ton blog en attendant!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est tout à fait possible.
      Sur la page de création/modification de ta page clique sur le bouton HTML en haut à gauche. Colle le code HTML ici au lieu de le coller dans un gadget. Ensuite continue le tutoriel comme expliqué ;)

      Supprimer
  30. J'ai reussi à faire une galerie comme sur ton tutoriel, merci beaucoup pour tes explication. :)
    J'ai une autre petite question: Est ce possible d'ajouter un lien cliquable derrière chaque photo? (Enfin que le fait de cliquer sur la photo envoie directement vers l'article correspondant..)?
    Merci d'avance et encore bravo pour ton blog qui est une vraie mine d'or :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible, il suffit de remplacer l'adresse url du lien. Voici un exemple de code pour une image :

      <div class="GPimg" style="background-image:url('http://url-blog.com/image.png');cursor:pointer;" onclick="window.open("http://url-blog.com/article.html","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")"></div>

      Remplace l'adresse url de cette partie du code :

      onclick="window.open("http://url-blog.com/article.html"

      Par l'adresse de l'article et voilà ;)

      Supprimer
    2. Bonjour Catherine,
      J'ai suivi ton tuto à la lettre mais quand je regarde mon code HTML ça me donne ça:

      bp.blogspot.com="" class="GPimg" demo="" https:="" lygk_qhts2eo53n7ih7bvdwrtkk_2rpkackgb="" onclick="window.open(" qbakhtlyi="" s1600="" style="background-image: url('https://4.bp.blogspot.com/-M7Guh_SMXks/V6crFdy23sI/AAAAAAAAByE/9n-0ppV3iLghprxJMDfBwmnbTzdZ4M8VQCLcB/s1600/6308.JPG'); cursor: pointer;" vg="" width="800,height=600,left=150,top=200,toolbar=0,status=0," yfokddx1cz4="">"

      (j'ai enlevé le Div au début de la balise sinon le commentaire ne passait pas...)

      J'ai laissé qu'une ligne HTML avec le code de la photo vu que c'est toujours pareil, mais c'est pour te donner une idée de ce que je vois.
      J'ai essayé d'intégrer l'adresse de mon article après le "Windows open" mais rien ne fonctionne.. J'ai bien un curseur sur les photos mais il n'y a aucun lien derrière... je n'y comprend plus rien! Aurais tu la solution miracle?
      Merci d'avance

      Supprimer
    3. Bonjour,
      Essaye de coller ceci :

      "http://url-blog.com/article.html",

      Juste après :

      window.open(

      En modifiant l'adresse URL pour celle de ton article.

      Supprimer
  31. Coucou Catherine :)

    Merci pour ce tuto du tonnerre encore une fois ! Que ferait-on sans toi ?

    J'aurai néanmoins quelque questions, j'espère que tu pourras éclairer ma petite lanterne de novice :
    Je souhaite installer ma galerie photo sur une page. Jusque là c'est bon j'ai réussi, grâce à tes explications données dans les commentaires plus haut, mais j'ai quand même quelques soucis :

    1) Je n'arrive pas à définir la taille des images... Elles sont beaucoup trop grandes et il n'y en a qu'une par ligne. J'aimerai pouvoir les réduire, et en mettre plusieurs sur une même ligne (sur plusieurs colonnes), mais tout en leur laissant leur forme d'origine, et sans quelles soient forcément "alignées", c'est possible ? Je ne sais pas si je suis tout à fait claire aha ^^ --> Voici un exemple : http://www.julinfinity.com/p/shop-mes-fringues.html

    2) J'aimerai aussi savoir s'il était possible de faire apparaitre le titre de la photo au passage de la souris sur celle-ci uniquement, au lieu qu'il soit simplement écrit en dessous ?

    Voici le lien de mon blog : www.cannothelpbutdream.com
    Et de la page en question : http://www.cannothelpbutdream.com/p/my-closet.html

    Merci d'avance pour ton aide :*

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Remplace les codes CSS de ta galerie par ceux-ci :

      #galerie_photo {
      max-width: 100%;
      text-align: center;
      opacity: 1;
      transition-duration: 0.4s;
      }

      .GPbox {
      max-width: 30%; /* Largeur des images en % de la zone d'article : 30% pour 3 colonnes */
      display: inline-block;
      vertical-align: top;
      margin: 0 1%;
      position: relative;
      }

      .GPbox > a {
      opacity: 1;
      }

      .GPbox img {
      max-width: 100%;
      opacity: 1;
      background: transparent !important;
      padding: 0;
      margin-bottom: -6px;
      }

      h3.GPtitle {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      opacity: 1;
      }

      .GPbox:hover h3.GPtitle {
      display: block;
      }

      .GPbox > a:before {
      content: '';
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000000; /* Couleur de fond au survol */
      }

      .GPbox:hover img {
      opacity: 0.7; /* Opacité de l'image au survol */
      }
      .GPbox:hover a:before {
      display: block;
      }

      Ensuite il y a un petit problème à la fin de ta page : le mot Accessoires est à l'intérieur de la galerie de photos. Il faut sortir le titre du la galerie en le déplaçant après le </div> qui ferme la galerie. De plus, attention à ne pas avoir de <br/> avant ce </div> sinon il y aura un espace noir au survol de l'image ;)

      Par contre avec cette méthode on ne peut pas avoir un alignement comme sur Julinfinity. Ici les images seront alignées sur sur le haut de chaque ligne d'images.

      Supprimer
  32. Bonjour Catherine,
    Je me suis lancée il y a peu de temps dans la création d'un blog et tes articles me sont d'un grand secours !
    J'ai créé une galerie d'images dans la barre latérale droite de mon blog mais j'aimerais ajouter une légende (un titre) juste au dessus de chaque image (j'ai fait ma galerie sur 2 colonnes).
    Est-ce possible ?

    En te remerciant,

    Marion.

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Je vais me pencher sur la création d'un nouveau tutoriel qui prend en compte des titres pour les images ;)

      Supprimer
    2. Merci pour ta réponse Catherine :) J'attends donc ce tutoriel avec impatience !

      Supprimer
  33. Bonjour, existe y'il la même chose à insérer dans un article (et non un gadget) avec des photos cliquables vers des URL ?

    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Oui tout à fait. Tu peux remplacer l'URL en gras dans le code des images ci-dessous par l'URL vers laquelle tu souhaites renvoyer le lecteur quand il clique sur l'image :

      <div class="GPimg" style="background-image:url('http://adresse.com/image-06.jpg');cursor:pointer;" onclick=window.open("http://adresse.com/image-06.jpg","demo","width=800,height=600,left=150,top=200,toolbar=0,status=0,")></div>

      Ensuite tu peux coller le code dans un article. Pour cela, sur la page de création/modification de ton article clique sur le bouton HTML en haut à gauche de la page pour basculer en mode HTML. Colle le code pour ta galerie ici. Ensuite tu peux retourner en mode rédaction e cliquant sur Rédiger à côté du bouton HTML.

      Supprimer
  34. Bonjour, tout d'abord merci mille fois pour toutes ces idées et tutoriels !

    Je cherche désespérément à faire en sorte que les images de la galerie n'ouvrent pas une nouvelle fenêtre mais une autre page du site dans la même fenêtre. J'ai remplacé le lien destination par l'URL désirée donc pas de problème de ce coté, mais il ouvre la page dans une nouvelle fenêtre... Est-ce le window.open à remplacer par autre chose ? Merci beaucoup !

    www.clementbarda.com

    RépondreSupprimer
    Réponses
    1. Bonjour Clément,
      Pour réaliser ce que tu souhaites, il faut utiliser une autre méthode je pense. Celle-ci ne convient pas.
      Si l'anglais ne te dérange pas, alors il y a ce code que tu peux utiliser pour arriver à ce que tu souhaites ;)

      Supprimer
  35. Bonjour Catherine,
    Merci encore pour ce tuto !

    Je cherche assez désespérément à insérer une galerie SimpleViewer dans mes articles, sans succès ... C'était apparemment possible jusqu'à récemment grâce à Dropbox et Google Drive, mais je ne trouve pas de solution aujourd'hui.

    Connaîtrais-tu une astuce ?

    Merci beaucoup d'avance,

    Marion

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Il y a un moyen beaucoup plus simple de créer une galerie d'images sans utiliser un programme ou un système tiers.
      Tu peux utiliser les listes en code HTML. Je pense en faire un tutoriel plus détaillé, mais pour faire simple voici comment faire une galerie basique.
      1. Commences par ajouter tes photos à Blogger. Créés un article brouillon auquel tu ajoutes toutes les images que tu souhaites afficher dans ta galerie. Sauvegardes ton article mais ne le publie pas.
      2. Dans un nouvel onglet ou une nouvelle fenêtre, ouvres ta page ou ton article auquel tu souhaites ajouter la galerie. Cliques sur le bouton HTML en haut à gauche de la page pour accéder au code de la page.
      3. Ensuite, ajoute le code pour une liste qui va nous servir à construire la galerie :

      <ul class="galerie">
      <li><img src="URL-IMAGE"/></li>
      <li><img src="URL-IMAGE"/></li>
      <li><img src="URL-IMAGE"/></li>
      </ul>

      La ligne :

      <ul class="galerie">

      Correspond au début de la galerie, et la ligne :

      </ul>

      A la fin de la galerie.
      Chaque ligne :

      <li><img src="URL-IMAGE"/></li>

      Correspond à une case contenant une image.

      4. Retournes sur l'article brouillon qui contient les images à ajouter à la galerie. Fais un clique-droit sur une image et sélectionne Copier l'adresse du lien pour copier l'adresse url de l'image
      5. Retournes sur l'article/la page contenant la galerie. Remplaces URL-IMAGE d'une ligne par l'adresse url de l'image que tu viens de copier.
      6. Si tu souhaites ajouter des images à la galerie, rajoutes des lignes :

      <li><img src="URL-IMAGE"/></li>

      Avant la ligne :

      </ul>

      7. Ajoutes à la fin de ton article/ta page le code suivant :
      <style type='text/css'>
      ul.galerie {
      padding: 0;
      margin: 0;
      text-align: left;
      width: 100%;
      }

      ul.galerie li {
      display: inline-block;
      width: 31%; /* Largeur des cases */
      margin: 0 1% 15px;
      padding: 0;
      }
      </style>

      Ce code va définir la disposition des "cases" sur 3 colonnes.
      Sauvegardes, et voilà pour une galerie d'images simples ;)
      Je vais créer un tutoriel plus détaillé sur le sujet (avec ajout de liens, titres, et différents nombres de colonnes).

      Supprimer
  36. Bonjour, Lorsque je rajoute le script html et css dans mes pages de script, j'ai l'impression qu'il y a un conflit entre le fond général de ma page web et le fond des photos mis en galerie (fonction: background-image). Avez vous une astuce pour dissocier les 2 ? Merci d'avance. Adrien

    RépondreSupprimer

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

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

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