Membuat CSS Dock Menu

8.05.2008

Coba deh Liat menu di [Dunia Blogger] Menunya animasi kan...

Saya dapet Dari blognya mas O-om dan sumber aslinya di http://www.ndesign-studio.com/blog/design/css-dock-menu/ setelah saya liat liat akhirnya tertarik juga tuh... di situ juga dijelasin sih... caranya...dan dwsediakan juga link dwnloadnya lagi... baik yah... untuk membuat menu kayak gitu.... dan sekalian belajar ....!!!!

Untuk membuat Menu Tersebut caranya cukup Sederhana... hal ini agar memudahkan teman-teman semua supaya gak ribet untuk mencobanya... sebab filnya sudah saya simpan di GooglePages saya.. he he

Sekarang Copy deh Kode di bawah ini......!!!

<script src="http://adesanusi.googlepages.com/jquery.js" type="text/javascript"> </script> <script src="http://adesanusi.googlepages.com/interface.js" type="text/javascript"> </script> <link href="http://adesanusi.googlepages.com/style.css" rel="stylesheet" type="text/css"> 

Abis di Copy Silahkan Masuk Ke blogger dan Pilih [Layout] - [Edit HTML] dan kemudian Paste/Tempatkan kode yang tadi Tepat di bawah Kode <head>

Jika sudah Selesai kembali baca artikel ini yah... he he kemudian Copy kode Berikut ini:

<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>

Dan Sekarang Pasang Kode di yang bacgroudnya warna biru muda... dan pasang kode tepat di Atas kode </head> Perhatikan di situ ada / [garis miring] awas yah jangan salah... kode </head> adanya di kedua paling bawah...silahkan pasnag tuh kode tasi di atas yah.... sekali lagi di atas kode </head> Sekarang [SAVE] dulu... jika sudah di Simpan Tinggal Pasang Kode untuk menampilkan Menunya...

Sebelumya kan berada di [Edit HTML] sekarang beralih ke [Page Element] dan tambahkan Widget yah.... Widgetnya yang [HTML/JavaScrift] pasti ada kok.....

kalo udah sekarang

Copy Lagi Kode yang Ini.... he eh... Copy mulu yah... tar gak bisa tidur lagi........!!!

<div class="dock" id="dock">
<div class="dock-container" style="left: 395px; width: 200px;">
<a class="dock-item" href="~~http://dunia-blogger.blogspot.com/~~" style="width: 40px; left: 0px;"> <img alt="home" src="http://i261.photobucket.com/albums/ii65/adephotobucket/home.png" /> <span style="display: none;"> Home </span> </a>
<a class="dock-item" href="~~http://dunia-blogger.blogspot.com/search/label/Blog~~" style="width: 40px; left: 40px;"> <img alt="Blog Tutorial" src="http://i261.photobucket.com/albums/ii65/adephotobucket/blog.png" /> <span style="display: none;"> Blog </span> </a>
<a class="dock-item" href="~~http://dunia-blogger.blogspot.com/search/label/Tips%20and%20Trik~~" style="width: 40px; left: 80px;"> <img alt="Tips And Trik" src="http://i261.photobucket.com/albums/ii65/adephotobucket/tips.png" /> <span style="display: none;"> Tips and Trick </span> </a>
<a class="dock-item" href="~~http://dunia-blogger.blogspot.com/search/label/Tutorial~~" style="width: 40px; left: 120px;"> <img alt="Tutorial" src="http://i261.photobucket.com/albums/ii65/adephotobucket/tutorial.png" /> <span style="display: none;"> Tutorial </span> </a>
<a class="dock-item" href="~~http://dunia-blogger.blogspot.com/search?max-results=200~~" style="width: 40px; left: 160px;"> <img alt="Daftar isi Dunia Blogger" src="http://i261.photobucket.com/albums/ii65/adephotobucket/isi.png" /> <span style="display: none;"> Daftar Isi </span> </a>
</div>
</div>

Saya Berii Background Warna Itu Artinya Mewakili 1 Menu Karena di di blog ini baru menampilkan lima menu....

Silahkan Paste Kode Tersebut di Widget [HTML/JavaScript] Jangan Copy paste yang di warnain aja.... tapi semuanya..... Silahkan Ganti Kode yang warna merah [di contoh ini yang ada akhiran.png]... dan ganti dengan Gambar yang mau di tampilkan........Sedangkan kode yang miring dan ada coretan itu ganti dengan link tujuan kita.....OK deh Selamat Mencoba... Semoga Berhasil...!!!

Catatan:...!! Waktu Nyoba di Save pas bagian pasang kode yang pertama itu ada kode error pada bagian [ <link href="http://adesanusi.googlepages.com/style.css" rel="stylesheet" type="text/css">] maka solusinya saya tambahkan kode </link> menjadi seperti ini... <link href="http://adesanusi.googlepages.com/style.css" rel="stylesheet" type="text/css"></link>.