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/AVvXsEiyCulZD8sbVS3pFqk4vel6f27AUdIb3u8dCAEfeH3Q4LO9-OAdxLx_3UfrvoBjZGRBB6M91ZlZNg8nHHfp-j77038riTaLAEApUDGrPvCb7OHLHSDzaM-Ibzdgqreph6SlIwMUWihIiE8/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/AVvXsEh2sln0-jhjfFs8cst-MkhXXBGjCnCmPoBGWJfTO3tPnD7xhL27I0qdFPKl4Nw6eXOut5JYH_LKI2PgwmCwEqYyCErl2S9ria8EyiJl4NoHnH6hIwLShyi7pzZT7kvbvMsYQDz7Q_Twxz0/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/AVvXsEiyCulZD8sbVS3pFqk4vel6f27AUdIb3u8dCAEfeH3Q4LO9-OAdxLx_3UfrvoBjZGRBB6M91ZlZNg8nHHfp-j77038riTaLAEApUDGrPvCb7OHLHSDzaM-Ibzdgqreph6SlIwMUWihIiE8/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/AVvXsEiH7tJlChyvEegRycgtBjBV-13zi2tk5mod8ygASVLNes-JuEGM7Uu6fe3gunbm1L13aZ9e4Jpj_4-rgdY_KgisSH9XR56M2vzxO6y9JBxXoSs626qFMFltt7tUtGRVfgb1vPpXB65DNy4/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
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/AVvXsEiyCulZD8sbVS3pFqk4vel6f27AUdIb3u8dCAEfeH3Q4LO9-OAdxLx_3UfrvoBjZGRBB6M91ZlZNg8nHHfp-j77038riTaLAEApUDGrPvCb7OHLHSDzaM-Ibzdgqreph6SlIwMUWihIiE8/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/AVvXsEh2sln0-jhjfFs8cst-MkhXXBGjCnCmPoBGWJfTO3tPnD7xhL27I0qdFPKl4Nw6eXOut5JYH_LKI2PgwmCwEqYyCErl2S9ria8EyiJl4NoHnH6hIwLShyi7pzZT7kvbvMsYQDz7Q_Twxz0/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/AVvXsEiyCulZD8sbVS3pFqk4vel6f27AUdIb3u8dCAEfeH3Q4LO9-OAdxLx_3UfrvoBjZGRBB6M91ZlZNg8nHHfp-j77038riTaLAEApUDGrPvCb7OHLHSDzaM-Ibzdgqreph6SlIwMUWihIiE8/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/AVvXsEiH7tJlChyvEegRycgtBjBV-13zi2tk5mod8ygASVLNes-JuEGM7Uu6fe3gunbm1L13aZ9e4Jpj_4-rgdY_KgisSH9XR56M2vzxO6y9JBxXoSs626qFMFltt7tUtGRVfgb1vPpXB65DNy4/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.
Anda baru saja membaca artikel yang berkategori Tips Blog
dengan judul Membuat Menu Navigasi Drop Down di Blog. Anda bisa bookmark halaman ini dengan URL http://blog-blog-blogkan.blogspot.com/2013/02/membuat-menu-navigasi-drop-down-di-blog.html. Terima kasih!
Belum ada komentar untuk "Membuat Menu Navigasi Drop Down di Blog"
Posting Komentar