Make Slideshow In Blogger

This easy to install slideshow will let you show some cool pictures with the title. You can also add links to the title if you want. Just replace the links of the image with your image links and this slideshow is ready to work on your blog.

Slideshow In Blogger

Before following these steps please upload your images and copy the image URL. Your images must have the same size so that this gadget can work better. You can upload your images in the post editor and grab the image URL by clicking HTML while 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 coz its really simple.

Steps to follow

  • Login to your Blogger profile.
  • On 'Layout' page click on 'Add a Gadget'
  • Select 'HTML/Javascript'


 HTML/Javascript Gadget


  • 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.


  • Now Paste this code in 

Template > Customise > Advanced > Add CSS


 * {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .slprev, .slnext,.text {font-size: 11px}
}


  • Save your template and your slideshow is ready. 


Customize


  • To change the image please change the URL in blue


<img src="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 like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

20 comments:

  1. Hi. All went well until I tried to go to Customise > Advanced > Add CSS> and paste the code into "add CSS". That option under "advanced" didn't exist. Indeed, I clicked on "advanced" and nothing happened. Next to the "customize" button after I clicked "template" there was an "edit HTML" button. Should I have clicked that, and pasted the css code there (somewhere in there). Or perhaps the problem was Chrome. Didn't look to me that clicking "advanced" did anything.

    ReplyDelete
    Replies
    1. You can paste that code in Edit HTML
      Search for this code ]]> and paste the code before this code.

      Add CSS is the easy way but you're having a problem then you can add your code by this method.

      Delete
  2. how can I find the img src?
    all that I want to post ex. pictures were saved in my desktop.
    I notice that there's a HTTP, should I need to publish the picture's first to start?

    ReplyDelete
    Replies
    1. Upload your pictures in post editor and then grab the link of those images.

      Delete
  3. I added the slider to our blog and it works great. I had some problems with the arrows when I added more pictures but I fixed it. My only issue is the dots for the picture now line up 1 under another vertically in the center instead of horizontally under the pictures. Can you give me some tips on how to change the dots to horizontally?

    ReplyDelete
    Replies
    1. You can send me the code by using my contact page. :)

      Delete
  4. Sir, its working on mouse click please provide automatic slider code.

    ReplyDelete
    Replies
    1. Hello there,

      I will be publishing a lot more articles on slider gadgets and other gadgets. Do susbcribe to get a mail.

      Thanks

      Delete
  5. I WANT TO RESIZE THE PICS. HOW TO DO THAT

    ReplyDelete
    Replies
    1. Hi there,

      You can upload resized image directly. It will help you to optimize load speed. :)

      Delete
  6. Replies
    1. Hi there,

      Thanks for letting me know. I will check the code and update as soon as possible. :)

      Delete
  7. Replies
    1. Hey Arkestin,

      Do you want the slider to move itself or you're facing issue with mouse click?

      Delete
  8. I did all those steps. changed the image source too. but none of the images are showing. when i view blog only 3 dots(that are below the images) are showing instead of the images or slideshow.

    ReplyDelete
  9. Thank you Rishabh, its working perfectly.

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.