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
Pastekan kode berikut di atas kode
Selanjutnya anda cari kode
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
</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>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;
}
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 => l.name != data:type.name)'><script type='text/javascript'>var selectchap = false;</script></b:if>
<b:if expr:cond='data:post.labels any (l => 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 = "<i class='fas fa-arrow-alt-circle-left'/>";
var postNext = "<i class='fas fa-arrow-alt-circle-right'/>";
var postIndex = "<i class='fas fa-list-ul'/>";
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='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=ykpager&max-results=999999"' type='text/javascript'/>
<script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:type.name + "/" + data:label.name + "?orderby=published&alt=json-in-script&callback=yktocs&max-results=1"' 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 : "Novel"}' 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
punya tema meguminovel wordpress gak min
ReplyDeleteUdah nggak punya, punya pun percuma karena nggak ada documentationnya.
Deleteini mungkin bisa membantu:
Deletehttps://app.box.com/s/o67v4wvhxfnomadwirlf5ek0tww3nmlr (template)
https://www.codepelajar.com/2018/12/megumi-novel-template-novel-blogger.html (beberapa doc)
Itu kan untuk blogger. Agak beda dengan wordpress gan.
DeleteMakasih min, ini yang saya cari-cari.
ReplyDeleteScript ini bakal berguna untuk template blogger manga saya.
Sama-sama gan, nah agan juga harus bisa lebih berterimakasih kepada penemunya soalnya saya cuma intip doang.
DeleteMin gimana cara dapetin Template Novel yang lagi mimin pake?
ReplyDeleteWeh itu editan saya sendiri yang belum dilanjutin gan. Nggak saya share wkwk kalau mau bisa kontak saya.
ReplyDeleteMin.... 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???
ReplyDeleteBisa ganti kode ini <script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=ykpager"' type='text/javascript'/> dengan <script defer='defer' expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=ykpager&max-results=99999&"' type='text/javascript'/>
Deletemakasih 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....
DeleteSama-sama, sepertinya saya harus ganti aja ini kode.
Deletetolong 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
ReplyDeleteBisa buat sendiri loh kalau font changermah, tinggal di tempelin dengan tag condition blogger.
DeleteCari aja di Google banyak Keyword nya "Text Resizer"
DeleteGak work min.... Chapter awalnya malah nuju ke halaman akhir.... benerin dong....
ReplyDeleteMohon maaf ya soalnya ane juga kurang paham dengan tutorial ini jadi bisa kalian utak atik sendiri ya.
ReplyDeleteWork banget kok, perhatiin lagi step by stepnya gan saat lagi pasang di blog agan
ReplyDeletemas ada script untuk bikin daftar isi chapter novel otomoatis kayak yang di template novelar itu nggak?
ReplyDeleteSaya 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
Ok mbak, ntar saya post ya.
DeleteMin di template Simple by Templateify yang saya pakai tampilannya tidak seperti demo, kira2 kenapa ya?
ReplyDeleteJadi 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
Coba tambahkan style .pager-js {display:flex;width:max-content}
DeleteSip. Min kalo ada waktu share dong cara bikin page project untuk index novel kayak fik exam.. Thanks
DeleteKodenya berhasil
ReplyDeleteTerimakasih
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 ðŸ˜ðŸ˜ðŸ˜
Bisa liat contohnya?
Deletesourcode ada yng kurang tuh kalo penutup js />
ReplyDeleteWah iya baru nyadar, makasih
Deletebang fungsi dari data:type.name pada tag ini <b:if expr:cond='data:post.labels any (l => l.name != data:type.name)'> apa? soal nya mau saya rombak script agar bisa untuk postingan yang mempunyai beberapa label.
ReplyDelete<b:if expr:cond='data:post.labels any (l => l.name != 'LABEL 1' && l.name != 'LABEL 2' )'>
DeleteCoba begitu gan
Gimana solusinya min kalau di template yang digunakan tidak ada kode
ReplyDelete<b:includable id='post' var='post'>
Min, kalau di template yang di gunakan gak ada kode <b:includable id='post' var='post'>
ReplyDeleteSolusinya gimana yah?
Bisa di atas atau bawah kode <b:includable id='...' var='..'>
ReplyDelete...
</b:includable> apapun asalkan masih didalam widget blog
Bg tombolnya dibesarin bisa?trus pengen yg prev di sebelah kiri,chap list di mid trs next di kanan
ReplyDeleteYg diatas di template saya di sebelah kanan smua hehe
Bg ganti fontawesomenya jadi svg dong
ReplyDeleteGanti aja yang ini <div class='pager-js' id='pager-js'>
ReplyDelete<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> pas bagian tag <i ..../> dengan svg.
include data = novel
ReplyDeleteYg itu kalo label nya ditambah selain novel gimana bg?biar ad 4
Kurang tahu saya, tapi kayaknya nggak bisa mas. Soalnya kalau lebih dari 1 tag nanti bentrok
ReplyDelete