Cara Membuat Genre List Anime di Blogger

DezignDesu - Genre List, fitur ini sudah tidak asing lagi bagi para pengguna situs Fansub dan Fanshare Anime di internet.  Bagi kamu seorang otaku yang gemar download anime, tentunya pernah menjumpai situs download yang menggunakan Genre List untuk memudahkan mencari anime/film kesukaan kalian via genre. Nah dalam tutorial kali ini admin akan membagikan tutorial membuat Genre List bagi kalian pembuat Blog/Web. Tapi, ini di peruntukkan bagi pengguna Blogger dahulu. Kalian yang pengguna cms/sejenisnya selain Blogger harap memodifikasi lagi agar cocok di gunakan pada web kalian masing - masing.

Kali ini admin kasih tutorial yg di tujukan ke halaman statis dulu ya...
Bagi yang ingin tampil di sidebar... mungkin lain kali admin buatin tutorialnya.

Cara membuat Genre List Anime di Blogger : 

1.  Login pada akun blogspot kalian (ini wajib).
2. Setelah masuk ada dashbord blogger, buatlah halaman baru di menu halaman.
3. Selanjutnya, silahkan tempel ini semua (yang di bawah ini) di Tampilan HTML.

<style>
.dzdes-genre li{float:left;width:calc(100% / 4 - 6px);text-align:center;position:relative;margin:3px}
.dzdes-genre ul{list-style:none;margin:0 -5px;padding:0}
.dzdes-genre ul:after{content:"";display:block;clear:both}
.dzdes-genre li a span a:hover {color: #fff;}
.dzdes-genre li a{display:block;color:#fff;z-index:10;position:relative;padding:9px;font-weight:700;text-decoration:none;}
.dzdes-genre li a:before{content:"";position:absolute;background:#353638 center no-repeat;background-size:100%;top:0;left:0;width:100%;height:100%;border-radius:4px;filter:grayscale(1) opacity(.6);z-index:10}
.dzdes-genre li a:after{content:"";position:absolute;background:#000;width:100%;height:100%;top:0;left:0;z-index:5;border-radius:4px}
.dzdes-genre li a:hover:before{filter:grayscale(0) opacity(.7)}
.dzdes-genre li a span{display:block;position:relative;z-index:12;}
.dzdes-genre li a[title~=Action]:before{background-image:url("https://i.imgur.com/vScs9kp.png");}
.dzdes-genre li a[title~=Adventure]:before{background-image:url("https://i.imgur.com/7ZdlT1A.png");}
.dzdes-genre li a[title~=Comedy]:before{background-image:url("https://i.imgur.com/Rg0eKIZ.png");}
.dzdes-genre li a[title~=Demons]:before{background-image:url("https://i.imgur.com/aQmak2c.png");}
.dzdes-genre li a[title~=Drama]:before{background-image:url("https://i.imgur.com/BK4a9IH.png");}
.dzdes-genre li a[title~=Ecchi]:before{background-image:url("https://i.imgur.com/XF8RVAb.png");}
.dzdes-genre li a[title~=Fantasy]:before{background-image:url("https://i.imgur.com/zVjwJI5.png");}
.dzdes-genre li a[title~=Game]:before{background-image:url("https://i.imgur.com/ciMLfkS.png");}
.dzdes-genre li a[title~=Harem]:before{background-image:url("https://i.imgur.com/ggDrqXN.png");}
.dzdes-genre li a[title~=Historical]:before{background-image:url("https://i.imgur.com/x9iIuUV.png");}
.dzdes-genre li a[title~=Horror]:before{background-image:url("https://i.imgur.com/dZL9hIs.png");}
.dzdes-genre li a[title~=Isekai]:before{background-image:url("https://i.imgur.com/Y0OiqYM.png");}
.dzdes-genre li a[title~=Kids]:before{background-image:url("https://i.imgur.com/vLBO9rW.png");}
.dzdes-genre li a[title~=Magic]:before{background-image:url("https://i.imgur.com/zAwBL3z.png");}
.dzdes-genre li a[title~=Martial-Arts]:before{background-image:url("https://i.imgur.com/nnTArcc.png");}
.dzdes-genre li a[title~=Mecha]:before{background-image:url("https://i.imgur.com/kDrVqRh.png");}
.dzdes-genre li a[title~=Military]:before{background-image:url("https://i.imgur.com/KhGYC22.png");}
.dzdes-genre li a[title~=Music]:before{background-image:url("https://i.imgur.com/9KleTZt.png");}
.dzdes-genre li a[title~=Mystery]:before{background-image:url("https://i.imgur.com/zMovyyJ.png");}
.dzdes-genre li a[title~=Parody]:before{background-image:url("https://i.imgur.com/issKWjl.png");}
.dzdes-genre li a[title~=Police]:before{background-image:url("https://i.imgur.com/dlvI7As.png");}
.dzdes-genre li a[title~=Psychological]:before{background-image:url("https://i.imgur.com/2JebLLA.png");}
.dzdes-genre li a[title~=Romance]:before{background-image:url("https://i.imgur.com/vQq2SAz.png");}
.dzdes-genre li a[title~=School]:before{background-image:url("https://i.imgur.com/XxbcxSi.png");}
.dzdes-genre li a[title~=Sci-Fi]:before{background-image:url("https://i.imgur.com/j86OAi5.png");}
.dzdes-genre li a[title~=Seinen]:before{background-image:url("https://i.imgur.com/vgr46aY.png");}
.dzdes-genre li a[title~=Shounen]:before{background-image:url("https://i.imgur.com/JlcxUIf.png");}
.dzdes-genre li a[title~=Shoujo]:before{background-image:url("https://i.imgur.com/Snb0vmF.png");}
.dzdes-genre li a[title~=Slice-of-Life]:before{background-image:url("https://i.imgur.com/m7Eql28.png");}
.dzdes-genre li a[title~=Space]:before{background-image:url("https://i.imgur.com/wRYSzoC.png");}
.dzdes-genre li a[title~=Sports]:before{background-image:url("https://i.imgur.com/lJvzAKc.png");}
.dzdes-genre li a[title~=Supernatural]:before{background-image:url("https://i.imgur.com/3r3ZNZU.png");}
.dzdes-genre li a[title~=Super-Power]:before{background-image:url("https://i.imgur.com/fXNTu05.png");}
.dzdes-genre li a[title~=Tragedy]:before{background-image:url("https://i.imgur.com/LPTfF2t.png");}
.dzdes-genre li a[title~=Vampire]:before{background-image:url("https://i.imgur.com/L3tRs5u.png");}
.dzdes-genre li a[title~=Adult]:before{background-image:url("https://i.imgur.com/pNsMgIv.png");}
.dzdes-genre li a[title~=Yuri]:before{background-image:url("https://i.imgur.com/b9o48P0.png");}
@media screen and (max-width:480px){
.dzdes-genre li{width: calc(50% - 6px);float: left;}.dzdes-genre li a{padding:11px}
}
</style>
<div class="dzdes-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/Harem" title="Genre Harem"><span>Harem</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/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/Vampire" title="Genre Vampire"><span>Vampire</span></a></li>
  <li><a href="/search/label/Yuri" title="Genre Yuri"><span>Yuri</span></a></li>
</ul>
</div>

4. Terakhir, Save. Selesai.

Bagaimana? Mudah bukan? Cara Membuat Genre List Anime Wooiya Jelass..
Bagi yang belum paham, kolom komentar terbuka lebar. Silahkan tulis saja disitu, admin akan berusaha bantu sebisa mungkin.