A photo slide show is a group of photos or images shown using some kind of effects inside a particular medium. Some photo slideshow effects will fade in or fade out, others will be just transparent or blurry.

blogger photo slideshow thumb

For this tutorial, I will show you how you can easily put a very simple photo slideshow inside your Blogspot post or article.

This can be very useful especially if you are posting an article regarding a person that contains so many photos. Using a slideshow, you can make your long article (because of photos) short and present it in a more decent way.

You are going to need the following:

a. Four (4) photo URLs or more.
b. A responsive Blogger template so that the photo inside the slideshow will become responsive as well.

THE STEPS:

1. Go to your Blogger and Create a New Post.

2. Now from Compose, switch to HTML mode.


3. When already in HTML mode, copy and paste the code below.

<style>
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {max-width: 700px;position: relative;margin: auto;}
.prev, .next {cursor: pointer;position: absolute;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;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
.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}}
@media only screen and (max-width: 300px) {.prev, .next,.text {font-size: 11px}}
</style>

<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvLP8dVgQMliV1Hwb44zKi76noSiy9Ai2FiAmQn7zMlfAFjjYYKmUM2iaSOXnIJKnzczL5SGRZ3F9vhr50vzq4M1ET5Ada_vprBWPd3rCSn64k_9zaN93FQqafkGImp2-5tESGBgWPQPk/s1600/7dbd914731076502f683bd3183f3edc8--selection-series-amb.jpg" style="width:100%" /></div>

<div class="mySlides fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR4i8ift20OjrTolgkiFV8uiJ_6cdtDOdU7mAB9i15YGCitG1YU2GDf2-4oQdlAEi6ItTaCrXGog8QDF9I4ZX_A_Frt7Jl0yLxUmK6qnxmu9kMA7QQncJdu5Ia7Xv2pTNCXqyeqmnBC8iw/s1600/480full-kira-balinger.jpg" style="width:100%" /></div>

<div class="mySlides fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZ7HtG2HKj_CoDI-hIBozLaUZ4g11yYdgryF6lK5mAXd8Zl5di2goV7o1Y71t5RCyoWo-UKvFOgvv7O7jtCPHMAvVOCK5RC1xzoEzuAqOsUH5V1lgI1q91jkku5E1QSmljEvcKTndisfJ/s1600/750full-kira-balinger.jpg" style="width:100%" /></div>

<div class="mySlides fade">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs80Y-iHeeJQIWuwHrQIVEp-23kUv1XCnLJPGzt5k0IsduJoduuT0-kyhePGVWtwso6pWQLoQSC8ZFvqwrR-PYh2Bc5jCo56UM_AfkjkEeB_1M3jltNxn5WJEOK3fGYSyMFwmuIJ9Pr1FD/s1600/17587430_774463829383108_6679389046881386496_n.jpg" style="width:100%" /></div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</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].className = dots[i].className.replace(" active", "");}slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";}</script>

TO ADD MORE PHOTOS
Just copy and paste the whole <div class="mySlides fade">
<img src="PUT YOUR PHOTO URL HERE" style="width:100%" /></div> below the other <div class="mySlides fade"> tag. Make sure you put the exact URL of your photo inside the IMG SRC tag.

TO CHANGE THE PHOTO
Simply remove the given photo URLs from this tutorial and replace it with your own.

4. When done, just Publish your post.

5. Test your post if your photo slideshow is working or not.

6. Done!

You can see a live example of this tutorial here.

If you have something to share or ask regarding this tutorial, do not hesitate to leave a comment below. Thanks!