Cara Membuat Anime List Seperti Wardhanime

Kijin Tutorial on

Thursday, 7 April 2016

Cara Membuat Anime List Seperti Wardhanime - Anime list atau daftar anime biasanya digunakan oleh fansub atau fanshare agar pengunjungnya tidak kesulitan mencari anime yang diinginkannya. Ini juga membuat website mereka tampil bagus, rapih, dan juga seperti fansub atau fanshare yang profesional. Tetapi terkadang ada juga fansub atau fanshare yang belum tahu Cara Membuat Anime List.

Wardhanime merupakan website yang dikenal dengan tempat download anime, wardhanime atau yang biasa dikenal dengan sebutan awsubs ini memang cukup terkenal karena waktu rilis yang cukup cepat. Tetapi saya tidak akan membahas tentang awsubs. Sebelumnya saya memposting tentang pembuatan download box, yaitu Cara Membuat Download Box Seperti Nekonime, dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Anime List Seperti Wardhanime. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

Cara Membuat Anime List Seperti Wardhanime

1. Buka blogger > Edit HTML > Salin dan terapkan kode di bawah ini sebelum </b:skin> atau </style>.



/* Anime List Wardhanime - Aka321 */
.alaws321{overflow:hidden}
.alaws321 .alaws-apb{font-size: 14px;display: block;position: relative;overflow: hidden}
.alaws321 .alaws-apb a{line-height: 30px;width: 3.704%;color: #FFFFFF;background: #424242;transition: all 0.25s;text-align: center;float: left}
.alaws321 .alaws-apb a:hover{text-decoration: none;background: #2977BE;color: #FFFFFF}
.alaws321 .alaws-wrap{margin-top: 5px}
.alaws321 .alaws-group{display: inline-block;width: 100%;margin-bottom: 10px}
.alaws321 .alaws-head{font-weight: 700;border-bottom: 2px solid #2977BE;font-size: 15px;padding: 5px}
.alaws321 .alaws-head a{color: #333333}
.alaws321 .alaws-item{float: left;width: 50%;displa}
.alaws321 .alaws-title{display: list-item;margin-left: 20px}
.alaws321 .alaws-title a{line-height: 24px;font-size: 14px;color: #000000;text-overflow: ellipsis;overflow: hidden;white-space: nowrap}}
@media only screen and (max-width: 768px){.alaws321 .alaws-item{width:50%}}
@media screen and (max-width:480px){.alaws321 .alaws-item{width:100%}.alaws321 .alaws-apb a{margin: 1px;width: 10.43%}}
@media screen and (max-width:320px){.alaws321 .alaws-apb a{width: 10.24%}}



2. Jika sudah, silahkan simpan template.
3. Kemudian, buat postingan baru di halaman statis > Tambah kode di bawah ini pada Tab HTML (Bukan Compose).



<div class='alaws321'>
 <div class='alaws-apb'>
  <a href='#%23'>#</a>
  <a href='#A'>A</a>
  <a href='#B'>B</a>
  <a href='#C'>C</a>
  <a href='#D'>D</a>
  <a href='#E'>E</a>
  <a href='#F'>F</a>
  <a href='#G'>G</a>
  <a href='#H'>H</a>
  <a href='#I'>I</a>
  <a href='#J'>J</a>
  <a href='#K'>K</a>
  <a href='#L'>L</a>
  <a href='#M'>M</a>
  <a href='#N'>N</a>
  <a href='#O'>O</a>
  <a href='#P'>P</a>
  <a href='#Q'>Q</a>
  <a href='#R'>R</a>
  <a href='#S'>S</a>
  <a href='#T'>T</a>
  <a href='#U'>U</a>
  <a href='#V'>V</a>
  <a href='#W'>W</a>
  <a href='#X'>X</a>
  <a href='#Y'>Y</a>
  <a href='#Z'>Z</a>
 </div>
 <div class='alaws-wrap'>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='#'>#</a></div>
   
   <!-- KODE UNTUK ANIME "#" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='A'>A</a></div>
   
   <!-- KODE UNTUK ANIME "A" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='B'>B</a></div>
   
   <!-- KODE UNTUK ANIME "B" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='C'>C</a></div>
   
   <!-- KODE UNTUK ANIME "C" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='D'>D</a></div>
   
   <!-- KODE UNTUK ANIME "D" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='E'>E</a></div>
   
   <!-- KODE UNTUK ANIME "E" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='F'>F</a></div>
   
   <!-- KODE UNTUK ANIME "F" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='G'>G</a></div>
   
   <!-- KODE UNTUK ANIME "G" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='H'>H</a></div>
   
   <!-- KODE UNTUK ANIME "H" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='I'>I</a></div>
   
   <!-- KODE UNTUK ANIME "I" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='J'>J</a></div>
   
   <!-- KODE UNTUK ANIME "J" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='K'>K</a></div>
   
   <!-- KODE UNTUK ANIME "K" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='L'>L</a></div>
   
   <!-- KODE UNTUK ANIME "L" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='M'>M</a></div>
   
   <!-- KODE UNTUK ANIME "M" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='N'>N</a></div>
   
   <!-- KODE UNTUK ANIME "N" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='O'>O</a></div>
   
   <!-- KODE UNTUK ANIME "O" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='P'>P</a></div>
   
   <!-- KODE UNTUK ANIME "P" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='Q'>Q</a></div>
   
   <!-- KODE UNTUK ANIME "Q" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='R'>R</a></div>
   
   <!-- KODE UNTUK ANIME "R" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='S'>S</a></div>
   
   <!-- KODE UNTUK ANIME "S" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='T'>T</a></div>
   
   <!-- KODE UNTUK ANIME "T" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='U'>U</a></div>
   
   <!-- KODE UNTUK ANIME "U" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='V'>V</a></div>
   
   <!-- KODE UNTUK ANIME "V" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='W'>W</a></div>
   
   <!-- KODE UNTUK ANIME "W" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='X'>X</a></div>
   
   <!-- KODE UNTUK ANIME "X" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='Y'>Y</a></div>
   
   <!-- KODE UNTUK ANIME "Y" DISINI -->
   
  </div>
  <div class='alaws-group'>
   <div class='alaws-head'><a name='Z'>Z</a></div>
   
   <!-- KODE UNTUK ANIME "Z" DISINI -->
   
  </div>
 </div>
</div>



4. Setelah itu, dibawah ini merupakan kode untuk menambah anime di anime list wardhanime. Untuk menambahkan anime, silahkan salin dan terapkan kode dibawah ini mengganti kode yang sudah ditandai.



   <div class='alaws-item'><div class='alaws-title'><a title='Nama Anime' href='#'>Nama Anime</a></div></div>
   <div class='alaws-item'><div class='alaws-title'><a title='Nama Anime' href='#'>Nama Anime</a></div></div>
   <div class='alaws-item'><div class='alaws-title'><a title='Nama Anime' href='#'>Nama Anime</a></div></div>
   <div class='alaws-item'><div class='alaws-title'><a title='Nama Anime' href='#'>Nama Anime</a></div></div>
   <div class='alaws-item'><div class='alaws-title'><a title='Nama Anime' href='#'>Nama Anime</a></div></div>



5. Jika sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu, dan silahkan di publikasikan lalu lihat bagaimana hasilnya.

Kode	Pengaturan
<!-- KODE UNTUK ANIME "#" DISINI -->	Ganti dengan kode untuk menambah anime.
Nama Anime	Ganti dengan Nama Anime tersebut.
#	Ganti dengan URL atau Link yang akan dituju.

Live Preview

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.

Labels: Anime List, Tutorial

Thanks for reading Cara Membuat Anime List Seperti Wardhanime. Please share...!