How to Add Slideshow in Blogger Post

welcome to the Tutbig Blogger tutorial today I will show you How to Add Slideshow in Blogger Post Some great pictures with the title. You can also add links to the address if you like. Just replace the image links with the links of your photos, and this slideshow is ready to work on your blog. Before following these steps, please upload your photos and copy the image URL. Your photos must be the same size for this tool to work best. You can upload your photos in the post editor and capture the image URL by clicking on HTML while you are in the post editor. Upload all your images at once and copy all the image URL in notepad or any text editor you have. This way you can add this gadget easily and without committing any mistake. I'm going to make it short Slideshow its really simple.

How do I add scrolling images to Blogger?

Add Slideshow in Blogger Post You want to maximize the potential of your blog to further your goals, and whether you are a photographer, marketer or other professional, a slide show can help you. As a photographer, you can display your favorite photos, or as a marketer of your best still photos.

These are Following Steps:-

1. Login to your Blogger profile.
2. On 'Layout' page click on 'Add a Gadget'
   
3. Select 'HTML/Javascript'
   
4. Now Copy and Paste this code

<div class="slideshow-container">

<div class="mySlides fade">

  <div class="numbertext">1 / 3</div>

  <img src="https://4.bp.blogspot.com/-wNkw6hH21jk/VvaS04wddAI/AAAAAAAAAC4/x040AhmgT58Af5y8hJbum-6GYZ-IMIzIg/s1600/407390.jpg" style="width:100%">

  <div class="text">Caption Text</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">2 / 3</div>

  <img src="https://3.bp.blogspot.com/-loqlpbjsGhk/VvaS5FdFgSI/AAAAAAAAADA/ue16oH3yR9UnsDc1I_f9IqlI3mDB3TuTw/s1600/abstract-wallpapers-1080p-hd.jpg" style="width:100%">

  <div class="text">Caption Two</div>

</div>

<div class="mySlides fade">

  <div class="numbertext">3 / 3</div>

  <img src="https://2.bp.blogspot.com/-g-XrmxZSMR0/VvaS30_TsMI/AAAAAAAAAC8/-X4mDrDGJiIUY_Yr5zzOSNeyugdZp3i-A/s1600/fire-abstract-HD-wallpaper.jpg" style="width:100%">

  <div class="text">Caption Three</div>

</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<br>

<div style="text-align:center">

  <span class="dot" onclick="currentSlide(1)"></span>

  <span class="dot" onclick="currentSlide(2)"></span>

  <span class="dot" onclick="currentSlide(3)"></span>

</div>

<script>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

  showSlides(slideIndex += n);

}

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length} ;

  for (i = 0; i < slides.length; i++) {

     slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

     dots[i].classList.remove("active");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].classList.add("active");

}

</script>

 Note:- Please change image URL in all three lines highlighted in blue.

  5.Now Paste this code in 

Template > Customise > Advanced > Add CSS

Save your template and your slideshow is ready. 

Customize

To change the image place change the URL in blue

<imgsrc="https://4.bp.blogspot.com/wNkw6hH21jk/VvaS04wddAI/AAAAAAAAAC4/x040AhmgT58Af5y8hJbum-6GYZ-IMIzIg/s1600/407390.jpg" style="width:100%">

To change the title over the image. Please change the text in blue.

<div class="text">Caption Two</div>

To add a link to image title please replace the above line with this line.

<div class="text"><a href="Add link here">Caption Two</a></div>

I hope you enjoy this post and the photos. How to Add Slideshow in Blogger Post

Related Poste