..:: KAWUNGANTEN BERBAGI ::..: DUCK MENU

Selamat pagi sahabat semua ..... ufhh.. setelah lama buanget istirahat, akhirnya hari ini saya bia kembali menulis posting untuk kita semua.... Okay... kali ini saya akan memberi satu trik buat bikin "DUCK MENU". Hmm.. apa sih Duck menu itu ? kalau kalian mau liat contohnya.. bisa kalian klik disini atau klik disini. Kelihatan kan menu yang diatas? yang bergerak-gerak saat mouse ada diatasnya ? (mirip-mirip dengan skin XP jenis Brickopack). Nah.. jika kalian tertarik untuk memasangnya, silahkan ikuti petunjuk dibawah ini. Tolong dicermati dengan baik ya? karena akan ada beberapa langkah yang memang harus benar-benar diperhatikan. O.k? Masuk AccountBlogger anda==>Dashboard/dasbor==> Layout/tataletak==> Edit HTML. Jangan lupa "Centang" Expand Template Widget ya ? Kemudian Copy kode ini : <script src='http://iblographics.com/jquery.js' type='text/javascript'/> <script src='http://iblographics.com/interface.js' type='text/javascript'/> Dan paste di BAWAH kode : <head> Setelah anda paste pada posisinya, kemudian silahkan anda Copy lagi kode dibawah ini : /* Dock menu edited by jeruklegisemendheh ----------------------------------------------- */ .fisheye{ text-align: center; height: 62px; position: relative; } a.fisheyeItem { text-align: center; color: #ff0000; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; top: 0; } a.fisheyeItem2 { text-align: center; color: #ff0000; font-weight: bold; text-decoration: none; width: 40px; position: absolute; display: block; bottom: 0; } .fisheyeItem img { border: none; margin: 0 auto 5px auto; width: 100%; } .fisheyeItem2 img { border: none; margin: 5px auto 0 auto; width: 100%; } .fisheyeItem span, .fisheyeItem2 span { display: none; positon: absolute; } .fisheyeContainter { height: 50px; width: 200px; left: 500px; position: absolute; } #fisheye2 { position: absolute; width: 100%; bottom: 0px; } /* Fin del dock menu ----------------------------------------------- */ lalu Silahkan anda paste tepat di-ATAS kode : ]]></b:skin> Nah... sekarang tinggal langkah terakhirnya .... Silahkan anda copy kembali kode dibawah ini : <div class='fisheye' id='fisheye'> <div class='fisheyeContainter'> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Home</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Email</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Display</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.pngg' width='50'/><span>Secretk</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Web</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Find</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Movie</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Kill</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>File</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Share</span></a> <a class='fisheyeItem' href='http://www.alamattarget.com'><img src='http://AlamatURLGAMBARANDA.png' width='50'/><span>Portable</span></a> </div> </div> <script type="text/javascript"> $(document).ready( function() { $('#fisheye').Fisheye( { maxWidth: 15, items: 'a', itemsText: 'span', container: '.fisheyeContainter', itemWidth: 70, proximity: 70, halign : 'center' } ) } ); </script> Lalu paste tepat diBAWAH kode : <body> Nah.. kalu semuanya dirasa sudah benar, silahkan anda klik tombol Save/simpan perubahan. dan lihat hasilnya ya ? Catatan : Jika masih terdapat pesan error, berarti anda harus mem-PARSE kode terakhir itu (kode yang diletakkan di bawah kode <body> ) Ingat.. cara PARSE sudah pernah saya posting disini atau anda bisa membacanya disini. Atau anda bisa langsung menuju ke Situs penyedia layanan PARSE dengan klik Disini. Ngerti kan ? Kode warna MERAH silahkan anda ganti sesuai dengan Data/selera/alamat URL anda. Aplikasi ini TIDAK BERJALAN bila : Ada aplikasi sejenis pada blog anda. Contoh : Jika anda memasang gambar yang selalu berada diatas. Ngerti kan? Kalau sudah berhasil, silahkan anda share dan bagikan pada teman yang memerlukan ya? MARI BERBAGI !!