Membuat Menu Navigasi Drop Down diblog
Friday 1 February 2013
1
komentar
Membuat Menu Navigasi Drop Down diblog – setelah beberapa kali sobat blogger minta postingan tentang menu Navigasi di blog, Admin masdeitha postingkan deh khusus buat kalian. Sobat blogger mungkin sudah banyak yang tahu tentang kegunaan menu navigasi. Dan bagi kalian yang memeliki banyak label dan ingin dibuat menu Navigasi, mungkin artikel ini bisa sobat blogger coba deh, langsung ajah cara Membuat Menu Navigasi Drop Down diblog ikuti langkah-langkahnya ya sobat :
Silahkan login ke blog kalian masing-masing
Pilihlah Template > edit HTML > (centang) Expand Template Widget
Cari kode ]]></b:skin> biar cepat nyarinya tekan Ctrl + F
Copy kode dibawah ini tepat diatas kode ]]></b:skin>
#navcontainer{background:#fff;height:40px;display:block;overflow:hidden}
#navcontainer .current-cat a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhArfQdhk5c7Ly3VrvQqjnutjDV7QvjQCgTdYxa8krW3Kh0ulAy0pDx0FoQZb7Pq1PiQaTJVs7Rt7hD8qxJpKIA_6B4QWQZ2kc0_AC-mNqTTr_S_HIB4A_1bUSH_uB0ctMCTMqxDJTIeI/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/AVvXsEj6N2o2AlDnd29MrW7Jp1VLvq0RdYEmleivNzj5KW3Wa25uk6gcIImfbGaWE3JrLBTsmw9R-1HgVm7sp-S5PDFuR9RZk9bTfb4rwJoUdgkPDndMo83EntZfLxMvbScvHozGM_WWxI4bZo0/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/AVvXsEjhArfQdhk5c7Ly3VrvQqjnutjDV7QvjQCgTdYxa8krW3Kh0ulAy0pDx0FoQZb7Pq1PiQaTJVs7Rt7hD8qxJpKIA_6B4QWQZ2kc0_AC-mNqTTr_S_HIB4A_1bUSH_uB0ctMCTMqxDJTIeI/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/AVvXsEhbJgsOnHO9PTxveqBV4ceJAnW8deAmJMm3YlCDJMB5rouyyv_28Z414-3uOwq6krLRXkvcK7sF7QrSavUgHiOCRmdvHKfyPIF_YHsFlRFGHs60K1wOf7Ud7wRYTqGYSlFi545tlzFPCZg/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}
#navcontainer .current-cat a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhArfQdhk5c7Ly3VrvQqjnutjDV7QvjQCgTdYxa8krW3Kh0ulAy0pDx0FoQZb7Pq1PiQaTJVs7Rt7hD8qxJpKIA_6B4QWQZ2kc0_AC-mNqTTr_S_HIB4A_1bUSH_uB0ctMCTMqxDJTIeI/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/AVvXsEj6N2o2AlDnd29MrW7Jp1VLvq0RdYEmleivNzj5KW3Wa25uk6gcIImfbGaWE3JrLBTsmw9R-1HgVm7sp-S5PDFuR9RZk9bTfb4rwJoUdgkPDndMo83EntZfLxMvbScvHozGM_WWxI4bZo0/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/AVvXsEjhArfQdhk5c7Ly3VrvQqjnutjDV7QvjQCgTdYxa8krW3Kh0ulAy0pDx0FoQZb7Pq1PiQaTJVs7Rt7hD8qxJpKIA_6B4QWQZ2kc0_AC-mNqTTr_S_HIB4A_1bUSH_uB0ctMCTMqxDJTIeI/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/AVvXsEhbJgsOnHO9PTxveqBV4ceJAnW8deAmJMm3YlCDJMB5rouyyv_28Z414-3uOwq6krLRXkvcK7sF7QrSavUgHiOCRmdvHKfyPIF_YHsFlRFGHs60K1wOf7Ud7wRYTqGYSlFi545tlzFPCZg/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}
Berikutnya cari kode <div id='main-wrapper'> copy code dibawah ini , paste kan tepat diatas kode <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 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='#'>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>
<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 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='#'>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 Pratinjau untuk menjaga-jaga HTML yang kita bikin berhasil atau tidak
Jika sudah berhasil silahkan klik simpan/save
Catatan : - kata yang berwarna merah ganti dengan Nama menu yang sobat inginkan
- ganti symbol # berwarna hijau dengan URL menu Navigasi label blog sobat
Cukup sekian Admin masdeitha postingkan, semoga artikel ini bisa bermanfaat bagi kalian, bagi kalian yang menyukai artikel ini jangan lupa untuk berkomentar dan share ya
- ganti symbol # berwarna hijau dengan URL menu Navigasi label blog sobat
Cukup sekian Admin masdeitha postingkan, semoga artikel ini bisa bermanfaat bagi kalian, bagi kalian yang menyukai artikel ini jangan lupa untuk berkomentar dan share ya
salam manis dari Admin Masdeitha
Judul : Membuat Menu Navigasi Drop Down diblog; Ditulis oleh Ade Sofyan
Jangan lupa follow twitter me on @deithazerro
Artikel Terkait:
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Menu Navigasi Drop Down diblog
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://masdeitha.blogspot.com/2013/02/membuat-menu-navigasi-drop-down-diblog_9349.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
Blog
1 Comments
