New Updates

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


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 Slider HTML and CSS for Blogger:-šŸ”„

<!DOCTYPE html>



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


* {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}








<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 class="mySlides fade">

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

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

  <div class="text">Caption Two</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 class="mySlides fade">

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

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

  <div class="text">Caption Four</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 style="text-align:center">

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

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

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

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

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







var slideIndex = 0;




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"; 



    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








No comments