Tips Blogger Cara Membuat Floating Bottom Navbar Kapsul dengan Indikator Scroll dan WhatsApp Ala Ai Super Keren

Ini berawal melihat tema template Sekolah "Eduzaid", kerenn floating bottom nya.. Langsung gercep tanya Mode Ai bagaimana membuatnya. Hampir sejam setengah kotak-katik sama Ai, akhirnya Alahamdullilah Sempurna menurut saya. Buat teman teman blogger gak usah pusing pusing tinggal terapkan saja code code artikel blog Ngerapik ini. Berikut dibawah merupakan kata kata Mode Ai, saya perbaharui saja biar gak kaku kata-katanya. Cekidot Wae..!! 

Blog kita memerlukan navigasi yang interaktif dan mudah dijangkau, terutama saat dibuka melalui perangkat HP (mobile). Salah satu tren web desain modern saat ini adalah menggunakan Floating Bottom Navbar berbentuk kapsul yang minimalis.

Pada tutorial kali ini, kita akan membuat menu kapsul melayang premium yang memiliki 5 fitur sekaligus:

1. Tombol Beranda (Home) untuk memudahkan kembali ke halaman utama.

2. Pop-up Box Pencarian dinamis yang terintegrasi dengan Blogger.

3. Tombol CS WhatsApp Tengah dengan animasi Garis Lingkaran Progres Scroll (lingkaran akan terisi penuh seiring halaman digulir).

4. Tombol Switch Mode Malam (Dark Mode).

5. Tombol Back to Top dengan efek peluncuran halus (smooth scroll).

Keunggulan skrip ini adalah Sangat Responsif. Ketika dibuka di PC/Laptop, menu akan tampil terus secara elegan di pojok kanan bawah. Namun, saat dibuka di HP, menu ini akan bersembunyi secara otomatis dan baru akan muncul ketika pengunjung menggulir layar sampai ke area Footer agar tidak mengganggu pandangan membaca artikel.

Cara Memasangnya di Blogger Sobat

Ikuti langkah mudah berikut untuk memasangnya di blog sobat:

1. Buka Dashboard Blogger Anda.

2. Masuk ke menu Tata Letak (Layout).

3. Klik Tambahkan Gadget (Add a Gadget) di area mana saja (disarankan di dekat Footer atau Sidebar).

4. Pilih HTML/JavaScript.

5. Kosongkan bagian Judul, lalu salin (copy) seluruh kode premium di bawah ini dan tempel (paste) ke dalam kotak konten widget tersebut.,

   <!-- Floating Navbar Kapsul Mini Premium by Ngerapik Blog --> <div id='floating-navbar-capsule'> <div class='navbar-capsule-inner'> <!-- 1. Tombol Homepage/Beranda --> <a class='nav-capsule-item' href='/' title='Beranda'> <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path><polyline points='9 22 9 12 15 12 15 22'></polyline></svg> </a> <!-- 2. Tombol Cari --> <div class='nav-capsule-item' id='capsule-search-trigger' title='Cari Artikel'> <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg> </div> <!-- 3. Tombol WhatsApp Tengah + Progres Lingkaran --> <div class='nav-capsule-center'> <a href='https://whatsapp.com...' target='_blank' title='WhatsApp'> <svg class='capsule-progress-circle' viewBox='-1 -1 102 102'> <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98'/> </svg> <div class='wa-capsule-icon'> <svg viewBox='0 0 32 32'><path d='M16 2a13 13 0 0 0-11.3 19.4L3 29l7.8-2A13 13 0 1 0 16 2zm0 24c-2.4 0-4.7-.7-6.7-2l-.5-.3-4.6 1.2 1.2-4.5-.3-.5A11 11 0 1 1 16 26zm6-8.2c-.3-.2-1.9-1-2.2-1-.3-.2-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.4.2-.7 0a9 9 0 0 1-2.7-1.7 10 10 0 0 1-1.9-2.3c-.2-.4 0-.6.2-.7l.5-.6c.2-.2.2-.4.3-.6s0-.4-.1-.6c-.1-.2-.7-1.7-1-2.3-.3-.6-.6-.5-.8-.5h-.7c-.2 0-.6.1-.9.4a4 4 0 0 0-1.2 3c0 1.8 1.3 3.5 1.5 3.7.2.2 2.5 3.9 6 5.4a12.6 12.6 0 0 0 4.1 1.5c.9.1 1.8.1 2.4-.1.8-.1 2.3-.9 2.6-1.9.3-1 .3-1.8.2-1.9-.1-.2-.4-.3-.7-.5z' fill='#ffffff'/></svg> </div> </a> </div> <!-- 4. Tombol Mode Malam --> <div class='nav-capsule-item' id='capsule-darkmode-btn' title='Mode Gelap'> <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg> </div> <!-- 5. Tombol Back to Top --> <div class='nav-capsule-item' id='capsule-backtotop' title='Kembali ke Atas'> <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'></polyline></svg> </div> </div> <!-- Box Formulir Pencarian Tersembunyi --> <div id='capsule-search-box'> <form action='/search' method='get'> <input name='q' placeholder='Ketik kata kunci...' required='' type='text'/> <button type='submit'>Cari</button> </form> </div> </div> <style> #floating-navbar-capsule { position: fixed !important; bottom: 25px !important; right: 25px !important; left: auto !important; transform: none !important; width: 250px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 40px !important; padding: 6px 4px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; z-index: 999999 !important; box-sizing: border-box !important; } .navbar-capsule-inner { display: flex !important; justify-content: space-around !important; align-items: center !important; width: 100% !important; } .nav-capsule-item { background: none !important; border: none !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #4a5568 !important; cursor: pointer !important; transition: all 0.2s ease !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .nav-capsule-item svg { width: 18px !important; height: 18px !important; } .nav-capsule-item:hover { color: #1780dd !important; transform: scale(1.1) !important; } .nav-capsule-center { position: relative !important; width: 44px !important; height: 44px !important; margin-top: -22px !important; } .wa-capsule-icon { position: absolute !important; top: 4px !important; left: 4px !important; width: 36px !important; height: 36px !important; background: #008080 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; } .wa-capsule-icon svg { width: 18px !important; height: 18px !important; } .capsule-progress-circle { position: absolute !important; top: 0 !important; left: 0 !important; width: 44px !important; height: 44px !important; z-index: 1 !important; transform: rotate(-90deg) !important; } .capsule-progress-circle path { fill: none !important; stroke: #1780dd !important; stroke-width: 5 !important; } #capsule-search-box { position: absolute !important; bottom: 60px !important; left: 0 !important; width: 100% !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 6px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; box-sizing: border-box !important; display: none; } #capsule-search-box.show-box { display: block !important; animation: slideUpCapsule 0.2s ease-out; } #capsule-search-box form { display: flex !important; gap: 5px !important; width: 100% !important; margin: 0 !important; } #capsule-search-box input { flex: 1 !important; border: 1px solid #cbd5e1 !important; border-radius: 15px !important; padding: 6px 10px !important; font-size: 13px !important; outline: none !important; background: #f8fafc !important; color: #334155 !important; } #capsule-search-box button { background: #1780dd !important; color: #ffffff !important; border: none !important; border-radius: 15px !important; padding: 0 12px !important; font-size: 12px !important; cursor: pointer !important; } @keyframes slideUpCapsule { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dark-mode #floating-navbar-capsule, .dark-mode #capsule-search-box { background: #1a202c !important; border-color: #2d3748 !important; } .dark-mode .nav-capsule-item { color: #a0aec0 !important; } .dark-mode #capsule-search-box input { background: #2d3748 !important; border-color: #4a5568 !important; color: #ffffff !important; } </style> <script type='text/javascript'> //<![CDATA[ document.addEventListener('DOMContentLoaded', function() { var progressPath = document.querySelector('.capsule-progress-circle path'); var pathLength = progressPath.getTotalLength(); progressPath.style.strokeDasharray = pathLength + ' ' + pathLength; progressPath.style.strokeDashoffset = pathLength; var updateCapsuleProgress = function () { var scroll = window.scrollY || window.pageYOffset || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - window.innerHeight; var progress = pathLength - (scroll * pathLength / height); progressPath.style.strokeDashoffset = progress; } updateProgress = updateCapsuleProgress; window.addEventListener('scroll', updateCapsuleProgress); // Deteksi Khusus Layar HP (Hanya Muncul saat Menyentuh Footer) var checkFooterVisibility = function() { var navbarCapsule = document.getElementById('floating-navbar-capsule'); if (window.innerWidth <= 768) { var footerElement = document.getElementById('site-generator'); // Sesuaikan ID Footer tema Anda if (footerElement) { var rect = footerElement.getBoundingClientRect(); if (rect.top < window.innerHeight) { navbarCapsule.style.display = 'block'; navbarCapsule.style.opacity = '1'; navbarCapsule.style.visibility = 'visible'; } else { navbarCapsule.style.display = 'none'; } } } else { navbarCapsule.style.display = 'block'; } } window.addEventListener('scroll', checkFooterVisibility); checkFooterVisibility(); document.getElementById('capsule-backtotop').addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({top: 0, behavior: 'smooth'}); }); document.getElementById('capsule-darkmode-btn').addEventListener('click', function() { document.documentElement.classList.toggle('dark-mode'); document.body.classList.toggle('dark-mode'); }); document.getElementById('capsule-search-trigger').addEventListener('click', function(e) { e.stopPropagation(); document.getElementById('capsule-search-box').classList.toggle('show-box'); }); document.addEventListener('click', function(e) { var searchBox = document.getElementById('capsule-search-box'); var searchTrigger = document.getElementById('capsule-search-trigger'); if (!searchBox.contains(e.target) && !searchTrigger.contains(e.target)) { searchBox.classList.remove('show-box'); } }); }); //]]> </script>

6. Jangan lupa ubah nomor telepon 6281234567890 di dalam kode tersebut dengan nomor WhatsApp milik Anda sendiri agar terhubung dengan benar.

7. Klik Simpan (Save) dan selesai!

 

Catatan Tambahan bagi para Blogger

• Sistem ID Footer: Kode ini disesuaikan untuk mendeteksi ID footer #site-generator. Jika template blog sobat menggunakan nama ID footer yang berbeda (seperti #footer-wrapper atau .site-footer), teman teman tinggal mengganti nama selektor tersebut pada skript JavaScript di atas agar fitur auto-hide di HP bekerja sempurna.

• Apabila teman-teman ingin memasangnya di Mode Edit HTML Template (Tema) Blogger teman-teman Tempatkan code tersebut di atas </body>

Selamat mencoba sobat blogger jadikan blog Anda menjadi lebih cantik, ganteng dan premium elegan! (kata Mode Ai..ckkkkk)  Jika ada pertanyaan, jangan ragu untuk meninggalkan komentar di Disqus bawah ya. Salam NgeraPik Blog..!!