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 lamaGrid Chapter di halaman depanPenambahan Anilist Pro Fansub
Update 2.6
Sedikit modifikasi halaman depanMinor fix tampilan responsiveDemo template fansub
Update 2.7 (wajib update)
Terlalu banyak perbaikan sampai-sampai saya lupa apa yang diperbaikiDownload box fansub
Update 2.8 (SEO)
meta header seo baruturbo mode (cari b:js='true' lalu ubah menjadi b:js='false')recent komentar (edit sesuai url disqus masing-masing)meta keyword baruseo gambarperbaikan post bottom navtambahan 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.xmlbuka 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.
Comments
biar expr:href='data:label.url' berubah jadi url postnya bagaimana ya mas ? , jadi tidak tertuju ke url label melainkan url post nya.
b:if cond='data:label.name in ["Chapter Update"]'
a class='c-g800 c-114' expr:href='data:label.url' rel='tag'
data:label.name/
/a
/b:if
gunakan website ini untuk encoding code http://www.htmlparse.com/
b:loop index='i' values='data:post.labels' var='label'
b:if cond='data:label.name in ["Chapter Update"]'
a class='c-g800 c-114' expr:href='data:label.url' rel='tag'
data:label.name/
/a
/b:if
biar expr:href='data:label.url' berubah jadi url postnya bagaimana ya mas ? , jadi tidak tertuju ke url label melainkan url post nya.
Jadi bukan muncul https:// urlblog /search/label/ munculnya url post https:// urlblog /date/urlpost.html
Maaf mas yg diatas tdk muncul kodenya.
<a expr:href='data:post.url' rel='tag'><data:label.name/></a>
Ngomong-ngomong, suka banget sama Templatenya, semoga makin banyak template buat blog Manganya. Semangat, min!
coba copy paste ulang codenya. jangan di upload
<div id="Download-details">
paste code disini
</div>
<span><!--more--></span>
b:if cond='data:blog.pageType in {"item","static_page"}'>
script type='text/javascript'>//');for(var l=0;l'),document.write('span class="--item"> href="'+d+'" >'+p+" ............. dst
/b:if>
blank putih min
gk bisa bantu, soalnya gk ngerti javascript.
besok saya update.
https://imgur.com/I59escl based on Lorijs slider.
Also if you could fix the blurry image of the top of the post something like this:
https://imgur.com/vPlJeaE
Maybe you could make a post summary like this website: https://animex-ost.blogspot.com/2020/04/mewkledreamy-ost.html it's really cool.
I appreciate your effort and work.
Greetings, Gurk.
Slider and fix background is good idea, maybe i will add that for next updates.
I must say that very nice template, its inspired me to make new type template. Unfortunately i can't modified post summary like that, the design language is so different from my template. XD
- cari code berikut <b:includable id='postMeta' var='post'>
- paste code schema sampai closing tag. download di sini https://app.box.com/s/k981xnexks2jr42f99481i14v1ljntf4
Untuk seo, menurutku lebih pantas memakai schema jenis ini, supaya google tau jenis kontent blog kita. Meskipun begitu masih belum menjamin bisa ranking di google, masih ada faktor lain yang menentukan ranking, seperti keyword: download anime sub indo vs download anime subtitle indonesia membawa kita ke situs yang berbeda. Keywoard sub indo membawa kita ke moenime, sedangkan keywoard subtitle indoesia meampilkan situs 10 anime terbaik. Ada satu website yang muncul di kedua keywoard tadi, yaitu kiminime. Kiminime memakai 2 keywoard. Jadi apa kesimpulannya disini, selidiki keywoard yang banyak orang pakai lalu masukkan di postingan kamu, deskripsi anime tidak bisa mendongkrak seo.
Schema CreativeWork bisa membantu tapi tidak banyak, shema blog biasa juga ok. Rencana kedepannya akan ingin membuat schema TVSeries seperti MyanimeList.
Layar laptop saya kecil jadi, sidebar hampir penuh, tidak kebagian kontent lain. Jadi tidak masuk fitur template. Tapi, kalau kamu mau, masukkan css berikut untuk stiky sidebar.
#PopularPosts1 {
position: sticky;
top: 0;
}
Susah juga mau buat download box dari awal, punya download box huntersekai bagus, mungkin itu buat referensi saya nanti.
Maybe you could use some of the opensource codes hosted there to make a post summary like anime-ost and to fix the post background.
Slider will help to reduce the bounce rate, the loryjs slidder is optimal used with a json to call random posts and adding whale.js
I'm looking forward for the next updates.
https://imgur.com/a/EEvyZzK
The upcoming labels are cut by lack of space to show them, while i can fix it myself would be better if you include the fix in the latest updates.
Ah yes, i cant figure it out how to solve that problem. If you could post your solution, that would save my time.
bahasa programnya beda dari blogger
https://wernayasa.blogspot.com/
https://imgur.com/a/IATWV9r
you have to use this css code:
.widget-name {
display: block;
padding: 1rem;
font-size: 1rem;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 1px;
border-left: 5px solid #22a6b3;
background-color: #1b1d22;
and to disable this piece of code elsewhere in the template:
background-color: #23a6b3!important;
in order to make the black background work.
Also i'm working on learning how the post template work to help you.
Do you use any type of instant message service? It would be more quicker if we can chat and exchange information.
body::-webkit-scrollbar {
width: 7px;
background-color: #000000;
}
body::-webkit-scrollbar-track {
background-color: #1b1d22;
border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #23a6b3;
border-radius: 10px;
}
https://yukithema.blogspot.com/2020/06/template-nekonime-clonning-redesign.html
https://anilist-pro-bt.blogspot.com/2020/06/mahouka-double-seven-hen-ch-04.html
copy this code:
<div class='mw-xl m-auto'>
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
</div>
paste bellow this code:
<data:post.body/>
Nice template btw <3
I do planning redesign homepage smiliar to majority manga websites.
<span><!--more--></span>
b:if cond='data:view.url in {"Url halaman Anda"}'
saya jadikan kek gini
b:if expr:cond='data:view.url in {"data:post.url"}'
tapi kok ndak bisa ?, data didalamnya malah hilang ntah kemana
hei, buatan siapa itu?
mau bikin apa sih sebenarnya code itu?
sebenarnya mau buat untuk minify kode hasil render template biar jadi sedikit mas , jadi
yang harus nya ada javanya berubah jadi tidak, dan komentar nya seharusnya jadi satu dengan postnya bisa dialihkan ke halaman yang khusus komentar untuk post itu. (isi post hilang diganti dengan widget komentar).
tadi sudah konsultasi sama mas igoy.
penerapan kodenya berbeda ternyata , tapi sesuai dengan keinginanku.
ini masih buat kerangkanya.
carousel-nya bagus buat referensi design.
btw, siapa mas igoy? dia punya blog?
thanks udah dijawab:D
kalau blog tidak tau mas.
saranku pakai aja versi terbaru, layoutsVersion 3 dan widget v2
kalau breadcrum web yg di cloing kelihatan, sy pakai yang biasa, kalau engk keliatan, pakai json. sama aj, gk ada bedanya.
belum pasti juga sih apa bedanya, mungkin bedanya pada struktur b:includable atau mungkin letak dan codenya beda.
prakteknya sebagai berikut:
sy pasang postmetabreadcrum dan postMeta kalau di postingan/SingleItem.
kalau di halaman depan/MultipleItems pasang postMeta saja.
Ini pengalaman pribadi tentang SEO:
Dulu blog saya bernama EmissionHex, sumpah gk ada yang mengujungin lewat google. Lalu saya ubah menjadi Template Fansub.
Dan berhasil, pengunjung berdatangan lewat google search, sekarang blog ini ranking 2 di google dengan keywoard Template Fansub. Ajaib kan.
masuk ke postingan klik ubah > pilih ukuran asli
Sebenarnya sudah lama mw bikin template tipe komunitas/forum, cuman gk sempat.
Template forum bakal mengubah cara kita memakai blogger. User tidak hanya komentar tapi bisa posting topik tertentu. Itulah kira2 gambaran template forum idaman saya.
hehehe (Kurang tau tentang skrip)
https://anilist-pro-fansub-bt.blogspot.com/search
/search
https://1.bp.blogspot.com/-FRVGGxnke_U/Xvfv_UiaZTI/AAAAAAAAEIY/CU1PgjP0K1ADsIG5b3mFwuT4WOWsTnwggCK4BGAsYHg/s1081/Screenshot_2020-06-28%2BPost%2BEdit.jpg
im sorry, i cant help you
masih belum sempat nyoba. mungkin seperti ini
<b:if cond="">
<b:if cond="">
<!-- Execute -->
</b:if>
</b:if>
bisa sih, edit di html
logo flex
ganti huruf A dan huruf L. ganti dengan initial blog km atau bebas.
how can i fix this?
to ensure there is no problem, i suggest you copy template code and paste to your template.
Kalo boleh sarann/tutornya kak
<b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:post.labels none (l => l.name == "Chapter")'>
<b:include data='post' name='postCommentsAndAd'/>
</b:if>
</b:loop>
Cara memasangnya di blog kamu yaitu dengan mencari code berikut:
<b:includable id='main' var='this'>
Di bawahnya ada code <b:loop. Pastekan code yang di copy tadi sampai </b:loop>. Simpan, kalau tidak ada error berarti sukses. Tampilannya seperti biasa tidak ada perubahan, namun apabila kamu masukkan label Chapter di postingan maka postingan tersebut tidak muncul karena sudah tersaring dengan code diatas.
Ini baru tahap awalnya, kalau ini sukses baru kita lanjut ke tahap berikutnya.
ini blog kamu kan, nanti sy tambahkan di menu biar orang pada tau
https://www.yukithema.eu.org/
<b:if cond='!data:view.isSingleItem'>
tidak ada solusinya. maaf
div class='flex'
sampai closing tag
https://youtu.be/UWwOPphXyvM
Saya engk berani nyobanya karna letak css-nya tidak beraturan.
https://youtu.be/OmEzO63-vig
serius, waktu gue liat itu, menyesal tidak dipasang di tema ini.
makanya ada rencana membuat anichart pro, dan sekaligus menjadi penerus tema anilist pro.
bisa berikan screenshot dan sedidikit penjelasan?
tampil seperti ini
temanya sudah di update.
Anilist_Pro_Fansub_v2.9.xml
Ane tunggu
Homepage tinggal kasih label Album, Single, OST jadi deh (ngomongnya aja gampang padahal sulit buatnya wkwkw)
dulu ada sih niat bikin tema OST, tapi lama2 udah lupa.
maaf ya, request km sy tolak. :(
Mengenai code nya masih ada bug nya dan ane banyak tambahan code dari css javascript dan perubahan html nya .nah bug nya di bagian total tampilan post itu ga berjalan secara otomatis walau dh di set default lwt setelan
Thanks ya sudah bisa fix bug sendiri, kerjaan gue jadi ringan.
Kemarin Kimimaru lapor masalah total postingan, cuman belum ketemu solusinya.
Ternyata km pakai 2 blog ya, idemu bagus dan kreatif.
Nanti kalau ada kesempatan saya buat tema khusus untuk hosting gambar.
Sebenarnya gampang, tinggal km edit di meta header title di template.
Letakknya di bawah
<head>
I remember last night, before going to bed, everything was fine. But today, i got error, it does not display anything in my posts.
My post: https://fansub.animuri.page/2021/01/wonder-egg-priority.html
img: https://imgur.com/a/bgYozq6
datapost-html: https://drive.google.com/file/d/1vuxMWiFLVEyCBqH9_U45vd2z0sUP80Aq/view?usp=sharing
post-html: https://drive.google.com/file/d/1BxorXOWkiz9R5AJtAXtWusJqYvBuEQA6/view?usp=sharing
Have anyway to remove this below in 'page' but dont remove in 'post. I'm just newbie, 2 days learn html.
https://imgur.com/LTNLddf
Sorry for spam comment @@
No problem, glad you fix that.
I want to select 'list' as the default mode
Its not possible.
The code is too complex.
search "item def app-pl-20 app-pr-20"
and rename to "item def app-pl-20 app-pr-20 list"
Oh thanks! It work!
saya ijin download template nya untuk pengguna newbie seperti saya .
saya ingin membuat website anime :)
hello, silahkan
kalau blog km ada hubungannya dengan anime, silahkan promosikan disini.
maksudmu yg grid yang mana?
kalau ingin satu mode saja tinggal hapus switch nya, biar gk bisa di ubah2
trus bagaimana caranya tampilan yang ke dua jadi default
tadi gw cek codenya, ternyata susah di modif.
jadi kayaknya engk bisa deh.
kamu harus menulis ulang codingnya, perkerjaanya berat dan saya gk sempat bantu kamu
@Girlss, @Almos
try Firefox and Chrome browser
that weird,
its should working unless javascript disable in your browser
install OBS dulu deh,
ntar gw post di youtube
tidak secara detail, tapi dasar2 nya doang
pake label doang gan, masukkan label di postingan,
Info Format (pilih satu label saja):
TV
OVA
Movie
ONA
Info Episode ( pilih satu label saja):
Episode 01
Episode 02
Episode 03
Episode dst...
Info Status (pilih satu label saja):
Complete
Ongoing
Untuk genre seperti biasa (boleh input lebih dari satu):
Action
Adventure
Fantasi
dll
Salam dari Malaysia!
Selamat datang
Krna disqus paksa kluar iklan :v
kayaknya engk bisa deh, setiap kali dicoba temanya error,
saya lupa gimana membalikkan ke komentar awal.
maaf
Itu bug belum bisa gw tambal. Belum ketemu solusinya.
Masalahnya hanya gk tampil di mobile, tapi di desktop normal.
harus ditukar menjadi blog url sendiri contohnya https://blablabla.blogspot.com