Membuat Dock Menu Gaya Macintosh

Beberapa blogger sudah membuat tutorial ini, tapi tidak ada salahnya saya mencoba menulis kembali dari beberapa referensi dan percobaan sendiri. Beberapa hal yang membuat saya menulis ulang adalah dari beberapa kegagalan yang pernah saya coba, kesalahan-kesalahan itu diantaranya semua text dalam blog saya ikut berubah ukurannya, dan background pada dock tidak muncul. Bahkan ada beberapa blogger mengalami kegagalan dalam pemasangan. Saya telah mencoba dan berhasil memasangnya dengan baik, dan dibawah ini langkah demi langkah pemasangan.

Langkah 1 :
Login ke Blogger - Panel Kontrol - Tata Letak - Edit HTML - Expand Widget Template.
Note : Mungkin lebih baik anda backup terlebih dahulu template sebelum melakukan perubahan

Langkah 2 :
Cari kode dibawah ini :

</head>

Langkah 3 :
Copy Paste kode dibawah ini tepat diatas kode pada langkah 2 (warna biru kode tambahan)

<script type="text/javascript" src="http://dedehendriono.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://dedehendriono.googlepages.com/interface.js"></script>
<link href="http://dedehendriono.googlepages.com/dock_style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
</head>

Langkah 4 :
Cari kode dibawah ini :

</body>

Langkah 5 :
Copy Paste kode dibawah ini tepat diatas kode pada langkah 4 (warna biru kode tambahan)

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
</body>

Setelah langkah 2 - 4 Simpan Template

Langkah 5 :
Tambahkan sebuah elemen melalui tab Elemen Halaman - Tambah Gadget - HTML/JavaScript, Copy Paste kode dibawah pada bagian Konten lalu simpan tanpa Judul

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com//music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://dedehendriono.googlepages.com/rss2.png" alt="rss" /><span>RSS2</span></a>
</div>
</div>

Ubahlah # (berwarna merah) sesuai dengan link yang anda inginkan (misal: http://bonprog.blogspot.com) dan seterusnya.

Perhatian !
Ubah Gerakan Dock Menu
Gerakan Dock Menu ini akan bergerak kebawah (cocok untuk posisi Dock Menu diatas) tetapi jika anda menginginkan gerakan Dock Menu keatas ubahlah kode dibawah ini (lihat langkah 5)

<div class="dock" id="dock">
<div class="dock-container">

Ubahlah menjadi seperti kode dibawah ini :

<div class="dock" id="dock2">
<div class="dock-container2">

Ubah juga semua kode dibawah :

class="dock-item"

Menjadi kode berikut :

class="dock-item2"

Maka gerakan dock menu akan berbalik menjadi keatas.

Ubah Gambar/Icon
Jika anda ingin mengganti gambar/icon sesuai keinginan anda silahkan gantilah kode dibawah (lihat langkah 5)

src="http://dedehendriono.googlepages.com/home.png"

Ubahlah link-nya sesuai dimana anda menyimpan gambar/icon tersebut, sehingga menjadi :

src="http://alamat_link_anda/nama_icon"

Update:
Untuk melihat hasilnya download source code dock style disini.
Mudah bukan? Selamat mencoba dan ubahlah semuanya sesuai dengan ekspresi anda, salam hangat dari Banjarsari - Ciamis - Jawa Barat