Membuat Menu Omni Melayang Di Blog

Kali ini Saya masih mempersembahkan Blog Tutorial  atas request dari seorang sahabat yang meminta untuk   Membuat Menu Omni Melayang

Sebenarnya ini menu bukan buatan saya,  sumbernya saya ambil dari Dynamicdrive, saya cuma sedikit modifikasi agar bisa berfungsi atau berjalan di blogspot dan disesuaikan dengan template Saya

Dari sumbernya, menu ini bisa ditampilkan di samping kanan, kiri dan atas, namun yang saya ambil adalah yang di sebelah kiri.  Seperti tampak pada blog ini.


Alasan utama mengapa  pada Saya dibuat menu melayang tidak dibuat menu statis di header blog, karena untuk kepraktisan pembaca bisa memilih menu saat posisi content dimana saja.

Caranya sangat mudah,  sobat tinggal copy paste  ke   widget html/javascript. Posisi widget dimana saja tak masalah, mau di sidebar, middle bar, bottom atau di top tergantung ketersediaannya pada template anda.

<!--menu-->
<style type="text/css">
#menu1 a {color:#000000;background-color:#FFFFFF;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:#000000;text-decoration:none;}
#menu1 a:hover {color:#000000;background-color:#FFFF99}
#menu1 a:visited {color:#000000;text-decoration:none;}
</style>

<script src="http://sakahayangdotcom.googlecode.com/files/mmenu.js" type="text/javascript"></script>

<script type="text/javascript">
resizereinit=true;
nama_menu = "SAKAHAYANG MENU";
hdingbgcolor = "#6666CC";  //warna bground nama_menu
hdingcolor  = "#FFFFFF";  //warna text nama_menu
barbgcolor = "#CC0000";  //warna bground bar
barcolor = "#FFFFFF"; //warna text

menu[1] = {
id:'menu1',
fontsize:'100%',
linkheight:22,
hdingwidth:210,

menuItems:[ // REQUIRED!!

["Menu1"], //Judul kelompok Menu1

["Item1", "URL1", ""],

["Item2", "URL2",""],

["Item3", "URL3", ""],

["Item4", "URL4", "_new"],

["Menu2", "", ""], //Judul kelompok Menu2

["Item1", "URL1", ""],

["Item2", "URL2",""],

["Item3", "URL3", "", 1, "no"],

["Item4", "URL4", "", 1]

]}; // Jangan dihapus

make_menus();
</script>
<!--eof menu-->

Structure menu ini terbagi 3 bagian utama.

Bagian style sheet pengaturan warna & background Link Item Menu, bisa sobat sesuaikan biar matching dengan blog sobat.

Bagian kedua script yang sudah saya minify agar ringan saat loading dan di hosting di googlecode. Apabila sobat belum ahli untuk modify javascript, bagian ini tidak perlu diupdate. Bila anda sudah ahli, silahkan download untuk diupdate dan hosting kembali di googlecode milik sobat.

Bagian terakhir adalah bagian pengaturan parameter.

• Warna sesuaikan dengan template sobat biar matching. Judul kelompok menu Tulis ["judul kelompok"],  atau ["judul kelompok","",""],  jangan lupa setiap satu item atau setelah kurung siku penutup beri tanda koma.
• Untuk setiap item menu, penulisan  parameter pertama nama item yang akan ditampilkan, dilanjutkan URL nya. Semua parameter harus didalam tanda kutip, boleh kutip tunggal atau kutip ganda. 
• Bila URL target akan dibuka di halaman (tab) baru pada browser maka parameter ketiga disetting "_new",
• Bila pada satu bar akan diisi dua item maka settingannya pada parameter ke-4  diisi   angka 1 dan parameter ke-5 diisi "no".   Item ini akan  ditampilkan disebelah kiri pada bar tersebut. Untuk item disebelah kanannya cukup dengan parameter ke-4 saja diisi angka 1.
• Untuk item menu yang terakhir  setelah  tanda kurung siku penutup  jangan diberi tanda koma.

demikian tutorial dari saya semoga bermanfaat ya