Membuat Sub Menu / Sub Page (Drop-down Menu) pada Blogspot

Ini ada tutorial versi video di youtube yang Bayu buat sendiri..,

Sub laman atau sub menu dalam bentuk drop down menu ini dapat berfungsi untuk membantu mengatur navigasi link pada blog anda, menyesuaikan kategori-kategori, dan lain sebagainya. Drop down menu ini bisa teman-teman kreasikan sesuai keinginan, dengan bermodalkan sedikit pengetahuan dasar editong script HTML dan CSS..
 
Langsung Mulai Aja......,
Untuk memulai, silahkan ikuti langkah berikut.... :   _(._.)_

Step 1: Go to Blogger >> Template >> Edit HTML, >> Pilih Process

Step 2:  Akan Muncul Editor HTML Template,, Tekan 'Ctrl+f' untuk mencari kata berikut ']]></b:skin>'

Step 3: Setelah ketemu, Please add the following code just before (sebelum) ]]></b:skin>  

.dropdown{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% Georgia;
 font-size:17px;
 font-weight:bold;
 }
.dropdown ul{
 background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:40px;
 height:38px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .dropdown li{
  float:left;
  padding:0px;
  }
 .dropdown li a{
  background:url(http://img708.imageshack.us/img708/8938/menuule.png) repeat-x;height:38px;
  color:#cccccc;
  display:block;
  font-weight:normal;
  line-height:42px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
  .dropdown li a:hover, .dropdown ul li:hover a{
   background: url(http://img832.imageshack.us/img832/9115/menulihovery.png) repeat-x;height:38px;
   color:#FFFFFF;
   text-decoration:none;
   }
 .dropdown li ul{
  background:#333333;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:225px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
  }
 .dropdown li:hover ul{
  display:block;
  
  }
 .dropdown li li {
  background:url(http://img687.imageshack.us/img687/3765/menulili.png) repeat-x;height:38px;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:225px;
  }
 .dropdown li:hover li a{
  background:none;
  
  }
 .dropdown li ul a{
  display:block;
  height:35px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
  .dropdown li ul a:hover, .dropdown li ul li:hover a{
   background:url(http://img268.imageshack.us/img268/5686/menuliulhover.png) repeat-x;height:38px;
   border:0px;
   color:#ffffff;
   text-decoration:none;
   }
 .dropdown p{
  clear:left;
  }

Step 5: Save the template now and take a look at your blog.

Step 6: Buat sebuah gadged HTML baru, dan isi dengan code berikut:

<ul class="dropdown">
 <li><a href="link1"><span>Title1</span></a></li>
 <li><a href="link2"><span>Title2</span></a>
     <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
     <li><a href="Sub Link3">Sub Link3</a></li>
     </ul>
 </li>
 <li><a href="link3"><span>Title3</span></a></li>
 <li><a href="link4"><span>Title4</span></a>
     <ul>
     <li><a href="Sub Link1">Sub Link1</a></li>
     <li><a href="Sub Link2">Sub Link2</a></li>
     </ul>
 </li>
 <li><a href="link5"><span>Title5</span></a></li>
</ul>

_______________________________________________________________________________

Code diatas merupakan script untuk membuat sub menu atau drop down menu pada laman blog kita...,
Silahkan di pelajari sendiri..
Sedikit untuk referensi kamu, akan saya jelaskan beberapa fungsi script-script diatas..

1. <ul class="dropdown"> ini untuk memanggil setingan dropdown template yang telah kita buat sebelumnya (Step 3).

2. <li> ini code untuk membuat tab page utama (sebagai page), dan harus ditutup dengan </ul>

3. <ul> ini code untuk memulai sub page pada page yang dibuat dari langkah diatas, (perhatikan script diatas). Masukkan kode <li> untuk membuat sub link.  Dan code ini harus ditutup juga dengan </li>.

Untuk menambah atribut text, kita bisa menggunakan editing html sederhana, seperti <Font face="..."> untuk jenis tulisan, <B> untuk bold, dan lain-lainnya....
Dan jangan lupa untuk mengisi judul tab dan link setiap menu yang dibuat...!
Masukkan pada code nomor-nomor link dan nomor-nomor title (judul) yang sudah dibuat pada script diatas...

Sampel...

<li><a href="link1"><span>Title1</span></a></li>

<li><a href="http://ur-android.blogspot.com"><span>Home</span></a></li>