Membuat chapter list di Blogger memang mudah namun agak lama jika diketik secara manual, maka chapter list otomatis yang saya ambil dari template MegumiNovel yang dibuat Codepelajar mungkin bisa jadi solusi.
Script ini otomatis menampilkan daftar link menuju postingan dengan label tertentu. Misalkan labelnya adalah Hero maka semua postingan link beserta judul dengan label Hero akan tampil dalam bentuk list. Untuk membuatnya Anda harus masuk ke edit tema dalam mode html, dan jangan lupa backup dulu templatenya bila suatu hal yang tidak diinginkan terjadi maka anda tinggal memulihkanya.
Mari ke tutorial dan saya asumsikan anda sudah masuk edit template mode html, sekarang cari kode
<b:includable id='post' var='post'>
Sekarang tambahkan kode berikut tepat di atasnya<b:includable id='select_chapter'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.name != "Novel" and data:label.name != "Anime" and data:label.name != "Manga"'><script>var postID = <data:post.id/>;//<![CDATA[if(autlist==true){function autolist(e){for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length;r++)if("alternate"==e.feed.entry[t].link[r].rel){var n=e.feed.entry[t].link[r].href;break}var f=e.feed.entry[t].title.$t;e.feed.entry[t].id.$t.substr(51,19)!=postID&&document.write("<li><a href="+n+">"+f+"</a></li>")}}}//]]></script><div class='auto-listchap'><ul><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?orderby=published&max-results=99999&alt=json-in-script&callback=autolist"' type='text/javascript'/></ul></div></b:if></b:loop></b:includable>
Untuk "Novel, Anime dan Manga" adalah label pengecualian yang tidak akan ikut tereksekusi sehingga script tidak menambahkan postingan dengan label tersebut. Jika ingin menambahkan pengecualian anda tambah dengan kode
and data:label.name != "Label Name"
. Selanjutnya tinggal Anda tambahkan kode berikut di bawah kode <data:post.body/>
<b:if cond='data:view.isPost'><b:include name='select_chapter'/></b:if>
Sekarang anda simpan dan buka postingan yang ingin ditambahkan chapter list otomatis, dan masukan kode berikut di paling bawah postingn. <script>var autlist = true</script>
Silahkan buat style sendiri supaya chapter list otomatis terlihat bagus, jika mau style yang pernah saya pake silahkan tambahkan kode berikut di atas kode
]]></b:skin>
atau kode </style>
dan tentunya harus masuk lagi ke mode html.
.auto-listchap {
max-height: 244px;
overflow: auto;
}
.auto-listchap ul {
padding: 0.1rem;
margin: 0;
}
.auto-listchap li {
background-color: #eee;
padding: 0.3rem;
margin: 0.3rem;
}
Sekarang lihat postingan, jika script chapter list otomatis pada blogger ini gagal silahkan bertanya dikolom komentar mungkin saya bisa bantu. Dan kita patut berterimakasih kepada Codepelajar yang sudah membuat script ini.
List Chapter ini contohnya kayak gimana sih Kak? Apa yang ada di samping gitu kayak label?
ReplyDeleteBukan mba, itu tuh khusus buat blog novel atau manga. Misalkan pada sebuah postingan kan ada tuh daftar link menuju chapter 1 2 3 dst. nah itu mba
Deletetest
DeleteMakasih mas... akhirnya di post... heheheheheheheh
ReplyDeleteit works mas, aku seneng banget. Makasii banyaaaak.
ReplyDeleteBermanfaat sekali untuk template novel atau manga.
ReplyDeleteSusah banget mau bikin script seperti itu, makasih sudah mau share.
Cara agar output document.write nya jadi sesuai keinginan kita bagaimana?
ReplyDeleteUntuk hal tersebut ada script pemanggil seperti berikut
Delete<script src='"/feeds/posts/default/-/Label?orderby=published&max-results=500&alt=json-in-script&callback=autolist"' type='text/javascript'/>
nah disana hasil eksekusi script akan di write
min apa ini bisa ngindex lbih dari 150 chapter? soalnya pnglaman pas bkin box select chapter dan tmbol next prev cm bs ngindex skitar 150 post wlpun d script udh d bkin max 9999
ReplyDeleteBisa sampe mentok 500 max-results nya ganti ke 500 aja.
DeleteWah ini yang saya cari, semoga bisa :)
ReplyDeleteMakasih tutorialnya.
Kalau yang untuk upload gambarnya gimana min? Biar otomatis, jadi gak perlu dibual manual lagi...
ReplyDeleteGimana ya? Kurang paham saya
DeleteMuncul nya di halaman info komik kak ??
ReplyDeleteIya kak, kalau ditambahin kode pemanggil maka list secara otomatis tampil.
DeleteKode pemanggil nya yg mana ??
Delete<script>var autlist = true</script>
Deleteyang langsung di tanam ke postingan ada gak min? ( masukin manual kodenya ke dalam postingan)
ReplyDeleteBisa, gunakan kode ini
Delete<script>
var postID = "7788405310619880860";
function autolist(e) {
for (var t = 0; t < e.feed.entry.length; t++) {
for (var r = 0; r < e.feed.entry[t].link.length; r++)
if ("alternate" == e.feed.entry[t].link[r].rel) {
var n = e.feed.entry[t].link[r].href;
break;
}
var f = e.feed.entry[t].title.$t;
e.feed.entry[t].id.$t.substr(51, 19) != postID &&
document.write("<li><a href=" + n + ">" + f + "</a></li>");
}
}
</script>
<div class='auto-listchap'>
<ol>
<script src='/feeds/posts/default/-/LABEL?orderby=published&max-results=500&alt=json-in-script&callback=autolist' type='text/javascript'></script>
</ol>
</div>
Ganti postid dengan id postingan, lalu label adalah label adalah label novel.
This comment has been removed by the author.
DeleteSepertinya agak salah coba ini
Delete<script>
var postID = "id dari postingan";
function autolist(e) {
for (var t = 0; t < e.feed.entry.length; t++) {
for (var r = 0; r < e.feed.entry[t].link.length; r++)
if ("alternate" == e.feed.entry[t].link[r].rel) {
var n = e.feed.entry[t].link[r].href;
break;
}
var f = e.feed.entry[t].title.$t;
e.feed.entry[t].id.$t.substr(51, 19) != postID &&
document.write("<li><a href=" + n + ">" + f + "</a></li>");
}
}
</script>
<div class='auto-listchap'>
<ul>
<script src='/feeds/posts/default/-/LABEL?orderby=published&max-results=500&alt=json-in-script&callback=autolist' type='text/javascript'></script>
</ul>
</div>
mas kalo kode itu di kustom tambah label bisa gak?
DeleteBisa, coba /feeds/posts/default/-/LABEL1/LABEL2?orderby=published&max-results=500&alt=json-in-script&callback=autolist kalau gak salah, lupa lagi soalnya
DeleteJadinya seperti apa... penasaran... apa seperti dropdown biasa ?? Atau kaya di mangago ??
ReplyDeleteList biasa, kalau mau dijadiin collapse harus pake javascript+css tambahan
DeleteKak... kok gagal ya
ReplyDeleteAtau sebelumnya semua Chapter harus di kasih label dulu...??
Soalnya di blog ku semua Postingan gk ku kasih label
Terus
Pemanggil untuk list Chapter nya apa ??
Agar daftar nya muncul di list Chapter
πππ
Help me please
Kasih label dulu lah, misal untuk komik dengan judul a kasih label a kalau judulnya b kasih b. Kode pemanggil <script>var autlist = true</script>
Deleteharus edit di tampilan html bukan tampilan menulis
Maaf tanya terus π π π
DeleteMasih belajar...
Untuk kode udah di pasang di template semua kok....
Emmm... itu kode yg di kasih di taruh di bagian Postingan capt list kan ... ??
Nggak apa-apa kak, lebih baik bertanya supaya nanti bisa saya perbaiki postingannya bila kurang paham.
DeleteUntuk yang bagian postingan, edit ke mode html terlebih dahulu bisa klik dibagian tools <> paling kiri lalu paste kode berikut
<script>var autlist = true</script>
Kak... tanya lagiπππ
DeleteUntuk ngasih style sendiri itu naamanya apa...
Contoh dropdown dengan css
Kalau ini nama nya apa... ??
Harus baca di w3school nih kak, soalnya bisa panjang kalau dijelasin. Mungkin maksudnya Collapse ya kak? Yang di klik konten jadi kelihatan diklik lagi ngilang. Untuk ngebuat collapse seperti itu harus pake css dan javascript
DeleteKak kalau buatnya di android gimana? Ini kan buatnya di laptop/komputer.. terus kalo di hp nggak bisa klik ctrl+F nya terus masukin kodenya... Aku buatnya di android hp.. tapi bingung nggak ada kayak contohnya kaka.. hm apalagi sekarang blogger.com udah versi terbarunyaπ₯
ReplyDeleteTerima kasih
Bisa menggunakan fitur pencarian halaman (chrome), lalu scroll.
Deletekak yang kode ini kok nggak nemu ?
ReplyDeletemin share template meguminovel dong, di blig codepelajar gak bisa didownload. tolong nih min.
ReplyDeleteSaya dah coba tapi ga work,
ReplyDeleteUdah sesuai arahan tpi yg data post body kan ad 3, ditaruh yg mana?
Oke makasih kak... Eh btw kak.. kalo buat gambar komiknya biar menyatu dengan gambar yang ada di atasnya sama gambar di bawahnya itu gimana yak? Kan nih di blogger itu kalo buat blog komik.. kan gambar komiknya itu kepisah gitu.. jadinya pas di page selanjutnya jadi kepotong gitu.. intinya.. biar page 1 nyatu sama page 2, 3, 4 dll itu nyatu gk kepotong... kek situs bayar gitu lo.. jadi gambarnya nyatu sama gambar lainnya. Terima ksih
ReplyDeleteJangan dikasih enter, atau bisa aja dihapus space antara gambarnya
ReplyDeleteTerima kasih banyak kak taufik.. dan lagi aku mau tanya.. apa bisa untuk blogger gratis yang mana gambarnya jadi full gitu, maksudku gambarnya itu bisa full samping kiri kanan, seperti blog atau situs yang berbayar? Kan contohnya nih aku buat blog komik gitu tapi blog/situsnya gratis.. lah itu kiranya ada caranya enggak kalo untuk blog yang gratis agar gambar di blog tersebut bisa full samping kanan kiri..
ReplyDeleteBang, punyaku chpater list.nya kok maksimal 25 list ya, cara nambahinnya gimana bang?
ReplyDeleteDaniah, itu sih dibagian cssnya. Bisa aja kok.
ReplyDeleteWah saya juga kurang tahu, soalnya saya udah jarang ngoding wkwk. Coba ulik sendiri
ReplyDeleteKalo boleh tahu cssnya gimana cara ngotak atiknya.. hehe soalnya aku buat blog di blogger manual.. untuk halaman>daftar isi>dan lain-lain..
ReplyDeleteTapi bukannya css itu sama kek html yah.. tapi pas aku otak atik di menu tema terus masuk ke sesuaikan>lanjutkan>tambahkan css
Intinya aku gak tau cssnya dimana terus masukkan css itu gimana. Apa pake html apa gimana...
Terus lagi.. yg waktu itu aku tanya soal biar nyatu gambar satu ke gambar lainnya.. itu aku udah ngikutin saran kaka..awalnya bisa nyatu.. tapi pas aku upload chapter yang lebih banyak di kemudian hari.. itu gambarnya balik lagi.. jadi gk bisa nyatu gitu sama gambar 1,2,3 dll ..jadi kek ada jarak antara gambar satu sama gambar yg ada di bawahnya... Hmm tolong ka taufik.. dan makasih kalo dijawab..
ada demo ga kira kira tampilnnya seperti apa
ReplyDelete