Cara Bikin Auto-Scroll di Blogger Soho! Cuma Sekali Klik!
Blog kamu auto-scroll sendiri? Bisa banget! Ini trik simpel yang bikin blog makin keren!
Apakah kamu ingin menambahkan fitur auto-scroll ke blog Blogger dengan template "Soho"? Dengan fitur ini, pembaca bisa secara otomatis menggulir halaman hingga akhir tanpa perlu scroll manual. Fitur ini sangat berguna untuk blog dengan artikel panjang! 🔥
 |
Dalam tutorial ini, kita akan membuat tombol auto-scroll yang berfungsi di template "Soho" dengan pengaturan kecepatan yang bisa disesuaikan.
🔹 Fitur yang Akan Dibuat
✅ Auto-scroll bekerja otomatis hingga akhir halaman
✅ Tombol ON/OFF dengan perubahan warna untuk indikasi
✅ Slider untuk mengatur kecepatan scroll (1 - 20)
✅ Kompatibel dengan template "Soho" Blogger
✅ Responsif dan berjalan di desktop & mobile
Langkah 1: Tambahkan Kode ke Template Blogger
1️⃣ Buka Blogger → Tema → Edit HTML
2️⃣ Cari bagian sebelum <data:post.body/>
3️⃣ Tempelkan kode berikut di atasnya:
<b:if cond='data:blog.pageType == "item"'>
<!-- Tombol Scroll & Slider Kecepatan -->
<div id='fixedSpeedControl'>
<span id='scrollToggle'>⏬ Auto Scroll</span>
<input id='speedControl' max='20' min='1' step='1' type='range' value='5'/>
</div>
<script>
let isScrolling = false;
let scrollSpeed = 5;
let scrollInterval;
document.addEventListener("DOMContentLoaded", function () {
const scrollToggle = document.getElementById("scrollToggle");
const speedControl = document.getElementById("speedControl");
speedControl.addEventListener("input", function () {
scrollSpeed = parseInt(this.value);
});
scrollToggle.addEventListener("click", function () {
if (!isScrolling) {
isScrolling = true;
scrollToggle.classList.add("active");
startScrolling();
} else {
stopScrolling();
}
});
function startScrolling() {
if (isScrolling) {
clearInterval(scrollInterval);
}
scrollInterval = setInterval(() => {
let scrollPosition = window.scrollY || document.documentElement.scrollTop;
let documentHeight = document.documentElement.scrollHeight;
let windowHeight = window.innerHeight;
if (scrollPosition + windowHeight >= documentHeight) {
stopScrolling();
} else {
window.scrollBy({
top: scrollSpeed,
behavior: "smooth"
});
}
}, 50);
}
function stopScrolling() {
clearInterval(scrollInterval);
isScrolling = false;
scrollToggle.classList.remove("active");
}
});
</script>
<style>
#fixedSpeedControl {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.95);
padding: 10px 15px;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
}
#scrollToggle {
cursor: pointer;
padding: 5px 10px;
background: #007BFF;
color: white;
border-radius: 5px;
transition: 0.3s;
}
#scrollToggle.active {
background: #ff4444;
}
#scrollToggle:hover {
background: #0056b3;
}
#speedControl {
width: 80px;
}
</style>
</b:if>
Langkah 2: Simpan dan Coba!
Setelah menambahkan kode di atas:
1️⃣ Klik "Simpan Tema"
2️⃣ Buka salah satu postingan di blog kamu
3️⃣ Klik tombol "Auto Scroll" untuk mulai scroll otomatis
4️⃣ Geser slider untuk mengatur kecepatan scroll
✅ Jika semuanya berjalan lancar, tombol akan berubah warna saat aktif dan scroll akan otomatis berjalan hingga ke akhir halaman!
Kenapa Harus Pakai Fitur Ini?
🔹 Meningkatkan User Experience → Pembaca bisa menikmati artikel panjang tanpa harus scroll manual.
🔹 Bisa Digunakan untuk Mode "Baca Nyaman" → Gunakan fitur ini untuk membaca santai tanpa repot!
🔹 Meningkatkan Engagement & Waktu Tayang → Scroll otomatis membantu pembaca tetap di halaman lebih lama, meningkatkan SEO blog kamu.
Kesimpulan
Sekarang blog kamu memiliki fitur auto-scroll canggih dengan tombol ON/OFF dan pengaturan kecepatan. Ini akan membuat pengalaman membaca lebih nyaman, meningkatkan interaksi pembaca, dan membantu blog kamu tampil lebih profesional!
Jangan lupa bagikan artikel ini jika bermanfaat! 🔥
💬 Bagaimana pendapatmu? Apakah fitur ini berguna untuk blog kamu? Tulis di komentar! 👇
#Blogger #BloggingTips #SEO #AutoScroll #Blogspot #BloggerIndonesia #SohoTemplate #TutorialBlogging #WebDesign
'.%20The%20design%20features%20a%20futurist.webp)
Comments
Post a Comment