Catetan

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

6 comments:

siti_aryati

27 Jun 2010 12.51.00
thnak y... ilmu na bermanfaat x...
{S}p4rTaN^30{0}

10 Nov 2010 20.58.00
Mas,mau tanya,kl buat tuh posisinya diatas tgl pots gimana ya?aq buat jadinya mlh sejajar dengan tanggal posting,jd g enak dilihatnya.
nih hasilnya kaya gini http://clanspartan300.blogspot.com/

tlg bantuannya
{S}p4rTaN^30{0}

10 Nov 2010 21.29.00
Update,dah bisa mas,tadi tak coba2 aja,hihihihihi.btw makasih banyak dah mau berbagi ilmu buat fish eye menu.
Peeka

13 Nov 2010 18.34.00
waw. sebagai nubi nubi an, boleh nih ogut copas. mohon ijinnya ya om!
Fauzan Kurniawan ^('o')^

14 Des 2010 16.28.00
kok fish eye nya gak bisa ya pak ? mohon bantuannya
terimakasih
Ilmu terakir

13 Jan 2011 12.04.00
udah coba kalao kita mau letakan menu fish eyes nya di sebelah sisi sebelah kanan halaman bagaimana bagian mana yg perlu di edit ....

Posting Komentar