Tutorial CSS and JavaScript Fisheyes/ Mac Dock Menu

Hallo sahabat Dotcom-ilmu semua, kita lanjut lagi tutorialnya, maaf udah lama dan baru sempat update tutorial sekarang. Hehe...Kemarin-kemarin banyak yang menanyakan kepada saya, bagaimana cara buat menu Fisheyes/Mac Dock seperti yang terdapat pada website latihan. Kali ini saya akan sedikit membahas tentang menu Fisheyes/ Mac Dock. Menu tersebut menggunakan CSS dan Javascript. Oke kita mulai saja.
1. Login ke blogger dengan id Anda.
2. Silahkan tuju Tata Letak.
3. Pilih Edit HTML.
4. Backup template dengan klik Download Template Lengkap.
5. Cari kode <head> kemudian letakkan kode javascript di bawahnya sehingga menjadi:

6. Masih di Edit HTML, sekarang cari kode ]]> dan letakkan kode berikut di atasnya, sehingga menjadi :

/*Doc*/

.dock {
 position: relative; 
 height: 50px; 
 text-align: center;
}
.dock-container {
 position: absolute;
 height: 50px;
 /*background: url(http://jsblogmaniac.googlecode.com/files/dock-bg2.gif);*/
 padding-left: 20px;
}
a.dock-item {
 display: block;
 width: 40px;
 color: #000;
 position: absolute;
 top: 0px;
 text-align: center;
 text-decoration: none;
 font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
 border: none; 
 margin: 5px 10px 0px; 
 width: 100%; 
}
.dock-item span {
 display: none; 
 padding-left: 20px;
}

7. Masih di Edit HTML, sekarang kita akan menempatkan id untuk css dock menu. Jika anda sudah terbiasa dengan kode HTML template blogger, maka anda pasti bisa menempatkan id css dock menu di mana saja sesuai kebutuhan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun bisa. Yang penting, jangan sampai salah meletakkan kode. Biar seragam, saya akan menempatkannya di bawah header.
cari kode

.........
.........

8. Letakkan kode berikut di bawahnya, sehingga menjadi :

Home 
  Contact 
  Portfolio 
  Music 
  Video 
  History 
  Calendar 
  RSS

9. Sekarang klik tombol SIMPAN TEMPLATE
10. Selesai
Silakan di modifikasi sesuka kalian untuk lihat demonya lihat di ujicobamania

My Tutorials

Tutorial CSS and JavaScript Fisheyes/ Mac Dock Menu

Unknown

My Tutorials

Tutorial CSS and JavaScript Fisheyes/ Mac Dock Menu

Artikel Terkait

Unknown