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}Setelah itu cari kode <div id='main-wrapper'>
#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}
Copas kode di bawah ini tepat di atas kode tadi
<div id='trikbloggermenucontainer'>Kemudian simpan template sobat dan lihat hasilnya
<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>
Selamat mencoba semoga berhasil dan salam blogger !!!
1 komentar:
Thanks for the sharing...
nice post
Posting Komentar