Cara Membuat Menu Horizontal dengan Sub Menu Vertikal

Hai sobat, ketemu lagi dengan saya di PiMiTemplate tempat tutorial blogger dan tempat tutorial template blogger. berdasarkan judul di atas pasti sobat merasa senang ketika menemukan tutorial blogger ini, kemarin melalui blog saya yang satunya lagi, saya sudah pernah menulis tentang cara cepat dan mudah membuat menu horizontal di blogger, dan kali ini kita akan membahas tentang bagaimana cara membuat menu horizontal dengan sub menu vertikal di blog. seperti di bawah ini.

• Beranda
• About Us
• Tutorial Template Blog
  • Desain Header
  • Desain Menu
  • Desain Postingan
  • Desain Sidebar

Gimana tertarik bukan? kalau udah tidak sabar langsung saja kita menuju ke TKP, Cekidot.

Cara Membuat Menu Horizontal dengan Sub Menu Vertikal

#1. Masuklah terlebih dahulu ke akun blogger sobat;
#2. Pilih blog yang ingin di buat Menu-nya;
#3. Pilih tata letak dan cari Page >> Edit >> Hapus; Setelah itu simpan setelan;
#4. Kalau sudah pilih template >> edit HTML >> Centang Expand Template Widget;
#5. Carilah kode ]]></b:skin>  dengan menekan Ctrl + f;
#6. Setelah ketemu, Salin kode di bawah ini dan letakan kode tersebut tepat di atas kode ]]></b:skin>;

/* ----- NAVBAR MENU ----- */

#NavbarMenu {
width: 100%;
height: 32px;
background:#1C1C1C;
color: #BDBDBD;
margin: 0 auto 0;
padding: auto auto;
font: bold 12px Arial;
}

#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #BDBDBD;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 12px Arial;
}

#nav li a:hover, #nav li a:active {
background:#424242;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #2E2E2E;
width: 150px;
color: #A4A4A4;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 0px solid #444444;
border-left: 0px solid #444444;
border-right: 0px solid #444444;
font: normal 12px Arial;
}

#nav li li a:hover, #nav li li a:active {
background: #444444;
color: #ffffff;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
position: absolute;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

#nav li:hover > a {
background: #444444;
color: #ffffff;
}

.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}


#7. Setelah itu cari kode  </header> dan letakan kode di bawah ini tepat di bawah kode  </header>;

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>

<ul id='nav'>


 <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 <li><a href='#'>About Us</a></li>

 <li><a href='#'>Kategori</a>

  <ul>

   <li><a href='#'>Kategori 1</a></li>
   <li><a href='#'>Kategori 2</a></li>
   <li><a href='#'>Kategori 3</a></li>
   <li><a href='#'>Kategori 4</a></li>

  </ul>

 </li>

 <li><a href='#'>Kategori</a>

  <ul>
   <li><a href='#'>Kategori 1</a></li>
   <li><a href='#'>Kategori 2</a></li>
   <li><a href='#'>Kategori 3</a></li>
   <li><a href='#'>Kategori 4</a></li>
  </ul>

 </li>

 <li><a href='#'>My Blog List</a>

  <ul>

   <li><a href='#' target='_blank'>Blog 1</a></li>
   <li><a href='#' target='_blank'>Blog 2</a></li>
   <li><a href='#' target='_blank'>Blog 3</a></li>

  </ul>

 </li>

<li><a href='#'>Kategori</a></li>

</ul>

</div>
</div>

<!-- end navbar -->


Penjelasan :
Tanda "#" pada kode di atas ganti dengan URL yang sobat inginkan, dan jangan lupa mengganti Tulisan Kategori dan Blog di atas Sesuai URL yang di tuju Tentunya.


#8. Kalau sudah pratinjau terlebih dahulu template sobat dengan menekan pratinjau, jika sudah sesuai dengan selera sobat, simpan template tunggu proses penyimpanan selesai, tutup edit HTML, Selesai.

Muda-mudahan tutorial blogger kali ini bermanfaat ya, ikuti blog ini dan dapatkan tutorial terbaru setiap minggunya. ^_^

Description: Cara Membuat Menu Horizontal dengan Sub Menu Vertikal
Rating: 3.5
Reviewer: Dat-s
ItemReviewed: Cara Membuat Menu Horizontal dengan Sub Menu Vertikal

Anda sedang membaca artikel tentang Cara Membuat Menu Horizontal dengan Sub Menu Vertikal dan anda bisa menemukan artikel Cara Membuat Menu Horizontal dengan Sub Menu Vertikal ini dengan url http://pimitemplate.blogspot.com/2012/05/cara-membuat-menu-horizontal-dengan-sub.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Menu Horizontal dengan Sub Menu Vertikal ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Menu Horizontal dengan Sub Menu Vertikal sumbernya.