Cara Membuat Navigasi Next atau Prev Chapter Novel dan Manga Blogger Otomatis

Hallo, dalam sebuah blog ataupun website navigasi menjadi hal penting guna membantu pengunjung lebih mudah dalam mencari, menemukan, ataupun melihat konten yang terdapat diblog anda.

Jenis navigasi dalam blog ada dua.

• Navigasi menu.
• Navigasi next dan prev postingan.

Berdasarkan jenisnya diatas, bisa kita sebut jenis navigasi pertama adalah navigasi yang terdapat pada bagian menu header blog. Nah, navigasi jenis ini biasa digunakan untuk membuat kategori artikel blog berdasarkan label.Sedangkan untuk jenis navigasi kedua biasanya digunakan untuk menampilkan postingan terlama atau terbaru, next dan prev, hingga navigasi pager. Jenis navigasi kedua ini biasanya terdapat di templaate blogger manga, novel ataupun anime.

Lalu dalam artikel kali ini aku akan membuat tutorial navigasi next dan prev di template biasa dengan 1 label.

Membuat navigasi chapter blog manga, novel, ataupun anime dalam satu label.

Dalam blog novel atau manag biasanya akan dijumpai berbagai chapter, ada yang sedikit dan ada yang banyak.

Lalu setiap chapter itu biasanya berbeda postingan contoh. Novel Cintaku mekar dimusim banjir, akan memiliki beberapa chapter yang saling terhubung antara chapter 1 dan 2, 2 dan 3, 3 dan 4, 4 dan 5 dsb..

Disinilah fungsi dari tutorial membuat auto navigasi chapter novel dan manga pada blogger. Mengapa auto, karena kalian hanya perlu menambahkan label pada setiap postingan yang ingin ditambahkan navigasi next prev.

Untuk contohnya kalian bisa kunjungi AFterscarlet dan buka slah satu postingannya, atau kalian bisa cari di google website novel yang pasti telah menerapkan navigasi prev next pada setiap chapter judul novelnya.

Baca :Cara agar link search blog tidka diindex google

Memulai membuat navigasi chapter blogger novel atau manga.

1. Pastikan template blogger yang kalian gunakan memiliki fontawesome dan Jquery. Jika belum kalian bisa tambahkan fontawesome dan jquery berikut tepat di atas tag </head>, gunakan selalu CTRL + F untuk lebih mudah pencarian.

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2. Lalu copy dan pastekan kode CSS berikt ini di dalam tag <style>___</style> atau skin juga bisa.

.pager-js {
text-align: right;
margin: 20px 0;
}
.pager-js div{
display:inline-block;
}
.pager-js>div a {
text-transform: uppercase;
font-weight: 700;
font-size: 18px;
padding: 11px 15px;
background-color: #090e10;
color: white;
border-radius: 30px;
}
.pager-js>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;
}

3. Selanjutnya, copy dan pastekan kode berikut ini tepat diatas kode blogger <b:includable id='post' var='post'>.

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

4. Lalu pastekan kode berikut tepat dibawah atau diatas tag blogger <data:post.body/>.

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

5. Done.

Baca juga :Membuat pop up notifikasi ringan diblogger

Begitulah cara membuat navigasi chapter blog manga ataupun novel pada blogger dengan mudah, namun sebelum kalian mengakhiri artikel ini ada baiknya kalian baca aturan next prev navigasi berikut ini.

Aturan dan penjelasan singkat next prev navigasi chapter novel dan manga.

• Untuk style bisa kalian ubah pada bagian CSS-nya, jika tampilan error bisa terjadi karena kode CSS bertabrakan dengan CSS template blogger yang kalian pakai.
• Tulisan "Novel" berwarna merah di step ke-4 bisa kalian ganti sesuka hati, fungsi dari tulisan ini saat kalian menambahkan label "Novel" di salah satu chapter, maka tombol next prev ini tidak akan muncul, jadi harap perhatikan dan teliti.
• Tombol next dan prev juga tidak akan muncul apabila terdapat 2 label dalam satu artikel, jadi cukup tambahkan label sesuai index dari artikel. Misalnya novel Cintaku mekar dimusim banjir mempunyai label cinta banjir, di postingan chapter cukup tambahkan label cinta banjir tanpa label lain.
• Tombol next prev di manga dan novel pada blogger juga tidak akan muncul apabila rentan waktu posting antara chapter 1 dan 2 adalah sama,solusinya beri jarak postingan minmal 3 menit untuk amnanya.
• Agar setiap chapter berurutan 1, 2, 3, 4, 5, dsb, maka postinglah dan publishkan novel dengan sesuai alur cerita, jangan lompat-lompat.
• Di bagian step 4 diatas kalian munkin akan menemukan 2-3 tag <data:post.body/>, jadi cobalah satu persatu untuk melihat hasilnya. Perlu diingat setiap template blogger bisa memiliki 1-3 atau lebih tag tersebut. Kalo saya sendiri menggunakan template viomagz custom, tag tersebut ada 3 dan yang berfungsi adalah no-1.

Baca lagi :Membuat download box minimalis dan ringan

Sekian saja tutorial membuat next dan prev chapter pada blog manga atau novel.

Sumber kode: https://www.nurhidayat.web.id/2019/11/tombol-nextprev-otomatis-blogger.html