Anilist Pro adalah template blogger khusus untuk manga, fansub, atau novel.
Ini adalah merupakan template terumit yang pernah saya kerjakan. Tapi syukur meskipun banyak mengalami kesulitan, akhirnya bisa selesai juga sesuai standar fansubbing. Template ini adalah generasi penerus pelacak fansub sekaligus versi terakhir cloning anilis.co. Tidak ada versi lain setelah ini. Ini adalah produk final. Untuk proyek berikutnya akan ada jenis template baru.
Untuk sementar jangan di upload demo post. Kalau sudah terlanjut tambahkan code berikut diatas gambar manga <span><!--more--></span>
Update 2.5
Menhapus random post penyebab loading lama
Grid Chapter di halaman depan
Penambahan Anilist Pro Fansub
Update 2.6
Sedikit modifikasi halaman depan
Minor fix tampilan responsive
Demo template fansub
Update 2.7 (wajib update)
Terlalu banyak perbaikan sampai-sampai saya lupa apa yang diperbaiki
Download box fansub
Update 2.8 (SEO)
meta header seo baru
turbo mode (cari b:js='true' lalu ubah menjadi b:js='false')
recent komentar (edit sesuai url disqus masing-masing)
meta keyword baru
seo gambar
perbaikan post bottom nav
tambahan deskripsi anime musiman tag (Fansub)
other minor fix
Untuk developer blogger, khususnya yang membuat template fansub, silahkan dibedah dan periksa codenya, siapa tahu akan memberikan inspirasi untuk membuat template yang lebih bagus dari ini. semua code bersifat open source. Silahkankn dilihat dan copy untuk dipakai di blog kalian. Mudah-mudahan dengan semangat open source, template fansub bisa menjadi lebih advance dari tempalate blog biasa. Diharapkan kedepannya akan banyak developer yang khusus membuat tempalate fansub.
Kenapa harus memilih template Anilist Pro
-
Gratis: ini alasan utamanya, tidak perlu mengeluarkan uang sepeser pun sudah bisa membuat website manga, fansub, atau novel.
- Desain anti mainstream: Desain unik tidak seperti website manga lainnya. Banyak sekali wesite manga namun desainnya hampir mirip. Sesekali apa salahnya bikin desain yang berbeda.
- Peforma: Template ini memakai css grid dan flexbox. keduanya css tersebut mengatur layout yang ringan dengan code minim. juga, dibekali dengan css modular atau istilah kerennya utility css. singkatnya, sedikit coding, peforma tinggi.
- Custom Schema: Pernah liat schema Kitsu atau Anilist. Mereka memakai schema CreativeWork yang jauh berbeda dari schema posting blog. CreativeWork adalah schema yang khusus kontent kreative seperti anime, manga atau novel, artinya cocok sekali untuk fansub. Schema jenis ini saya racik khusus untuk blogger.
Selain itu, ada juga namanya item listing schema. Bagi yang tidak tahu, schema ini berfungsi membuat list daftar anime dibawah catagori tertentu.
Saya sangat berharap dengan schma baru ini dapat mendongkrak SEO template Anilist Pro. Dua jenis schema tadi pertama kali di pasang di template ini.
Berikut adalah tata cara instalasi
- Download Notepad ++
- Ekstrak file zip buka file
Anilist_Pro_v2.3.xml
buka dengan notepad ++, copy semua code
- Masuk ke Tema > Edit HTML > Paste
- Peringatan jangan di upload langsung.
Cara upload demo post (Posting halaman depan hanya muncul 1 chapter)
Untuk mengatasinya, tambahan code berikut di setiap postingan chapter gambar. Pastekan diatas gambar <span><!--more--></span>
Cara upload demo post:
- Masuk ke Setting > Manage Blog > Import Content
- Cari file ini
demo_post.xml
- Import
Download Box
Pemakain download box tidaklah sulit. Setidaknya tahu sedikit html:
- Buka file download box dengan notepad ++ copy semua code
- Masuk ke postingan > Tampilan HTML
- Paste dibawah
Pilih salah satu download box. Ada dua jenis:
download_box.xml
: untuk menampilkan seluruh chapter. Contoh disini.
download_box_v2.xml
: untuk membagi chaper menjadi beberapa bagian. Contoh disini.
Cara posting manga chapter
Postingan chapter hanya muncul di halaman depan. Cara lebih gampang yaitu dengan melihat demo post.
- Tambahkan posting > beri judul postingan > Nama Manga Chapter 01
- Beri label Chapter dan label Manga
- Upload semua gambar. Tunggu sampai semua gambar termuat
- Tambahkan code berikut sebelum gambar
<span><!--more--></span>
- Tambahkan tombol next dan previous, ada di file
next previous button.xml
- Edit link secara manual
- Publish
Kotak komentar Disqus
Cari code berikut var disqus_shortname = 'anilist-pro';
.
Ganti anilist-pro dengan shorname disqus kalian.
Dukungan Browser
Hanya mendukung Firefox atau Chrome. Coba tebak code css apakah ini grid-template-areas: 'a1 a2''a1 a3'
. Itu adalah layout yang menyatakan 1 sidebar di kiri dan postingan di kanan. Lumayan aneh, makanya template ini hanya bagus dibuka di firefox atau chrome, karena sudah mendukung grid layout. Tolong diingatkan pengujung blog kalian untuk selalu memakai firefox atau chrome.