How To Add A Responsive Image Gallery To Blogger

In this article, I'll explain how to quickly and easily install a responsive image gallery on a blogger website using basic scripts.

You can add captions underneath the photographs and links to each of the images.

Therefore, before adding the image gallery, upload the photographs you wish to include and write down the image location in a notepad.

Above the]]> /b:skin> tag in the blogger theme editor code, you can enter the CSS code directly. Use the style> CSS code Here /style> if you wish to add the CSS code directly in the post editor.

To add a responsive image gallery to a blogger website without making any mistakes or running into problems, read the steps provided below carefully.

Also, Read How to Remove and Fix the m=1 Problem in Blogger

Include a responsive image gallery

You must first go to the official Blogger website.

You must now enter your login information to access the Blogger dashboard.

Make a Backup copy of your Blogger theme.

After logging in to the Blogger website dashboard, you should make a copy of the theme code for your blog in case you need it in the future. If an error occurs while adding the code, you can simply restore the backup code and continue using your blog as normal.

Dashboard of the Blogger website -> Backup Theme Select "theme section" -> Click the arrow icon. Click on backup, then select download. -> Verify captcha For later usage, store the downloaded file in a secure location.

Also, Read: How to upload an ads.txt file to a site hosted on Blogger

Adding Code

Now, you must open the blogger post and switch to HTML view before pasting the following CSS code and enclosing it in the style tag, which is written as <style>Add CSS Code/style>.

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

 In order to complete the gallery, the necessary HTML code must now be inserted.

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

In particular, you are required to supply the image's description, alt text, and a link to the image's source (indicated by the symbol "#").

If you do not want the caption to appear below the image, you can easily remove it from the accompanying HTML code by removing the line that reads <div class="img-desc">image-Caption/div>.

<!--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>

Note - In the event that you encounter any issues or errors while attempting to save the code, you will need to restore the theme code from your backup and proceed with extreme caution through the same process once more.

Wrapping up

I am hoping that you now have a better understanding of how simple it is to add a responsive image gallery to a blogger website by using fundamental and lightweight HTML and CSS scripts.