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