Labels

Rahasia Blogger Pro: Auto Scroll Tanpa Coding Ribet! Kamu Wajib Coba! di Template Contempo

⏬ Auto Scroll

Cara Menambahkan Tombol Auto Scroll di Blogger dengan Pengaturan Kecepatan

Berhasil di template blog : CONTEMPO

Pernahkah kamu merasa lelah saat harus menggulir halaman panjang di blog secara manual? Jika iya, solusi terbaiknya adalah menambahkan fitur Auto Scroll! Dengan tombol Auto Scroll ini, pengunjung blog bisa membaca artikel panjang tanpa harus repot menggulir halaman sendiri.



Menariknya, fitur ini juga dilengkapi slider kecepatan, sehingga pengguna bisa mengatur seberapa cepat halaman akan bergulir. Mau tahu cara menambahkannya ke blog Blogger (Blogspot)? Yuk, simak tutorial lengkapnya!

Manfaat Fitur Auto Scroll di Blogger

🔹 Meningkatkan kenyamanan membaca – Pembaca tidak perlu repot menggulir manual.
🔹 Interaksi lebih baik – Dengan navigasi otomatis, pembaca bisa lebih fokus pada isi artikel.
🔹 Tampilan lebih profesional – Blog terlihat lebih interaktif dan modern.
🔹 Bagus untuk artikel panjang – Ideal untuk blog berita, tutorial, atau artikel mendalam.

Tutorial: Menambahkan Tombol Auto Scroll di Blogger

1. Masuk ke Blogger dan Edit Template

  1. Buka Blogger dan login ke akunmu.
  2. Pilih blog yang ingin kamu edit.
  3. Masuk ke Tata Letak atau Tema, lalu klik Edit HTML.

2. Tambahkan Kode Auto Scroll

Cari bagian <body> atau sebelum <data:post.body/>, lalu tambahkan kode berikut:

html


<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Tombol Scroll & Slider Kecepatan -->
    <div id='fixedSpeedControl'>
        <span id='scrollToggle'>Scroll:</span>
        <input id='speedControl' max='10' min='1' step='1' type='range' value='3'/>
    </div>

    <script>
        let isScrolling = false;
        let scrollInterval;
        let isPaused = false;
        let scrollSpeed = 3;

        document.addEventListener("DOMContentLoaded", function () {
            var scrollToggle = document.getElementById("scrollToggle");
            var speedControl = document.getElementById("speedControl");

            // Update kecepatan saat slider digeser
            speedControl.addEventListener("input", function () {
                scrollSpeed = parseInt(this.value);
            });

            // Klik "Scroll:" untuk mulai/berhenti scroll
            scrollToggle.addEventListener("click", function () {
                if (!isScrolling) {
                    isScrolling = true;
                    startScrolling();
                    scrollToggle.style.opacity = "0.5"; // Sedikit memudar saat aktif
                } else {
                    stopScrolling();
                }
            });

            // Pause scrolling saat layar di klik
            document.addEventListener("mousedown", function (event) {
                if (!event.target.closest("#fixedSpeedControl")) {
                    if (isScrolling) {
                        isPaused = true;
                        stopScrolling();
                    }
                }
            });

            // Lanjut scrolling saat mouse dilepas
            document.addEventListener("mouseup", function () {
                if (isPaused) {
                    isPaused = false;
                    startScrolling();
                }
            });

            function startScrolling() {
                if (isScrolling) {
                    clearInterval(scrollInterval);
                }
                scrollInterval = setInterval(() => {
                    window.scrollBy(0, scrollSpeed);
                    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                        stopScrolling();
                    }
                }, 60);
            }

            function stopScrolling() {
                clearInterval(scrollInterval);
                isScrolling = false;
                scrollToggle.style.opacity = "1"; // Kembali terlihat normal
            }
        });
    </script>

    <style>
        /* Slider &amp; Tombol Scroll dalam satu elemen */
        #fixedSpeedControl {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 15px;
            border-radius: 10px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Teks "Scroll:" sebagai tombol */
        #scrollToggle {
            cursor: pointer;
            color: #007BFF;
            transition: opacity 0.3s, color 0.3s;
        }

        #scrollToggle:hover {
            color: #0056b3;
        }

        /* Slider lebih kecil di HP */
        @media screen and (max-width: 600px) {
            #fixedSpeedControl {
                bottom: 15px;
                right: 15px;
                padding: 6px 12px;
                font-size: 12px;
            }
        }
    </style>
</b:if>

3. Simpan dan Lihat Hasilnya

Setelah menambahkan kode di atas, klik Simpan Tema, lalu cek blog kamu. Sekarang akan muncul tombol Auto Scroll di bagian kanan bawah halaman artikel!

Cara Menggunakan Auto Scroll di Blogger

  1. Klik tombol "Scroll:" untuk mulai atau berhenti auto scroll.
  2. Gunakan slider kecepatan untuk mengatur kecepatan gulir halaman.
  3. Klik di luar tombol untuk pause scroll sementara.
  4. Lepaskan klik untuk melanjutkan auto scroll.

Kesimpulan

Fitur Auto Scroll ini sangat berguna untuk meningkatkan pengalaman membaca di blog kamu. Dengan tambahan pengaturan kecepatan, pembaca bisa menyesuaikan kenyamanan mereka sendiri.

Jadi, tunggu apa lagi? Tambahkan Auto Scroll di Blogger kamu sekarang dan buat blog semakin interaktif! 🚀

FAQ (Pertanyaan yang Sering Diajukan)

1. Apakah fitur ini mempengaruhi loading blog?
➡ Tidak, kode ini ringan dan tidak memperlambat blog.

2. Apakah fitur ini bisa digunakan di semua template Blogger?
➡ Ya, selama template Blogger mendukung JavaScript dan CSS, fitur ini bisa digunakan.

3. Apakah tombol ini bisa diubah posisinya?
➡ Bisa! Ubah nilai bottom: 20px; right: 20px; pada CSS sesuai keinginan.

💬 Bagikan pengalamanmu setelah menambahkan fitur ini di blog! Jika ada pertanyaan, tinggalkan komentar di bawah. 🚀

#BloggerIndonesia #ScrollOtomatis #BlogspotTips #FiturBlogger #AutoScroll #TutorialBlogger #SEOIndonesia #BloggingTips #BloggerTricks #GoogleSEO

Previous
Next
Labels:
Location: Indonesia

Comments

Post a Comment

Mikky Oscarino blog

Show more