How to Add a Responsive Image Gallery to Blogger

Adding an image gallery to your Blogger site can significantly improve its visual appeal and user experience. Whether you’re a photographer, blogger, or business owner, a well-designed gallery allows you to showcase images in an engaging way.

In this guide, I’ll walk you through three different methods to create a responsive image gallery on Blogger:

Using HTML & CSS (Simple Grid Gallery)
Adding a JavaScript Lightbox for Enlarged Viewing
Using an Online Widget for a Quick Setup

Method 1: Create a Simple Responsive Gallery Using HTML & CSS

If you want a clean, minimal gallery that automatically adjusts to different screen sizes, follow these steps:

Step 1: Open Blogger’s HTML Editor

Log in to Blogger and go to your Dashboard.
Click on Theme → Click Customize → Choose Edit HTML.

Step 2: Add the CSS Styles

Find </head> and paste the following CSS code before it:

<style>
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
}
.gallery img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s;
}
.gallery img:hover {
    transform: scale(1.1);
}
</style>

Step 3: Insert the Image Gallery HTML Code

Find <body> and paste this HTML code where you want the gallery to appear:

<div class="gallery">
    <img src="IMAGE_URL_1" alt="Image 1">
    <img src="IMAGE_URL_2" alt="Image 2">
    <img src="IMAGE_URL_3" alt="Image 3">
    <img src="IMAGE_URL_4" alt="Image 4">
</div>

🔹 Replace "IMAGE_URL_X" with the actual links to your images.

Step 4: Save & Preview

Click Save, then preview your blog to see your new responsive image grid in action!

Method 2: Add a JavaScript Lightbox for Enlarged Viewing

If you want users to click on images to view them in full screen, you can use a lightbox effect.

Step 1: Add Lightbox CSS & JavaScript

Find </head> and paste the following code before it:

<style>
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.gallery img {
    width: 200px;
    height: auto;
    cursor: pointer;
    border-radius: 5px;
}
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}
.lightbox img {
    max-width: 90%;
    max-height: 90%;
}
</style>

<script>
function openLightbox(src) {
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightbox').style.display = 'flex';
}
function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
}
</script>

Step 2: Insert the Image Gallery with Lightbox HTML

Find <body> and paste this code where you want the gallery to appear:

<div class="gallery">
    <img src="IMAGE_URL_1" onclick="openLightbox(this.src)">
    <img src="IMAGE_URL_2" onclick="openLightbox(this.src)">
    <img src="IMAGE_URL_3" onclick="openLightbox(this.src)">
</div>

<div id="lightbox" class="lightbox" onclick="closeLightbox()">
    <img id="lightboxImg">
</div>

🔹 Replace "IMAGE_URL_X" with your image links.

Step 3: Save & Preview

Click Save and check how your images open in a full-screen pop-up when clicked. 🖼️

Method 3: Use an Online Widget for an Easy Setup

If you don’t want to code, you can use a third-party gallery widget.

Step 1: Generate a Free Gallery Widget

Go to Elfsight Photo Gallery Widget and:

Sign up for a free account.
Customize your gallery.
Copy the generated HTML embed code.

Step 2: Add the Widget to Blogger

Go to Blogger Dashboard → Click Layout.
Click “Add a Gadget” → Select HTML/Javascript.
Paste the widget code inside the box and Save.

📌 That’s it! Your gallery is now live on your Blogger site.

Which Method Should You Choose?

Method	Best For
HTML & CSS (Grid Gallery)	Simple, lightweight, and easy to use.
JavaScript Lightbox	Professional-looking gallery with a pop-up image viewer.
Online Widget	Quick and easy setup without coding.

If you want full control, go with Method 1 or 2. If you prefer a drag-and-drop solution, Method 3 is best.

Final Thoughts

A responsive image gallery makes your Blogger site more visually appealing and improves user engagement. Whether you choose a simple grid layout, a lightbox effect, or a widget, your blog will stand out with a beautifully designed gallery.

Which method did you try? Let me know in the comments! 😊 Happy blogging! 🚀