Membuat navigasi menu pada blog dengan CSS Menu Generator

Mungkin banyak dari anda yang sudah tahu cara membuat menu navigasi pada Blog, maupun cara mengcustomisasinya. Namun pada postingan kali ini saya akan memberikan tips ringan yang tentunya dapat anda aplikasikan pada blog anda yaitu bagaimana cara membuat menu navigasi pada blog namun dengan bantuan aplikasi sederhana bernama CSS Menu Generator. Dari namanya kita tentu tahu bahwa nantinya kode yang dihasilkan berupa CSS Code. Langsung saja ke TKP :

* MEMBUAT MENU *

1. Download aplikasinya di http://www.wonderwebware.com/, install seperti biasa.

2. Jalankan Aplikasinya dan tampilan yang didapat adalah seperti ini :



Keterangan :
a. Kotak Merah adalah tombol untuk membuat menu baru (Menu Utama)
b. Kotak Biru adalah tempat untuk membuat Sub-Menu

3. Sekarang buatlah menu dengan menekan tombol New



4. Pada pilihan Item isi dengan nama menu, lalu isikan Link yang ingin dituju. Isikan hingga sesuai kebutuhan anda.



5. Setelah semua terisi, pilih tampilan menu yang diinginkan dengan memindahkan Tab kesamping menu.

a. Horizontal Menu : Menu dengan arah mendatar

Keterangan : Anda dapat melakukan perubahan pada Menu Settings (KOTAK MERAH) , banyak pilihan yang dapat anda Cuztomise mulai dari Perwarnaan, Jenis Font yang digunakan hingga ukuran font.

b. Vertical Menu : Menu dengan arah tegak



c. Combo –Box Menu : Menu Dropdown



d. Pull-Down Menu : Hampir sama dengan Horizontal menu tetapi mempunyai fungsi Dropdown menu



* MEMBUAT SUB – MENU *

Sama halnya jika kita ingin membuat Sub – Menu, yang harus kita dahulukan adalah penempatan menu akan ditaruh di Sub mana menu yang akan kita buat ??? Sebagai Contoh : Saya akan membuat Sub-Menu pada Menu SOFTWARE.

1. Klik pada menu Software lalu,Pilih tombol New Sub-Item

2. Isikan Nama Sub-Menu dan Link yang dituju



3. Buat lagi menu tersebut sesuai kebutuhan



4. Apabila sudah cukup arahkan tab anda pada Pull - Down menu. Tampilan yang didapat seperti gambar dibawah :



Catatan : ini hanya berlaku pada Pull – Down Menu saja

* MENERAPKAN PADA BLOG *

Setelah berhasil membuat menu saatnya untuk memasangnya pada Blog kita. Yang patut anda lakukan hanyalah copy paste kode CSS dari menu tersebut kedalam template blog kalian.

1. Buka tab HTML/CSS Code

2. Ada dua pilihan kode pada menu tersebut



Kotak Merah : adalah kode CSS menu yang ditempatkan diatas kode ]]></b:skin>
Kotak Biru : adalah kode HTML navigasi menu taruh diatas kode

<div id='NavbarMenu'>

atau

<div id="content-wrapper">

Tergantung template anda.Cukup mudah bukan anda dapat melakukan penyesuaian dengan template anda.

Kode HTML Untuk Membuat Kotak Dalam Posting

Kode ini aku dapatkan dari halaman FAQ situs FLAG counter ketika aku mengkopi paste contoh kodenya. Sepertinya kode ini bisa berguna banget untuk mempercantik penampilan posting ya. Misalkan dalam suatu posting ada suatu kalimat yang ingin ditaruh dalam kotak seperti dibawah ini:

Contoh tulisan yang diletakkan dalam kotak.

Maka cara membuatnya adalah sebagai berikut: pada mode Edit HTML, letakan tulisan yang ingin diberi kotak diantara baris kode yang berwarna biru seperti contoh dibawah ini :

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Contoh tulisan yang diletakkan dalam kotak.</font></p>

*****
Catatan:

Pada waktu kode diletakan pada Edit HTML Posting blogspot, kode akan mengalami perubahan sedikit. Hal itu tidak jadi masalah, kodenya tetap sama hanya saja ditulis dalam bentuk yang sedikit berbeda.

border-right = garis pinggir kotak sebelah kanan
border-left = garis pinggir kotak sebelah kiri
border-top = garis pinggir kotak sebelah atas
border-bottom = garis pinggir kotak sebelah bawah
#6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan
1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan
padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan
padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri
margin-right = jarak kotak dengan pinggir posting sebelah kanan
margin-left = jarak kotak dengan pinggir posting sebelah kiri
20px; 30px; 70px = satuan jarak, rubah sesuai keinginan
font color = warna teks, hapuskan kode ini jika ingin teksnya berwarna seperti warna teks pada posting

Selamat mencoba.