Cara Membuat Menu 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 "





30 coment box:

van mengatakan...

makasih sob tutorialnya.. segera kupraktekkan.. mantap..

ZuXuZ mengatakan...

Like Abiss Massssssssssss

Andaresta mengatakan...

@van
selamat mencoba om vin

Andaresta mengatakan...

@ZuXuZ silahkan ci coba gan

izoel mengatakan...

caaaa'eeeeemmmm...........

Andaresta mengatakan...

@izoel silahkan di coba bang izoel

galih jati mengatakan...

siip..pelajaran bagus!!

robbie ismail mengatakan...

Wah, asyik juga artikelnya ini, saya mau coba dulu ya sob.
salam kenal ya.

Sam Azhari mengatakan...

@ galih ..thks gan semoga berguna
@ robbie ..silahkan dan selamat mencoba gan

Anisayu mengatakan...

Ini baru bagus, telah kutemui disini jawapan yg terpendam dihati....
Mantaf nih, kupelajari dg teliti hehehe

fun4u mengatakan...

Have a nice day and also nice blog and visit me back with $mile$ at
http://adsense-adword-info.blogspot.com/

Afoed'z mengatakan...

nice share sob...

Visys mengatakan...

Akhirnya ketemu juga yang Q cari... makacih

BRI Jakarta Veteran mengatakan...

simpan dulu untuk dipelajari terima-kasih kawan sudah sharing.

foto studio mini mengatakan...

goog...buat tmn2 yang mau edit foto online yang mudah dan terjangkau www.fotokeren.co.cc

uzman mengatakan...

bguzzzzz

ella mengatakan...

thx gan .... Ane coba dulu ya ...

Galih Prakosa mengatakan...

susah banget gan
ruwet ! hehehe
tapi alhamdulillah bisa

Rudy Hartono mengatakan...

thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal
http://caramembuatyangakumau.blogspot.com

andika212 mengatakan...

mantap gan...
tp ga bisa gan, alias gagal..
he..he..

tapi thank's atas info'x..
maju terus gan..

curahan hati kehidupan mengatakan...

ijin copas mas bro

Cah@SoLo mengatakan...

mkasih bray,

jsstripler mengatakan...

tq infonya sharing nie,.. buat yg suka bisnis( bisnis yg menghasilkan $1000 dlm seminggu, ini buktinya http://jsstripler.in/bukti-pendapatan-member.php http://findskill7.blogspot.com/2012/03/panduan-jss-tripler-1000minggu.html )

jsstripler mengatakan...

tq infonya gan,.. nitip info ya gan,..bisnis yg menghasilkan $1000 dlm seminggu, ini buktinya http://jsstripler.in/bukti-pendapatan-member.php http://findskill7.blogspot.com/2012/03/panduan-jss-tripler-1000minggu.html

akMaL Dg paLuLu mengatakan...

kok gak kelihatan gan.. ??

Muhimatul Kibtiyah mengatakan...

makasih, terbantu sob

Muhammad Faris Al Fatih mengatakan...

bang ko tetep ga bisa ya ? padahal sudah saya ikuti tutorial artikelnya..

Alfa Einstein mengatakan...

klau gak ktmu ]]> nya

zenal mengatakan...

Very useful information, we are pleased to visit this web hopefully our visit it was acceptable, may we always be successful.

obat maderic asam urat mengatakan...

makasih mau di terapkan nih

Poskan Komentar

coment disini gan