Membuat Horizontal Menu dengan Sub Menu yang Keren

Jangan asal Copy/Paste karena Blog juga merupakan hasil Karya Cipta. Biasakan untuk meminta ijin kepada pemilik karya atau paling tidak menyebutkan sumber asal. Hitung-hitung bersilaturahmi dan memperluas pergaulan, bukan?

Sebenarnya saya sudah membahas mengenai bagaimana cara membuat horizontal menu pada blogspot dengan cara yang sederhana dan diambil dari blogger sendiri. Namun kali ini saya akan menambahkan bagi sahabat tentang cara membuat horizontal menu dengan menggunakan subnya, seperti yang bisa sahabat lihat pada blog saya ini. Nah, dengan menggunakan model sub menu atau multi menu ini, sahabat dapat lebih mudah dalam memberikan layanan 'shortcut' atau 'jalan pintas' menuju sebuah link bagi para pengunjung setia blog sahabat.

Oke, bagi sahabat yang tertarik ingin menggunakan model ini caranya cukup mudah, saya akan menggunakan fasilitas dari cssmenumaker.com yang menyediakan layanan pembuatan menu horizontal maupun vertikal secara gratis (sebenarnya ada juga yang harus bayar) seperti halnya dengan menggunakan flashvortex.com yang sudah saya bahas disini. Ya...daripada lama-lama ngomong lebih baik langsung saja kita ke pokok permasalahannya.

1. Langkah Pembuatan :

1. Langsung menuju ke www.cssmenumaker.com2. Setelah masuk ke situs tersebut, akan ada banyak tombol pilihan. Karena kita akan membuat horizontal menu dengan subnya, maka kita pilih pada 'Drop Down Menus' (lihat gambar jika belum jelas)



3. Akan ada banyak pilihan lagi, nah untuk yang ini sahabat boleh memilih sesuka hati. Misal saya pilih yang Orange (lihat gambar)



4. Setelah itu klik Tombol Customize, maka akan muncul Step 1: Create Menu Structure. Klik tombol Add Button. Pada step pertama ini sahabat disuruh untuk memasukkan nama-nama menu utamanya. Misal : Home, Tutorial, dsb. (lihat gambar)







5. Nah, setelah membuat menu utama, sekarang sahabat tinggal menambah sub menunya caranya klik tombol di samping nama menu utama yang akan di berikan sub. Misal, saya akan menambahkan sub menu pada menu Tutorial yg sudah saya buat tadi. (lihat gambar)



6. Jika sudah, maka sahabat disuruh untuk mengisi sub menunya, silahkan isi sesuai kebutuhan. Misal saya akan menambahkan 'sub 1' dan 'sub 2'. Lalu jika sudah, klik tombol 'Back To Main Menu'. (lihat gambar)



7. Kemudian sahabat akan kembali ke menu utama pembuatan, klik saja tombol 'Preview Menu' (lihat gambar)



8. Nah, sekarang dapat dilihat menu yang sudah sahabat buat. Masukkan email sahabat lalu klik tombol 'Download'



9. Maka, akan ada pesan seperti ini,



10. Cek email sahabat dan buka pesan dari css menu maker, kemudian klik link download yang diberikan.



11. Complete. Sekarang sahabat tinggal mengikuti perintah yang diberikan oleh cssmenumaker untuk memasangnya di blog/website. (jangan lupa untuk extract file zip-nya terlebih dahulu)


2. Memasang CssMenuMaker di Blogspot/Blogger

1. Masuk ke Template --> Edit HTML --> centang box 'Expand Widget Templates'

2. Cari kode ]]></b:skin> lalu masukkan kode css yang berada di dalam file menu_style.css hasil dari download tadi (di dalam folder menu) di atas kode ]]></b:skin>

3. Upload semua gambar yang berada di folder images ke tempat hosting sahabat (photobucket, picasa, tinypic, imageshack, dsb)



4. Ganti semua url gambar background css menu tadi sesuai dengan alamat gambar dari hosting yang telah sahabat upload. Sebagai contoh kode berikut ini :

background: url(images/nav-bg.jpg);

Ganti images/nav-bg.jpg dengan url gambar di hosting sahabat misalnya

http://lh5.googleusercontent.com/album/menu/nav-bg.jpg

Maka akan menjadi seperti ini :

background: url(http://lh5.googleusercontent.com/album/menu/nav-bg.jpg)

5. Buka file installation_instruction.html di dalam folder hasil download tadi, kemudian ikuti petunjuk berikut :

6. Complete !!, simpan Template dan silahkan cek hasilnya :D


Sekian tutorial dari saya, semoga membantu dan bermanfaat bagi sahabat...Salam sahabat blogger .!!this blog was supported by crystal x

sumber :  http://caraindra.blogspot.com/2012/01/membuat-horisontal-menu-dengan-sub-menu.html