How To Add Cool and Responsive Image Gallery in Blogger Post or Page

How To Add Cool and Responsive Image Gallery in Blogger Post or Page:

This put up will display you how to effortlessly add an easy and responsive picture gallery to your Blogger/Blogspot blog. Galleries are a splendid way to show multiple snapshots without making the person scroll through a protracted slow-loading page. This academic will show you a way to add a photo gallery in a grid layout with rows and columns. You ought to use a picture gallery to feature a portfolio, venture gallery, recipe gallery or a visible archive page that hyperlinks to separate posts to your weblog. You may also add a gallery within separate posts to show off a collection of pictures along with tour pictures, external products, store this put up or lookbook gadgets.

DEMO IMAGE GALLERY

Add Responsive Image Gallery in Blogger Post or Page:

• Login your Blogger Account.
• Go to Theme > Click on Edit HTML >> Now click on your keyboard ( ctrl + F) and find

     ]]></b:skin>

Add CSS Code:

• Paste the CSS code avobe (  ]]></b:skin> )  this code.

 
/* START SIMPLE RESPONSIVE GALLERY ARIF IT WORLD */
.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 ARIF IT WORLD */

This CSS code designed for only 4 columns gallery style. if you want to change it and make 3 columns gallery in your blog post or blog page. You just replace this code:

.gallery {
        width: 33.333%

Now add HTML on your Post:

<div class="image-gallery">

<!-- Grid Image Gallery -->

  <br />

<div class="gallery">

<img alt="SEO-IMAGE-CAPTION" src="IMAGE-URL" />

  </div>

<!-- Grid Image Gallery with Caption -->

  <br />

<div class="gallery">

<img alt="SEO-IMAGE-CAPTION" src="IMAGE-URL" />

      <br />

<div class="desc">

DISPLAYED-CAPTION</div>

</div>

<!-- Clickable Grid Image Gallery -->

  <br />

<div class="gallery">

<a href="https://www.blogger.com/LINK" target="_blank">

      <img alt="SEO-IMAGE-CAPTION" src="IMAGE-URL" />

    </a>

  </div>

<!-- Clickable Grid Image Gallery with Caption -->

  <br />

<div class="gallery">

<a href="https://www.blogger.com/LINK" target="_blank">

      <img alt="SEO-IMAGE-CAPTION" src="IMAGE-URL" />

    </a>

    <br />

<div class="desc">

DISPLAYED-CAPTION</div>

</div>

</div>

Now upload add your picture by changing "IMAGE-URL"

replace "SEO-IMAGE-CAPTION" and "DISPLAYED-CAPTION"

• Now you can save and publish your page or post. Your photo gallery have to be displayed in a pleasing grid and be responsive whilst you convert the browser display screen size.