Optimasi SEO
Slider
Tutorial
Tutorial Blogger
Slider Otomatis di Postingan Blogger (Part 1)
Ana Writer
Penulis Blog
Cara Menampilkan Beberapa Gambar Menjadi Slide di Postingan Blogger.
Menampilkan beberapa gambar dalam bentuk slider / slideshow di postingan Blogger bisa membuat tampilan artikel lebih modern, interaktif, dan hemat tempat. Teknik ini cocok digunakan untuk:
- Galeri foto
- Showcase produk affiliate
- Screenshot tutorial
- Portfolio
- Before-after gambar
- Banner promosi
Di Blogger sendiri belum ada fitur slideshow bawaan di editor postingan, jadi kita perlu menambahkan sedikit kode HTML, CSS, dan JavaScript.
Tutorial Membuat Slider Gambar di Postingan Blogger
Hasil yang Akan Dibuat
Fitur slider nantinya memiliki:
- Tombol next & previous
- Auto slide
- Responsive di mobile
- Tampilan modern
- Bisa dipasang langsung di postingan
---
Langkah 1 — Upload Gambar ke Blogger
Pertama upload semua gambar yang ingin dijadikan slide.
Caranya:
- Buka dashboard Blogger
- Buat postingan baru
- Klik ikon gambar
- Upload beberapa gambar
- Setelah gambar masuk, klik mode HTML
Nanti Anda akan mendapatkan link gambar seperti ini:
https://blogger.googleusercontent.com/img/....
Salin URL gambar tersebut.
---
Langkah 2 — Tambahkan Kode Slider
Masuk ke mode HTML pada postingan, lalu tempel kode berikut.
<div class="simple-slider"><div class="slides fade"><img src="LINK-GAMBAR-1" alt="Slide 1"></div><div class="slides fade"><img src="LINK-GAMBAR-2" alt="Slide 2"></div><div class="slides fade"><img src="LINK-GAMBAR-3" alt="Slide 3"></div><a class="prev" onclick="plusSlides(-1)">❮</a><a class="next" onclick="plusSlides(1)">❯</a></div><style>.simple-slider{position:relative;max-width:100%;margin:auto;overflow:hidden;border-radius:12px;}.simple-slider img{width:100%;display:block;border-radius:12px;}.slides{display:none;}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:12px;color:#fff;font-weight:bold;font-size:20px;background:rgba(0,0,0,.5);border-radius:50%;user-select:none;}.prev{left:10px;}.next{right:10px;}.fade{animation:fade 0.5s;}@keyframes fade{from{opacity:.4}to{opacity:1}}</style><script>let slideIndex = 1;showSlides(slideIndex);function plusSlides(n){showSlides(slideIndex += n);}function showSlides(n){let i;let slides = document.getElementsByClassName("slides");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>
---
Langkah 3 — Ganti URL Gambar
Ganti bagian (HTML) berikut:
LINK-GAMBAR-1LINK-GAMBAR-2LINK-GAMBAR-3
Dengan URL gambar milik Anda.
Contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl..." alt="">
---
Cara Menambah Slide
Jika ingin menambah gambar baru, cukup tambahkan (HTML) blok ini:
<div class="slides fade"><img src="LINK-GAMBAR" alt=""></div>
Letakkan di bawah slide sebelumnya.
---
Membuat Slider Otomatis Bergerak
Jika ingin slideshow berjalan otomatis, tambahkan script berikut sebelum `</script>`:
setInterval(() => {plusSlides(1);}, 3000);
Angka `3000` berarti 3 detik.
---
Membuat Slider Full Responsive
Kode di atas sudah mobile responsive. Namun Anda bisa menambahkan tinggi tetap:
.simple-slider img{height:400px;object-fit:cover;}
Cocok untuk:
- Banner
- Thumbnail affiliate
- Hero image
---
Kelebihan Menggunakan Slider di Blogger
Tampilan Lebih Profesional
Slider membuat posting terlihat modern seperti website premium.
Menghemat Ruang
Banyak gambar bisa ditampilkan tanpa membuat artikel terlalu panjang.
Cocok untuk Affiliate Marketing
Bisa digunakan untuk:
- * Showcase produk
- * Slider toko
- * Promo marketplace
- * Galeri produk
Meningkatkan Engagement
Pengunjung lebih tertarik menggeser gambar dibanding melihat gambar statis biasa.
---
Tips Optimasi SEO Slider Blogger
Agar slider tetap SEO friendly:
- * Gunakan atribut `alt` pada gambar
- * Kompres ukuran gambar
- * Hindari gambar terlalu besar
- * Gunakan format WebP jika memungkinkan
- * Jangan terlalu banyak slider dalam satu halaman
Contoh:
<img src="gambar.webp" alt="Template Blogger Premium">
---
Error yang Sering Terjadi
Slider Tidak Bergerak
Biasanya karena:
- * JavaScript diblok template
- * Ada script bentrok
- * Tag HTML belum tertutup
Solusi:
- * Pastikan semua `div` ditutup
- * Tempel kode di mode HTML
- * Jangan di mode Compose
---
Gambar Tidak Muncul
Penyebab:
- * URL gambar salah
- * Gambar private
- * Link belum lengkap
Gunakan link langsung dari Blogger CDN.
---
Penutup
Menambahkan slideshow gambar di postingan Blogger ternyata cukup mudah. Dengan kombinasi HTML, CSS, dan JavaScript sederhana, Anda bisa membuat tampilan artikel jauh lebih menarik dan profesional.
Teknik ini sangat cocok digunakan untuk:
- * Blog tutorial
- * Blog affiliate
- * Website berita
- * Portfolio
- * Landing page Blogger