Cara bikin menu horizontal di blogger

Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.

Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktik kan.

Oke langsung saja.
Panduan membuat menu horizontal blogger

  1. Login ke dashboard blogger
  2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
  3. Klik Add Gadget / Tambah Gadget.
  4. Pilih/klik opsi HTML/Javascript
  5. Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
  6. Klik Save / Simpan
  7. Selesai

Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)

Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 – 5)

lihat kode

Keterangan.

ganti tanda pagar ( # ) pada kode dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1Menu 5 dengan nama menu yang teman inginkan.

Selamat mencoba dan semoga berhasil

Update  21 Mei 2012
Untuk mengatur lebar dan tinggi menu nya silakan edit pada bagian

.nav { background:#f5f5f5;width:100% z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;

Nah silakan rubah lebarnya dengan merubah angka 100% dengan lebar yang kamu inginkan, biasanya ditulis dalam ukuran px (contoh : width: 900px).

Ganti angak 35 pada kode  height:35px untuk mengatur tinggi menu.

Untuk mengedit yang lainnya silakan dicoba edit sendiri CSS nya. Yang saya maksud CSS itu adalah kode
sampai kode

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s