Ticker

6/recent/ticker-posts

Header Ads Widget

Responsive Advertisement

How to add slider image bar in blogger post?

Kusal Tharindu May 16, 2021

What is slider image bar?

It shares a photo every few seconds and gives the user a good idea about the blog post.

Sample Collection

How to add slider image bar in blogger post?
image blogger tips
How to Add An Image Slider to Posts on Blogger

Why is it important for a blogger post?

Adding more photos to your blogger post can make you look more beautiful and attractive. If you want to add more photos to your Blogger post, you can use this slider image bar to prevent the blog post from becoming irregular.

How we do it?

1. Go to your blogger dashboard and open new post tab

2. Upload the photos you want to this blog post 

3. After that you want to go to HTML view and copy the following code. 

<div>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Screenshots</h2>

<div class="w3-content w3-display-container">

  <div class="w3-display-container mySlides">
  <img src="URL 1" style="width: 100%;" />
  <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-transparent">
    <img src="Your watermark link" style="width: 100%;" />
  </div>
</div>
  
  <div class="w3-display-container mySlides">
  <img src="URL 2" style="width: 100%;" />
  <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-transparent">
    <img src="Your watermark link" style="width: 100%;" />
  </div>
</div>
  
  <div class="w3-display-container mySlides">
  <img src="URL 3" style="width: 100%;" />
  <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-transparent">
    <img src="Your watermark link" style="width: 100%;" />
  </div>
</div>
  
  <div class="w3-display-container mySlides">
  <img src="URL 4" style="width: 100%;" />
  <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-transparent">
    <img src="Your watermark link" style="width: 100%;" />
  </div>
</div>

<button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">❯</button>

</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>
  
  <script>
var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1} 
  x[slideIndex-1].style.display = "block"; 
  setTimeout(carousel, 3000); 
}
</script>
</body>
</div>
4.Copy the image address link from the photos uploaded to your blog post and paste it into the red "URL" locations in the code above.

5.Copy the image address link for  your watermark image link and past it into the red "your watermark link" locations in the code above.

6.Then go to Composition Mode and delete all uploaded images using the backspace key on the keyboard button.

If you have any different idea please leave a comment below and we can discuss it.

Tags:

Post a Comment

0 Comments