How to Create Responsive Grid Image Box in Blogger | Spider Blogging

 Hello Spider Bloggers, Today am going to share one useful code for all of you, which suits all most all theme and I know its much more helpful for all niches.

For Example If you have one site related to tech or android and want to share screenshot in post it is not possible without some extra codes, like WordPress blogger won't have that features, So I have brought this code to you Hope you find it good.


How to Create Responsive Grid Image Box in Blogger
How to Create Responsive Grid Image Box in Blogger


Step to add this in your theme:

So Guys its very easy to install so just place below codes in right places as guided below.

Step.1

  1. Go To Your Blogger Dashboard Account
  2. And Paste Before </b:if> code.

Tips : If You are unable to find </b:if> you can place this code in before </head> tag with <style> css </style>

 /* Responsive Grid Image Box in Blogger */ 
.Blog .grid-image{display:flex;flex-wrap:wrap;align-items:flex-start;margin:30px 0}
.Blog .grid-image img, .Blog .scroll-image img{width:calc(33.333% - 10px);margin:0 15px 15px 0}
.Blog .grid-image img:nth-of-type(3n), .Blog .grid-image img:last-child, .Blog .scroll-image img:nth-of-type(3n), .Blog .scroll-image img:last-child{margin-right:0}
.Blog .grid-image img{width:calc(50% - 7.5px)}
.Blog .grid-image img:nth-of-type(2n){margin-right:0}
.Blog .grid-image img:nth-of-type(3n){margin-right:15px}

Step. 2

  1. Use the below code in Post Or in page.
//Paste This code in Post HTML mode    
<div class="grid-image">
  <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
   <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
   

     2. Replace # with Your Image Link

Tips : Repeat Codes to make more grid images.

Result:


Screenshots Judul_gambar Screenshots Screenshots

Hope You have created this successfully If you face any issue please comment below..

Thank You.