Cara membuat menu navigasi dengan gambar

Bosan dengan tampilan menu navigasi blogmu?

Coba yang satu ini!

Menu navigasi dengan icon bergambar

Inspirasi ini aku dapat ketika aku sedang mengotak-atik menu navigasi blogku,aku mencoba mencari gaya baru dalam tampilan menu navigasi.Awalnya aku hanya coba-coba membuat link pada sebuah gambar,terpikir untuk membuat menu navigasi dengan icon gambar.Hal ini pastinya akan membuat tampilan blog kita lebih hidup dan berwarna.
OK...Langsung saja kita praktekkan!

Sebelum nya apakah kamu sudah punya gambar untuk di jadikan tombol navigasi nya?Jika belum klik disini untuk melihat contoh gambar yang telah aku buat,dan jika kamu suka silahkan copy saja image locationnya.Atau save as image nya jika kamu ingin meng-edit ulang gambar nya.

Langkah awal:

=> Jika kamu sudah siap dengan gambar nya maka kamu harus meng-upload terlebih dahulu gambar tersebut ke tempat hosting file,misalnyawww.photobucket.com atau http://my.imageshack.us .Jangan lupa registrasi dulu agar kamu bisa upload file kamu di website tsb.Dan ambil kode direct link gambar tsb.( jangan lupa simpan dulu di notepad).

=>Jika kamu ingin menggunakan gambar yang telah aku sediakan maka kamu tidak usah repot-repot meng-uploadnya.Cukup meng-copy link location nya saja.(Cara nya klik kanan pada gambar nya,kemudian pilihcopy image location) jangan lupa simpan dulu di notepad.

Langkah berikutnya:

=>Membuat link pada gambar yang akan kamu jadikan icon menu navigasi.

Contoh kode html nya:

Next...

=> Seperti biasa login di blogger dengan id kamu sendiri.

=>Klik Rancangan => Edit HTML => centang “expand widget template”.

=>Cari kode berikut: <b:section class='header' id='header' maxwidgets='1'

=>Ubah angka 1 menjadi angka 2 pada kode tersebut.(Hal ini di tujukan agar pada bagian header blog kamu bisa ditambahkan widget baru).Jangan lupa simpan template.

Langkah selanjutnya:

=>Klik Elemen halaman=>Tambah gadget=>pilih HTML/Javascript=>kemudian copy/paste kode html pembuatan link pada gambar yang telah di buat seperti contoh di atas.jika ingin menyesuaikan ukuran gambar yang ingin di tampilkan,klik “Rich text“ kemudian klik pada gambar maka akan muncul border pengeditan,ubah sesuai keinginanmu.Cek hasil pengubahannya klik "Edit html"kemudian cari kode ukurannya lalu kamu sesuaikan kembali dengan ukuran yang seimbang sesuai keinginan.Jangan lupa simpan dulu,okay...