Optimasi SEO
Slider
Tutorial Blogger
Slider Otomatis di Postingan Blogger (Part 2)
Ana-Writer
Penulis Blog
Kenapa Slider Gambar di Blogger Tidak Bergerak?
Jika slider hanya menampilkan gambar pertama dan tombol next/previous tidak bekerja, biasanya penyebabnya adalah:
- * JavaScript di dalam postingan Blogger tidak berjalan
- * Template Blogger memblokir `<script>`
- * Ada konflik script bawaan template
- * Kode slider tidak dipasang dengan struktur yang benar
Pada banyak template Blogger modern, script JavaScript di dalam postingan memang sering dibatasi. Karena itu, solusi terbaik adalah menggunakan slider yang lebih aman dan kompatibel dengan Blogger.
---
Solusi Slider Blogger yang Benar-Benar Work
Gunakan versi berikut.
Slider ini:
- * Bisa berjalan di Blogger
- * Tidak membutuhkan library tambahan
- * Responsive
- * Ada auto slide
- * Tombol next/prev berfungsi
- * Aman dipasang di postingan
---
Cara Memasang Slider di Postingan Blogger
Masuk ke:
- Postingan Baru
- Ganti ke mode HTML
- Tempel kode berikut
---
Kode Slider Blogger Work 100%
Jika kode slider yang dipakai pada Slider Otomatis di Postingan Blogger (Part 1) tidak bisa bekerja, coba pakai kode Slider berikut ini:
<div class="blogger-slider"><div class="slide active"><img src="https://picsum.photos/id/1015/800/400"></div><div class="slide"><img src="https://picsum.photos/id/1016/800/400"></div><div class="slide"><img src="https://picsum.photos/id/1018/800/400"></div><button class="prev">❮</button><button class="next">❯</button></div><style>.blogger-slider{position:relative;max-width:800px;margin:auto;overflow:hidden;border-radius:12px;}.blogger-slider .slide{display:none;}.blogger-slider .slide.active{display:block;}.blogger-slider img{width:100%;display:block;border-radius:12px;}.blogger-slider button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:#fff;border:none;padding:10px 15px;cursor:pointer;font-size:20px;border-radius:50%;}.blogger-slider .prev{left:10px;}.blogger-slider .next{right:10px;}</style><script>document.addEventListener("DOMContentLoaded", function(){const slider = document.querySelector(".blogger-slider");const slides = slider.querySelectorAll(".slide");const nextBtn = slider.querySelector(".next");const prevBtn = slider.querySelector(".prev");let current = 0;function showSlide(index){slides.forEach((slide)=>{slide.classList.remove("active");});slides[index].classList.add("active");}nextBtn.addEventListener("click", function(){current++;if(current >= slides.length){current = 0;}showSlide(current);});prevBtn.addEventListener("click", function(){current--;if(current < 0){current = slides.length - 1;}showSlide(current);});setInterval(function(){current++;if(current >= slides.length){current = 0;}showSlide(current);},3000);});</script>
---
Cara Mengganti Gambar
Ganti bagian berikut:
https://picsum.photos/id/1015/800/400
Dengan URL gambar milik Anda.
Contoh:
https://blogger.googleusercontent.com/img/.....
---
Kenapa Versi Ini Lebih Stabil?
Karena:
Menggunakan `DOMContentLoaded`
Script baru dijalankan setelah halaman selesai dimuat.
---
Menggunakan Class Active
Slide bekerja memakai sistem class:
.active
Ini lebih kompatibel dengan Blogger dibanding manipulasi `display:none` biasa.
---
Tidak Bergantung Plugin
Tidak memakai:
- * jQuery
- * Swiper
- * Slick Slider
- * CDN eksternal
Jadi lebih ringan dan kecil kemungkinan error.
---
Jika Script Masih Tidak Berjalan
Berarti template Blogger Anda memblokir JavaScript dalam postingan.
Solusinya:
Pasang Script di Template
Masuk ke:
Tema → Edit HTML
Lalu letakkan script sebelum:
</body>
---
Alternatif Paling Aman
Jika template sangat ketat, gunakan slider CSS-only.
Contoh sederhana:
<div class="css-slider"><img src="gambar1.jpg"><img src="gambar2.jpg"><img src="gambar3.jpg"></div>
Namun versi CSS-only biasanya:
- * tidak ada tombol
- * animasi terbatas
- * kurang fleksibel
---
Tips Agar Slider Blogger Tidak Error
Gunakan Mode HTML
Jangan paste kode di mode Compose.
---
Jangan Gunakan Karakter Aneh
Kadang editor Blogger mengubah:
"
menjadi karakter lain.
Akibatnya script rusak.
---
Pastikan Semua DIV Ditutup
Contoh benar:
<div></div>
---
Penutup
Masalah slider di Blogger biasanya terjadi karena JavaScript dalam postingan dibatasi template. Dengan menggunakan versi slider yang lebih kompatibel seperti di atas, slideshow gambar biasanya bisa langsung berjalan normal.
Slider ini cocok digunakan untuk:
- * Galeri foto
- * Produk affiliate
- * Showcase template
- * Banner promosi
- * Artikel tutorial
- * Landing page Blogger
Contoh implementasi pada promosi produk affiliate:
