CARA BUAT HTML BLOGSPOT GAMBAR bisa di scrol kebawah dan ke atas manual , bisa di geser dengan tangan ada diskripsi gambar,ada keterangan selengkapnya untuk target
Berikut adalah contoh kode HTML, CSS, dan JavaScript untuk membuat **gambar yang bisa di-scroll ke bawah dan ke atas secara manual**, serta **bisa digeser dengan tangan (swipe)**. Setiap gambar memiliki **deskripsi** dan **tombol "Selengkapnya"** yang mengarah ke halaman target.
Kode HTML + CSS + JavaScript:
Html
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Container utama untuk semua gambar */
.gallery-container {
width: 100%;
max-width: 800px; /* Sesuaikan lebar container */
margin: 0 auto;
padding: 20px;
overflow-y: auto; /* Scroll vertikal */
height: 500px; /* Sesuaikan tinggi container */
border: 2px solid #ddd;
border-radius: 10px;
}
/* Container untuk setiap gambar */
.gallery-item {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 20px; /* Jarak antar gambar */
border: 1px solid #ccc;
border-radius: 10px;
}
/* Gambar */
.gallery-item img {
width: 100%;
height: auto;
display: block;
border-radius: 10px 10px 0 0;
}
/* Deskripsi */
.gallery-item .description {
padding: 15px;
background-color: #f9f9f9;
border-radius: 0 0 10px 10px;
}
/* Tombol "Selengkapnya" */
.gallery-item .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;
}
.gallery-item .more-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<!-- Container Utama -->
<div class="gallery-container">
<!-- Gambar 1 -->
<div class="gallery-item">
<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>
<!-- Gambar 2 -->
<div class="gallery-item">
<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>
<!-- Gambar 3 -->
<div class="gallery-item">
<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>
<!-- Gambar 4 -->
<div class="gallery-item">
<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>
<script>
// Swipe dengan touch event (untuk perangkat mobile)
const galleryContainer = document.querySelector('.gallery-container');
let startY = 0;
let endY = 0;
galleryContainer.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
});
galleryContainer.addEventListener('touchmove', (e) => {
endY = e.touches[0].clientY;
});
galleryContainer.addEventListener('touchend', () => {
if (startY - endY > 50) {
galleryContainer.scrollBy(0, 100); // Scroll ke bawah
} else if (endY - startY > 50) {
galleryContainer.scrollBy(0, -100); // Scroll ke atas
}
});
</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. **Scroll Vertikal**: Gambar-gambar dapat di-scroll ke bawah dan ke atas secara manual.
2. **Swipe dengan Tangan**: Pada perangkat mobile, pengguna bisa menggeser gambar dengan tangan untuk scroll.
3. **Deskripsi dan Tombol "Selengkapnya"**: Setiap gambar memiliki deskripsi dan tombol yang mengarah ke halaman target.
4. **Responsif**: Desain menyesuaikan lebar layar pengguna.
Hasil:
- Gambar-gambar akan ditampilkan dalam bentuk daftar yang bisa di-scroll ke bawah dan ke atas.
- Pada perangkat mobile, pengguna bisa menggeser gambar dengan tangan untuk scroll.
- Setiap gambar memiliki deskripsi dan tombol "Selengkapnya" yang mengarah ke halaman target.
Semoga membantu! 😊
.jpg)
.jpg)
