New Updates

Home / SEO & BLOGGING / Blogger TutorialšŸ”„Image Slider HTML and CSS for Blogger

Blogger TutorialšŸ”„Image Slider HTML and CSS for Blogger

November 02, 2020

 

Slideshows have been the hot new fad on blogs lately.  Many blogs have them on the sidebar, in the header, and within the post content itself.  They are a great way to add a lot of images to a single post without making readers scroll and scroll to the bottom of the page.  They also can help loading time since they only pull one image at a time.  If the images are clickable you can also use sliders as a way of rounding up your old content.. almost like a fancy ‘navigation’ tool.

IMAGE SIDER FOR BLOGGER POS


Image Slider HTML and CSS for Blogger:-šŸ”„
     

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box;}

body {font-family: Verdana, sans-serif;}

.mySlides {display: none;}

img {vertical-align: middle;}

 

 

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

 

 

/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}

 

 

/* Number text (1/4 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}

 

 

/* The dots/bullets/indicators */

.dot {

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}

 

 

.active {

  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) {

  .text {font-size: 11px}

}

</style>

</head>

<body>

 

 

<h2>Slideshow</h2>

<p>Change image every 3 seconds:</p>

 

 

<div class="slideshow-container">

 

 

<div class="mySlides fade">

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

  <img src="1.URL" style="width:100%">

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

</div>

 

 

<div class="mySlides fade">

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

  <img src="2.URL" style="width:100%">

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

</div>

 

 

<div class="mySlides fade">

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

  <img src="3.URL" style="width:100%">

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

</div>

 

 

<div class="mySlides fade">

  <div class="numbertext">4 / 5</div>

  <img src="4.URL" style="width:100%">

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

</div>

 

 

<div class="mySlides fade">

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

  <img src="5. URL" style="width:100%">

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

</div>

 

 

</div>

<br>

 

 

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

  <span class="dot"></span>

  <span class="dot"></span>

  <span class="dot"></span>

  <span class="dot"></span>

  <span class="dot"></span>

 

 

</div>

 

 

<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, 3000); // Change image every 3 seconds

}

</script>

 

 

</body>

</html>

 




No comments

Subscribe to: Post Comments ( Atom )