KTU | Cara Membuat Menu Laman Bercabang di Blog

Salam blogger kawan, kali ini saya coba berbagi sedikit cara membuat menu bercabang di blog atau biasa di sebut horizontal branch off ..

berikut ini contoh gambar horizontal branch off

ok kawan langsung aja kita ke tkp 

• seperti biasa harus login dulu ke blogger -> tata letak -> edit HTML ( jangan lupa expand widget )

kalau sudah cari kode berikut  ]]></b:skin>

 kalau udah ketemu masukan kode di bawah ini tepat di atas ]]></b:skin>

/* 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;

}

• simpan template 
• buka halaman ( element halaman )
• pada header halaman klik tambah gadget ( htmlm/java script )
• selanjut nya tinggal masukin kode 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>

• catatan:
  Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
• selamat mencoba

" terimakasih telah mambaca artikel cara membuat menu bercabang di blog"

" sebagai pengunjung yg baik selalu meninggalkan komentar "

Related Articles :