Berikut adalah contoh kode HTML, CSS, dan JavaScript untuk membuat **gambar slider** di Blogspot yang bisa digeser ke kanan dan kiri **dengan deskripsi** dan **target link**. Setiap gambar memiliki deskripsi dan link target yang akan mengarahkan pengguna ke halaman tertentu saat gambar diklik.
Kode HTML + CSS + JavaScript:
-----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Container untuk slider */
.slider {
width: 100%;
max-width: 800px; /* Sesuaikan lebar slider */
margin: 0 auto;
position: relative;
overflow: hidden;
border: 2px solid #ddd;
border-radius: 10px;
}
/* Area gambar dan deskripsi */
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
/* Slide individu */
.slide {
min-width: 100%;
position: relative;
}
/* Gambar */
.slide img {
width: 100%;
height: auto;
display: block;
}
/* Deskripsi */
.slide .description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
text-align: center;
font-size: 16px;
}
/* Link target */
.slide a {
text-decoration: none;
color: inherit;
display: block;
}
/* Tombol navigasi */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
font-size: 18px;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<!-- Container Slider -->
<div class="slider">
<!-- Area Gambar, Deskripsi, dan Target Link -->
<div class="slides">
<!-- Slide 1 -->
<div class="slide">
<a href="https://www.example.com/target1" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Gambar+1" alt="Gambar 1">
<div class="description">Deskripsi Gambar 1 - Klik untuk info lebih lanjut</div>
</a>
</div>
<!-- Slide 2 -->
<div class="slide">
<a href="https://www.example.com/target2" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Gambar+2" alt="Gambar 2">
<div class="description">Deskripsi Gambar 2 - Klik untuk info lebih lanjut</div>
</a>
</div>
<!-- Slide 3 -->
<div class="slide">
<a href="https://www.example.com/target3" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Gambar+3" alt="Gambar 3">
<div class="description">Deskripsi Gambar 3 - Klik untuk info lebih lanjut</div>
</a>
</div>
<!-- Slide 4 -->
<div class="slide">
<a href="https://www.example.com/target4" target="_blank">
<img src="https://via.placeholder.com/800x400?text=Gambar+4" alt="Gambar 4">
<div class="description">Deskripsi Gambar 4 - Klik untuk info lebih lanjut</div>
</a>
</div>
</div>
<!-- Tombol Navigasi -->
<button class="prev" onclick="prevSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>
</div>
<script>
let currentSlide = 0;
// Fungsi untuk geser ke slide berikutnya
function nextSlide() {
const slides = document.querySelector('.slides');
const totalSlides = slides.children.length;
currentSlide = (currentSlide + 1) % totalSlides;
slides.style.transform = `translateX(-${currentSlide * 100}%)`;
}
// Fungsi untuk geser ke slide sebelumnya
function prevSlide() {
const slides = document.querySelector('.slides');
const totalSlides = slides.children.length;
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
slides.style.transform = `translateX(-${currentSlide * 100}%)`;
}
// Otomatis geser setiap 5 detik (opsional)
setInterval(nextSlide, 5000);
</script>
</body>
</html>
-------------------------------------------------------------------
Cara Menggunakan di Blogspot:
1. Login ke akun Blogspot Anda.
2. Buka postingan atau halaman yang ingin Anda edit.
3. Pilih mode **HTML** (bukan mode Compose).
4. Tempelkan kode di atas ke dalam editor HTML.
5. Ganti `src` pada tag `<img>` dengan URL gambar yang ingin Anda tampilkan.
6. Ganti `href` pada tag `<a>` dengan link target yang diinginkan.
7. Ganti teks di dalam `.description` dengan deskripsi yang sesuai.
8. Simpan atau publikasikan postingan/halaman.
Fitur:
1. Gambar dan Deskripsi**: Setiap slide memiliki gambar dan deskripsi yang muncul di bawah gambar.
2. Target Link: Setiap gambar memiliki link target yang akan mengarahkan pengguna ke halaman tertentu saat diklik.
3. Tombol Navigasi**: Tombol kiri (`❮`) dan kanan (`❯`) untuk menggeser gambar secara manual.
4. Slide Otomatis: Gambar akan otomatis bergeser setiap 5 detik (bisa diubah di `setInterval`).
5. Responsif: Slider akan menyesuaikan lebar layar pengguna.
Contoh Gambar, Deskripsi, dan Target Link:
Ganti URL gambar, deskripsi, dan link target sesuai kebutuhan. Contoh:
html
-----------------------
<div class="slide">
<a href="https://www.example.com/target1" target="_blank">
<img src="https://example.com/gambar1.jpg" alt="Gambar 1">
<div class="description">Ini adalah deskripsi untuk Gambar 1 - Klik untuk info lebih lanjut</div>
</a>
</div>
<div class="slide">
<a href="https://www.example.com/target2" target="_blank">
<img src="https://example.com/gambar2.jpg" alt="Gambar 2">
<div class="description">Ini adalah deskripsi untuk Gambar 2 - Klik untuk info lebih lanjut</div>
</a>
</div>
----------------------------
Hasil:
- Gambar akan ditampilkan dalam bentuk slider dengan deskripsi di bawahnya.
- Setiap gambar memiliki link target yang akan membuka halaman baru saat diklik.
- Pengguna bisa menggeser gambar ke kiri atau kanan menggunakan tombol navigasi.
- Gambar juga akan otomatis bergeser setiap 5 detik
Semoga membantu! 😊traktir secangkir kopi seiklasnya donasi
.jpg)
.jpg)
