How to Create a Slider or Slideshow widget in Blogger Site? - Pinnacle Digital Services
Easy Ways to Make a Slide on Blogger
Sliders, also known as slideshows, are a popular element used on many websites to showcase content in a visually appealing and space-efficient manner. This guide will walk you through the steps of creating a manual slider on your blog, allowing you to control the presentation of your content.
Benefits of Implementing Sliders:
Increased User Engagement: Sliders dynamically display content, grabbing user attention and encouraging them to explore further.
Improved Content Presentation: Showcase key blog posts, images, or excerpts on your homepage or specific blog pages, highlighting important information.
Efficient Space Utilization: Present multiple content elements within a compact area, improving website layout.
Steps to Create a Slider in blogger website:
Sliders, are made from a few lines of simple “HTML” and if we have basic “CSS” knowledge, then we can customize or modify them as we wish, and they really can be modified so they look better.
Following are the steps to create a Slide Show on a Blogger blog:
- Log in to your Blogger account.
- Click the "Layout".
- Click "Add Gadget" then select the "HTML/JavaScript" option.
- Copy the script code below and paste it into the box provided.
<div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="URL Image 1" style="width: 100%;" alt="Image 1"> <div class="text">Image Title 1</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="URL Image 2" style="width: 100%;" alt="Image 2"> <div class="text">Image Title 2</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="URL Image 3" style="width: 100%;" alt="Image 3"> <div class="text">Image Title 3</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <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> <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].classList.remove("active"); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].classList.add("active"); } </script> - Finally, click "Save" and see the results.
You can also modify your Slide Show by going to the Template menu > Customize > Advanced > Add CSS, then please copy and paste the CSS script code below:
* {box-sizing:border-box}
body {font-family: Verdana, sans-serif;margin:0}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 0;
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;
}
/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
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) {
.prev, .next, .text {
font-size: 11px;
}
}
It cannot be denied that Slide Show is one of the best ways to display a lot of information on an article page in a small space with the addition of a beautiful and simple display function. Hopefully the way to add a Slide Show to Blogger in this article helps!
- Pinnacle Digital Services