Cara Membuat Menu Horizontal Bercabang Pada Blogger

Kali ini saya membahas tentang cara membuat menu horizontal pada blogger dan kalau rekan-rekan cari di google search mungkin sudah banyak artikel tentang menu horizontal ini.
Tapi saya membahas ini mungkin rekan-rekan ada yang belum tahu caranya membuat menu horizontal bercabang ini, mari kita ikuti cara membuatnya.

Berikut ini gambar contoh dari menu horizontal bercabang

Cara Membuat menu Horizontal Bercabang

1.     Login ke account blogger anda
Pilih Rancangan -> Tataletak -> Edit HTML

cari kode berikut:

]]></b:skin>


2.     Di bagian atas kode tersebut masukkan kode berikut

/* Navbar */ #menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x; opacity: 0.99; filter: alpha(opacity: 98);} #menu-cari{float:right; display:inline; padding:3px 5px 0 0;} #menu ul{padding:0; margin:0;} #menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;} #menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;} #menu ul li a:hover{background-position:0px -60px; color:#ffffff;} #menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;} #menu ul li ul {display:none;} #menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px; display: block; background:#000000; margin:2px; clear:left; margin-top:30px;} #menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;} #menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;} #menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;} .status-msg-wrap{ display:none; }

4.     Klik tombol "Simpan Template"

5.     Buka halaman  "Elemen Halaman"

6.     Pada Elemen header , klik " Tambah Gadget"

7.     Pada kotak dialog html/javascrpit masukkan kode html berikut:

<div id='menu'> <ul> <li><a class='active' href='/'> Home</a></li> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a> <ul> <li><a href='#'>Menu 2.1</a></li> <li><a href='#'>Menu 2.2</a></li> </ul></li> <li><a href='#'>Menu 3</a> <ul> <li><a href='#'>Menu 3.1</a></li> <li><a href='#'>Menu 3.2</a></li> <li><a href='#'>Menu 3.3</a></li> <li><a href='#'>Menu 3.4</a></li> </ul></li> <li><a href='#'>Menu 4</a></li> <ul> </ul> </ul></div>

Lihat Demo

catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
misalnya:
http://trik-blogger-andreas.blogspot.com
atau
http://trik-blogger-andreas.blogspot.com/2010/07/cara-memasang-signature-pada-setiap.html
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

9.     Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

Selamat mencoba semoga berhasil.

Artikel Terkait