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

MENU

• CARA MEMBUAT MENU HORIZONTAL DROP-DOWN (MHD2) DI BLOGGER....
• Menu Horizontal Drop Down (menu bercabang)
• Cara membuat Menu Navigasi bercabang di Blog
• Menu Navigasi Dalam Navigasi Bar (Navbar) / Menu Navigation The Navigation Bar (Navbar)
• Cara Membuat Menu Blogger plus search
• Cara Membuat Menu Drop Down Horizontal Dengan JavaScript
• Membuat Multi Level Drop-Down Menu
• Jquery Multi Level Menu Horizontal
• Menambah Menu Horizontal Multy Drop Down

MENU BERCABANG

• Menu Horizontal Drop Down (menu bercabang)
• Cara membuat Menu Navigasi bercabang di Blog