Ek professional-looking, clickable, responsive image slider ka source code jo Blogger website me easily fit ho sake, niche diya gaya hai. Yeh slider HTML, CSS, aur JavaScript ka use karta hai aur Blogger-friendly hai.
Features:
✔ Clickable images (Links add kar sakte ho)
✔ Smooth transition effects
✔ Fully responsive (Mobile-friendly)
✔ Professional & unique design
Step 1: Blogger me Add Karne ka Tarika
- Blogger Dashboard me jao.
- Theme > Customize > Edit HTML pe click karo.
<head>tag ke andar CSS add karo.- Jahan slider dikhana hai, wahan HTML & JavaScript ka code paste karo.
Step 2: Code Add Karo
1️⃣ CSS Code (Blogger ke <head> me Add Karo)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider-container {
position: relative;
max-width: 100%;
overflow: hidden;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
position: relative;
}
.slide img {
width: 100%;
display: block;
border-radius: 10px;
}
.slide a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.prev, .next {
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 18px;
transition: background 0.3s ease;
border-radius: 5px;
}
.prev:hover, .next:hover {
background: rgba(0, 0, 0, 0.8);
}
</style>
2️⃣ HTML + JavaScript Code (Jahan Slider Dikhana Ho, Wahan Paste Karo)
<div class="slider-container">
<div class="slider">
<div class="slide">
<a href="https://example.com/link1" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Slide+1" alt="Slide 1">
</a>
</div>
<div class="slide">
<a href="https://example.com/link2" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Slide+2" alt="Slide 2">
</a>
</div>
<div class="slide">
<a href="https://example.com/link3" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Slide+3" alt="Slide 3">
</a>
</div>
</div>
<div class="slider-buttons">
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
</div>
<script>
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let index = 0;
function showSlide(i) {
if (i >= slides.length) index = 0;
if (i < 0) index = slides.length - 1;
slider.style.transform = `translateX(-${index * 100}%)`;
}
nextBtn.addEventListener('click', () => {
index++;
showSlide(index);
});
prevBtn.addEventListener('click', () => {
index--;
showSlide(index);
});
setInterval(() => {
index++;
showSlide(index);
}, 3000); // Auto-slide every 3 seconds
</script>
Kaise Customize Kare?
✔ Images Replace Karo: <img src="URL"> me apni images ka link daalo.
✔ Clickable Links: <a href="https://example.com"> me apni desired link daalo.
✔ Auto Slide Timing: setInterval(() => { index++; showSlide(index); }, 3000); me 3000 (3 sec) ko change karke slide speed adjust kar sakte ho.
Final Output:
Ek awesome, professional, clickable image slider jo Blogger website me perfectly fit hoga aur smooth transitions ke sath chalega.
Agar tumhe aur customization chahiye to batao!