langsung ajha
berikut ini contoh gambar horizontal branch off (menu horizontal bercabang)
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>
