Cara Membuat Next Prev Otomatis Berdasarkan Label di Blogger

Cara Membuat Next Prev Otomatis Berdasarkan Label di Blogger

data:post.author.name
Published:
Updated:

Tombol Next dan Previous sangat bermanfaat bila blog tersebut adalah blog yang digunakan untuk Novel. Tetapi bagaimana bila anda harus membuatnya secara manual? Rasanya sangat melelahkan harus edit lagi posting sebelumnya, jadi disinilah postingan ini saya buat supaya anda tidak harus mengedit kembali postingan dan otomatis link Next Previous sudah ada pada postingan.

Ada Template Webnovel untuk Blogger! Silahkan Cek Index

Fungsi Tombol Next Prev Otomatis Berdasarkan Label

Fungsinya ialah membuat tombol Next dan Prev muncul di setiap postingan yang anda buat, jika tombol Next Prev biasanya berurutan sesuai waktu postingan maka tombol inipun sama namun yang berbeda ialah tombol tersebut hanya mengarahkan ke postingan yang sesuai dengan label.

Cara Membuat Tombol Next Prev Otomatis Berdasarkan Label


Pastikan anda sudah menerapkan Font Awesome dan JQuery pada template anda, jika belum copy code dibawah dan tempelkan sebelum kode atau diatas kode </head>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js/">

Pastekan kode berikut di atas kode </style> supaya tampilan tombol next previous tidak berantakan.
  .pager-js {
    text-align: right;
    margin: 20px 0;
}
  .pager-js div{display:inline-block}
  .pager-js&gt;div a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    padding: 11px 15px;
    background-color: #090e10;
    color: white;
    border-radius: 30px;
}
  .pager-js&gt;div a:hover {
    box-shadow: 2px 3px 9px 0 rgba(0,0,0,0.2);
}
  .pager-js .pager-js-nolink{text-decoration:line-through;cursor:not-allowed}
  .pager-js-nolink{display:none;}
  #blog-pager, #blog-pager-older-link, #blog-pager-newer-link, .home-link {
      display:none;
  }
Setelah itu anda cari <b:includable id='post' var='post'> sekarang tambahkan kode berikut di atasnya.

  <b:includable id='pager_chapter' var='type'>
    <b:if expr:cond='data:post.labels any (l =&gt; l.name != data:type.name)'><script type='text/javascript'>var selectchap = false;</script></b:if>
    <b:if expr:cond='data:post.labels any (l =&gt; l.name == data:type.name)'><script type='text/javascript'>var selectchap = true;</script></b:if>
    <b:loop index='i' values='data:post.labels' var='label'>
    <b:if cond='data:i == 0'>
        <div class='pager-js' id='pager-js'>
         <div class='_prev' id='prevjs'><a class='pager-js-nolink'><i class='far fa-caret-square-left'/></a></div>
         <div class='_index' id='indexjs'><a class='pager-js-nolink'><i class='far fa-list-alt'/></a></div>
         <div class='_next' id='nextjs'><a class='pager-js-nolink'><i class='far fa-caret-square-right'/></a></div>
        </div>
  <script type='text/javascript'>
  var postPrev = &quot;<i class='fas fa-arrow-alt-circle-left'/>&quot;;
  var postNext = &quot;<i class='fas fa-arrow-alt-circle-right'/>&quot;;
  var postIndex = &quot;<i class='fas fa-list-ul'/>&quot;;
  var postID = <data:post.id/>;
  /*<![CDATA[*/
  if(selectchap==false){var yktocs=function(data){var i=0;for(;i<data.feed.entry.length;i++){var j=0;for(;j<data.feed.entry[i].link.length;j++){if("alternate"==data.feed.entry[i].link[j].rel){var entityUrl=data.feed.entry[i].link[j].href;break}}document.getElementById("indexjs").innerHTML="<a href='"+entityUrl+"' title='Index Novel'>"+postIndex+"</a>"}};var ykpager=function(data){var node={postlist:[]};var i=0;for(;i<data.feed.entry.length;i++){var j=0;for(;j<data.feed.entry[i].link.length;j++){if("alternate"==data.feed.entry[i].link[j].rel){var murl=data.feed.entry[i].link[j].href;break}}var videoId=data.feed.entry[i].id.$t;var CAPTURE_ID=videoId.substr(51,19);node.postlist.push({url:murl,id:CAPTURE_ID})}var v=node.postlist.findIndex((timeline_mode)=>{return timeline_mode.id==postID});var id=v+1;var cbs=node.postlist[id];if(null!=cbs){var g=Object.values(cbs)[0];var lnkDiv=document.getElementById("prevjs");lnkDiv.innerHTML="<a href='"+g+"' title='Chapter Sebelumnya'>"+postPrev+"</a>"}var q=v-1;var val=node.postlist[q];if(null!=val){var k=Object.values(val)[0];lnkDiv=document.getElementById("nextjs");lnkDiv.innerHTML="<a href='"+k+"' title='Chapter Selanjutnya'>"+postNext+"</a>"}}}else{document.write("<style>.pager-js{display:none;}</style>")};
  /*]]>*/</script>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&amp;max-results=999999&quot;' type='text/javascript'/>
  <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:type.name + &quot;/&quot; + data:label.name + &quot;?orderby=published&amp;alt=json-in-script&amp;callback=yktocs&amp;max-results=1&quot;' type='text/javascript'/>
  </b:if>
  </b:loop>
  </b:includable>

Selanjutnya anda cari kode <data:post.body/> dan pastekan kode berikut dibawahnya. Untuk kata Novel sendiri adalah pengecualian label, jadi ketika postingan berlabel Novel maka tombol Next dan Previous tidak muncul.

<b:include data='{name : &quot;Novel&quot;}' name='pager_chapter'/>

Tombol Next dan Previous tersebut tidak bekerja apabila terdapat dua label, dan urutan postingan sesuai waktu postingan dipublikasikan. Tombol Next Previous tersebut bukan buatan saya, saya hanya mengcopy dari template MegumiNovel. Silahkan kembangkan sendiri. Semoga postingan Membuat Tombol Previous dan Next Berdasarkan Label Secara Otomatis di Blogger bermanfaat bagi anda yang membaca, jika terdapat kesalahan silahkan komentar dibawah mungkin saya bisa bantu. Untuk melihat demo silahkan kunjungi fik-exam.blogspot.com

Tag: cara membuat tombol next prev otomatis berdasarkan label pada blogger, tombol next prev berdasar label otomatis pada blogger

Comments

  1. punya tema meguminovel wordpress gak min

    ReplyDelete
    Replies
    1. Udah nggak punya, punya pun percuma karena nggak ada documentationnya.

      Delete
    2. ini mungkin bisa membantu:
      https://app.box.com/s/o67v4wvhxfnomadwirlf5ek0tww3nmlr (template)

      https://www.codepelajar.com/2018/12/megumi-novel-template-novel-blogger.html (beberapa doc)

      Delete
    3. Itu kan untuk blogger. Agak beda dengan wordpress gan.

      Delete
  2. Makasih min, ini yang saya cari-cari.
    Script ini bakal berguna untuk template blogger manga saya.

    ReplyDelete
    Replies
    1. Sama-sama gan, nah agan juga harus bisa lebih berterimakasih kepada penemunya soalnya saya cuma intip doang.

      Delete
  3. Min gimana cara dapetin Template Novel yang lagi mimin pake?

    ReplyDelete
  4. Weh itu editan saya sendiri yang belum dilanjutin gan. Nggak saya share wkwk kalau mau bisa kontak saya.

    ReplyDelete
  5. Min.... kok gak work ya scriptnya.... Punya saya cuman chapter 30-50an yang bisa... chapter 1-29 cuman ada tombol prev doang yang langsung ngarah ke chapter akir.... kok bisa gitu???

    ReplyDelete
    Replies
    1. Bisa ganti kode ini <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&quot;' type='text/javascript'/> dengan <script defer='defer' expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=ykpager&amp;max-results=99999&amp;&quot;' type='text/javascript'/>

      Delete
    2. makasih banyak mas, saya ngalamin juga yang muncul cuma tombol prev aja. ga ada tombol next. itu sangat mempengaruhi trafik saya. jadi turun karena pembaca biasanya malas ngutak atik untuk cari chapter selanjutnya. Untung saya baca komentar ini dan langsung perbaiki. Makasih banyak ya mas....

      Delete
    3. Sama-sama, sepertinya saya harus ganti aja ini kode.

      Delete
  6. tolong gan kalau masih ada template meguminovel v1.4, saya minta. lagi butuh buat font size changernya. saya sudah cari muter-muter gak ketemu. terima kasih

    ReplyDelete
    Replies
    1. Bisa buat sendiri loh kalau font changermah, tinggal di tempelin dengan tag condition blogger.

      Delete
    2. Cari aja di Google banyak Keyword nya "Text Resizer"

      Delete
  7. Gak work min.... Chapter awalnya malah nuju ke halaman akhir.... benerin dong....

    ReplyDelete
  8. Mohon maaf ya soalnya ane juga kurang paham dengan tutorial ini jadi bisa kalian utak atik sendiri ya.

    ReplyDelete
  9. Work banget kok, perhatiin lagi step by stepnya gan saat lagi pasang di blog agan

    ReplyDelete
  10. mas ada script untuk bikin daftar isi chapter novel otomoatis kayak yang di template novelar itu nggak?

    Saya pernah pakai template megumi novel, tapi di saya nggak ramah untuk adsense. kemudian saya cobain script untuk 'select chapter' yang saya ambil dari megumi novel di blog saya. tapi it doesn't work out. gimana dong mas?

    Mohon bantuannya ya

    ReplyDelete
  11. Min di template Simple by Templateify yang saya pakai tampilannya tidak seperti demo, kira2 kenapa ya?
    Jadi tombol prevnext malah urut kebawah dan gak sejajar, terus saya coba rubah pake template Mocca by naminakiky dan tampilannya sama seperti di demo, kira2 apa penyebabnya ya? Ada solusinya?
    Tampilannya urut kebawah seperti ini dan berada di sisi kiri
    Prev
    Index
    Next

    ReplyDelete
    Replies
    1. Coba tambahkan style .pager-js {display:flex;width:max-content}

      Delete
    2. Sip. Min kalo ada waktu share dong cara bikin page project untuk index novel kayak fik exam.. Thanks

      Delete
  12. Kodenya berhasil
    Terimakasih
    Tpi kode nya jadi double 2
    Cara menghapus / menyembunyikan nya tanpa hapus satu satu di tiap Postingan bagaimana... ??
    Soalnya Postingan saya udah 400 lebih

    Tolong saya 😭😭😭

    ReplyDelete
  13. sourcode ada yng kurang tuh kalo penutup js />

    ReplyDelete

Post a comment

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