Peringatan :sebelum mulai backup template blog kamu dulu atau lakukan tutorial ini di blog khusus.
Step 1:
Copy-paste kode ini ke bagian <head> template, sebaiknya diletakkan sebelum </head> .
<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>kalo ingin memodifikasi file Javascript ini, klik kanan di sini lalu save ke hard-drive kamu. Step 2:
Copy-paste satu dari CSS kode ini sebelum ]]></b:skin>CSS style 1: klik di sini untuk download kode
CSS style 2: klik di sini untuk download kode.
CSS style 3: klik di sini untuk download kode
CSS style 4: klik di sini untuk download kode
Step 3:
Masuk ke page elements. Sebaiknya widget ini diletakkan di tempat paling atas dalam blog, Header misalnya. *kalo mau ditaro di header blog, baris ini harus diubah :
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
jadi:
<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">
Setelah itu klik Add page element trus klik HTML/Javascript. Tambahin kode ini:
<div id="chromemenu" class="chromestyle"><ul>
<li><a href="link1" title="judul1">Link1</a></li>
<li><a href="#" rel="dropmenu1" title="judul2">Link2</a></li>
<li><a href="#" rel="dropmenu2" title="judul3">Link3</a></li>
<li><a href="link2" title="judul4">Link4</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" style="width: 150px;" class="dropmenudiv">
<a href="Alamatlink2.1" title="subJudul2.1">Link2.1<a>
<a href="Alamatlink2.2" title="subJudul2.2">Link2.2</a>
<a href="Alamatlink2.3" title="subJudul2.3">Link2.3</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
<a href="Alamatlink3.1" title="subJudul3.1">Nama3.1</a>
<a href="Alamatlink3.2" title="subJudul3.2">Nama3.2</a>
<a href="Alamatlink3.3" title="subJudul3.3">Nama3.3</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
Nah, yang warna merah itu bisa diulang-ulang kalo mo nambahin link.
Source : Vivek Sanghi