How to Add a Responsive Photo/Image Gallery in Blogger Posts or Pages

byVDB Zone -
Someone's photo gallery shared on social media viewed on phone.

Blogger/Blogspot doesn't have a Photo Gallery or Image Gallery feature that creates a grid of thumbnails on a page or post, unlike WordPress. But I collected several tutorials for you to save you time. Go ahead and try them one by one and choose which one do you like most.

Photo Gallery for Blogger Style #1

After creating your page where you would like to feature the gallery, switch to HTML view at the top left of your blogger screen. You will need to copy and paste the following HTML code to start your gallery.

<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>

<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>

<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>

<td align="center" width="25%"><a href="your blog url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
</tr>
</tbody>
</table>

This code can easily be customized to your liking, here's how it works:

The number after "table cellpadding" decides how much spacing there will be between each picture. When making your gallery, you can play around with it and change the number for a spacing that has your preference. The larger the number, the bigger the space between the pictures.

Each new thumbnail requires a new <td align etc......./td> code. In these specific codes, it occurs four times, so we now made one row of four images. You can add more rows by copying the complete code starting at <tr> until </tr> and pasting it above </tbody>

By changing the percentage in the HTML code (shown here at 25%) you can decide how many pictures you would like to display in one single row. For example, if you would only like 3 images per row, the code would look like this:

<td align="center" width="33%"><a href="your blog URL here/" target="_blank"> <img height="140" src="your image URL here" width="140" /><br />your descriptive text here</a></td>

Just see it as calculating, 100 divided by 4 is 25. 100 divided by 3 is 33 and then some, that is how it works. If you would like only two images displayed per row, change the percentage to 50 and so on.

The next thing you need is the URL to the image you would like to display and the URL to the post you would like the thumbnail to direct to. Paste them in the "your blog URL here" and "your image URL here" sections.

You can add a title underneath the images by typing in the "your descriptive text here" section. If you do not prefer text underneath the pictures, just delete this part of the code: <br />your descriptive text here</a>

You can also adjust the sizing of your photos by changing the numbers, displayed in blue, to the size of your liking (height and width).

This was shared by Supersize my Fashion.

Photo Gallery for Blogger Style #2

Copy below CSS code and paste before ]]></b:skin> or </style>

 /* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}

Place the below script before </body>.

 <script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>
</script>

Now save your template.

Final step, edit your post > HTML View > and copy the code below (dont forget to edit the links in red below with yours) and place where you want it.

<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/CZHGjeJZMqI?rel=0&amp;showinfo=1"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="San Vicente Ferrer Church" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5VDvY4_VyzD8N5zFIwR5aiLIoq209B8YUPrR4iaZYfPCtL02RMYZf-ynkBoWrYe_5EOz4G_-f7yRnJgpu5hSb6hdulL4L9iBkf-b6K8MPkle0v75gaQzEtxVyBrFgxZx9TDqnpFcgtHV/s1600/san-vicente-ferrer-church.png" title="San Vicente Ferrer Church" />
</a>
<a href="javascript:void(0)">
<img alt="Catanan Falls" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirLs6AqLTKEtTZXaqBOWYUKF8wBlHP2EBJC4yy6RfR2Hwp7BBIR42hMMDkKqi5dCZZW0DLlNT_u2ge6IRCPzb01riMXQnuXNm8OWscaNu0eFyVj0JYaqeRC12FGE88kdH6NizrA7zuDYsP/s1600/catanan-waterfalls.png" title="Catanan Falls" />
</a>
<a href="javascript:void(0)">
<img alt="Carolotan Falls" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0s8u6MZPcoHtoR05zqrraiGDVN_HD10DkjBqnC3p4Hcm9yqvkLnfVLLY0RupWu1fnLFkRhVCya-FK1nU_6M697HI8ct3WYkXyF2OZnENC4ODLeTMgbuhklYVgVPLtzzcJueKTjKRuUkK/s1600/carolotan-falls2.png" title="Carolotan Falls" />
</a>
<a href="javascript:void(0)">
<img alt="Dampol Bridge" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjir72wCCMrCGoUD2-mT2y0kYeXcmxrWD8Djg40imaW8zAN5zXSa0zeJOcMgFeyQih5MmXVCw9wRSXWD2dh6Rb3l95BfBKs9Ya2e0puxagDWtKlqAExEJ7cDcVt8NGAgRbqkng__OOIrFdd/s1600/dampol-bridge.png" title="Dampol Bridge" />
</a>
<a href="javascript:void(0)">
<img alt="Abeca Falls" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ22h08sTDqPdY9IEYH59tHBQwkw0FQev9GbsFajNmKFbCR7i15GmtLgY2k_arswltSItldcVg_WLecEyTsBXCNzG8Bnsas7991oMSw_mXuj0Wet8dPqfdTUkbjLkMbep9bEc5ubpPvAiw/s1600/abeca-falls1.png" title="Abeca Falls" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>

Save/Update your post/page.

This was shared by Rio Ilham Hadi.

Photo Gallery for Blogger Style #3

This one contains 4 styles. Choose which one do you like to use:

  1. Grid Image Gallery
  2. Grid Image Gallery with Caption
  3. Clickable Grid Image Gallery
  4. Clickable Grid Image Gallery with Caption

On Blogger, go to Theme > Edit HTML and find the CSS section of your theme (between <b:skin> and ]]> </b:skin>). You’re going to add the CSS above the closing ]]> </b:skin> tag.

The CSS

Paste the following CSS code above ]]></b:skin>

 /* START SIMPLE RESPONSIVE GALLERY XOMISSE */
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.gallery img:hover {
opacity: 0.8;
}

div.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;
/* END SIMPLE RESPONSIVE GALLERY XOMISSE */

This styles the images and captions in a grid format, as well as making it responsive (go from 4 columns to 2 columns to 1 column depending on screen size). Customize this CSS code as you wish.

The HTML

There are four style options depending on if you want a standard image gallery with/without captions or a clickable gallery, with/without captions, that links to other posts, pages or external sites.

To add the gallery to a post, page, or gadget, copy and paste the following HTML. It’s important that you make sure you’re pasting it in 'HTML view' (not compose/rich text view) and don’t switch to 'Compose view' once you paste it, otherwise, Blogger will add code between the lines and break the structure.

 <div class="image-gallery">
  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
  </div>

  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
      <div class="desc">DISPLAYED-CAPTION</div>
  </div>

  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>

  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">DISPLAYED-CAPTION</div>
  </div>
</div>

Now upload your images and replace IMAGE-URL with the direct image URL.

NOTES:

  • Replace LINK with the post, page, or external site you want that image to link to. Replace SEO-IMAGE-CAPTION and DISPLAYED-CAPTION with an SEO-friendly descriptive caption.
  • To add more images, simply copy and paste the block of Grid Image code within the image-gallery div wrapper.
  • You can now save and publish your post or page. Your image gallery should be displayed in a nice grid and be responsive when you change the browser screen size.

This was shared by Xomisse.

Photo Gallery for Blogger Style #4

This one is a carousel widget. For the full tutorial you need to visit Embed photos as a slideshow with a carousel widget or How do I embed a Google Photos Album into a website? You need to create an embed code there.

Other Photo Gallery Style for Blogger

Hope this helps!

Tags:

More From VDB Zone Blog

View all

Your voice matters. Discussions are moderated for civility before being published on the blog. Read my comment policy here.

Previous Post Next Post
Share to other apps
Copy Post Link