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 SIDER FOR BLOGGER POSImage 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