9.0
Dokumentasi Versi 4.0
Dokumentasi Re-Kanna Themes Versi 4.0 .Di versi terbaru template kanna chan ini lebih mengutamakan kemudahan untuk mengedit tema melalui layout jadi kalian tidak perlu repot - repot lagi mengubah kodenya lewat EDIT html.
Mengubah Warna Tampilan Themes
1.Masuk Blogger > Tema / Template >
2.Klik Pada Bagian Tombol "Sesuaikan" (disebelah tombol Edit Html)
3.Kalian Akan dibawa Ke Dashboard baru, klik pada menu "Lanjutan"
4.Silahkan sesuaikan warna themes dengan keinginan kalian.
Mengubah Link Main Menu
Di Versi 4 kalian tidak perlu repot mengubah kode untuk mengganti link menu header seperti Anime List , Home , dll .Karena bisa dilakukan lewat Layout.
1.Masuk Blogger > Tata Letak(Layout)
2.Klik Tombol Edit (Icon Pensil) .
4.Untuk Menambahkan Menu Silahkan Masukan "Nama Situs Baru" berserta urlnya .
5.Jika sudah klik Tambahkan Link, Kemudian Simpan.
Mengatur A-Z List Di Homepage
Bagi yang ingin mengubah link A-Z List khusus di homepage kalian juga hanya perlu mengedit nya lewat Tata Letak tanpa perlu masuk ke edit HTML.Caranya berikut ini:
1.Masuk Blogger > Tata Letak (Layout)
2.Pilih pada Widget A-Z List kemudian Klik Edit.
3.Klik Edit Pada Daftar Situs , Masukan Url Label Animenya .Jika kalian ingin mengarahkan ke laman anime list cukup tambahkan tanda #diikuti nama hurufnya contoh:
http:///domain.com/p/anime-list.html#A
Mengatur Widget Pengumuman Orange Dibawah Header
Jika kalian melihat pengumuman berjalan di demo re-kanna dengan background belakang berwarna orange itu adalah Widget Pengumuman.Untuk mengganti tulisan pengumumannya cukup mudah.
1.1.Masuk Blogger > Tata Letak (Layout)
2.Pilih pada Widget Pengumuman Oren kemudian Klik Edit.
3.Isi Konten: dengan teks yang ingin kalian tampilkan.Bagi yang ingin membuat teks dapat berjalan gunakan tag <marquee> contoh : <marquee> isi tulisanyaa </marquee>
4.Klik Simpan
4.Klik Simpan
Membuat Genre List Otomatis
1.Masuk Blogger > Tata Letak (Layout)
2.Tambahkan Widget > Pilih Widget Label
3.Untuk Genre List pilih pada tampilan "Cloud"
4.Klik Edit Pada Label Yang Dipilih.
5.Jika sudah Klik Simpan
Membuat Season List Otomatis
1.Masuk Blogger > Tata Letak (Layout)
2.Tambahkan Widget > Pilih Widget Label
3.Untuk Genre List pilih pada tampilan "Daftar"
4.Klik Edit Pada Label Yang Dipilih.
5.Centang Pada Bagian "Tampilkan Jumlah Postingan per label"
5.Jika sudah Klik Simpan
Mengganti Footer Menu Bawah
Menu ini terletak di bawah atau di footer menu dekat dengan tulisan copyright blog kalian kalau di Kanna chan warnaya biru paling bawah.Cara mengeditnya juga hanya lewat Layout saja:
1.Masuk Blogger > Tata Letak (Layout)
2.Klik Edit Pada Widget "link bawah" di section "Footer Menu"
3.Masukan Nama Situs dan Url Situs
4.Klik Tambahkan Link > Kemudian Klik Simpan.
Mengganti Tulisan Copyright
Bagi para pembeli template Premium yang ingin mengganti/menghapus tulisan Copyright dibawah footer caranya juga hanya perlu mengedit lewat Tata Letak.
1.Masuk Blogger > Tata Letak (Layout)
2.Scroll Ke Bawah hingga Section "Footer Menu"
3.Klik Edit pada widget "CopyRight"
4.Silahkan ubah tulisanya sesuka kalian kemudian klik Simpan.
Cara Membuat Episode List Di Dalam Postingan (EZ PZ)
1.Masuk Blogger> Buat Postingan Baru
2.Buatlah Judul/Heading nama episode animenya , daftar episode anime (taruh secara perbaris seperti digamabr)
3.Seleksi daftar episode animenya kemudian klik pada menu list didashboard atas.
4.Seleksi lagi nama episode yang sudah kalian buat dan beri linknya (Seperti gambar)
5.Jika semua sudah , masuk kemode HTML dan tambahkan kode
<div class="episodelist"> </div> sebelum dan sesudah kode yang kalian buat.(Contoh liat pada gambar)
6.Jika sudah semua klik Publikasikan dan lihatlah hasilnya
Pengaturan Anime Acak /Random Post :
Mengatur Anime Acak Jadi Berdasarkan Label Saja
misal hanya khusus ongoing, winter , dll
1.Pastikan postingan kalian sudah memiliki labelnya
2.Masuk Blogger > Tema > Edit Html
3.Cari / CTRL+F : Anime Acak .
4.Ubah Script yang ditandai dengan kode berikut:
<script src='/feeds/posts/default/-/namalabel?alt=json-in-script&callback=reading_article&max-results=50' type='text/javascript'/>6.Klik Simpan Tema
View Code In Github.
Mengubah Tulisan "Series"
1.Tema > Edit Html
2.Cari / CTRL+F : seriess
3.Ganti Tulisanya sesuai keinginan kamu.
Pengaturan Recent Post By Label
Recent Post By Label
1.Masuk Blogger > Tata Letak (Layout)
2.Scroll Ke Bawah hingga Section "Main Blog"
3.Klik Edit pada widget "Recent Live Action"
4.Ubah Judul Widgetnya Sesuai Kalian
5.Konten cukup isi dengan nama label , contoh adventure
(tanpa koma , dan huruf kapital/kecil harus sesuai dengan label yang kamu buat)
Mengatur Jumlah Postingann yang tampil:
1.Masuk Blogger > Tema (Template)
2.Cari / CTRL + F> var numposts
3.Silahkan ubah angka disampingnya untuk mengatur jumlah postingan yang ingin tampil.
Mengganti Nama Label Di Gambar:
1.Masuk Blogger > Tema (Template)
2.Cari / CTRL + F> var labelnya
3.Silahkan ubah tulisan disampingnya untuk mengatur nama label sesuka mu
Menampilkan Skor Anime Pada Halaman Index /Home
Simpel kalian cukup menambahkan label saat memposting misal 7.6 (tanpa koma)
Karena ini menggunakan fungsi dari label jadi pas di genre akan terlihat skor angka nah gimana cara menghilangkanya?
Tema > Edit HTML > CTRL+ F > a.genred > masukan kode berikut tepat diatasnya
Karena ini menggunakan fungsi dari label jadi pas di genre akan terlihat skor angka nah gimana cara menghilangkanya?
Tema > Edit HTML > CTRL+ F > a.genred > masukan kode berikut tepat diatasnya
a.genred:nth-child(1), .JK-Category a:nth-child(1) {
display: none;
}Saya menyarankan untuk menggunakan kode itu jika memang postingan kalian sudah diberi skor semuanya.
Menampilkan Tipe / Jenis Anime
Caranya sama kalian cukup menambahkan label Ongoing , Movie dan sebagainya saat memposting , berikut adalah tipe list label yang mendukung :
Ongoing , Movie , BD , TV , Batch , OVA , StreamingPesan Otomatis Di Bawah Artikel
1.Masuk Blogger> Tema > Edit Html >
2.Cari / CTRL+ F > Pesan Otomatis
3.Silahkan Ikuti Instruksi yang ada didalam kode .
4.Ganti tulisan pesan otomatis sesuka kalian
5.Klik Simpan
Pengaturan Iklan Dibawah Post
1.Masuk Blogger> Tema > Edit Html >
2.Cari / CTRL+ F > Iklan dibawah postingan
3.Silahkan Ikuti Instruksi yang ada didalam kode .
4.Ganti url gambar banner sesuka kalian dengan menggunakan tag <img src="url gambar"/>
5.Klik Simpan
Pengaturan Komentar Disqus
1.Masuk Blogger> Tema > Edit Html >
2.Cari / CTRL+ F > disqus_shortname
3.Silahkan ganti dengan shortname milik kamu.
4.Akan dua kode disqus_shortname yang harus kalian ganti(pastikan kalian sudah mengubah semuanya)
5.Klik Simpan
Pengaturan Page Navigation
Kak gimana cara ngatur jumlah navigasi yang ada dibawah besertaa postingan muncul per navnya?
1.Masuk Blogger> Tema > Edit Html >
2.Cari / CTRL+ F > Page Navigation
3.Silahkan ganti pengaturan berikut:
var perPage=7; isi dengan jumlah postingan yang tampil per navigasi
var numPages=3; isi dengan jumlah nomor navigasi yang ingin tampil
5.Klik Simpan
Request : Cara Menghilangkan Gambar Cover Kecil & Sidebar Author
Kemarin , ada yang nanya kak bisa gak gambar cover kecil diatas first image dihilangkan ?
bisa kok , caranya gimana? ok ikuti tutorial berikut:
Masuk Tema> Edit Html > CTRL+F > /*Dark Mode*/ > Kemudian letakan kode berikut tepat diatasnya:
/*Custom Penghilangan*/
.coverx{display:none!Important}
.cover-kecil{margin:0!important}
.l{margin-left:13px!Important}Kalau post author sidebar yang ini cara ngilanginnya gimana? caranya sama cukup tambahkan kode berikut tepat diatas (sama kayak diatas):
.area{display:none!Important}
.Jika sudah klik simpam Tema..Contoh peletakan:
Jika kode diatas tidak dapat disalin silahkan , unduh lewat melalui github berikut:
Request : Cara Membuat Post Menjadi Full Witdh di Laman Static
Kemarin , ada yang nanya kak cara buat laman static pages jadi full width gimana? jadi sidebarnya ilang cuma post aja yang ada.Ok Begini:
1.Masuk Blogger > Tema > Edit HTML
2.Cari CTRL+F > </head><! (ATAU KETIK /head)
3.Letakan kode berikut tepat diatasnya:
1.Masuk Blogger > Tema > Edit HTML
2.Cari CTRL+F > </head><! (ATAU KETIK /head)
3.Letakan kode berikut tepat diatasnya:
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#sidebar-wrapper {display: none;}
#main-wrapper {width: 100%;}
article.post.hentry {border-top: 4px solid #6d87db;}
</style>
</b:if>5.Salin Kode disini: View Code In Github
Request : Anime Grabber Dari MyAnimeList
Buat yang nanya min bisa nggak themes re:kanna ngegrabb info dan data anime dari mal? soalnya kan ribet kalau masukin satu".
Untuk menjawab pertanyaan tersebut sekarang sudah ada tools khusus untuk mengeggrab mal atau mengambil data anime dari myanimelist dan hasil dari generatenya langsung terindikasi dengan kode milik Re:Kanna template.Jadi kalian tinggal kopas aja hasil generatenya ke postingan.
Link Re:Kanna Post Generator Tools: http://www.kanna.my.id
Cara Pemakaian :
Pergi ke url diatas > untuk grab info anime, masukan url anime malnya *contoh pada gambar> buat yang nggak mau ribet masukin link lagi di blogger isi sekalian link downloadnya sesuka kalian sesuaikan juga sama nama servernya> Jika sudah klik generate > salin dan paste kode hasil generate ke postingan di MODE TAB HTML.
Kekurangan cuma satu karena ini ngambil langsung dari MAL jadi bagian sinopsis masih bahasa inggris.Tapi dengan adanya Google Translate saya rasa tidak masalah.
Note : Agar gambar muncul saat posting artikel , pastikan kalian mengupload langsung gambar dari postingan blogger bukan menyalin dari url dari MAL.
Tools ini dibuat dan di coding oleh Gusmanu bukan dari pihak atau tim Exploit.Jadi saya mengucapkan terimakasih kepada Gusmanu atas kontribusinya.
Tambahan Tutorial Anime List Per Label Otomatis :
Silahkan ubah pada bagian yang saya tandai dengan nama label sobat misal nama labelnya Movie maka ganti jadi :
/feed/post/default/-/Movie?orderby.............
Tutorial Menghapus Fitur LazyLoad Di Template Re:Kanna
1.Masuk Blogger > Template > Edit HTML.
2.Cari / CTRL+F > // Lazy Load
3.Hapus semua script kode yang saya tandai pada gambar diatas mulai dari
//<![CDATA[ .
... sampai penutup ....
//]]>
4.Jika sudah klik "Simpan Tema"
Bug & Solusi
1.Mengatasi link Anime List by label yang kadang tidak sesuai dengan judul
Ok , terkhusus buat kalian yang mengalami masalah ini atau ketika membuat anime list , judul dan linknya tidak sesuai cobalah cara berikut.Sebelumnya perlu diketahui bahwa bug ini terjadi dikarenakan ada postingan dengan judul yang diawali dengan angka.
Cara mengatasinya ganti kode anime list yang ada di dokumentasi ,dengan kode berikut ini:
Cara mengatasinya ganti kode anime list yang ada di dokumentasi ,dengan kode berikut ini:
<style type="text/css">
#abjad-filted{width:100%;list-style-type:none;height:100%;margin:0 0 15px;padding:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center}
#abjad-filted a{display:inline-block;background:#333;transition:all .5s;background-color:#3F51B5;color:#fff;padding:6px 0;cursor:pointer;margin:0 5px 5px 0;text-transform:uppercase;width:37px;border-radius:5px;float:left;text-align:center}
.abjad-alfabet span{padding:3px 10px;background-color:#6d87db;color:white}
#abjad-filted a:hover{text-decoration:none;background:#222;transition:all .5s}
a.abjad-alfabet{font-size:17px;font-weight:700;border-bottom:3px solid #6d87db;display:block;margin-top:10px;padding:2px 0}
ul.list-post{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;list-style:none;margin:5px auto;font-size:13px;line-height:22px}
ul.list-post li:nth-child(odd){background:rgba(218,214,214,0.23)}
ul.list-post li{font-size:13px;padding-right:5px;white-space:nowrap;padding:2px 0;overflow:hidden;margin-bottom:3px;text-overflow:ellipsis;list-style-type:square}
ul.list-post li a{color:#333;font-size:14px;font-weight:600}
ul.list-post li a:hover{color:#ec2028;text-decoration:none}
ul.list-post li a:before{content:'f111';font-family:fontawesome;display:block;float:left;margin-right:8px;color:#565151;font-weight:300;font-size:6px}
@media screen and (max-width:640px){ul.list-post {column-count: 1!important;}}
</style>
<script type="text/javascript">/*<![CDATA[*/
function Index_anilist(a){this.abjad={};this.overkeys=[];this.grab=function(){var g=a.feed.entry;var c=g.length;for(var d=0;d<c;d++){if(d==c){break}var f=g[d];var h=f.title.$t;var i="";for(var b=0;b<f.link.length;b++){if(f.link[b].rel=="alternate"){i=f.link[b].href}}var e=h.substr(0,1).toLowerCase();var j={title:h,linkpost:i};if(typeof this.abjad[e]=="undefined"){this.abjad[e]=[j]}else{if(typeof this.abjad[e]=="object"){this.abjad[e].push(j)}}}};this.filter=function(){for(var b in this.abjad){this.overkeys.push(b);this.overkeys.sort()}};this.buildingscripts=function(){for(var c in this.overkeys){var j=this.overkeys[c];var i=j.toUpperCase();var e=this.abjad[j];var g=[];var h=[];document.write('<a class="abjad-alfabet" name='+i+"><span>"+i+"</span></a>");document.write('<ul class="list-post">');for(var d=0;d<e.length;d++){g.push(e[d].title);g.sort()}for(var d=0;d<e.length;d++){var k=g[d];var f="";for(var b=0;b<e.length;b++){if(e[b].title==k){f=e[b].linkpost}}document.write('<li><a href="'+f+'">'+k+"</a></li>")}document.write("</ul>")}};this.run=function(){this.grab();this.filter();this.buildingscripts()}}function show_anilist(b){var a=new Index_anilist(b);a.run()};document.write("<div id='abjad-filted'>rn<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 class="clear"></div>rn</div>");
document.write('<script src="/feeds/posts/default/-/namalabel?orderby=published&alt=json-in-script&callback=show_anilist&start-index=1&max-results=888"></script>');
/*]]>*/</script>
Note: silahkan ganti "namalabel" sesuai keinginan kalian.Jika kode diatas tidak dapat disalin silahkan download source-code nya melalui link Github berikut:
Perbaikan Bug Dark Mode
Sebenernya ini cuma karena kurang css aja untuk bagian dark-mode karena di versi 4 ada widget dan class baru.Untuk cara mengatasinya :1.Masuk Blogger > Tema /Themes > Edit Html
2.Cari/ CTRL + F "/*Dark Mode*/" > Klik Enter tanpa tanda petik
3.Salin Dan Paste Kode Yang Ada Di Github Berikut , tepat dibawah kode yang kalian cari tadi:
View Code On Github
Khusus pengguna Re:Kanna V.4 Original (dengan header) bagian .dark-mode #menu,#menu .menu li a{background:#15202b;color:white} tidak perlu kalian masukan.
Sedikit Perbaikan lain untuk Kategori List / Genre List static pages khusus halaman Mobile yang berantakan .
1.Masuk Blogger > Tema /Themes > Edit Html
2.Cari / CTRL + F ".coverx{display:none}" > Klik Enter tanpa tanda petik.
3.Salin Dan Paste Kode Yang Ada Di dibawah ini tepat diatasnya:
.kategorilist li {width: 40%;}
Mengatasi Background Diatas Anime Lainyya Yang Hilang
Buat kalian yang mengalami background putih diatas tulisan anime lainnya yang tiba tiba hilang silahkan ikuti tutorial berikut untuk mengatasinya.Btw , ini cuma gegara server buat upload gambarnya di mikunimek down uy.
Solusi Untuk Mengatasi Masalah Ini.
1.Masuk > Blogger > Edit Html .
2.Cari / CTRL+ F > #ignielRelated ul li a.judul
3.Silahkan hapus pada kode yang saya tandai mulai dari background:url(.... sampai akhir .png)" dan ganti dengan kode berikut :
background: rgba(255, 255, 255, 0.85)
