Loading ... ... Please wait!

Selasa, 03 Februari 2009

Menu Link

Setiap Website maupun Weblog pasti memiliki MENU LINK. Menu link merupakan representasi seluruh isi blog atau web. Seyogyanya melalui menu link kita bisa mendapat gambaran dasar tentang apa yang dimuat dalam sebuah blog. Menu link juga memberikan banyak kemudahan bagi pengunjung untuk memilih bagian mana dari blog yang hendak dituju. Dan satu lagi, selain digunakan untuk jump ke halaman lain dari blog ini, Menu Link juga bisa digunakan untuk focus ke widget tertentu (baca WIDGET FOCUS dan WIDGET MENU )di halaman yang sama.

Oleh karena menu link memiliki peran yang sangat penting pada blog, sehingga sering di tempatkan pada bagian top halaman web/blog yang tentu saja dengan tujuan agar mudah dilihat. Hanya saja menu link yang berisi banyak kadang juga membuat beberapa pengguna blog tidak merasa nyaman karena kelihatannya mengambil banyak ruang. Oleh karena itu banyak master webprogram menciptakan menu link yang begitu apik sehingga selain dapat menghemat ruang juga dimodifikasi sedemikian rupa sehingga dapat memancing daya tarik pengunjung.

Trik yang umum digunakan adalah metode cascading menu atau drop down menu. Ada banyak trik javascript yang bisa kita cari di internet untuk membuat menu dengan prinsip cascading atau dropdown, mungkin titlenya berbeda-beda tapi karakternya sama. Metode cascading biasanya menggunakan layar tersembunyi, dengan trik onmouseover atau onclick, layar akan muncul dengan style slide in, bisa horisontal ke kanan atau kekiri atau vertikal ke bawah atau ke atas. Metode dropdown lebih sederhana hanya menggunakan form select untuk membuatnya.

Pada artikel ini saya akan membahas tentang OMNI MENU yang dibuat dengan menggunakan metode javascript Cascading + Slide in left/right + Always On Top. Pada blog ini bisa dilihat contohnya pada sisi kiri ("JALUR CEPAT") dan Pada sisi kanan ("MENU BLOG"). Saya tertarik menggunakan OMNI MENU karena sifatnya yang Always On top. Yaitu menu ini akan selalu terlihat berada diatas meskipun halaman blog di scroll kebawah.

Jika anda tertarik menggunakannya, silahkan simak dan copy pasta script-script dibawah ini.

BUKA TATA LETAK > EDIT HTML > Copy paste script ini diatas </head>

<style>

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}


#menu3 a { /*Menu3 Links*/
color:black;
background-color:white;
text-decoration:none;
text-indent:1ex;
}
#menu3 a:hover {
color:black;background-color:#FFFF99;
}
#menu3 a:active {color:black;text-decoration:none;}
#menu3 a:visited {color:black;text-decoration:none;}

</style>


<script language='JavaScript1.2' src='http://www.geocities.com/topoleogi/mmenu.js'/>

<script>

resizereinit=true;

menu[1] = {
id:'menu1',
bartext:'JALUR CEPAT',
barbgcolor:"#ccddcc",
barcolor:"#000000",
barfontweight:"bold",
barfontsize:'80%',
bordercolor:'#000000',
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Block Archives", "#blogarchives", "_self"],
["Blog List", "#bloglist",""],
["Site Statistik", "#stat", ""],
["Top Komentar", "#topkom", ""],
["Font Style Setting", "#fontstylesetting", ""],
["Followers", "#followers", ""],
["Langganan", "#langganan", ""],
["Kategori", "#labelcloud", ""],
["Medium Komentar", "#tagboard", ""],
["Live Traffic", "javascript:staticbar('feedjit')", ""],
["Shout Box", "javascript:staticbar('shout')", ""],
["Admin Area", "javascript:mpopup()", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'right',
kviewtype:'fixed',
barbgcolor:"#ffffff",
barcolor:"#000000",
barfontweight:"bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,

menuItems:[
["Home", "http://abgamal.blogspot.com", ""],
["Tentang Saya", "javascript:aktif_bt()",""],
["Infomedis", "javascript:buka_scroll3()", ""],
["Widget", "javascript:aktif_div1('http://abdgamal.ueuo.com/add_ons.php')", ""],
["Yang Lagi Online", "javascript:aktif_div1('http://abdgamal.ueuo.com/members.php')", ""],
["Private Message", "javascript:aktif_div1('http://abdgamal.ueuo.com/privmail.php')", ""],
["Posting Artikel", "javascript:aktif_div1('http://abdgamal.ueuo.com/tambah_tulisan.php')",""],
["Statistik", "javascript:aktif_div1('http://abdgamal.ueuo.com/topfive.php')", ""],
["Admin Area", "javascript:aktif_div1('http://abdgamal.ueuo.com/admin_area.php')", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

make_menus();
</script>

<----Batas Copy Paste ---->
Keterangan :
Contoh diatas adalah contoh OMNI MENU pada Blog ini, silahkan anda ubah sendiri
Merah : Judul Menu
Biru : Alamat URL
Hijau : Target URL

Related Posts by Categories



31 comments:

Anonim mengatakan...
selamat malam ....kunjungan perdana dapaat ilmu ...matur nuwun...
Anonim mengatakan...
kunjungan malam
- s L i K e R s - mengatakan...
Kunjungan subuh :D
Anonim mengatakan...
selmat malam,...pagi buta berkunjung,..!!!
Anonim mengatakan...
wah senengnya bisa diberitau ilmu ginian...
aalil Belajar SEO mengatakan...
makknyyoss neh..

nice post kang..

keep share..
PT. GRAMEDIA ASRI MEDIA Div. IMPORT NON BOOKS mengatakan...
Thanks for..your Artikel..
Anonim mengatakan...
ga kebayang bentuknya, bisa digambarkan mas?
Anonim mengatakan...
wah, keren bos....

jadi pengen di coba nih....
Anonim mengatakan...
siang mas...
tanya nih...he....
itu yang di menu 1 ama menu 3 backgorund colornya emang beda ya ?
di menu 1 habis warna color nya ga pake (;)
di menu3 pakai (;)

terima kasih sebelumnya

^_^
Anonim mengatakan...
silaturahmi siang
Unknown mengatakan...
For Amar

ubah sendiri di barbgcolor
Anonim mengatakan...
salam kenal dari Muhammad Rizky.
Terima kash atas kunjungannya di blog saya, kalau ingin tukeran link silahkan link back...saya segera membalasnya
Anonim mengatakan...
Blog walking mas..salam sukses!!
Blog yang keren..
Anonim mengatakan...
nanti saya coba ya...

...have fun
Anonim mengatakan...
wah... tipsx bagus2 ni mas...
Anonim mengatakan...
wah serius nih keren banget...tadi kaget juga sih pas masuk kesini kok gak mausk2 halaman depan....ternyata dibbikin keren banget
anita mui mengatakan...
weeeww blognya keren banget bro..swerr gk bo'ong...ayem tertarik nih..
priandhani mengatakan...
wahh!!! keren blognya.
bisa pasang iklan gratis...
saya follow ya...!!!
Anonim mengatakan...
terima kasih kunjungannya..:)
Andi mengatakan...
Thanks kunjungannya^^ salam kenal.. bagus banget nih.. ..aku link back ya mas.
Anonim mengatakan...
wah bisa di ajarin ga nich cara bikin blog kaya gini ?
Anonim mengatakan...
hm.. maknyuss..
Anonim mengatakan...
Halo.. lam kenal dari rinanet
Anonim mengatakan...
thx infonya...saya akan coba praktikkan...
Zippy mengatakan...
Thx buat info'x...
Lam kenal yah bro...
Mksh jg buat kunjungannya... :)
ayuzuricha mengatakan...
infonya makasih yah :)
Anonim mengatakan...
ma ksih buat caranya...blog ku mendukung u coment i follow...
Anonim mengatakan...
makasih buat tutornya..

ca'em...

thanks banyak ya...^^
ipay76.blog.com mengatakan...
Keren infonya, sukses selalu
Anonim mengatakan...
saya coba ya sob

Posting Komentar

 
 
 
 
 
 


CLOSE
MAIN MENU
REFRESH