Membuat Menu Navigasi Drop Down di Blog

Menu navigasi berfungsi untuk mempermudah pengunjung blog / website dalam  memilah artikel sesuai kategoti atau label, dengan menu navigasi blog akan terlihat lebih cantik.

Menu navigasi drop down sangat  perlu di pasang pada blog yang mempunyai banyak kategori, dengan menu drop dwon semua label bias tercover .

Untuk membuatnya :
1. copy code script di bawah ini :

#navcontainer{background:#fff;height:40px;display:block;overflow:hidden}
#navcontainer .current-cat a{background:url(http://4.bp.blogspot.com/-FCIY4YGHTGU/TX5GDvo5ckI/AAAAAAAABfU/7X9vPzIE7k0/s1600/nav-hover.png) left top repeat-x;;color:#FFF;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
#nav a,#subMenusContainer a{text-decoration:none;display:block}
#nav a{margin:0 1px 0 0;float:left;padding:14px 16px;text-transform:uppercase;color:#333;font-weight:bold;font-size:12px}
#subMenusContainer a,#nav li li a{color:#FFF;font-size:12px;text-align:left;background:#333 url(http://3.bp.blogspot.com/-mOaFYwPd-XY/TX5G0uRIReI/AAAAAAAABgM/W42MijLMkoU/s1600/submenuscontainer-line.png) left top repeat-x;padding:8px 26px}
#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:url(http://4.bp.blogspot.com/-FCIY4YGHTGU/TX5GDvo5ckI/AAAAAAAABfU/7X9vPzIE7k0/s1600/nav-hover.png) left top repeat-x;color:#FFF;-moz-border-radius:5px 5px 0 0;-khtml-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
#nav .current-cat a:hover{}
#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{background-color:none;color:#8D918A}
.subMenuParentBtn{background:url(../img/arrow_right.gif) right center no-repeat}
.subMenuParentBtnFocused{background:url(../img/arrow_right_over.gif) right center no-repeat}
.mainMenuParentBtn{}
.mainMenuParentBtnFocused{}
.smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px}
#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#nav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 0;height:40px;display:inline;background:url(http://4.bp.blogspot.com/-EqXli5qbxaM/TX5GD2qcG6I/AAAAAAAABfc/h8ZvJN291RY/s1600/nav-seperator.png) right center no-repeat}
#subMenusContainer li{list-style:none}
#nav{width:950px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
#nav .children{display:none}
#subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000}
.rssbox{background:#FFF;border:1px solid #ECEAEA;padding:10px;margin:10px 0 0 0}
.rssbox:hover{background:#EDEFEB;border:1px solid #DFDDDD}
.rssbox a{color:#2C2E30;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}

2. masuk ke menu dashboard>> rancangan >>> edit HTML
3. paste code di atas tepat di atas kode  ]]></b:skin>
4. kemudian cari kode <div id='main-wrapper'>
5. copy code dibawah ini tepat diatas <div id='main-wrapper'>

<div id='navcontainer'>
<ul id='nav'>
<li class='current-cat'><a href='GantiDenganURLBlogKamu'>Home</a></li>
<li><a href='#'>Kategori 1</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>

<li><a href='#'>Drop Down 4</a></li>
<li><a href='#'>Drop Down 5</a></li>
</ul>
</li>
<li><a href='#'>Kategori 2</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>
</ul>
</li>

<li><a href='#'>Kategori 3</a>
<ul class='children'>
<li><a href='#'>Drop Down 1</a></li>
<li><a href='#'>Drop Down 2</a></li>
<li><a href='#'>Drop Down 3</a></li>
</ul>
</li>
<li><a href='#'>Shout-Box</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Directories</a></li>

<li><a href='#'>Contact Us</a></li>
</ul>
</div>


6. Klik save. Dan lihat hasilnya


sumber 
Membuat Menu Navigasi Drop Down di Blog 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Share 'Membuat Menu Navigasi Drop Down di Blog' On ...

Belum ada komentar untuk "Membuat Menu Navigasi Drop Down di Blog"