Dokumentasi Fitur Split Post di Han Haoyu

Style post buat bagi artikel jadi beberapa halaman.

Cari dokumentasi? Gas ke halaman 2 yak!

Contoh Teks Buat Nambah Konten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus.

Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.

In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.

Cara Pakainya (Gampang Kok!)

1. Di editor post kamu, klik ikon (ikon pensil) yang ada di pojok kanan bawah judul.
2. Nanti bakal muncul dua pilihan: Tampilan HTML sama Tampilan Menulis.
3. Pilih yang 'Tampilan HTML'.
4. Copy paste kode di bawah ini terus sesuaikan sama konten kamu ya!

   <div id='postSplit'>
   isi_halaman_1
   
   <!--nextpage-->
   isi_halaman_2
   
   <!--nextpage-->
   isi_halaman_3
   
   <!--nextpage-->
   isi_halaman_4
   </div>

5. Kalau kamu pakai versi 3.0.0, tambahkan kode JavaScript di bawah ini tepat di bawah kode yang tadi.

   Peringatan Penting!
   Jangan ditambahin kalau versi kamu udah di atas 3.0.0 ya! Nanti malah error.

   <!--[ Split Post javascript ]-->
   <script>
   /*! Plus UI Javascript (split-post.js) | Authors: Deo Kumar, Armaan Kumar (https://fineshopdesign.com) | License: Unlicensed | Copyright (c) 2024 Fineshop Design */
   "use strict";((e,t,a,i)=>{let{df:l,gId:s,mc:n,vw:o,eHTML:r}=e;o.iBt||l.then((()=>{let e=s(i.id);if(e){let a=e.innerHTML.split("\x3c!--nextpage--\x3e"),i=a.length,l=t.location.search.match(/[?&]page=(\d+)/),s=l&&l[1]?Number(l[1]):1;s>i&&(s=1);let o=a[s-1],d="<svg class='line' viewBox='0 0 24 24'><path d='M9.57 5.92993L3.5 11.9999L9.57 18.0699' stroke-miterlimit='10'></path><path d='M20.5 12H3.67004' stroke-miterlimit='10'></path></svg>",p="<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699' stroke-miterlimit='10'></path><path d='M3.5 12H20.33' stroke-miterlimit='10'></path></svg>";o+="<div class='blogN numP'>",o+=`<div class='nPst' data-text='Page ${s} of ${i}:'></div>`,s-1==0&&(o+=`<div class='nwLnk nPst'>${d}</div>`);for(let e=1;e<=i;e++)e===s?o+=`<div class='nPst' data-text='${e}'></div>`:e===s-1?o+=`<a class='nwLnk' href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='${r(n.previous,!0,!1)}' data-text='${e}'>${d}</a>`:e===s+1?o+=`<a class='olLnk' href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='${r(n.next,!0,!1)}' data-text='${e}'>${p}</a>`:e>=s-3&&e<=s+3||1===e||e===i?o+=`<a href='?page=${e}' rel='nofollow noreferrer noopener' aria-label='Page ${e}' data-text='${e}'></a>`:(e===s-4||e===s+4)&&(o+="<div class='nPst' data-text='...'></div>");s+1>i&&(o+=`<div class='olLnk nPst'>${p}</div>`),o+="</div>",e.innerHTML=o}else console.warn(`Split post element with id '${i.id}' does not exist in document while split-post.js is used!`)}))})(PU,window,document,{id:"postSplit"});
   </script>

Tips & Trik Biar Makin Kece

• Ganti ID kalau perlu: ID postSplit bisa diganti asal konsisten di semua tempat (HTML dan JavaScript).
• Jangan lupa tag penutup: Pastikan <div id='postSplit'> ditutup dengan </div> di akhir semua konten.
• Cek sebelum publish: Preview dulu buat mastiin pagination-nya jalan dengan baik.
• Mobile friendly: Script ini udah otomatis responsive, jadi aman buat tampilan mobile!

Kenapa Harus Bagi Artikel Jadi Beberapa Halaman?

• ✅ Loading lebih cepat - Konten panjang jadi ringan dibuka
• ✅ User experience lebih bagus - Pembaca gak overwhelmed sama konten yang kepanjangan
• ✅ Page views naik - Setiap halaman dihitung sebagai view tersendiri
• ✅ Tampilan lebih rapi - Konten terorganisir dengan baik per halaman

Halaman 3 - Lanjutan Konten

Curabitur quis vestibulum arcu, at aliquet urna. Aenean ex risus, rhoncus vitae urna accumsan, congue aliquet tortor. Suspendisse imperdiet nibh eget odio posuere maximus. Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae.

Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.

Nullam non sapien sit amet ex consequat tempor ut nec risus. Phasellus non justo eget ex faucibus mattis. Vivamus vestibulum interdum consectetur. Morbi pulvinar ut lectus eu semper. Ut et sagittis leo. Pellentesque vitae posuere orci. Praesent sit amet egestas tortor, vel consectetur nulla. Duis feugiat consectetur nisl.

Nunc interdum a sapien sed commodo. Maecenas porttitor dictum mi quis luctus. Vestibulum turpis quam, laoreet in dignissim dapibus, ullamcorper in tortor. Morbi malesuada massa sapien, sagittis ullamcorper quam pharetra ultrices.

Halaman 4 - Konten Berlanjut

Donec laoreet fringilla mattis. Proin vitae scelerisque neque, nec imperdiet sem. Aliquam pellentesque euismod eros, eget pharetra est vehicula eu. Nulla ligula orci, pellentesque sed quam vel, posuere sodales neque. Nulla turpis justo, lobortis vel imperdiet ut, viverra id nunc. Aliquam ipsum lectus, rutrum vel blandit sed, commodo ut ligula.

Halaman 5 - Masih Ada Lagi Nih

Ut in condimentum eros. Duis in elit ultricies, molestie metus ac, dapibus augue. Pellentesque eu feugiat risus, sed rhoncus urna. Quisque viverra tellus nec placerat ullamcorper. Sed nec volutpat est, at pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu ultrices metus. Morbi placerat tempus nibh nec ultricies.

Halaman 6 - Lanjut Gas!

Proin finibus aliquam suscipit. Mauris malesuada ornare sollicitudin. Sed faucibus lacinia pharetra. Nunc ultrices neque eget accumsan dignissim. Fusce efficitur ultricies volutpat. Maecenas ut mauris in dui pretium eleifend eu at purus. Etiam pretium luctus massa eget condimentum. Morbi gravida, elit at molestie rutrum, ligula est accumsan nunc, fringilla suscipit orci ligula vel est.

Halaman 7 - Hampir Selesai

Aliquam auctor cursus lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non porttitor ligula, vitae ultricies nisl. Phasellus quis arcu arcu. Praesent at nunc faucibus, sagittis ipsum non, egestas magna. Nam enim eros, fermentum nec odio vitae, blandit molestie lorem. Pellentesque sed mattis elit.

Halaman 8 - Tinggal Dikit Lagi

Donec vulputate id nisi ut pharetra. Nunc et risus lorem. Praesent in lectus nulla. Cras convallis odio eros, consectetur tristique turpis dictum feugiat. Aenean leo sem, blandit quis ante eu, tempus laoreet nisi. Duis in tincidunt lacus. Donec ornare ac nisl nec convallis. Etiam interdum ipsum nisl, sollicitudin luctus quam sollicitudin quis.

Halaman 9 - Satu Lagi

Ut ipsum libero, cursus vel scelerisque eget, elementum quis velit. Donec quis velit at ex faucibus cursus. Nulla at erat sed leo consectetur auctor sed dignissim est. Maecenas nec gravida dui. Maecenas non nisi nibh. Nunc viverra nisl sed risus sagittis vulputate. Quisque egestas eros non ornare mollis. Nunc ornare viverra nibh vitae faucibus.

Halaman 10 - Masih Lanjut

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eget porta sapien. Donec eu sapien egestas, blandit sem in, consectetur neque. Cras quis diam id ipsum volutpat pretium vulputate sit amet dolor. Nunc quis tortor scelerisque, egestas lectus vitae, auctor augue. Proin sit amet efficitur tellus, et lacinia lorem.

Halaman 11 - Terakhir Nih!

Etiam lacus mauris, mattis ut sagittis et, suscipit ac elit. Nulla vitae luctus leo. Vivamus sit amet est vitae nisi vulputate iaculis vitae in lorem. Nullam lectus lectus, luctus vitae ante ut, finibus ultricies eros. Aenean quis rhoncus nibh. Ut nibh massa, venenatis id neque quis, sodales semper lorem. Mauris feugiat elementum arcu, eu rutrum erat congue quis. Nam lacinia orci id facilisis aliquet. Vestibulum tellus elit, feugiat nec sem ac, gravida interdum augue. Donec ligula augue, viverra eu odio sit amet, tempor euismod augue.

Penutup

Nah, sekarang kamu udah tau cara bagi artikel jadi beberapa halaman! Gampang kan? Kalau ada yang masih bingung, coba baca lagi dari awal atau langsung praktik aja. Practice makes perfect! 🚀