Untuk membuat **gambar slider** di Blogspot yang bisa **digeser manual dengan tangan** (swipe) menggunakan touch event pada perangkat mobile, serta memiliki **deskripsi** dan **tombol "Selengkapnya"** yang mengarah ke halaman target, kita bisa menggunakan HTML, CSS, dan JavaScript. Berikut adalah contoh kodenya:
Kode HTML + CSS + JavaScript:
html
----------------------------------------------------------------------
<!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;
touch-action: pan-y; /* Memungkinkan swipe pada perangkat mobile */
}
/* Area gambar dan deskripsi */
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
/* Slide individu */
.slide {
min-width: 100%;
position: relative;
text-align: center;
}
/* Gambar */
.slide img {
width: 100%;
height: auto;
display: block;
border-radius: 10px 10px 0 0;
}
/* Deskripsi */
.slide .description {
padding: 15px;
background-color: #f9f9f9;
border-radius: 0 0 10px 10px;
}
/* Tombol "Selengkapnya" */
.slide .more-button {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
}
.slide .more-button:hover {
background-color: #0056b3;
}
/* 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" id="slider">
<!-- Area Gambar, Deskripsi, dan Tombol Selengkapnya -->
<div class="slides" id="slides">
<!-- Slide 1 -->
<div class="slide">
<img src="https://via.placeholder.com/800x400?text=Gambar+1" alt="Gambar 1">
<div class="description">
<p>Deskripsi Gambar 1. Ini adalah contoh deskripsi untuk gambar pertama.</p>
<a href="https://www.example.com/target1" class="more-button" target="_blank">Selengkapnya</a>
</div>
</div>
<!-- Slide 2 -->
<div class="slide">
<img src="https://via.placeholder.com/800x400?text=Gambar+2" alt="Gambar 2">
<div class="description">
<p>Deskripsi Gambar 2. Ini adalah contoh deskripsi untuk gambar kedua.</p>
<a href="https://www.example.com/target2" class="more-button" target="_blank">Selengkapnya</a>
</div>
</div>
<!-- Slide 3 -->
<div class="slide">
<img src="https://via.placeholder.com/800x400?text=Gambar+3" alt="Gambar 3">
<div class="description">
<p>Deskripsi Gambar 3. Ini adalah contoh deskripsi untuk gambar ketiga.</p>
<a href="https://www.example.com/target3" class="more-button" target="_blank">Selengkapnya</a>
</div>
</div>
<!-- Slide 4 -->
<div class="slide">
<img src="https://via.placeholder.com/800x400?text=Gambar+4" alt="Gambar 4">
<div class="description">
<p>Deskripsi Gambar 4. Ini adalah contoh deskripsi untuk gambar keempat.</p>
<a href="https://www.example.com/target4" class="more-button" target="_blank">Selengkapnya</a>
</div>
</div>
</div>
<!-- Tombol Navigasi -->
<button class="prev" onclick="prevSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>
</div>
<script>
let currentSlide = 0;
const slides = document.getElementById('slides');
const totalSlides = slides.children.length;
// Fungsi untuk geser ke slide berikutnya
function nextSlide() {
currentSlide = (currentSlide + 1) % totalSlides;
updateSlider();
}
// Fungsi untuk geser ke slide sebelumnya
function prevSlide() {
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
updateSlider();
}
// Update posisi slider
function updateSlider() {
slides.style.transform = `translateX(-${currentSlide * 100}%)`;
}
// Swipe dengan touch event (untuk perangkat mobile)
let startX = 0;
let endX = 0;
const slider = document.getElementById('slider');
slider.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
slider.addEventListener('touchmove', (e) => {
endX = e.touches[0].clientX;
});
slider.addEventListener('touchend', () => {
if (startX - endX > 50) {
nextSlide(); // Geser ke kanan
} else if (endX - startX > 50) {
prevSlide(); // Geser ke kiri
}
});
</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 deskripsi dan tombol "Selengkapnya" sesuai kebutuhan.
8. Simpan atau publikasikan postingan/halaman.
Fitur:
1. **Gambar dan Deskripsi**: Setiap slide memiliki gambar dan deskripsi yang muncul di bawah gambar.
2. **Tombol "Selengkapnya"**: Setiap slide memiliki tombol "Selengkapnya" yang mengarahkan pengguna ke halaman target saat diklik.
3. **Tombol Navigasi Manual**: Tombol kiri (`❮`) dan kanan (`❯`) untuk menggeser gambar secara manual.
4. **Swipe dengan Tangan**: Pada perangkat mobile, pengguna bisa menggeser gambar ke kiri atau kanan dengan tangan (touch event).
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">
<img src="https://example.com/gambar1.jpg" alt="Gambar 1">
<div class="description">
<p>Ini adalah deskripsi untuk Gambar 1. Klik tombol di bawah untuk info lebih lanjut.</p>
<a href="https://www.example.com/target1" class="more-button" target="_blank">Selengkapnya</a>
</div>
</div>
<div class="slide">
<img src="https://example.com/gambar2.jpg" alt="Gambar 2">
<div class="description">
<p>Ini adalah deskripsi untuk Gambar 2. Klik tombol di bawah untuk info lebih lanjut.</p>
<a href="https://www.example.com/target2" class="more-button" target="_blank">Selengkapnya</a>
</div>
</div>
-------------------------------------------------------------------------------------------
Hasil:
- Gambar akan ditampilkan dalam bentuk slider dengan deskripsi dan tombol "Selengkapnya".
- Pengguna bisa menggeser gambar ke kiri atau kanan menggunakan tombol navigasi atau dengan swipe pada perangkat mobile.
- Saat tombol "Selengkapnya" diklik, pengguna akan diarahkan ke halaman target.
Semoga membantu! 😊Trantir secangkir kopi seiklasnya DONASI
.jpg)
.jpg)
