Cara Membuat Dropdown Genre Menu

Cara Membuat Dropdown Genre Menu - Dropdown genre menu mungkin sudah jarang digunakan oleh kebanyakan fansub atau fanshare, dikarenakan sudah banyak style baru untuk menerapkan daftar genre. Namun bisa dibilang dropdown genre menu ini cukup simple dan efektif karena tidak memakan banyak tempat dan bisa saja diletakan di sidebar, menubar, dan sebagainya.

Sebelumnya saya memposting tentang pembuatan random background, yaitu Cara Membuat Random Background, dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Dropdown Genre Menu. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

Cara Membuat Dropdown Genre Menu

1. Buka Blogger > Edit HTML > Salin dan terapkan kode di bawah ini sebelum </b:skin> atau </style>.



/* Genre Menu Aka321 - Aka321 */
.gbaka321{position: relative;display: inline-block;margin-bottom: 15px;width: 100%}
.gbaka321 select{display: inline-block;width: 100%;cursor: pointer;padding: 10px 15px;outline: 0;border: 0;border-radius: 0;background: #ececec;color: #7b7b7b;appearance: none;-webkit-appearance: none;-moz-appearance: none}
.gb-arrow{position: absolute;top: 16px;right: 15px;width: 0;height: 0;pointer-events: none;border-style: solid;border-width: 8px 5px 0 5px;border-color: #7b7b7b transparent transparent transparent}
.gbaka321 select:hover,.gbaka321 select:focus{color: #000;background: #ddd}
.gbaka321 select:hover ~ .gb-arrow,.gbaka321 select:focus ~ .gb-arrow{border-top-color: #000}



2. Lalu, kamu masuk ke Tata Letak > Tambah Gadget > HTML/Javascript > Salin dan terapkan kode di bawah ini di dalam box konten.



<div class='gbaka321'>
 <select onchange='document.location.href=this.options[this.selectedIndex].value;'>
  <option value=''>Genres :</option>
  
  
 </select>
 <div class='gb-arrow'></div>
</div>



3. Setelah itu, dibawah ini merupakan kode untuk menambah genre di dropdown genre menu. Untuk menambahkan genre, silahkan salin dan terapkan kode dibawah ini sebelum </select>.



  <option value='#'>Genre</option>
  <option value='#'>Genre</option>
  <option value='#'>Genre</option>
  <option value='#'>Genre</option>



4. Jika sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu, dan silahkan di publikasikan lalu lihat bagaimana hasilnya.

Kode	Pengaturan
#	Ganti dengan link genre contoh: /search/label/Action/ atau /search?q=Action/
Genre	Ganti dengan genre yang diinginkan.

Live Preview

Sekian postingan kali ini semoga bermanfaat untuk kalian, jangan lupa di bagikan ke teman-teman, dan jika ada yang ingin ditanyakan silahkan bertanya di kolom komentar. Sampai jumpa di tutorial berikutnya Terima kasih.