Cara Mengaplikasikan file Menu Dropdown

Pada Artikel kali ini, saya akan membagikan tips mengaplikasikan menu dropdown.
Contohnya html dengan file index.html dan css dengan file style.css, seperti pada beberapa
web, yang menyediakan file menu dropdown yang bisa kita download.


Bagi yang masih bingung karena scriptnya tidak bekerja, langsung saja ikuti langkah detail nya.

1. Pertama siapkan file.html (HTML menu dropdownnya), dan file.css (CSS dropdownnya alias
stylenya) atau bisa didownload di Disini (file.zip nya)

2. Ekstrak file.zip yang didownload tadi, kemudian didalam folder ada 2 file (index.html dan style.css)

3. Setelah itu, masuk ke blog anda, pada jendela desain, pilih >tema, lalu >Edit HTML, tekan CTRL+F/find cari kode ]]></b:skin>

Baca Juga : ০ Cara Mengatasi Error Apache XAMPP
                     ০ Cara Mengaplikasikan File Menu Dropdown Pada Blog

4. salin kode script yang ada di style.css tadi, kemudian tempel sebelum ]]></b:skin> , simpan tema,
5.masih di >Edit HTML, cari <header>
pada
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
                  <b:widget id='Header1' locked='true' title='#' type='Header'>

Ganti : maxwidgets=3, showaddelement=yes, locked=false.

kemudian Simpan tema.

6. kembali pada jendela desain, Pilih >Tata Letak, tambahkan widget dibagian header pilih HTML/JavaScript.
buka index.html dengan notepad tinggal edit dan tambahkan kategori menu yang anda inginkan lalu salin, dan tempel kan kode HTML nya di kolom konten (widget) beri judul mainmenu.
kemudian Simpan.

7. Kembali ke >Tema, >Edit HTML, CTRL+F/find cari mainmenu, lihat widget id anda.
contoh
 <b:widget id='HTML2' locked='false' title='mainmenu' type='HTML'>
widget id anda adalah HTML2,

8. tekan CTRL+F/find, cari ]]></b:skin>
pada semua script yang kita paste hasil style.css tadi contoh:

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}

9. Ganti SEMUA #cssmenu menjadi #HTML2 (hanya kode css salinan dari style.css tadi)

#HTML2 {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}

Simpan tema,
kemudian lihat kunjungi blog anda.



Sekian tutorial dari saya, jangan lupa tinggalkan Komentar atau Subscribe untuk info update terbaru.



Keyword: Menu dropdown pada blog, menu dropdown paling simple,
 cara membuat menu dropdown, menu dropdown keren, tips blog,
css menu dropdown keren, html menu dropdown.