03 April 2016

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.

Cara Membuat Dropdown Genre Menu, Cara Membuat Dropdown Genre List, Cara Membuat Dropdown Genre Seperti Fansub, Cara Membuat Dropdown Genre Seperti Fanshare, How To Create Dropdown Genre, Cara Membuat Fansub, Cara Membuat Widget Fansub, Tutorial Fansub, Website Fansub, Aka321, Aka321.blogspot.com

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>.

  2. /* 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}

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

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

  5. 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>.

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

  7. 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.


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.

Artikel Terkait

1 komentar so far

senpai mohon di perbarui lagi y, soalnya bahan enggak responsive ama layar

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon