Cara Membuat List Chapter Otomatis di Blogger

Taufik Nurhidayat
Taufik Nurhidayat
- calculating..
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 != &quot;Novel&quot; and data:label.name != &quot;Anime&quot; and data:label.name != &quot;Manga&quot;'>
<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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?orderby=published&amp;max-results=99999&amp;alt=json-in-script&amp;callback=autolist&quot;' 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 != &quot;Label Name&quot;. 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.

Comments

  1. List Chapter ini contohnya kayak gimana sih Kak? Apa yang ada di samping gitu kayak label?

    ReplyDelete
    Replies
    1. Bukan 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

      Delete
  2. Makasih mas... akhirnya di post... heheheheheheheh

    ReplyDelete
  3. it works mas, aku seneng banget. Makasii banyaaaak.

    ReplyDelete
  4. Bermanfaat sekali untuk template novel atau manga.
    Susah banget mau bikin script seperti itu, makasih sudah mau share.

    ReplyDelete
  5. Cara agar output document.write nya jadi sesuai keinginan kita bagaimana?

    ReplyDelete
    Replies
    1. Untuk hal tersebut ada script pemanggil seperti berikut
      <script src='&quot;/feeds/posts/default/-/Label?orderby=published&amp;max-results=500&amp;alt=json-in-script&amp;callback=autolist&quot;' type='text/javascript'/>
      nah disana hasil eksekusi script akan di write

      Delete
  6. 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

    ReplyDelete
    Replies
    1. Bisa sampe mentok 500 max-results nya ganti ke 500 aja.

      Delete
  7. Wah ini yang saya cari, semoga bisa :)

    Makasih tutorialnya.

    ReplyDelete
  8. Kalau yang untuk upload gambarnya gimana min? Biar otomatis, jadi gak perlu dibual manual lagi...

    ReplyDelete
  9. Muncul nya di halaman info komik kak ??

    ReplyDelete
    Replies
    1. Iya kak, kalau ditambahin kode pemanggil maka list secara otomatis tampil.

      Delete
    2. Kode pemanggil nya yg mana ??

      Delete
    3. <script>var autlist = true</script>

      Delete
  10. yang langsung di tanam ke postingan ada gak min? ( masukin manual kodenya ke dalam postingan)

    ReplyDelete
    Replies
    1. Bisa, gunakan kode ini
      <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.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Sepertinya agak salah coba ini

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

      Delete
    4. mas kalo kode itu di kustom tambah label bisa gak?

      Delete
    5. Bisa, coba /feeds/posts/default/-/LABEL1/LABEL2?orderby=published&max-results=500&alt=json-in-script&callback=autolist kalau gak salah, lupa lagi soalnya

      Delete
  11. Jadinya seperti apa... penasaran... apa seperti dropdown biasa ?? Atau kaya di mangago ??

    ReplyDelete
    Replies
    1. List biasa, kalau mau dijadiin collapse harus pake javascript+css tambahan

      Delete
  12. Kak... kok gagal ya
    Atau 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

    ReplyDelete
    Replies
    1. 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>
      harus edit di tampilan html bukan tampilan menulis

      Delete
    2. Maaf tanya terus πŸ˜…πŸ˜…πŸ˜…
      Masih belajar...
      Untuk kode udah di pasang di template semua kok....
      Emmm... itu kode yg di kasih di taruh di bagian Postingan capt list kan ... ??

      Delete
    3. Nggak apa-apa kak, lebih baik bertanya supaya nanti bisa saya perbaiki postingannya bila kurang paham.
      Untuk yang bagian postingan, edit ke mode html terlebih dahulu bisa klik dibagian tools <> paling kiri lalu paste kode berikut
      <script>var autlist = true</script>

      Delete
    4. Kak... tanya lagi😁😁😁
      Untuk ngasih style sendiri itu naamanya apa...
      Contoh dropdown dengan css
      Kalau ini nama nya apa... ??

      Delete
    5. 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

      Delete
  13. Kak 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πŸ˜₯
    Terima kasih

    ReplyDelete
    Replies
    1. Bisa menggunakan fitur pencarian halaman (chrome), lalu scroll.

      Delete
  14. kak yang kode ini kok nggak nemu ?

    ReplyDelete
  15. min share template meguminovel dong, di blig codepelajar gak bisa didownload. tolong nih min.

    ReplyDelete
  16. Saya dah coba tapi ga work,
    Udah sesuai arahan tpi yg data post body kan ad 3, ditaruh yg mana?

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

    ReplyDelete
  18. Jangan dikasih enter, atau bisa aja dihapus space antara gambarnya

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

    ReplyDelete
  20. Bang, punyaku chpater list.nya kok maksimal 25 list ya, cara nambahinnya gimana bang?

    ReplyDelete
  21. Daniah, itu sih dibagian cssnya. Bisa aja kok.

    ReplyDelete
  22. Wah saya juga kurang tahu, soalnya saya udah jarang ngoding wkwk. Coba ulik sendiri

    ReplyDelete
  23. Kalo boleh tahu cssnya gimana cara ngotak atiknya.. hehe soalnya aku buat blog di blogger manual.. untuk halaman>daftar isi>dan lain-lain..

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

    ReplyDelete
  24. ada demo ga kira kira tampilnnya seperti apa

    ReplyDelete

Post a Comment

- Gunakan <em>kode yang sudah diparse html</em> untuk menampilkan kode.
- Tidak diperbolehkan menggunakan hyperlink