Cara Membuat Blog Taskbar Modern Tanpa jQuery

Blog Taskbar adalah navigasi fixed di bagian bawah halaman yang menyerupai taskbar desktop. Versi lama artikel ini memakai jQuery 1.7.2 dan banyak handler terpisah. Versi baru menggunakan HTML, CSS, dan JavaScript native.

Kode Blog Taskbar Modern

<nav class="mc-taskbar" aria-label="Navigasi cepat">
  <button class="mc-start" type="button" aria-expanded="false">Menu</button>
  <a href="/">Home</a>
  <a href="/search/label/Widget">Widget</a>
  <a href="/search/label/Tutorial">Tutorial</a>

  <div class="mc-start-menu" hidden>
    <a href="/p/about.html">About</a>
    <a href="/p/contact.html">Contact</a>
    <a href="/p/sitemap.html">Sitemap</a>
  </div>
</nav>

<style>
.mc-taskbar{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:calc(100% - 24px);
  padding:8px;
  border:1px solid rgba(127,127,127,.25);
  border-radius:12px;
  background:rgba(20,20,24,.9);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.mc-taskbar a,
.mc-taskbar button{
  border:0;
  border-radius:8px;
  padding:9px 12px;
  font:inherit;
  font-size:15px;
  color:#fff;
  background:rgba(255,255,255,.08);
  text-decoration:none;
  cursor:pointer;
}
.mc-taskbar a:hover,
.mc-taskbar button:hover{
  background:rgba(255,255,255,.16);
}
.mc-start-menu{
  position:absolute;
  left:8px;
  bottom:calc(100% + 8px);
  min-width:180px;
  padding:8px;
  border-radius:10px;
  background:#18181c;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.mc-start-menu a{
  display:block;
  margin:4px 0;
}
@media(max-width:600px){
  .mc-taskbar{
    overflow-x:auto;
    justify-content:flex-start;
  }
  .mc-taskbar a,
  .mc-taskbar button{
    white-space:nowrap;
  }
}
</style>

<script>
(function(){
  var bar=document.querySelector('.mc-taskbar');
  if(!bar)return;
  var btn=bar.querySelector('.mc-start');
  var menu=bar.querySelector('.mc-start-menu');

  btn.addEventListener('click',function(e){
    e.stopPropagation();
    var open=menu.hasAttribute('hidden');
    menu.toggleAttribute('hidden',!open);
    btn.setAttribute('aria-expanded',String(open));
  });

  document.addEventListener('click',function(e){
    if(!bar.contains(e.target)){
      menu.setAttribute('hidden','');
      btn.setAttribute('aria-expanded','false');
    }
  });
})();
</script>

Cara Pasang

1. Buka Blogger.
2. Pilih Tata Letak.
3. Tambahkan gadget HTML/JavaScript.
4. Tempel kode di atas.
5. Sesuaikan link menu dengan blog Anda.
6. Simpan dan cek pada desktop serta mobile.

Kenapa Tidak Lagi Menggunakan jQuery?

• Toggle menu sederhana dapat dibuat dengan JavaScript native.
• Tidak perlu jQuery hanya untuk membuka dan menutup panel.
• Mengurangi risiko konflik dengan template.
• Menghilangkan loader HTTP lama.
• Kode jauh lebih singkat.

Tips UX

Karena taskbar menggunakan posisi fixed, jangan membuatnya terlalu tinggi. Pastikan tidak menutupi tombol consent, navigasi mobile, atau elemen penting lain di bagian bawah layar.

Catatan: jika template sudah mempunyai sticky bottom navigation di mobile, sebaiknya gunakan taskbar ini hanya pada desktop agar tidak terjadi tumpang tindih.