Cara Membuat List Chapter Otomatis di Blogger

Cara Membuat List Chapter Otomatis di Blogger

data:post.author.name
Published:
Updated:

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

Post a comment

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