Tutorial Lengkap Cara Membuat Menu Docking (Dock-Style Menu) dengan jQuery di Blogspot
Berikut adalah tutorial lengkap cara membuat Menu Docking (dock-style menu) dengan jQuery di Blogspot, lengkap dengan penjelasan dan contoh hasilnya langsung bisa kamu tempel ke blog.
📌 Apa itu Menu Docking?
Menu Docking adalah menu navigasi horizontal bergaya seperti Dock di macOS, di mana ikon membesar saat disentuh mouse. Efek ini membuat menu terlihat modern dan interaktif.
✅ Langkah-Langkah Membuat Menu Docking di Blogspot
🔸 1. Masuk ke Blogger
* Buka https://www.blogger.com
* Masuk ke dasbor blog kamu
* Pilih "Tema" → "Edit HTML"
atau tambahkan melalui "Tata Letak" → "Tambahkan Gadget" → HTML/JavaScript"
🔸 2. Tambahkan HTML Menu Docking
Tambahkan kode ini di dalam `<body>` blog kamu (bisa lewat gadget HTML/JavaScript juga):
```html
<div class="dock">
<ul>
<li><a href="#"><img src="https://i.imgur.com/9Hj4Gfz.png" alt="Home"><span>Home</span></a></li>
<li><a href="#"><img src="https://i.imgur.com/f3fSkhD.png" alt="About"><span>About</span></a></li>
<li><a href="#"><img src="https://i.imgur.com/LL4zMhw.png" alt="Services"><span>Services</span></a></li>
<li><a href="#"><img src="https://i.imgur.com/NSN4xGy.png" alt="Contact"><span>Contact</span></a></li>
</ul>
</div>
```
Ganti URL ikon dengan ikon kamu sendiri jika mau.
🔸 3. Tambahkan CSS Dock Style
Tempel kode berikut di dalam `<style>` di bagian `<head>` template Blogspot:
```html
<style>
.dock {
text-align: center;
padding: 20px;
background: #fff;
border-radius: 15px;
margin: 20px auto;
width: fit-content;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dock ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
.dock li {
margin: 0 10px;
transition: transform 0.2s ease;
}
.dock img {
width: 64px;
height: 64px;
transition: all 0.2s ease;
}
.dock span {
display: block;
margin-top: 5px;
font-size: 12px;
color: #333;
}
</style>
```
🔸 4. Tambahkan jQuery dan Efek Hover
Letakkan ini sebelum `</body>` atau di dalam gadget HTML:
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('.dock li').hover(function(){
$(this).find('img').css('transform', 'scale(1.5)');
}, function(){
$(this).find('img').css('transform', 'scale(1)');
});
});
</script>
```
🎯 Contoh Hasilnya:
Ikon-ikon akan membesar saat disentuh kursor:
```
[Home] [About] [Services] [Contact]
```
Tampilannya bergaya dock Mac, cocok untuk blog portfolio, personal, atau teknologi.
---
💡 Tips Tambahan:
- Gunakan ikon PNG transparan agar tampilan bersih
- Letakkan menu di bagian atas blog (header) atau bawah (footer)
- Ganti warna latar sesuai tema blogmu
- Bisa ditambahkan animasi lain seperti bayangan saat hover
Jika kamu ingin saya buatkan kode jadi khusus untuk blog kamu atau versi responsif untuk HP, tinggal bilang saja. Mau saya bantu buatkan versi mobile friendly-nya juga?
Mudh2n Gue Sukses :D