Cara Membuat Widget Genre Anime Keren pada Blog

KURAZONE ~ Halo sahabat Wibu, hehe.. pada kesempatan kali ini saya bagikan kembali tutorial blog mengenai sebuah widget yang cocok dipasang pada blog bertema anime, yaitu Widget Genre Anime Keren yang sangat cocok diletakkan pada bagian sidebar blog.

Cara Membuat Widget Genre Anime Keren pada Blog

1. Buka akun Blogger
2. Pilih menu Tata Letak
3. Buat Widget baru, Pilih HTML/Javascript
4. Masukkan kode dibawah ini kedalam widget baru tersebut, kemudian SIMPAN
<style>
.kuranimegenre li{float:left;width:calc(50% - 6px);text-align:center;position:relative;margin:3px}
.kuranimegenre ul{list-style:none;margin:0 -5px;padding:0}
.kuranimegenre ul:after{content:"";display:block;clear:both}
.kuranimegenre li a{display:block;color:#fff;z-index:10;position:relative;padding:9px;font-weight:700}
.kuranimegenre 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}
.kuranimegenre li a:after{content:"";position:absolute;background:#000;width:100%;height:100%;top:0;left:0;z-index:5;border-radius:4px}
.kuranimegenre li a:hover:before{filter:grayscale(0) opacity(.7)}
.kuranimegenre li a span{display:block;position:relative;z-index:12;}
.kuranimegenre li a[title~=Action]:before{background-image:url("https://i.imgur.com/vScs9kp.png");}
.kuranimegenre li a[title~=Adventure]:before{background-image:url("https://i.imgur.com/7ZdlT1A.png");}
.kuranimegenre li a[title~=Comedy]:before{background-image:url("https://i.imgur.com/Rg0eKIZ.png");}
.kuranimegenre li a[title~=Demons]:before{background-image:url("https://i.imgur.com/aQmak2c.png");}
.kuranimegenre li a[title~=Drama]:before{background-image:url("https://i.imgur.com/BK4a9IH.png");}
.kuranimegenre li a[title~=Ecchi]:before{background-image:url("https://i.imgur.com/XF8RVAb.png");}
.kuranimegenre li a[title~=Fantasy]:before{background-image:url("https://i.imgur.com/zVjwJI5.png");}
.kuranimegenre li a[title~=Game]:before{background-image:url("https://i.imgur.com/ciMLfkS.png");}
.kuranimegenre li a[title~=Hareem]:before{background-image:url("https://i.imgur.com/ggDrqXN.png");}
.kuranimegenre li a[title~=Historical]:before{background-image:url("https://i.imgur.com/x9iIuUV.png");}
.kuranimegenre li a[title~=Horror]:before{background-image:url("https://i.imgur.com/dZL9hIs.png");}
.kuranimegenre li a[title~=Isekai]:before{background-image:url("https://i.imgur.com/Y0OiqYM.png");}
.kuranimegenre li a[title~=Kids]:before{background-image:url("https://i.imgur.com/vLBO9rW.png");}
.kuranimegenre li a[title~=Magic]:before{background-image:url("https://i.imgur.com/zAwBL3z.png");}
.kuranimegenre li a[title~=Martial-Arts]:before{background-image:url("https://i.imgur.com/nnTArcc.png");}
.kuranimegenre li a[title~=Mecha]:before{background-image:url("https://i.imgur.com/kDrVqRh.png");}
.kuranimegenre li a[title~=Military]:before{background-image:url("https://i.imgur.com/KhGYC22.png");}
.kuranimegenre li a[title~=Music]:before{background-image:url("https://i.imgur.com/9KleTZt.png");}
.kuranimegenre li a[title~=Mystery]:before{background-image:url("https://i.imgur.com/zMovyyJ.png");}
.kuranimegenre li a[title~=Parody]:before{background-image:url("https://i.imgur.com/issKWjl.png");}
.kuranimegenre li a[title~=Police]:before{background-image:url("https://i.imgur.com/dlvI7As.png");}
.kuranimegenre li a[title~=Psychological]:before{background-image:url("https://i.imgur.com/2JebLLA.png");}
.kuranimegenre li a[title~=Romance]:before{background-image:url("https://i.imgur.com/vQq2SAz.png");}
.kuranimegenre li a[title~=School]:before{background-image:url("https://i.imgur.com/XxbcxSi.png");}
.kuranimegenre li a[title~=Sci-Fi]:before{background-image:url("https://i.imgur.com/j86OAi5.png");}
.kuranimegenre li a[title~=Seinen]:before{background-image:url("https://i.imgur.com/vgr46aY.png");}
.kuranimegenre li a[title~=Shounen]:before{background-image:url("https://i.imgur.com/JlcxUIf.png");}
.kuranimegenre li a[title~=Shoujo]:before{background-image:url("https://i.imgur.com/Snb0vmF.png");}
.kuranimegenre li a[title~=Slice-of-Life]:before{background-image:url("https://i.imgur.com/m7Eql28.png");}
.kuranimegenre li a[title~=Space]:before{background-image:url("https://i.imgur.com/wRYSzoC.png");}
.kuranimegenre li a[title~=Sports]:before{background-image:url("https://i.imgur.com/lJvzAKc.png");}
.kuranimegenre li a[title~=Supernatural]:before{background-image:url("https://i.imgur.com/3r3ZNZU.png");}
.kuranimegenre li a[title~=Super-Power]:before{background-image:url("https://i.imgur.com/fXNTu05.png");}
.kuranimegenre li a[title~=Tragedy]:before{background-image:url("https://i.imgur.com/LPTfF2t.png");}
.kuranimegenre li a[title~=Vampire]:before{background-image:url("https://i.imgur.com/L3tRs5u.png");}
.kuranimegenre li a[title~=Adult]:before{background-image:url("https://i.imgur.com/pNsMgIv.png");}
.kuranimegenre li a[title~=Yuri]:before{background-image:url("https://i.imgur.com/b9o48P0.png");}
</style>
<div class="kuranimegenre">
<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/Adult" title="Genre Adult"><span>Adult</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>
  <li><a href="/search/label/Yuri" title="Genre Yuri"><span>Yuri</span></a></li>
</ul>
</div>
Tampilan default pada widget ini sengaja dibuat Grayscale agar tampilannya tidak terlalu lebay dan mencolok, sehingga efek hover nya akan terlihat menarik dengan menampilkan background bewarna pada masing-masing genre ketika kursor menyentuhnya.
Itulah informasi mengenai "Cara Membuat Widget Genre Anime Keren pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck!

Courtesy by : YukiThemes

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Lebih baru Lebih lama