How to add a responsive image gallery to Blogger

 Learn How you can add a responsive image Gallery to the Blogger website where you can display multiple images in a Grid. 

How to add a responsive image gallery to Blogger

You can also add links to each of the images and add captions below the images. So, to add the image gallery you need to first upload the images you want to add and note down the image address to the notepad. 

You can either use the CSS code directly in the theme code above the ]]> </b:skin> tag. If you want to add the CSS code directly in the post editor then use the <style> CSS code Here </style> tag like this.

Now you need to open the blog post editor in the HTML view and paste the below CSS code and wrap this with the style tag as shown above.

.gallery {padding: 0 5px;float: left; width: 24.99999%;}
div.gallery img {width: 100%;height: auto;}
div.gallery img:hover {opacity: 0.8;}
div.img-desc {padding: 10px;text-align: center;}
* {box-sizing: border-box;}
@media only screen and (max-width: 700px){.gallery {width: 49.99999%; margin: 6px 0;}}
@media only screen and (max-width: 500px){.gallery {width: 100%;}}
.image-gallery:after {content: "";display: table;clear: both;}

Now you need to add the HTML code for the gallery

<div class="image-gallery">
<!--Image One-->
<div class="gallery">
    <a href="#" target="_blank">
      <img src="Image-URL" alt="Add Image Alt tag here">
    </a>
    <div class="img-desc">image-Caption</div>
  </div>
  
  <!--Image Two-->
<div class="gallery">
    <a href="#" target="_blank">
      <img src="Image-URL" alt="Add Image Alt tag here">
    </a>
    <div class="img-desc">image-Caption</div>
  </div>
  
</div> 

here you need to add the image source link, the link added in that image (#), and the image alt text and caption.

If you don't want to add the caption below the image then just delete this line <div class="img-desc">image-Caption</div> from the above code.

In the above code, I have added two images and you can easily add more images just by copying the Below code and paste before the last <div> tag.

<!--Image Three-->
<div class="gallery">
    <a href="#" target="_blank">
      <img src="Image-URL" alt="Add Image Alt tag here">
    </a>
    <div class="img-desc">image-Caption</div>
  </div>

Here, note that currently, it is showing 4 images in a row. If you want to change it three then you need to modify the CSS code a little bit. Just find this line (1st Line) .gallery {padding: 0 5px;float: left; width: 24.99999%;} and here change the value to 33.333%

I hope you have successfully added the image gallery to your blogger website. If you have any doubts then you can ask me on Twitter or Telegram.