07 April 2016

Cara Membuat Anime List Seperti Wardhanime

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.

Cara Membuat Anime List Seperti Wardhanime, Tutorial Membuat Anime List Seperti Wardhanime, Widget Anime List Wardhanime, Cara Membuat Anime List Seperti AWSubs, Tutorial Membuat Anime List Seperti AWSubs, Widget Anime List AWSubs, Cara Membuat Anime List Fansub, Tutorial Membuat Anime List Fansub, Cara Membuat Daftar Anime Fansub, Anime List Fansub, Anime List Fanshare, Anime List Website Anime, How To Make Anime List Fansub, Anime List Fansub Site, Cara Membuat Fansub, Cara Membuat Widget Fansub, Tutorial Fansub, Website Fansub, Aka321, Aka321.blogspot.com

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>.

  2. /* 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%}}

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

  5. <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>

  6. 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.

  7.    <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>

  8. 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.


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.

Artikel Terkait

62 komentar

thenks infonya tutornya

keren nih patut di coba gan (y)

gan itu yang postnya diletakan dimana?

Yang untuk menambahkan anime pada animelist

diletakkan di bawah kode " <!-- KODE UNTUK ANIME " ... " DISINI --> " gan :gut

bro bisa nih tapi kok, dia kebawah semua ya list nya.
gak ada yang ke samping. jadi makan tempat

di CSS .row-cells ganti "width"nya jadi dari 308px jadi 300px

bro ane udh berhasil nih buat anime list, nah ane mau tambah lagi ost list tapi modelnya sama kaya gitu gmn caranya ?

Tinggal bikin postingan statis baru gan judulnya OST List, kodenya sama kaya diatas

nah kan udh berhasil nah kok linknya aneh, bisa gk di custome misalkan domain*com/anime-list ???

gan kok ane jadinya berantakan ?

Gan CCS diletakan dimana ?
Terimaksih

Komentar ini telah dihapus oleh pengarang.

Kalo ga lurus yg kotak hitam sama abcdefgh dan lainnya gimana ya gan? jadi hurufnya agak miring ke kiri ga pas ditengah kotak hitam

kirimin linknya ke facebook aja gan, biar ane benerin langsung..

Ok siap gan

(abaikan tanda kutip) - tambahin "text-align: center;" gan di ".alapb321 a" jadinya gini:

.alapb321 a {display: block;width: 20px;float: left;background: #424242;font-weight: 500;color: #FFF;padding: 5px 0;text-align: center;}

Terima kasih banyak gan.

Sukses langsung bimbingannya, mudah dipahami hihhi

Terima Kasih. Tutorial ini cukup membantu saya. Sudah saya terapkan di blog saya

makasih mas brow.. bener-bener ngebantu banget

Gan mau nanya, underline sebelum diklik kan seharusnya muncul di textnya, tapi punya saya enggak. Kenapa ya gan?

kirim linknya ke chat fb coba gan..

Komentar ini telah dihapus oleh administrator blog.

gan bisa nih,tpi kok tulisannya di anime titlenya kecil banget,cara gedeinnya gmana? thanks

Chat fb coba gan, kirim linknya..

gan ... yg ane kn dah jdi lamanya ... mau ngubah URL nya gmna ???

gmna tuh ganti nya gan ... tolongin dong

sebelum </style> atau </b:skin>

coba kirim link ke fb gan :)

agan hanya tinggal ganti "LINK TUJUAN" dengan link yang ingin dituju.

itu bisa buat platform wordpress gan :)

cara buat jadi 2 baris gimana gan ? 1 baris kebawah makan tempat , thanks

Gan punya ane kok jadi miring ke kanan bawah urutan abjadnya

Komentar ini telah dihapus oleh pengarang.

nanti ya gan tutorialnya lagi di perbaiki

Vicky Prayogi Sama ane juga nurun kebawah

nanti ya gan tutorialnya lagi di perbaiki

nanti ya gan tutorialnya lagi di perbaiki

sip rampung kira2 kapan min??

sudah diperbaiki gan, coba ikuti ulang tutorialnya

sudah diperbaiki, silahkan di coba kembali

haha okeh gan semoga lancar blognya

sama" gan mampir lagi jangan lupa

min cara atur buat klik a lagsung menuju group a bukan ke blogger

min caranya biar jadi 2 kolom gimana?

ini bisa buat wordpress bang ?

Bisa tapi manual, ada kok yang atomatis nanti di share atau kamu cari aja di internet..

gan kok gk bisa ya? malah kayak tangga jadinya

gan kode itu maksudnya label ya ?

kode yang mana maksudnya gan?

Komentar ini telah dihapus oleh pengarang.

gan yg css-nya itu kok posisi index hurufnya miring ke kanan bawah ya? jd kaya tangga, ga lurus ke samping

Hanya sekedar membantu para pengnjung agan yang mempunyai masalah seperti ini:

https://1.bp.blogspot.com/-3v08Y2Sn9BM/W9gi-yQniDI/AAAAAAAAAqg/zy0r2_5iU8QIgwtwjV0JxXRY4kMDcSsnwCLcBGAs/s1600/perbaikan.png

(Hapus script ini)
.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}}

(Ganti dengan yang ini)
.alaws321 .alaws-item{float: left;width: 50%;}
.alaws321 .alaws-title{display: list-item;margin-left: 20px; font-weight: bold;}
.alaws321 .alaws-title a{display: block;line-height: 24px;font-size: 14px;color: #000000;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.alaws321 .alaws-title a:hover{text-decoration: underline;}

min untuk yang bagian 4 itu HTML nya di pastein di mana ya masih blom ngerti dan maksud nya kode untuk anime maksudnya yang mana ya ??maaf masih awam soalnya mohon pencerahannya

makasih kak atas tutor nya sekarang paham maksud nya gimana

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon