Cara membuat Kategori kebawah (drop down category) di Blogger

Nah, buat kalian smua yang punya blog pasti bingung gimana cara buat kategory yg kyk gbr disamping. Kali ini saya akan menjelaskan bagaimana membuat drop down kategory seperti gambar disamping.








Caranya sebenarnya tidak terlalu sulit, namun hanya butuh ketelitian. (BIASAKAN BACA TUTORIAL DARI AWAL HINGGA AKHIR):
1. Buka Layout (Tata Letak), Add Gadget (tambahkan Gadget), HTML/JavaScript.
2. Copykan kode berikut:

<!-- start navmenu -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>Home</a></li>
<li><a href='LINK'>CATEGORY 1</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
</ul>
</li>
<li><a href='LINK'>CATEGORY 2</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<!-- ADD MORE CATEGORIES HERE -->
</ul>
</div>
</div> 
<!-- end navmenu -->

3. Ubah yang berwarna merah dengan URL/Linknya dan warna biru dengan nama kategory masing-masing.
4. Untuk menambah kategori lagi, copas code berikut ini dan taruh dibawah tulisan add more categories here:

<li><a href='LINK'>CATEGORY 3</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
</ul>
</li>

5. Untuk menambah Sub Category, Anda tinggal  mengcopy yang sudah saya warna hijaukan, itu untuk 2 Sub Category. Kalau Anda hanya butuh 1, tinggal copy 1 baris saja.
6. Nah sekarang, kita harus menambahkan efek agar terlihat ketika kita arahkan pointer langsung ke bawah. Kita pergi ke Templete>Customise > Advanced > Add CSS. Copykan code berikut:

 /* ----- NAVMENU Styling ----- */
#NavMenu {
width: 800px; /* Change width of background */
height: 40px; /* Change height of background */
position: relative;
margin: 0 auto;
padding: 0;
border: 0px solid black; /* Change Border Around Navigation */
}

#NavMenuleft { 
width: 800px; /* Change width of navigation */
float: none; 
margin: 0 auto; 
padding: 0; }

#nav { 
margin: 0 auto;
padding: 0; 
border: 0px solid black;  }

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

#nav li a, #nav li a:link, #nav li a:visited {
color: #666666; /* Change colour of link */
display: block;
margin: 0;
padding: 10px 15px 10px; /* Change spacing */
}

#nav li a:hover, #nav li a:active {
color: #0099CC; /* Change color of text on hover over */
margin: 0;
padding: 10px 15px 10px; /* Change Spacing */
text-decoration: none; /* Change to underlined or none for look when hovered over */
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  /* Change background colour of drop down text */
width: 150px;
color: #333; /* Change colour of text */
float: none;
margin: 0;
padding: 7px 10px; /* Change Spacing */
}

#nav li li a:hover, #nav li li a:active {
background: #0099CC; /* background color of drop down items on hover over */
color: #eeeeee; /* text color of drop down items on hover over */
padding: 7px 10px; }

#nav li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
border: 0px solid black; }

#nav li ul { z-index: 9999; position: absolute; 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, #nav 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;} 

Dah selesai deh! Klo gagal langsung komen aj!