Cara Mendesign Menu Bar blog Sendiri dengan Mudah

Pada tutorial kali ini, akan dijelaskan mengenai bagaimana cara membuat serta mendesign “Menu Bar” sendiri pada blog kita agar terlihat lebih menarik sesuai dengan keinginan kita. Yang dimaksud dengan “menu” disini ialah bar yang terlihat seperti layaknya tombol yang berisi berbagai pilihan item yang  biasanya terletak dibagian atas sisi blog.


Tampilan menu bar yang menarik dapat memberikan kesan elegan pada blog/website itu sendiri. Tidak hanya itu, mendesign menu sendiri dapat memberikan kesan menarik pada blog/website tersebut sesuai dengan apa yang kita inginkan. Bagi para blogger senior, tutorial ini mungkin terbilang cukup jadul. Tetapi, bagi para blogger pemula, mungkin tutorial ini akan sangat bermanfaat. Pada kesempatan kali ini, akan dijelaskan mengenai cara membuat serta mendesign sendiri menu bar tersebut dengan menggunakan website generator khusus CSS, yakni Onlinehtmltools.com.

Onlinehtmltools.com merupakan CSS web generator online yang memudahkan kita dalam mendesign element blog/web kita sendiri, seperti “tombol”, “menu”, “favicon”, “pop up window”, dll. Penggunaannya pun cukup mudah. Berikut ini langkah-langkah mendesign menu bar sendiri pada Blog/Website menggunakan web generator tersebut:

1.  Silahkan kunjungi terlebih dahulu websitenya, klik disni. Berikut ini ialah tampilan dari website tersebut :

• Lingkaran 1 -- Preview sementara menu yang akan kita buat
• Lingkaran 2 -- Pilihan warna pada menu yang akan kita buat (silahkan lakukan uji coba sendiri dan liat hasil previewnya)
• Lingkaran 3 -- Pengaturan tampilan menu, seperti panjang menu bar, lebar menu bar, jenis huruf, dll (silahkan lakukan uji coba sendiri dan liat hasil previewnya)
• Lingkaran 4 -- Item-item yang akan kita lampirkan pada menu yang akan kita buat (silahkan lakukan uji coba sendiri dan liat hasil previewnya)

2.  Lakukan pendesignan sesuai dengan keinginan dan kebutuhan kita. Pertimbangkan pula jenis template yang kita pakai pada blog/website kita sebagai acuan pertimbangan untuk memilih warna, panjang, lebar, jenis huruf, dll pada menu bar yang akan kita buat.

3. Setelah semua hasil design selesai dan dirasa sesuai dengan keinginan kita, pada sisi kanan website tersebut, pilih “Grab the menu code” yang mana akan muncul jendela pilihan kode seperti tampilan berikut :

4.  Copy kode CSS dan kode HTML tersebut pada template blog/web kita (kode Javascript tidak perlu dimasukan).

• Pada kolom kode CSS, letakan kode tersebut diatas  ]]></b:skin> ,
• Pada kolom kode Html, lakukan pengeditan terlebih dahulu pada kode tersebut sebelum meletakannya pada template, yakni pada kode <a href="#" dengan menambahkan link url yang diperlukan sesuai dengan item-item menu yang telah dibuat tadi sehingga menjadi <a href="http://contoh.com/blablabla.html" dan kemudian, setelah semua pengeditan tersebut selesai, barulah letakkan kode tersebut diatas </header>,

5. Simpan template dan lihat hasilnya :)

NB :

1. Lakukan backup template terlebih dahulu sebelum mengedit
2. Kesalahan pengeditan serta hal yang lainnya merupakan tanggung jawab anda sendiri.

Selamat mencoba, semoga bermanfaat..

***