Membuat menu dropdown pada blog

Berikut ini adalah cara untuk membuat menu dropdown pada blog :

1. Klik Template > Edit HTML

2. Tekan ctrl+F cari kata : #menu ul li a:hover

3. Setelah itu paste kode di bawah ini tepat dibawah menu itu (sampai ada garis “}” (kurung tutup) ) :

#menu ul ul li {

font-size:1em;

}

#menu li ul {

display:none;margin:10px;

padding:0;

padding-top:15px;margin-left:

-16px;}

#menu li li {

float:none;

background-color:#FFFFFF

}

#menu li:hover ul {

display:block;

position:absolute

}

*Catatan

-Atur margin dan padding sesuai keinginan :

Margin : untuk jarak antara menu dengan sub menu

Padding-top : untuk posisi sub menu

Margin-left : untuk letak sub menu (kiri-kanannya)

-Background-color dapat diganti sesuai keinginan, untuk kodenya silahkan cari di google

4. Setelah itu cari kata : <div id='menu'>

5. Setelah itu paste kan kode dibawah ini atau edit template lama agar susunannya mirip dengan contoh dibawah ini :

Contoh :

<li class='menu_first'><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>

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

<ul>

<li><a href='http://thrillerports.blogspot.com/search/label/Akuntansi' title='Akuntansi'>Konvensional</a></li>

<li><a href='http://thrillerports.blogspot.com/search/label/Akuntansi%20Syariah' title='Syariah'>Syariah</a></li>

</ul>

</li>

<li><a href=’#’>Principle</a>

<ul>

<li><a href='#' title='PSAK'>PSAK</a></li>

<li><a href='http://thrillerports.blogspot.com/p/ifrs_25.html' title='IFRS'>IFRS</a></li>

</ul>

</li>

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

<ul>

<li><a href='http://thrillerports.blogspot.com/2012/03/contoh-bentuk-laporan-akuntansi.html'>Laporan Akuntansi</a></li>

</ul>

</li>      

<li class='page_item page-item-2'><a href='#' title='Tips'>Tips</a></li>

</ul>

</div>

*Untuk menambahkan menu baru ketik kode di bawah ini, dan letakan setelah kode diatas sebelum tanda “</ul>” :

<li><a href=’#’>judul menu yang diinginkan<a/>

<ul>

<li><a href=’link yang diinginkan’title=’judul sub menu yang diinginkan’>judul yang diinginkan</a></li>

<li><a href=’link yang diinginkan’title=’judul sub menu yang diinginkan’>judul yang diinginkan</a></li>

</ul>

</li>

*Catatan :

Jika sub menu tidak terlihat lakukan hal dibawah ini :

- Ketik ctrl+f cari kata : #menu {

- Pada kata “height” ganti ukuran px nya menjadi : 100px atau sesuai kebutuhan

 6. Terakhir simpan template, dan lihat hasil nyaa