Cara Membuat Widget Genre Anime di Blog

Kali ini saya akan berbagi tutorial cara membuat widget kategori anime untuk blog, tutorial widget genre ini dapat digunakan pada tema blogger , juga widget genre anime ini responsive .

Cara Membuat Widget Genre Anime di Blogger

1. Masuk ke Blogger

2. Blog Anda > Tata Letak > Tambah Gadget

3. Pilih HTML / Javascript

4. Salin kode di bawah dan tempelkan di dalam konten widget

 <link rel='stylesheet' href='https://cdn.staticaly.com/gh/Yuukithemes/yuukithemes.github.io/master/css/yk-widget-genre.css' type='text/css' media='all' />
<div class="yuukithemes-genre">
<ul>
  <li><a href="/search/label/Action" title="Genre Action"><span>Action</span></a></li>
  <li><a href="/search/label/Adventure" title="Genre Adventure"><span>Adventure</span></a></li>
  <li><a href="/search/label/Comedy" title="Genre Comedy"><span>Comedy</span></a></li>
  <li><a href="/search/label/Drama" title="Genre Drama"><span>Drama</span></a></li>
  <li><a href="/search/label/Demons" title="Genre Demons"><span>Demons</span></a></li>
  <li><a href="/search/label/Ecchi" title="Genre Ecchi"><span>Ecchi</span></a></li>
  <li><a href="/search/label/Fantasy" title="Genre Fantasy"><span>Fantasy</span></a></li>
  <li><a href="/search/label/Game" title="Genre Game"><span>Game</span></a></li>
  <li><a href="/search/label/Hareem" title="Genre Hareem"><span>Hareem</span></a></li>
  <li><a href="/search/label/Historical" title="Genre Historical"><span>Historical</span></a></li>
  <li><a href="/search/label/Horror" title="Genre Horror"><span>Horror</span></a></li>
  <li><a href="/search/label/Isekai" title="Genre Isekai"><span>Isekai</span></a></li>
  <li><a href="/search/label/Kids" title="Genre Kids"><span>Kids</span></a></li>
  <li><a href="/search/label/Magic" title="Genre Magic"><span>Magic</span></a></li>
  <li><a href="/search/label/Martial arts" title="Genre Martial-Arts"><span>Martial Arts</span></a></li>
  <li><a href="/search/label/Mecha" title="Genre Mecha"><span>Mecha</span></a></li>
  <li><a href="/search/label/Military" title="Genre Military"><span>Military</span></a></li>
  <li><a href="/search/label/Music" title="Genre Music"><span>Music</span></a></li>
  <li><a href="/search/label/Mystery" title="Genre Mystery"><span>Mystery</span></a></li>
  <li><a href="/search/label/Parody" title="Genre Parody"><span>Parody</span></a></li>
  <li><a href="/search/label/Police" title="Genre Police"><span>Police</span></a></li>
  <li><a href="/search/label/Psychological" title="Genre Psychological"><span>Psychological</span></a></li>
  <li><a href="/search/label/Romance" title="Genre Romance"><span>Romance</span></a></li>
  <li><a href="/search/label/School" title="Genre School"><span>School</span></a></li>
  <li><a href="/search/label/Sci-fi" title="Genre Sci-Fi"><span>Sci-Fi</span></a></li>
  <li><a href="/search/label/Seinen" title="Genre Seinen"><span>Seinen</span></a></li>
  <li><a href="/search/label/Shoujo" title="Genre Shoujo"><span>Shoujo</span></a></li>
  <li><a href="/search/label/Slice of life/" title="Genre Slice-of-Life"><span>Slice of Life</span></a></li>
  <li><a href="/search/label/Space" title="Genre Space"><span>Space</span></a></li>
  <li><a href="/search/label/Sports" title="Genre Sports"><span>Sports</span></a></li>
  <li><a href="/search/label/Supernatural" title="Genre Supernatural"><span>Supernatural</span></a></li>
  <li><a href="/search/label/Super power" title="Genre Super-Power"><span>Super Power</span></a></li>
  <li><a href="/search/label/Tragedy" title="Genre Tragedy"><span>Tragedy</span></a></li>
  <li><a href="/search/label/Vampire" title="Genre Vampire"><span>Vampire</span></a></li>
</ul>
</div>

* Style 2 ( Menggunakan Scrool agar tidak panjang kebawah

 <div style="overflow: auto; height: 293px; ">

<link rel='stylesheet' href='https://cdn.staticaly.com/gh/Yuukithemes/yuukithemes.github.io/master/css/yk-widget-genre.css' type='text/css' media='all' />
<div class="yuukithemes-genre">
<ul>
  <li><a href="/search/label/Action?&amp;max-results=6" title="Genre Action"><span>Action</span></a></li>
  <li><a href="/search/label/Adventure?&amp;max-results=6" title="Genre Adventure"><span>Adventure</span></a></li>
  <li><a href="/search/label/Comedy?&amp;max-results=6" title="Genre Comedy"><span>Comedy</span></a></li>
  <li><a href="/search/label/Drama?&amp;max-results=6" title="Genre Drama"><span>Drama</span></a></li>
  <li><a href="/search/label/Demons?&amp;max-results=6" title="Genre Demons"><span>Demons</span></a></li>
  <li><a href="/search/label/Ecchi?&amp;max-results=6" title="Genre Ecchi"><span>Ecchi</span></a></li>
  <li><a href="/search/label/Fantasy?&amp;max-results=6" title="Genre Fantasy"><span>Fantasy</span></a></li>
  <li><a href="/search/label/Game?&amp;max-results=6" title="Genre Game"><span>Game</span></a></li>
  <li><a href="/search/label/Harem?&amp;max-results=6" title="Genre Hareem"><span>Hareem</span></a></li>
  <li><a href="/search/label/Historical?&amp;max-results=6" title="Genre Historical"><span>Historical</span></a></li>
  <li><a href="/search/label/Horror?&amp;max-results=6" title="Genre Horror"><span>Horror</span></a></li>
  <li><a href="/search/label/Magic?&amp;max-results=6" title="Genre Magic"><span>Magic</span></a></li>
  <li><a href="/search/label/Martial%20Arts?&amp;max-results=6" title="Genre Martial-Arts"><span>Martial Arts</span></a></li><li><a href="/search/label/Mecha?&amp;max-results=6" title="Genre Mecha"><span>Mecha</span></a></li>
  <li><a href="/search/label/Military?&amp;max-results=6" title="Genre Military"><span>Military</span></a></li>
  <li><a href="/search/label/Music?&amp;max-results=6" title="Genre Music"><span>Music</span></a></li>
  <li><a href="/search/label/Mystery?&amp;max-results=6" title="Genre Mystery"><span>Mystery</span></a></li>
  <li><a href="/search/label/Parody?&amp;max-results=6" title="Genre Parody"><span>Parody</span></a></li>
  <li><a href="/search/label/Police?&amp;max-results=6" title="Genre Police"><span>Police</span></a></li>
  <li><a href="/search/label/Psychological?&amp;max-results=6" title="Genre Psychological"><span>Psychological</span></a></li><li><a href="/search/label/Romance?&amp;max-results=6" title="Genre Romance"><span>Romance</span></a></li>
  <li><a href="/search/label/School?&amp;max-results=6" title="Genre School"><span>School</span></a></li>
  <li><a href="/search/label/Sci-Fi?&amp;max-results=6" title="Genre Sci-Fi"><span>Sci-Fi</span></a></li>
  <li><a href="/search/label/Seinen?&amp;max-results=6" title="Genre Seinen"><span>Seinen</span></a></li>
  <li><a href="/search/label/Shoujo?&amp;max-results=6" title="Genre Shoujo"><span>Shoujo</span></a></li>
  <li><a href="/search/label/Slice%20of%20Life?&amp;max-results=6" title="Genre Slice-of-Life"><span>Slice of Life</span></a></li><li><a href="/search/label/Space?&amp;max-results=6" title="Genre Space"><span>Space</span></a></li>
  <li><a href="/search/label/Sports?&amp;max-results=6" title="Genre Sports"><span>Sports</span></a></li>
  <li><a href="/search/label/Supernatural?&amp;max-results=6" title="Genre Supernatural"><span>Supernatural</span></a></li><li><a href="/search/label/Super%20Power?&amp;max-results=6" title="Genre Super-Power"><span>Super Power</span></a></li>

</ul>
</div>
</div>

6. Click Save

DEMO

Semoga tutorial ini sangat bermanfaat untuk Anda , Kalo ada yang perlu ditanyakan silahkan komentar :)