For Bloggers
- First of all, Go to Themes and Edit HTML Button in your Blogger Dasboard.
- Now Paste Below Code just below <head>.
<style>
.mySlides{display:none}img{max-width:100%;height:auto;border-radius:15px;box-shadow:0 10px 10px -5px rgba(0,0,0,0.22);vertical-align:middle}.slideshow-container{max-width:1000px;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;user-select:none}.next{right:0;border-radius:3px 0 0 3px}.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8)}.text{font-family:'Google Sans',sans-serif;color:#f2f2f2;font-size:15px;padding:30px 12px;position:absolute;bottom:8px;width:100%;text-align:center}.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}.active,.dot:hover{background-color:#717171}.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}}.dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}
</style>- Now Scroll bottom to Page and Find </body> .
- Paste Below Code For Only SlideShow just Above it.
<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>
- Paste Below Code if You Want it with Automatic Slide effect too.
<script>
var slideIndex = 0;showSlides();function showSlides(){var i;var slides = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("dot");for (i = 0;i < slides.length;i++){slides[i].style.display = "none";}slideIndex++;if (slideIndex > slides.length){slideIndex = 1;}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";setTimeout(showSlides,4000)};
// Change image every 2 seconds
</script>- Now Save The Theme.
- To Use SlideShow Use Below HTML Code.And Replace The image links with Your Image Links.
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<img src="https://www.w3schools.com/howto/img_nature_wide.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>
<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>👉Demo Here
Files For All
SlideShow By K K UPGRADER
File Type : Zip
File Size :2KB
If it is not automatically downloaded, please click Download again. And if the link is broken, please report it via the Contact page of our blog.