Membuat Next Prev Blogger berdasarkan label tertentu

Membuat Next Prev Blogger berdasarkan label tertentu

Project yang sebelum nya terdapat di blog sebelumnya (DAGRUEL) sekarang saya remake script menjadi lebih simple.

Cara Pasang

Pertama pasang css berikut di atas tag ]]></b:skin>.

#nextPrevJS{display:-moz-box;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;justify-content:space-between;align-items:center}#nextPrevJS select{background:#333;border:1px solid #333;display:block;color:#9b9b9b;padding:5px 10px;padding-right:25px;border-radius:20px;font-size:13px}#nextPrevJS .nav-right{display:-moz-box;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;flex-wrap:wrap;gap:10px;order:2}#nextPrevJS .nav-right a{text-decoration:none;display:block;padding:2px 15px;border-radius:20px;color:#fff;font-size:13px;text-align:center;background:#366ad3;line-height:25px}#nextPrevJS .nav-right a:hover{background-color:#1c2834;color:#77828d}

Kedua pasang script berikut di atas tag </body>.

<script>/*<![CDATA[*/const npX={arr:new Array,
  config:{
    max:150,
    start:1,
    labelMain:"Series"
  },sort:e=>e.sort((e,t)=>e.title.localeCompare(t.title,void 0,{numeric:!0})),compile:function(){let e=this.sort(this.arr).reverse(),t=this.config,a=(window||document).location.pathname,r=$('<select onchange="this.options[this.selectedIndex].value&&window.open(this.options[this.selectedIndex].value, \'_self\')" name="npx-list"></select>'),n="",i="",l="";$.each(e,(o,s)=>{s.cat.some(e=>t.labelMain==e)?n=$(`<a rel="home" href="${s.url}">${t.home||"Home"}</a>`):(r.append($(`<option ${s.url.includes(a)?'selected="selected"':""} value="${s.url}">${s.title}</option>`)),s.url.includes(a)&&(e[o+1]&&(i=e[o+1].cat.some(e=>t.labelMain==e)?"":$(`<a rel="prev" href="${e[o+1].url}">${t.prev||"Prev"}</a>`)),e[o-1]&&(l=e[o-1].cat.some(e=>t.labelMain==e)?"":$(`<a rel="next" href="${e[o-1].url}">${t.next||"Next"}</a>`))))});let o=$('<div class="nav-right"></div>');o.html(i).append(n).append(l),$("#nextPrevJS").html(r).append(o)},jqCheck:()=>"function"==typeof jQuery,xhr:function(){const e=this,t=e.config;$.ajax({type:"get",url:`${t.site||""}/feeds/posts/summary/-/${t.cat}`,data:{alt:"json","start-index":t.start,"max-results":t.max},dataType:"jsonp",success:a=>{"entry"in a.feed?($.each(a.feed.entry,(t,a)=>{e.arr.push({title:a.title.$t,url:a.link.find(e=>"alternate"==e.rel).href,cat:a.category.map(e=>e.term)})}),a.feed.entry.length>=t.max?(e.config.start+=e.config.max,e.xhr()):e.compile()):0!=e.arr.length&&e.compile()},error:()=>{$("#nextPrevJS").html(`<p>${t.textError||"Error"}</p>`)}})},run:function(){return this.jqCheck()?0==$("#nextPrevJS").length?"element tidak ada":(this.config.cat=$("#nextPrevJS").data("label")||!1,0==this.config.cat?"Category Tidak ada":void this.xhr()):"jquery tidak ada"}};npX.run();/*]]>*/</script>

Ganti bagian yang di tandai dengan nama label postingan info contoh: Anime, Manga, Novel.

Catatan script di atas harus memakai jquery, jadi pastikan untuk memasang jquery di template kalian.

Terakhir memasang tag html untuk menampilkan next prev nya. Terdapat dua cara, pertama di dalam post (manual), di dalam template (otomatis). Silahkan pilih salah satu.

Manual

Cara manual cukup tempelkan ini di setiap postingan kalian.

<div id='nextPrevJS' data-label='Nama_Label'></div>

Bagian yang di tandai adalah nama label postingan Contoh "One Piece".

Otomatis

Di dalam template kalian bisa tempelkan kode berikut diatas atau dibawah kode <data:post.body/>.

<b:with value='["Chapter", "NovelChapter", "MangaChapter"]' var='checkLabel'>
  <b:if cond='data:post.labels any (i => i.name in data:checkLabel)'>
    <b:loop values='data:post.labels filter (i => i.name not in data:checkLabel)' var='l'>
      <div id='nextPrevJS' expr:data-label='data:l.name'></div>
    </b:loop>
  </b:if>
</b:with>

Bagian yang di tandai merupakan nama label postingan Chapter. berfungsi untuk menampilkan tombol next prev di label tersebut saja.

Catatan: code di atas akan berfungsi dengan baik jika postingan tersebut hanya memiliki 2 label contoh.

  • Chapter
  • One Piece

Jadi tombol next prev akan tampil di dalam postingan berlabel "Chapter". Dan label "Chapter" akan otomatis terhapus dalam looping dan akan menyisakan satu label yaitu "One Piece" untuk membuat tag next prev nya.

Sampai sini sudah selesai silahkan di coba. Untuk versi JS nya akan di update kemudian hari.

Artikel Terkait

3 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • true
    8 September 2022 14.51
    Profil: https://www.blogger.com/profile/03791865258710224921
    akhirnya
  • Baca komik
    25 September 2022 19.35
    Profil: https://www.blogger.com/profile/05583155505950172982
    Bang bisa tidak di tambahkan chapternya pas di bagian chapter 151 , terus di chapter 1nya kaga muncul next and previus sama bagian selec chapternya
  • LogiKami
    26 September 2022 14.52
    Profil: https://www.blogger.com/profile/16071614302729346911
    Ter the best..
    Bang request bagaimana menyembuyikan postingan berdasarkan label di halaman depan dan halaman pencarian.. Contohnya menyembunyikan Chapter komik dari recent post dan halaman pencarian di template median ui.. Saya sudah coba copy dari zeistmanga tapi gagal..