GagakTekno

Cara Membuat Genre List Seperti di Meownime

Jika sobat sering berkunjung ke situs Fanshare anime Meownime pastinya selalu ada yang baru disana seperti tampilan dan lainya selain itu juga bila sobat yang melihat bagian Genre pasti terlihat berbeda dengan situs anime lainnya yang hanya bertulisan saja tidak seperti Meownime yang menggunakan gambar untuk dijadikan genre untuk mewakili genre yang sobat sukai seperti Action,Superanatural dan lainya.

Bagi sobat yang mempunyai situs Anime atau Fanshare mungkin bisa mencoba juga tampilan genre dari Meownime ini dan juga tampilan bisa disesuaikan dengan keinginan sobat bila kurang bagus. Dengan menggunakan genre dapat membuat pengunjung mempermudah untuk mendownload anime di situs sobat karena saya sendiri juga penyuka anime dan selalu melihat genre bila ingin mendownload apalagi bertema Samurai sangat saya sukai sekali.

Bila sobat tertarik untuk membuat genre tampilan seperti Meownime bisa langsung ke tutorial yang ada dibawah ini :

Cara Membuat Genre List Seperti di Meownime


1. Masuk ke dashboard blog sobat dulu

2. Klik Tema > Edit HTML lalu copy kode dibawah ini dan pastekan tepat diatas kode </style> or </b:skin>
body{text-decoration:none;font-family:arial}
a{text-decoration:none}
#daftaranime {
    background: #e7e7e7;
    padding-top: 0;
}

#daftaranime aside {
    padding: 5px;
    background: #fff;
}
#daftaranime h1.letter {
  font-weight: normal;
  color: black;
  font-size: 16px;
  margin-bottom: 15px;
  margin-top: 0px;
  text-transform: uppercase;
  background: #36688a;
  width: calc(100% + 20px);
  margin-left: -10px;
  margin-top: -10px;
  padding: 10px;
  color: white;
}
#daftaranime aside:nth-child(even) h1.letter {
  background: #b53428;
}
#daftaranime .moe-list{
overflow: hidden;
}
#daftaranime .moe-list a {
  color: #555555;
  font-weight: normal;
  transition: 0.4s all ease;
  -webkit-transition: 0.4s all ease;
  -moz-transition: 0.4s all ease;
  -ms-transition: 0.4s all ease;
  -o-transition: 0.4s all ease;
}
#daftaranime .moe-list a:hover {
  color: #c2382b;
}
#daftaranime .moe-list ul {
  font-size: 15px;
  margin: 0px;
  padding-left: 5px;
}
#daftaranime .moe-list ul li {
  list-style: none;
  padding: 4px;
}
#daftaranime .moe-list ul li:last-child {
  border-bottom: none;
}
#daftaranime .moe-archive ul li {
  transition: 0.4s all ease;
  -webkit-transition: 0.4s all ease;
  -moz-transition: 0.4s all ease;
  -ms-transition: 0.4s all ease;
  -o-transition: 0.4s all ease;
}
#daftaranime .moe-archive ul li:hover:before{
  transform: rotate(-36deg);
  -webkit-transform: rotate(-36deg);
  -moz-transform: rotate(-36deg);
  -ms-transform: rotate(-36deg);
  -o-transform: rotate(-36deg);
}
#daftaranime .moe-archive ul li:before {
  content: "\f054";
  font-family: "FontAwesome";
  color: #aeaeae;
  font-size: 10px;
  margin-right: 5px;
  display: inline-block;
  transition: 0.4s all ease;
  -webkit-transition: 0.4s all ease;
  -moz-transition: 0.4s all ease;
  -ms-transition: 0.4s all ease;
  -o-transition: 0.4s all ease;
  position: relative;
  top: -1px;
}
.moe-daftar li {
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
}
#daftaranime {margin-bottom:30px;}
#daftaranime .genrespage {overflow: hidden;}
#daftaranime .genrespage h2 {font-size: 14px;border-bottom: 4px solid #DDD;padding: 4px 0;margin-bottom: 5px;}
#daftaranime .genrespage ul {margin: 0;padding: 0;list-style: none;}
#daftaranime .genrespage ul li a {width: 100%;margin-bottom: 5px;display: block;border-radius: 3px;padding: 5px;text-align: center;box-shadow: 0 0 1px #000;color: #FFF;background: #444;}
#daftaranime .genrespage li:nth-child(odd) a {background: rgba(194,56,43,0.9);}
#daftaranime .genrespage li:nth-child(even) a {background: rgba(228,171,1,0.9);}
#daftaranime .genrespage ul li a:hover {background: #3E8FC5;color: #FFF;text-decoration: none;}
.moe-genres li, .moe-daftar li{float:left;width:calc(33.33333% - 10px);text-align:center;position:relative;margin:5px}
.moe-genres ul, .moe-daftar ul{list-style:none;margin:0 -5px;padding:0}
.moe-genres ul:after, .moe-daftar ul:after{content:"";display:block;clear:both}
.moe-genres li a,.moe-daftar li a{display:block;color:#fff;z-index:10;position:relative;padding:60px;font-weight:700}
.moe-genres 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}
.moe-genres li a:after{content:"";position:absolute;background:#000;width:100%;height:100%;top:0;left:0;z-index:5;border-radius:4px}
.moe-genres li a:hover:before{filter:grayscale(0) opacity(.7)}
.moe-genres li a span{display:block;position:relative;z-index:12;}
.moe-daftar li:nth-child(3n+1){
  background: #c2382b;
}
.moe-daftar li:nth-child(3n+2){
  background: #305d7b;
}
.moe-daftar li:nth-child(3n+3){
  background: #e4ab01;
}
.moe-daftar li a:hover{
  background:#fff;
  color:#000;
}
.moe-genres li a[title~=Action]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Adventure]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Comedy]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Dementia]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Demons]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Drama]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Ecchi]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Fantasy]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Game]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Harem]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Historical]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Horror]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Isekai]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Josei]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Kids]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Magic]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Martial-Arts]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Mecha]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Military]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Music]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Mystery]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Parody]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Police]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Psychological]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Romance]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Samurai]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=School]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Sci-Fi]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Seinen]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Shoujo]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Shoujo-Ai]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Shounen]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Slice-of-Life]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Space]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Sports]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Super-Power]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Supernatural]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Thriller]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Tragedy]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
.moe-genres li a[title~=Vampire]:before{background-image:url("ISI DENGAN LINK GAMBAR");}
3. Klik Simpan Tema

4. Sekarang buat Halaman post baru dibagian Laman > jangan lupa kasih judul

5. Lalau klik mode "HTML" bukan "Compose" dan copy kode berikut dan pastekan
<div id="daftaranime">
<div class="entry-header page-header">
<div id="featured-anime">
<h1 class="letter">Genre List</h1><div id="more"></div>
</div>
</div>
<div class="moe-genres"><ul>
  <li><a href="#" title="Action"><span>Action</span></a></li>
  <li><a href="#" title="Adventure"><span>Adventure</span></a></li>
  <li><a href="#" title="Comedy"><span>Comedy</span></a></li>
  <li><a href="#" title="Comedy-Slice-of-Life"><span>Comedy Slice of Life</span></a></li>
  <li><a href="#" title="Dementia"><span>Dementia</span></a></li>
  <li><a href="#" title="Demons"><span>Demons</span></a></li>
  <li><a href="#" title="Drama"><span>Drama</span></a></li>
  <li><a href="#" title="Ecchi"><span>Ecchi</span></a></li>
  <li><a href="#" title="Fantasy"><span>Fantasy</span></a></li>
  <li><a href="#"title="Game"><span>Game</span></a></li>
  <li><a href="#" title="Harem"><span>Harem</span></a></li>
  <li><a href="#" title="Historical"><span>Historical</span></a></li>
  <li><a href="#" title="Horror"><span>Horror</span></a></li>
  <li><a href="#" title="Josei"><span>Josei</span></a></li>
  <li><a href="#"title="Kids"><span>Kids</span></a></li>
  <li><a href="#" title="Magic"><span>Magic</span></a></li>
  <li><a href="#" title="Martial-Arts"><span>Martial Arts</span></a></li>
  <li><a href="#" title="Mecha"><span>Mecha</span></a></li>
  <li><a href="#" title="Military"><span>Military</span></a></li>
  <li><a href="#" title="Music"><span>Music</span></a></li>
  <li><a href="#" title="Mystery"><span>Mystery</span></a></li>
  <li><a href="#" title="Parody"><span>Parody</span></a></li>
  <li><a href="#" title="Police"><span>Police</span></a></li>
  <li><a href="#" title="Psychological"><span>Psychological</span></a></li>
  <li><a href="#" title="Romance"><span>Romance</span></a></li>
  <li><a href="#" title="Samurai"><span>Samurai</span></a></li>
  <li><a href="#" title="School"><span>School</span></a></li>
  <li><a href="#" title="Sci-Fi"><span>Sci-Fi</span></a></li>
  <li><a href="#" title="Seinen"><span>Seinen</span></a></li>
  <li><a href="#" title="Shoujo"><span>Shoujo</span></a></li>
  <li><a href="#" title="Shoujo-Ai"><span>Shoujo Ai</span></a></li>
  <li><a href="#" title="Shounen"><span>Shounen</span></a></li>
  <li><a href="#" title="Shpoujo-Ai"><span>Shpoujo Ai</span></a></li>
  <li><a href="#" title="Slice-of-Life"><span>Slice of Life</span></a></li>
  <li><a href="#" title="Space"><span>Space</span></a></li>
  <li><a href="#" title="Sports"><span>Sports</span></a></li>
  <li><a href="#" title="Super-Power"><span>Super Power</span></a></li>
  <li><a href="#" title="Supernatural"><span>Supernatural</span></a></li>
  <li><a href="#" title="Thriller"><span>Thriller</span></a></li>
  <li><a href="#" title="Vampire"><span>Vampire</span></a></li></ul>
</div>
</div>
6. Publikasikan

7. Selesai dan lihat hasilnya

Bagi sobat yang ingin melihat demonya bisa klik disini
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR