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

Selanjutnya...

Widget Menu

Mungkin sama juga dengan anda, yang memiliki hobby BLOGWALKING. Saat berkunjung ke Blog seseorang, apalagi blog yang baru pertama kali dikunjungi. Yang Pertama terpikir oleh kita adalah "KETUK PINTU" (istilah yang saya gunakan untuk menyapa pemilik blog dengan menoreh sepatah dua patah kalimat pada ShoutBOX sebagai salam perkenalan). Tapi dimanakah gerangan posisi SHOUTBOX tersebut ???. Pada beberapa blog ada yang menempatkan posisi SHOUTBOX pada sisi atas dengan ukuran layar yang besar, sehingga tidak sulit untuk mencarinya. Tapi ada juga yang menempatkan pada posisi paling bawah, malah ada yang menaruhnya terselip kecil diantara widget-widget lain, sehingga menyulitkan kita mencarinya.

Saya anggap itu sah-sah saja. Setiap orang memberi kesan yang berbeda terhadap beragam widget yang dipasang pada blog. Disatu sisi ada yang menganggap widget A sangat penting dan widget B tidak terlalu penting sepenting widget B. Misalnya Orang yang suka mengekspresikan diri lebih senang menonjolkan widget slide ALBUM FOTO ketimbang widget lain. Yang Hobby Jejaring Sosial lebih suka dengan FOLLOWER dan BLOGROLL dan yang suka cuap-cuap sudah pasti FORM KOMENTAR atau SHOUTBOX jadi andalan. Masalahnya selera kita kadang tidak sama dengan selera pengunjung. Ketika kita memutuskan untuk bergabung dengan globalitas dunia BLOG. Terima atau tidak, indikator tingginya Traffik Kunjungan adalah tujuan yang dikejar hampir semua pengguna blog. Dan hanya satu tips yang diamini semua pemilik blog "MANJAKANLAH PENGUNJUNG". Salah satu Trik memanjakan pengunjung adalah "ramaikanlah Blog dengan berbagai fasilitas WIDGET".

Muncul Masalah. Mana diantara Widget tersebut yang jadi andalan untuk menarik hati pengunjung. Mengandalkan sebuah widget berarti membuatnya lebih menonjol dibanding widget lain dengan harapan ketika berkunjung, mata pengunjung pertama kali langsung melirik widget tersebut. Cara yang paling lazim digunakan adalah menempatkan pada sisi atas BLOG atau memodifikasi sedemikian rupa sehingga menarik perhatian pengunjung, misalnya dengan membuat layarnya lebih besar, membuat animasi MARQUEE, BLINK, SLIDE IN, atau FLOATING. Tapi sayangnya kita tetap tak bisa memuaskan semuanya. Pengunjung datang dengan berbagai karakter dengan selera yang berbeda-beda.

Saya mempunyai satu trik untuk mengatasi hal tersebut, meskipun trik ini juga tidak menjamin bisa memuaskan hati pengunjung. Tapi sekedar untuk tambah-tambah ilmu. Tak ada salahnya. Trik ini saya beri title WIDGET MENU. Ide ini muncul saat saya berkunjung ke sebuah Rumah Sakit Besar dengan berbagai sub spesialisasi. Tujuan saya adalah ke bagian Laboratorium untuk ambil sample darah. Karena ruangannya banyak, saya jadi bingung saya harus jalan ke arah mana, Ke kanan atau kekiri atau keatas atau kebawah untuk menemukan bagian laboratorium. Karena bingung saya pikir saya harus ke depan ke bagian informasi untuk menanyakan. Nah belum sempat bertanya, dihadapan saya, didepan, diserambi RS sudah terpampang besar FLOW CHART (alur pelayanan). Saya urung bertanya dan coba ikuti petunjuk flow chart tadi. Akhirnya ketemu juga tanpa harus bertanya.

FLOW CHART itulah yang saya jadikan ilustrasi WIDGET MENU. Pada prinsipnya WIDGET MENU adalah membuat Menu yang berisi link judul/title semua widget yang kita punya dan menempatkan pada posisi terdepan/teratas. Atau menempatkan pada posisi yang di anggap strategis untuk dilirik pengunjung pertama kali. Dari Link MENU WIDGET tersebut pengunjung bisa menggunakan "JALUR CEPAT" menuju ke sasaran widget yang ingin di tuju. Tinggal Klik langsung "JUMP" ke widget tersebut.

Tehnik membuat WIDGET MENU

Buatlah WIDGET FOCUS semua Widget anda. Caranya bisa anda lihat di artikel WIDGET FOCUS

Setelah itu membuat menu link untuk widget-widget tersebut. Misalnya

MENU WIDGET

<a href="#blogarchives">BLOG ARCHIVES</a>
<a href="#bloglist">BLOG LIST</a>
<a href="#stat">SITE STATISTIK</a>
<a href="#topkom">TOP KOMENTAR</a>
<a href="#fontstylesetting">FONT STYLE SETTING</a>
<a href="#followers">FOLLOWER</a>
<a href="#labelcloud">KATEGORI</a>
<a href="#tagboard">MEDIUM KOMENTAR</a>


Contoh:

MENU WIDGET

• BLOG ARCHIVES


• BLOG LIST


• SITE STATISTIK


• TOP KOMENTAR


• FONT STYLE SETTING


• FOLLOWER


• KATEGORI


• MEDIUM KOMENTAR

Setelah itu posisikan pada posisi yang paling tepat menurut anda paling strategis untuk menarik perhatian pengunjung atau buat trik khusus agar mudah jadi perhatian.
Kalau saya sendiri menggunakan trik Javascript "ALWAYS ON TOP" untuk menyimpan WIDGET MENU. Dengan Trik ALways On Top, dimana pun posisi layar di scroll MENU WIDGET akan tetap muncul pada posisi teratas.

LIHAT CONTOH Menu "JALUR CEPAT". Menu JALUR CEPAT adalah hasil modifikasi WIDGET MENU yang menggunakan Javascript ALWAYS ON TOP Selanjutnya...