Menu Horizontal Drop Down (menu bercabang)

Salam persahabatan, trik blogger kali ini share tentang menu horizontal drop down untuk blogger pemula yang ingin memasang menu horizontal dan juga sekedar untuk koleksi menu horizontal.

Untuk lebih jelasnya sobat bisa lihat demonya dengan mengklik tombol di bawah ini

Lihat Demo


Langsung saja kita ikuti tutorial berikut ini :

Masuk ke Blogger

Pilih Design >> Edit HTML

Cari kode  ]]></b:skin>

Copy dan pastekan kode script di bawah ini tepat di atas kode tadi

#trikbloggermenucontainer{height:37px;display:block;padding:0 0 0 0;font:12px Arial,Tahoma,Century gothic,verdana,sans-serif;font-weight:normal;background:#191917;border-bottom:1px solid #3d3d3d}
#trikbloggermenu{margin:0 auto;padding:0 0;height:37px;overflow:hidden;width:1000px}
#trikbloggermenu ul{float:left;list-style:none;margin:0;padding:0 10px}
#trikbloggermenu li{float:left;list-style:none;margin:0;padding:0}
#trikbloggermenu li a,#trikbloggermenu li a:link,#trikbloggermenu li a:visited{color:#999;display:block;margin:0;padding:0 10px;line-height:37px}
#trikbloggermenu li a:hover,#trikbloggermenu li a:active{color:#fff;margin:0;padding:0 10px;line-height:37px;text-decoration:none}
#trikbloggermenu li.current_page_item a{background:#034E9D;color:#fff}
#trikbloggermenu li li a,#trikbloggermenu li li a:link,#trikbloggermenu li li a:visited{background:#363737;width:150px;color:#bebebe;float:none;margin:0;padding:0 10px;font-weight:normal;line-height:30px;border-bottom:1px solid #212121}
#trikbloggermenu li li a:hover,#trikbloggermenu li li a:active{background:#4a4a4a;color:#fff;padding:0 10px;line-height:30px;border-left:none;border-right:none;border-bottom:1px solid #212121}
#trikbloggermenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:5px;background:#1C1C1C}
#trikbloggermenu li li{}
#trikbloggermenu li ul a{width:140px}
#trikbloggermenu li ul a:hover,#trikbloggermenu li ul a:active{}
#trikbloggermenu li ul ul{margin:-36px 0 0 170px}
#trikbloggermenu li:hover ul ul,#trikbloggermenu li:hover ul ul ul,#trikbloggermenu li.sfhover1 ul ul,#trikbloggermenu li.sfhover1 ul ul ul{left:-999em}
#trikbloggermenu li:hover ul,#trikbloggermenu li li:hover ul,#trikbloggermenu li li li:hover ul,#trikbloggermenu li.sfhover ul,#trikbloggermenu li li.sfhover1 ul,#trikbloggermenu li li li.sfhover1 ul{left:auto}
#trikbloggermenu li:hover,#trikbloggermenu li.sfhover1{position:static}

Setelah itu cari kode <div id='main-wrapper'>


Copas kode di bawah ini tepat di atas kode tadi

<div id='trikbloggermenucontainer'>
<div id='trikbloggermenu'>

<ul>

<li class='current_page_item'><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-1a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-1b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-1c</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2c</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-2d</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-3a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-3b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-3c</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-4</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5b</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5c</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-5d</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-6a</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Menu-6b</a></li>
</ul>
</li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-7</a></li>

<li><a href='Your-Link-Here' title='Link-Title'>Menu-8</a></li>


</ul>

</div>
</div>

Kemudian simpan template sobat dan lihat hasilnya

Selamat mencoba semoga berhasil dan salam blogger !!!

Artikel Terkait