How To Add Gallery In Blogspot Website ? Blogger Tutorials For Free By Saransh Sagar

How To Add Gallery In Blogspot Website ? Blogger Tutorials For Free By Saransh Sagar


Hello readers, Galleries are most important in order to show your portfolio or something which is important. Let's discuss ways to create image gallery in your blogspot website or blog. There are lots of ways for that but i will tell you two ways, One is code customize by me and copied from the internet resources and second one is from w3 school sites. so let's start



Just copy the below mention code and change the css part according to your requirments as mentioned in video. You can use 1,2,4,5,10,20,25,33.33,50 for coulmn section. If you set 1% then total 100 images will be show in one row , if 2 then 50 images will be show,4 for 25,5 for 20,10 for 10 ,20 for 5,25 for 4,50 for 2,100 for 1.

Look this part in code and change as per your requirment.

/* Create three equal tecolumns that floats next to each other */
.tecolumn {
  float: left;

  width: 33.333%;


Code Start 

<style>
 {
  box-sizing: border-box;
}



/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

.terow {
  margin: 8px -16px;
}

/* Add padding BETWEEN each tecolumn */
.terow,
.terow &gt; .tecolumn {
  padding: 8px;
}

/* Create three equal tecolumns that floats next to each other */

.tecolumn {
  float: left;
  width: 33.333%;
}

/* Clear floats after terows */ 
.terow:after {
  content: &quot;&quot;;
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* Responsive layout - makes a two tecolumn-layout instead of four tecolumns */
@media screen and (max-width: 900px) {
  .tecolumn {
    width: 50%;
  }
}

/* Responsive layout - makes the two tecolumns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .tecolumn {
    width: 100%;
  }
}
</style>
 <!-- MAIN (Center website) -->

<!--end-->
<div class='main'>
<!-- Portfolio Gallery Grid -->
<div class='terow'>
<div class='tecolumn'>
<div class='content'>
<img alt='Mountains' src='https://i.ibb.co/JdP8sGj/Whats-App-Image-2020-05-26-at-09-35-19-3.jpg' style='width: 100%;'/>
    <!--  <br/> <br/>

<h3><button class='btn btn-danger' type='button'>Class 1st</button></h3>
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset os .--></div>
</div>
<div class='tecolumn'>
<div class='content'>
 <img alt='Lights' src='https://i.ibb.co/ZL1r17G/Whats-App-Image-2020-05-26-at-09-36-11-2-554x554.jpg' style='width: 100%;'/>
    <!--  <br/>
<h3><button class='btn btn-danger' type='button'>Class 1st</button></h3>

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.--></div>
</div>
<div class='tecolumn'>
<div class='content'>
<img alt='Mountains' src='https://i.ibb.co/9NXYfFM/photo-wagner-ellen-istock-2-e1530560014961-554x554.jpg' style='width: 100%;'/>
    <!--  <br/> <br/>

<h3><button class='btn btn-danger' type='button'>Class 1st</button></h3>
Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos .--></div>
</div>


<!-- END GRID -->
</div>
</div>
</center>
<!-- END MAIN -->
</div>

</div>

Code End 

Copy and paste any where in the blog, either in post or page section or either in edit theme section. you can use center tag for showing image gallery in center.



Click On This Link - Link 1
Click On This Link - Link 2

Link 1 is for explanation , how code works and link 2 is for practical, you can run your code as well as change image url and increase or decrease image quantity as per you requirment. Please watch video for more clearification.!



Post a Comment

Previous Post Next Post