Membuat Menu Navigasi Drop Down di Blogspot


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjNGQxt6HHtzlK3YzhPrERESNaNP7spUQTlTtwuPORQ1I-g4nDfxjwtgSbxtn3Q05gjTJd0viZT35ndebDMadLkBQXhJSYTe58ErlWTTavbVPtZRrzPx_665DbpY5DtB40LLgY1FZP8U/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/AVvXsEio6ZM4SKXy8W0eHAdNoDw_w9cTn1fRD-NC74-aZ6uR21-IOqZXuXQ_D5JutGwjpXUlGKFEeoG4i_qS9ltlg9GqKzK7X1nOYhhJ20Qs2GrY_LoZ6suLhas5-_TZB-x8kVgFf5EtIvwqLDs/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/AVvXsEjHjNGQxt6HHtzlK3YzhPrERESNaNP7spUQTlTtwuPORQ1I-g4nDfxjwtgSbxtn3Q05gjTJd0viZT35ndebDMadLkBQXhJSYTe58ErlWTTavbVPtZRrzPx_665DbpY5DtB40LLgY1FZP8U/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/AVvXsEi7NVgKYoOzqLFgXG7IktjSI3-p0nfVRnXC4A9XZ9Kl9aev87AhwX-EutZEf1GaKCKceen5oab0O8f-143B1jxCR9SkK2mqA9-Ttm86-Xtn2m-NFs0vhDiNlFezWZu9fwlFVOPGHgy8EAE/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.
Demo menu dropdown bias di lihat di sini

Tag : Blogger, Tutorial
3 Komentar untuk "Membuat Menu Navigasi Drop Down di Blogspot"

hemmmmm nant insyallah saya coba dah gan . .

silver-haired carefree United Xingshun blessing in Shanghai is special for 3000 pairs the elderly magnetic exercise more shoes ",

ini blog dofollow , U comment I follow

Back To Top