How to add banner slider in Blogger Header - Simple way to add a custom image slider in blogger head

byAmlesh Mahato •
0

Adding a custom banner slider to the header of your Blogger blog is a great way to personalize your site. Here's a simple step-by-step guide to help you add a custom banner slider to your Blogger header.

Adding a custom banner slider to the header of your Blogger blog is a great way to personalize your site. Here's a simple step-by-step guide to help you add a custom banner slider to your Blogger header.
How to add banner slider in Blogger Header - Simple way to add a custom image slider in blogger head

  Follow Us  

1. Create Your Banner


First, create a banner image using a graphic design tool like Canva, Adobe Spark, or any other image editor. Ensure that the dimensions of your banner match the size you want for your header.

2. Upload Banner


You'll need to upload your banner image to an image hosting service, as Blogger doesn't provide direct image hosting. You can use free services like Imgur, Google Drive, or any other image hosting platform. Upload your banner image and make sure it's set to be publicly accessible.

3. Copy the Image URL


After uploading the banner image, copy the direct URL of the image. You'll need this URL to embed the image in your Blogger template.

4. Log in to Your Blogger Account


Go to Blogger and log in to your account.

5. Go to Layout


In blogger go to layout option present in left side of the screen.

6. Add a Widget


Click on Add Widget option and select HTML/JAVA script option.

7. Copy this HTML


Copy the following HTML code for responsive banner slider and paste it into comment box of the widget. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<style>
.slider-container {
max-width: 600px;
margin: auto;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 100%;
}
.slide img {
width: 100%;
height: auto;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slides">
<div class="slide"><img src="image1.jpg" alt="Image 1"></div>
<div class="slide"><img src="image2.jpg" alt="Image 2"></div>
<div class="slide"><img src="image3.jpg" alt="Image 3"></div>
<!-- Add more slides as needed -->
</div>
<div class="prev" onclick="prevSlide()">&#10094;</div>
<div class="next" onclick="nextSlide()">&#10095;</div>
</div>
<script>
let currentSlide = 0;
function showSlide(index) {
const slides = document.querySelector('.slides');
const totalSlides = document.querySelectorAll('.slide').length;
currentSlide = (index + totalSlides) % totalSlides;
const translationValue = -currentSlide * 100 + '%';
slides.style.transform = `translateX(${translationValue})`;
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function prevSlide() {
showSlide(currentSlide - 1);
}
</script>
</body>
</html>

8. Replace Image URL


After pasting the above code replace the image URL with your own image URL and save the widget.

9. Move Widget


After saving the widget with the help of mouse and place it where you want to add the banner and save the layout.

Video Tutorial



Tags:
Previous Post Next Post