Menerapkan slide show gallery di blog merupakan pilihan yang cerdas untuk meningkatkan daya tarik visual pada halaman Anda. Dengan menyajikan serangkaian gambar yang dapat berganti secara otomatis atau melalui navigasi manual, slide show gallery memberikan pengunjung pengalaman visual yang menarik. Ketika digunakan dengan bijak, galeri ini dapat memperkaya konten dan menjadikan blog Anda lebih dinamis, menarik perhatian pengunjung untuk menjelajahi lebih banyak halaman dan memperpanjang waktu kunjungan mereka.
Selain memberikan keindahan visual, slide show gallery juga memungkinkan Anda untuk memamerkan berbagai konten dengan cara yang menarik. Anda dapat menggunakan galeri ini untuk memperkenalkan produk terbaru, menyoroti momen-momen khusus dalam acara atau perjalanan, atau sekadar membagikan kumpulan gambar yang relevan dengan topik tertentu. Dengan cara ini, penggunaan slide show gallery tidak hanya menjadi elemen estetis, tetapi juga alat efektif untuk menarik perhatian, menyampaikan pesan, dan menciptakan interaksi positif dengan audiens blog Anda.
Dalam artikel ini, kita akan membahas cara menerapkan slide show gallery dengan menggunakan kode HTML di platform Blogger.
Langkah-langkah
1. Buka Blogger Dashboard
Buka dashboard Blogger dan pilih blog yang ingin Anda edit.
2. Pilih Mode HTML
Di dalam editor posting atau halaman, pilih mode HTML agar Anda dapat menyisipkan kode HTML secara langsung.
3. Tempelkan Kode HTML
Tempelkan kode HTML berikut di tempat yang diinginkan dalam editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Show Gallery</title>
<style>
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
.img {
width: 100%;
height: auto;
}
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<img class="img" src="image1.jpg" alt="Image 1">
</div>
<div class="mySlides">
<img class="img" src="image2.jpg" alt="Image 2">
</div>
<div class="mySlides">
<img class="img" src="image3.jpg" alt="Image 3">
</div>
<!-- Prev and Next buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
</body>
</html>code-box
Pastikan untuk mengganti "image1.jpg", "image2.jpg", dan "image3.jpg" dengan URL gambar yang sesuai dengan galeri Anda.
Demonya seperti dibawah ini:
Post a Comment
Berkomentarlah secara bijaksana dan bertanggung jawab.