Menu Navigasi

Menu Navigasi Drop Down
Untuk kalian yang merasa mempunyai banyak label saya sarankan menggunakan jenis ini agar semua kategori post dapat dimuat disana. copy code dibawah ini

#navcontainer{background:#fff;height:40px;display:block;overflow:hidden}
#navcontainer .current-cat a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8EvN98JJRoM95LamJ8ysREyxZTj5cNUda57nW1OQq06O3abvO2aPDoytbZua2Fg-kvQFuotO-uMICZAWl9bhSW36PsSgBiTGKlR_BPTV_qlZ7Xfp4oSMPBphyVOoQUKifyjjHkY6GuQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiax7Bv6BGv82fsgXLc6858cnZxcKSYzVfk63TNS2pjNselFCKtihukQNSmbwmbyJTvBevqvBww0eEcg5gg3K5DZpTnu6BNSgJL56xG4hCYX-4kH-GfiHtd-yClUR2tWWbetLyv5-Y21hU/s1600/submenuscontainer-line.png) left top repeat-x;padding:8px 26px}
#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8EvN98JJRoM95LamJ8ysREyxZTj5cNUda57nW1OQq06O3abvO2aPDoytbZua2Fg-kvQFuotO-uMICZAWl9bhSW36PsSgBiTGKlR_BPTV_qlZ7Xfp4oSMPBphyVOoQUKifyjjHkY6GuQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiS-dvFHbFB6MBuRi7fIFQkAKYMt5-Qj8avB3cAWKIkkiGBrQ_Grh6VHiVl-6QSNB1nqiixUBzbFKWSAfQuz2lhkoHqX5XpjJ-uh_srWVRbgnsrjFVNEEjTUDuUt4Jk7HctXeoydZmk4/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}

Masuk ke dashboard kalian dan pada menu rancangan/design pilih Edit HTML, pasang kode diatas tadi tepat di atas kode ]]></b:skin>

Berikutnya cari kode <div id='main-wrapper'> copy code dibawah ini tepat diatasnya

<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>

Klik save. JIka ingin melihat demonya dulu silahkan cek di SINI


Menu Navigasi Sederhana
Menu navigasi jenis ini menurut sangat cocok bagi blog yang mempunyai label sedikit. Copy kode dibawah ini

.basictab{
background: #33889f ;
border-top: #000000 0px solid;
height: 25px ;
padding: 10px 0;
margin-left: 0;
margin-bottom: 20px ;
font: bold 20px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -khtml-border-top-left-radius:10px; -khtml-border-top-right-radius:10px; border-radius:10px 10px 0 0; border-bottom : #111111 solid 4px;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 0px 7px;
margin-right: 3px;
border-right: 1px solid #ffffff;
background-color: #33889f;
color: #000000;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #33889f;
color: #000000;
}
.basictab li a:active{
color: #ffffff;
}

Cari kode ]]></b:skin> lalu simpan kode yang tadi kamu copy tepat di atasnya, jika sudah copy lagi kode dibawah ini.

<ul class='basictab'>
<li class='selected'><a href='URLblogkamu'>Home</a></li>
<li><a href='#'>Kategori 1</a></li>
<li><a href='#'>Kategori2</a></li>
<li><a href='#'>Kategori 3</a></li>
<li><a href='#'>Kategori 4</a></li>
</ul>

Klik save, menu navigasi kalian sudah selesai. Kalau panjangnya belum pas sobat samakan ukuran width nya dengan main wrapper.
Kalian dapat mengubah tulisan Kategori 1 dan seterusnya dengan kata-kata kalian sendiri, jangan lupa ganti tanda # dengan URL yang mengarahkan pada halaman tersebut.