Fisheye Top Menu

Sebagai pengguna internet tentunya anda pernah menemui web yang memiliki link menggunakan icon. Apabila kursor diarahkan maka ikon itu membesar dan siap untuk di klik menuju halaman yang dimaksud. Tampilannya seperti dibawah ini.

Fisheye Top Menu

Agar lebih jelas anda dapat mencoba contohnya pada blog indonesian music dan Dockmenu. Untuk membuatnya diperlukan beberapa icon gambar sebagai media link dan dua buah file JavaScript. Anda bisa mendownloadnya disini ,kemudian extract file tersebut.
Upload file diweb anda atau di photobucket, 4shared, dll. copy semua urlnya di notepad.


Pertama :
Login dulu ke blogger >> Rancangan >> Edit html.Jangan lupa expand template widget

Cari code: <title><data:blog.pageTitle/></title>

Kemudian copy code dibawah ini dan paste tepat diatasnya.

<script src='http://web_anda .com/jquery.js' type='text/javascript'/> <script src='http://web_anda.com/interface.js' type='text/javascript'/>

Kedua :

Cari code : ]]></b:skin>

Copy code dibawah ini paste tepat diatasnya.

/* dock2 */ #dock2 { width: 100%; height:10px; position: relative; text-align: center;} .dock-container2 { position: absolute; height: 25px; padding-left: 0px;} a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #ff9900;height: 0px; position: absolute; text-align: center; text-decoration: none;} .dock-item2 img { border: none; margin: 10px 10px 0px; width: 100%; } .dock-item2 span { display: none; padding-left: 10px;}

Ketiga :

Cari code :<div id='header-wrapper'>

Copy code berikut ini paste tepat dibawahnya.

<div class='dock' id='dock2'> <div class='dock-container2'> <a class='dock-item2' href='http://www.google.co.id/' target='_blank'> <img alt='Google' src='http:// web_anda .com /google.png'/><span>Google</span></a> <a class='dock-item2' href='http://www.yahoo.co.id/' target='_blank'> <img alt='Yahoo' src='http:// web_anda .com /yahoo.png'/><span>Yahoo</span></a> <a class='dock-item2' href='http://www.blogger.com/' target='_blank'> <img alt='Blogger' src='http:// web_anda .com /blogger.png'/><span>Blogger</span></a> <a class='dock-item2' href='http://www.gamekecil.com/' target='_blank'> <img alt='Gamekecil' src='http:// web_anda .com /gamekecil.png'/><span>Game kecil</span></a> <a class='dock-item2' href='http://www.facebook.com/' target='_blank'> <img alt='Facebook' src='http:// web_anda .com /facebook.png'/><span>Facebook</span></a> <a class='dock-item2' href='http://www.twitter.com/' target='_blank'> <img alt='Twitter' src='http:// web_anda .com /twitter.png'/><span>Twitter</span></a> <a class='dock-item2' href='http://www.wordpress.com/' target='_blank'> <img alt='Wordpress' src='http:// web_anda .com /wordpress.png'/><span>Wordpress</span></a> <a class='dock-item2' href='http://www.youtube.com/' target='_blank'> <img alt='Youtube' src='http:// web_anda .com /youtube.png'/><span>Youtube</span></a> </div> </div> <script type='text/javascript'> $(document).ready( function() { $(&#39;#dock2&#39;).Fisheye( { maxWidth: 50, items: &#39;a&#39;, itemsText: &#39;span&#39;, container: &#39;.dock-container2&#39;, itemWidth: 50, proximity: 80, halign : &#39;center&#39; } ) } ); </script>

Kata – kata Web_anda diganti dengan url file yang telah anda miliki.

Simpan dan lihat hasilnya.

Posted in: JavaScript