Membuat Horizontal Menu dengan Sub Menu yang Keren


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.com

2. 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

Related Posts

Membuat Horizontal Menu dengan Sub Menu yang Keren
4/ 5
Oleh

33 comments

4 February 2012 at 11:58 delete

wah ada softwarenya to gan, ane kira ngeracang sendiri. mantap ni, ane coba gan. tenkyu ya.

Reply
avatar
13 February 2012 at 09:27 delete

sip gan,, ane mau ke tkp dulu pingin liat2

Reply
avatar
15 February 2012 at 22:49 delete

Woowww trik n tips bloggernya bgs sob... ada banyak pilihan buat sub menu horisontalnya... sukses terus sob. salam sukses

Reply
avatar
18 February 2012 at 18:49 delete

makasih bang. dari kemaren saya cari2 yang seperti ini. soalnya yang pakai kode2 sulit, kodenya g sama.
oia sekalian mo tanya nie bang. saya pernah download dari sini (http://www.designedmenus.com/), tapi cara penggunaannya saya g faham. mohon pencerahnnya.
makasih sebanyak2 nya.

Reply
avatar
18 February 2012 at 18:50 delete

mo tanya lagi nie bang.
kalau buat pos koment seperti ini cara nya gmn bang?
maklum ane masih baru di blog. :)
makasih.

Reply
avatar
18 February 2012 at 21:17 delete

mas instuksi instalasinya yang punya saya g sama.
harus saya letakkan dimana mas? apa juga sama di letakkan di sesudah "/head"?
mohon penjelasannya.
makasih

Reply
avatar
1 March 2012 at 11:28 delete

mantep pas banget lagi dibutuhin ni sodara moga bertambah ilmunya ya...good luck

Reply
avatar
11 March 2012 at 17:27 delete

Code yg diatas Head itu stlyenya memang itu Dorektorinya!!!

Tolong Di balas ya !!!

n' Follow me !! ya

Reply
avatar
Anonymous
16 March 2012 at 07:16 delete

Maaf mas saya mau bertanya, klu pd bloger dmn ya pada langkah no
"3. Upload semua gambar yang berada di folder images ke tempat hosting sahabat (photobucket, picasa, tinypic, imageshack, dsb)"
sebelumnya terimakasih bgt mas....

Reply
avatar
28 March 2012 at 14:47 delete

uda sy coba gan, setelah selesai smua trus ada kesalahan
Galat saat mengurai XML, baris 834, kolom 63: The entity name must immediately follow the '&' in the entity reference.

tu..kenapa ya ...sy emang gak famam sama x bahasa html ni..
bantuin donk..

Reply
avatar
26 April 2012 at 13:42 delete

Maaf ya gan...hehe ane baru OL sekarang XD... maaf banget....

buat @ale kaleng @ary putra @abie darmaone >> sama-sama bos... lanjutkan hehe :D

buat @dewi >> hm...designedmenus.com ? wah saya malah baru tahu ini ... boleh dicoba nih...kapan" kalau udah bisa pasti saya posting deh :D ... post komen? oh seperti ini udah pernah saya bahas kok disini :) .... YUPS sesudah '/head' tapi ada jg yg sblum 'head'

buat @wahyu blogger >> itu agan upload dulu cssnya di direktori agan, ato kalau pengen dipasang diblogger coba upload di hosting lain :)

buat @anonymous >> itu sahabat harus uploaad gambarnya di hosting yang menyediakan layanan upload gambar seperti photobucket.com atau google picasa (daftar dulu disana kemudian upload gambarnya) :)

buat @ummu yusuf >> wah,,agan pasangnya dimana di web ya?

sebelmumnya maaf ya untuk semua sahabat, karena saya baru bisa balas ini semua sekarang, maaf banget :(

Reply
avatar
16 May 2012 at 12:10 delete

Sangat membantu gan.keren..ane orang baru blajar ngblog..suwun.

Reply
avatar
13 June 2012 at 12:48 delete

saya ga bisa gan , apa beda template ? ato gimana ?

terus mau tanya gan , kalo yg dinamis itu ga bisa pasang header ya agan ? thankss before :D

Reply
avatar
13 June 2012 at 18:13 delete

@ricardo : mau di pasang dimana gan? ... iya gan sepertinya saat ini blm bisa diberi gambar di headernya soalnya tampilan minimalis ... :)

Reply
avatar
14 June 2012 at 12:17 delete

dimana apanya nih ? mau buat drop down nya gabisa ?
harus pake template apa ya gan ?

Reply
avatar
14 June 2012 at 15:47 delete

mas saya pengen template seperti punya mas,
download atau bkin sendiri ?
kalo download download dmna?
trimakasih

Reply
avatar
19 June 2012 at 10:11 delete

@ricardo > mau dipasang di website atau di blogger ? :)
@I'M Sad > ane cuma download gan, trus ane edit" sendiri :D

Reply
avatar
26 June 2012 at 06:46 delete

cara upload menu_assetsnya gimana ? hosting lain misalnya apa?

Reply
avatar
26 June 2012 at 20:52 delete

tinggal diupload aja ke dalam hosting agan, banyak kok kalau cuma hosting gambar :) coba pake Picasa aja gan, lebih enak :D

Reply
avatar
3 July 2012 at 01:22 delete

keren gan infonaa..makasihh!

Reply
avatar
3 August 2012 at 21:10 delete

bang lok mw postngin ke web gmn??
cz gk da tutorial na msuk kmn....
udah bkin menu na pi bngung mw postingin ke web na

Reply
avatar
11 September 2012 at 21:42 delete

punyaku gak ada folder images?

Reply
avatar
12 September 2012 at 19:58 delete

udah di download blm sob? ada kok didalem .rar

Reply
avatar
24 September 2012 at 11:14 delete

sama sperti ummu yusuf

The entity name must immediately follow the '&' in the entity reference.

kenapa itu ya mas.?
format emank agak beda dg yg punya mas d'blog ini.
mohon bantuannya..

Reply
avatar
24 September 2012 at 17:41 delete

agan masangnya di website apa di blogspot? :)

Reply
avatar
3 October 2012 at 17:11 delete

Postingan yang Sangat bagus dan menarik untuk dibaca tentang membuat horizontal menu dengan sub menu .... Saya suka mengunjungi blog ini.

Reply
avatar
6 October 2012 at 07:28 delete

benar benar mantab gan,, ni yg ane cari2 akhir2 ni maklum lah gan masih pemula, trims banyak guru atas ilmunya :)

Reply
avatar
16 November 2012 at 22:46 delete

tapi punya gw nggak bisa bisa ya gan,,,,
gagal terus,,,

Reply
avatar
22 November 2012 at 05:35 delete

gan saya mau nanya.
saya udh selesai buat menu di web css maker.
yang saya tanyakan, kenapa stelah saya download tidak ada folder utk gambar nya??
kemudian stelah saya masukin kode sesuai petunjuk agan, tapi kenapa tidak bisa.

Reply
avatar
27 November 2012 at 18:57 delete

saya suka blok anda tentang membuat horizontal menu dengan sub menu, saya berharap untuk melihat lebih banyak dari anda. apakah anda menjalankan situs lain????

Reply
avatar