2018-10-18

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

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.

Post a Comment