FISH EYE MENU DI BLOGGER 6

Fish Eye Menu merupakan salah satu bentuk Menu yang sangat artistik, dan terlihat futuristik, yang dibuat dengan kode jquery.

Pertama kali melihatnya ketika browsing, aku langsung tertarik untuk membuatnya di blog, tetapi setelah sekian lama baru kali ini keinginan itu bisa terlaksana, dikarenakan aku memimpikan suatu barang yang tidak bisa aku capai saat ini, sehingga aku buat saja bentuknya di template blog, sehingga aku bisa merasakan seakan menggunakan barang tersebut.

Dan kebetulan menu template blog tersebut sangat cocok menggunakan Fish Eye Menu, menurutku.

Cara membuat di blog-pun cukup mudah karena tinggal copy paste saja kode yang ada di bawah ini dan sedikit melakukan perubahan kode link.

Yang pertama kali dilakukan sudah tentu login ke blog masing-masing, kemudian masuk ke Layout --> Edit HTML.

setelah itu cari kode :

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

kemudian letakkan kode dibawah ini tepat diatasnya :

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

Proses selanjutnya copy kode dibawah ini tepat diatas kode ]]></b:skin>

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

setelah selesai kemudian simpan.

Dan langkah terakhir adalah buka menu Layout--> Page Element dan tambahkan Add Gadget --> HTML/Javascript di footer, lalu copy kode dibawah ini kedalamnya :

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

<div class="dock-container2">

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Home</span><img src="http://img704.imageshack.us/img704/9276/homezb.png" alt="home" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Contact</span><img src="http://img27.imageshack.us/img27/6289/emailpjo.png" alt="contact" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Portfolio</span><img src="http://img707.imageshack.us/img707/7933/portfoliok.png" alt="portfolio" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Music</span><img src="http://img188.imageshack.us/img188/5169/musicvs.png" alt="music" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Video</span><img src="http://img87.imageshack.us/img87/1214/videobk.png" alt="video" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>History</span><img src="http://img153.imageshack.us/img153/420/historyx.png" alt="history" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Calendar</span><img src="http://img576.imageshack.us/img576/3306/calendar.png" alt="calendar" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank"><span>RSS</span>
<img src="http://img69.imageshack.us/img69/7823/rssm.png" alt="rss" /></a>

</div>
</div>

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

lalu rubah alamat link sesuai dengan link kepunyaan masing-masing, sampai disini proses telah selesai.

Dan sebagai catatan, lebih baik ganti semua alamat link baik untuk image maupun kode jquery-nya, takutnya tanpa sengaja link tersebut terhapus.

Hasilnya lihat demo disini

Sumber dari Pengetahuan ini adalah dari ndesign-studio