OTAKU.WEB.ID - Panduan lengkap membagi artikel Blogger yang panjang menjadi beberapa halaman dengan sistem Split Post dan pagination yang lebih nyaman untuk pembaca.
Artikel yang terlalu panjang dalam satu halaman terkadang membuat pembaca harus melakukan scroll sangat jauh untuk menemukan bagian yang mereka butuhkan. Salah satu solusi yang dapat digunakan adalah membagi satu artikel menjadi beberapa halaman menggunakan sistem Split Post.
Dengan teknik ini, satu postingan tetap menjadi satu artikel, tetapi kontennya ditampilkan secara bertahap berdasarkan halaman. Pengunjung dapat berpindah dari halaman pertama ke halaman berikutnya menggunakan navigasi pagination.
<!--nextpage-->. Karena kode berinteraksi langsung
dengan struktur tema, selector harus disesuaikan dengan template yang
digunakan.
Apa Itu Split Post?
Split Post adalah teknik untuk memecah isi sebuah postingan panjang menjadi beberapa bagian atau halaman. Misalnya, sebuah artikel yang memiliki tiga bagian dapat ditampilkan seperti berikut:
Visual di atas merupakan simulasi tampilan, bukan tangkapan layar antarmuka Blogger. Tampilan pagination yang sebenarnya akan mengikuti CSS dan tema Blogger yang digunakan.
Bagaimana Cara Kerjanya?
Konsepnya cukup sederhana. JavaScript akan mencari elemen khusus yang
menampung seluruh isi artikel, kemudian membaca komentar
<!--nextpage--> sebagai tanda pemisah.
Manfaat Membagi Artikel Menjadi Beberapa Halaman
Tidak semua artikel perlu dibagi menjadi beberapa halaman. Namun, untuk konten yang memang sangat panjang dan memiliki beberapa bagian yang jelas, pagination dapat membuat struktur pembacaan lebih mudah diikuti.
- Membuat artikel panjang terasa lebih terstruktur.
- Membantu pembaca fokus pada satu bagian dalam satu waktu.
- Mengurangi kebutuhan melakukan scroll terlalu panjang dalam satu tampilan.
- Membuat tutorial bertahap lebih mudah diikuti.
- Cocok untuk panduan panjang yang memiliki beberapa bab.
- Membuat navigasi antarbagian artikel lebih jelas.
Kapan Sebaiknya Menggunakan Split Post?
Split Post paling masuk akal digunakan ketika sebuah artikel memiliki bagian-bagian yang memang dapat berdiri sebagai unit pembahasan.
Contohnya:
- Panduan Blogger yang sangat panjang.
- Tutorial coding dengan banyak tahapan.
- Panduan instalasi dan konfigurasi.
- Artikel tutorial yang memiliki beberapa bab.
- Dokumentasi panjang.
- Panduan lengkap yang memiliki pembahasan bertahap.
Kapan Tidak Perlu Menggunakannya?
Artikel pendek sebaiknya tidak dipaksa menggunakan Split Post hanya agar memiliki beberapa halaman.
- Artikel dengan panjang hanya beberapa paragraf.
- Berita singkat.
- Pengumuman sederhana.
- Artikel yang setiap bagiannya terlalu pendek.
- Konten yang justru lebih nyaman dibaca secara utuh.
Jika pembaca harus mengeklik tombol berikutnya setiap beberapa paragraf, pagination justru dapat membuat pengalaman membaca menjadi kurang nyaman.
Persiapan Sebelum Memasang Split Post
Sebelum memasang kode, sebaiknya lakukan backup tema Blogger terlebih dahulu. Perubahan yang dilakukan pada HTML tema dapat memengaruhi tampilan dan fungsi blog apabila kode ditempatkan pada bagian yang salah.
Simpan salinan tema sebelum melakukan perubahan HTML.
Jangan langsung menerapkan kode ke semua artikel.
Tentukan bagian mana yang akan menjadi halaman 1, 2, 3, dan seterusnya.
Pastikan JavaScript dan CSS ditempatkan pada bagian tema yang benar.
Langkah 1: Backup Tema Blogger
Sebelum mengedit HTML tema, simpan backup terlebih dahulu. Blogger menyediakan pengeditan HTML melalui menu Tema → Edit HTML. Google juga menjelaskan bahwa perubahan HTML dan CSS tema dapat dilakukan melalui bagian Tema Blogger.
Langkah 2: Tambahkan CSS Pagination
Kode CSS berikut digunakan untuk memberikan tampilan pada navigasi halaman. CSS dibuat dengan selector khusus agar tidak mudah bertabrakan dengan pagination lain pada tema.
Cari bagian CSS tema Anda, biasanya sebelum tag penutup
</b:skin>, lalu masukkan kode berikut.
/* Otaku Split Post */
.otaku-split-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 7px;
margin: 30px 0 10px;
padding: 0;
text-align: center;
}
.otaku-split-nav a,
.otaku-split-nav span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid rgba(127,127,127,.18);
border-radius: 7px;
box-sizing: border-box;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.otaku-split-nav a:hover {
opacity: .8;
}
.otaku-split-nav .current {
background: rgba(127,127,127,.12);
}
.otaku-split-nav .prev,
.otaku-split-nav .next {
min-width: auto;
padding: 0 13px;
}
.drK .otaku-split-nav a,
.drK .otaku-split-nav span {
border-color: rgba(255,255,255,.10);
}
.drK .otaku-split-nav .current {
background: rgba(255,255,255,.08);
}
@media screen and (max-width: 600px) {
.otaku-split-nav {
gap: 6px;
margin-top: 25px;
}
.otaku-split-nav a,
.otaku-split-nav span {
min-width: 34px;
height: 34px;
padding: 0 9px;
font-size: 12px;
}
.otaku-split-nav .prev,
.otaku-split-nav .next {
padding: 0 11px;
}
}Langkah 3: Tambahkan JavaScript Split Post
Bagian terpenting dari sistem ini adalah JavaScript. Script akan mencari
wrapper dengan ID postSplit, kemudian memisahkan isi berdasarkan
komentar <!--nextpage-->.
Untuk struktur Plus UI yang menggunakan elemen postingan
.pS.postBody, script berikut menggunakan selector tersebut
sehingga tidak bergantung pada selector generik
div.post-body.
Cari tag </body> pada HTML tema, kemudian letakkan kode
berikut tepat di atasnya.
<b:if cond='data:view.isPost'>
<script>
/* Otaku.web.id - Blogger Split Post */
document.addEventListener("DOMContentLoaded", function () {
var postBody = document.querySelector(".pS.postBody");
if (!postBody) {
return;
}
var splitContainer =
postBody.querySelector("#postSplit");
if (!splitContainer) {
return;
}
var content =
splitContainer.innerHTML.split("");
if (content.length <= 1) {
return;
}
var currentUrl =
window.location.href.split("?")[0];
var params =
new URLSearchParams(window.location.search);
var page =
parseInt(params.get("page"), 10);
if (isNaN(page) || page < 1) {
page = 1;
}
if (page > content.length) {
page = content.length;
}
splitContainer.innerHTML =
content[page - 1];
var navigation =
document.createElement("div");
navigation.className =
"otaku-split-nav";
if (page > 1) {
var previous =
document.createElement("a");
previous.className =
"prev";
previous.href =
currentUrl +
"?page=" +
(page - 1);
previous.textContent =
"‹ Sebelumnya";
navigation.appendChild(previous);
}
for (
var i = 1;
i <= content.length;
i++
) {
if (i === page) {
var current =
document.createElement("span");
current.className =
"current";
current.textContent =
i;
navigation.appendChild(current);
} else {
var link =
document.createElement("a");
link.href =
currentUrl +
"?page=" +
i;
link.textContent =
i;
navigation.appendChild(link);
}
}
if (page < content.length) {
var next =
document.createElement("a");
next.className =
"next";
next.href =
currentUrl +
"?page=" +
(page + 1);
next.textContent =
"Berikutnya ›";
navigation.appendChild(next);
}
splitContainer.appendChild(
navigation
);
});
.pS.postBody. Jika Anda menggunakan tema Blogger berbeda,
selector elemen postingannya mungkin harus disesuaikan.
Langkah 4: Buat Wrapper Postingan
Setelah script dipasang pada tema, langkah berikutnya adalah mengedit postingan yang ingin dibagi menjadi beberapa halaman.
Buka postingan Blogger dan ubah editor ke mode HTML. Kemudian bungkus konten yang ingin dipagination menggunakan:
<div id="postSplit">
ISI ARTIKEL ANDA
Semua konten yang ingin dibagi harus berada di dalam elemen
#postSplit.
Langkah 5: Tambahkan Penanda nextpage
Sekarang tentukan titik tempat halaman pertama berakhir. Pada posisi tersebut, masukkan:
<!--nextpage-->Kemudian lanjutkan isi halaman berikutnya. Jika ingin membuat halaman ketiga, tambahkan lagi penanda yang sama pada akhir halaman kedua.
Penanda tersebut tidak perlu ditambahkan pada halaman terakhir.
Langkah 6: Contoh Artikel Tiga Halaman
Misalnya Anda ingin membuat artikel yang terdiri dari tiga halaman. Struktur HTML-nya dapat dibuat seperti berikut:
<div id="postSplit">
Halaman 1
Ini adalah isi artikel pada halaman pertama.
Anda dapat menambahkan teks, gambar, tabel,
daftar, dan elemen HTML lainnya.
Halaman 2
Ini adalah isi artikel pada halaman kedua.
Lanjutkan pembahasan utama pada bagian ini.
Halaman 3
Ini adalah bagian terakhir artikel.
Tambahkan kesimpulan atau penutup di sini.
Hasil logikanya adalah:
Langkah 7: Menentukan Titik Pemisah yang Tepat
Titik pemisah merupakan bagian paling penting dalam membuat Split Post yang nyaman digunakan. Jangan hanya membagi artikel berdasarkan jumlah karakter secara acak.
Lebih baik gunakan struktur pembahasan sebagai dasar.
Contoh yang Baik
Misalnya artikel memiliki struktur:
- Pengenalan.
- Persiapan.
- Instalasi.
- Konfigurasi.
- Pemecahan masalah.
- Kesimpulan.
Anda dapat membuat pembagian seperti:
Tips Memilih Titik Pemisah
- Gunakan akhir sebuah subtopik sebagai titik pemisah.
- Jangan memotong paragraf di tengah.
- Jangan memisahkan judul dengan isi pembahasannya.
- Jangan memotong daftar yang masih berlanjut.
- Jangan memotong kode yang masih menjadi satu blok.
- Usahakan setiap halaman memiliki pembahasan yang cukup.
- Gunakan struktur bab atau subbab sebagai panduan.
<!--nextpage--> tepat setelah
judul sehingga halaman berikutnya dimulai hanya dengan satu atau dua
kalimat.
Contoh Pembagian Artikel Tutorial
Misalnya Anda memiliki tutorial berjudul Cara Membuat Website dengan Blogger yang sangat panjang. Pembagiannya dapat dibuat seperti berikut:
Pembagian seperti ini lebih masuk akal dibanding memotong artikel setiap 500 kata tanpa memperhatikan struktur pembahasannya.
Langkah 8: Menambahkan Gambar pada Setiap Halaman
Anda tetap dapat menggunakan gambar di dalam konten Split Post. Gambar akan menjadi bagian dari halaman tempat gambar tersebut ditempatkan.
<div id="postSplit">
Halaman 1
Penjelasan awal artikel.
Halaman 2
Pembahasan lanjutan artikel.
Gunakan alt yang menjelaskan gambar secara natural dan relevan
dengan isi artikel.
Langkah 9: Menggunakan Split Post Bersama Code Box
Jika artikel tutorial berisi kode, pastikan satu blok kode tidak dipotong menjadi dua halaman.
Contoh yang benar:
<div id="postSplit">
Konfigurasi
/* Seluruh kode tetap dalam satu blok */
Pengujian
<pre> atau <code>.
Langkah 10: Menguji Split Post
Setelah CSS dan JavaScript dipasang, jangan langsung menggunakannya pada semua artikel. Buat satu artikel pengujian terlebih dahulu.
Pastikan artikel tidak kosong ketika dibuka tanpa parameter halaman.
Periksa apakah pagination tampil di bagian bawah konten.
Klik nomor halaman dan pastikan kontennya berubah.
Kembali ke halaman sebelumnya dan periksa hasilnya.
Uji pagination pada layar smartphone.
Contoh URL Hasil Split Post
Dengan script pada tutorial ini, halaman pertama menggunakan URL artikel
normal. Ketika pengunjung memilih halaman berikutnya, script menggunakan
parameter ?page=.
Halaman 1
https://example.com/2026/09/artikel-contoh.html
Halaman 2
https://example.com/2026/09/artikel-contoh.html?page=2
Halaman 3
https://example.com/2026/09/artikel-contoh.html?page=3Parameter tersebut dibaca oleh JavaScript untuk menentukan bagian artikel mana yang harus ditampilkan.
Bagaimana Jika Pengunjung Langsung Membuka Halaman 3?
Script dirancang untuk membaca parameter halaman dari URL. Jika pengunjung
membuka URL dengan ?page=3, script akan mencoba menampilkan
bagian ketiga selama artikel tersebut memang memiliki minimal tiga bagian.
Jika parameter tidak tersedia, halaman pertama akan digunakan sebagai default.
Bagaimana Jika Nomor Halaman Melebihi Jumlah Halaman?
Script juga membatasi nilai halaman agar tidak melebihi jumlah bagian artikel.
Misalnya artikel hanya memiliki tiga halaman tetapi seseorang membuka
?page=99, script akan mengarahkannya ke bagian terakhir yang
tersedia dalam konten.
Apakah Split Post Bisa Digunakan pada Semua Tema Blogger?
Konsepnya dapat diterapkan pada banyak tema Blogger, tetapi kode JavaScript tidak selalu dapat langsung digunakan tanpa penyesuaian.
Masalah paling umum adalah selector elemen postingan berbeda antar tema.
Contoh tutorial pihak ketiga menggunakan selector seperti
div.post-body, tetapi tema lain dapat menggunakan class atau
struktur DOM yang berbeda.
Pada Plus UI yang digunakan Otaku.web.id, struktur postingan menggunakan
elemen dengan class pS postBody. Karena itu tutorial ini
menggunakan:
document.querySelector(".pS.postBody")Split Post dan SEO
Pagination tidak seharusnya digunakan hanya sebagai cara untuk membuat jumlah tampilan halaman sebanyak mungkin. Fokus utama tetap pada kualitas konten dan pengalaman pengguna.
Jika artikel terlalu panjang, pembagian berdasarkan subtopik dapat membuat pembaca lebih mudah menemukan bagian yang mereka cari. Sebaliknya, jika artikel dipotong secara berlebihan, pengunjung harus melakukan klik berulang kali hanya untuk membaca satu pembahasan.
Split Post dan Pengalaman Pengguna
Pengalaman pengguna seharusnya menjadi pertimbangan utama sebelum membuat pagination.
Pastikan setiap halaman:
- Memiliki pembahasan yang cukup.
- Memiliki konteks yang jelas.
- Tidak berhenti di tengah kalimat.
- Tidak memulai dengan judul tanpa penjelasan.
- Mudah dilanjutkan ke halaman berikutnya.
- Memiliki navigasi yang mudah ditemukan.
Kesalahan yang Sering Terjadi
1. Lupa Menambahkan Wrapper
Jika konten tidak berada di dalam #postSplit, JavaScript tidak
akan menemukan konten yang harus diproses.
2. Salah Menulis nextpage
Penanda harus ditulis tepat seperti:
<!--nextpage-->
Jangan mengubah nama menjadi <!--next-page-->,
<!--nextPage-->, atau bentuk lain karena script mencari
string yang spesifik.
3. Menambahkan nextpage pada Halaman Terakhir
Tidak perlu menambahkan penanda setelah konten terakhir.
4. Selector Tidak Sesuai Tema
Jika script menggunakan selector yang tidak ditemukan di halaman, script akan berhenti karena tidak menemukan elemen postingan.
5. Membagi Artikel Terlalu Pendek
Artikel lima halaman dengan setiap halaman hanya berisi satu paragraf biasanya tidak memberikan pengalaman membaca yang baik.
6. Mengedit Tema Tanpa Backup
Selalu simpan backup sebelum mengubah HTML tema.
Contoh Struktur Final yang Direkomendasikan
Jika ingin membuat artikel empat halaman, struktur dasarnya dapat dibuat seperti berikut:
<div id="postSplit">
Bagian 1
Konten halaman pertama.
Bagian 2
Konten halaman kedua.
Bagian 3
Konten halaman ketiga.
Bagian 4
Konten halaman terakhir.
Checklist Sebelum Dipublikasikan
Simpan file tema sebelum melakukan perubahan.
Pastikan CSS pagination tersimpan di tema.
Pastikan script berada sebelum tag </body>.
Pastikan seluruh konten Split Post berada di dalam wrapper.
Gunakan penanda <!--nextpage--> di antara setiap bagian.
Penanda hanya digunakan untuk memisahkan halaman.
Pastikan pagination tetap nyaman digunakan pada layar kecil.
FAQ Split Post Blogger
Apa itu Split Post di Blogger?
Split Post adalah teknik untuk membagi satu artikel panjang menjadi beberapa bagian atau halaman menggunakan kode tambahan seperti JavaScript, HTML, dan penanda nextpage.
Apakah Split Post merupakan fitur bawaan Blogger?
Sistem Split Post seperti yang dijelaskan dalam tutorial ini bukan tombol pagination bawaan pada editor postingan Blogger. Sistem ini dibuat menggunakan kode tambahan pada tema.
Apa fungsi kode <!--nextpage-->?
Penanda tersebut digunakan sebagai batas antara satu halaman dengan halaman berikutnya. JavaScript membaca penanda tersebut kemudian memisahkan isi artikel berdasarkan jumlah penanda yang ditemukan.
Apakah artikel harus menggunakan div id="postSplit"?
Pada kode tutorial ini, ya. Wrapper tersebut digunakan sebagai container yang dicari JavaScript untuk memproses isi artikel.
Berapa jumlah halaman yang bisa dibuat?
Tidak ada jumlah halaman tertentu yang ditetapkan oleh script ini. Jumlah halaman mengikuti jumlah bagian yang dibuat menggunakan penanda nextpage. Namun, sebaiknya jumlah halaman tetap dibuat secukupnya agar nyaman dibaca.
Apakah Split Post bisa digunakan untuk artikel pendek?
Bisa secara teknis, tetapi tidak disarankan jika artikel terlalu pendek. Pagination sebaiknya digunakan ketika pembagian benar-benar membantu struktur dan pengalaman membaca.
Apakah Split Post otomatis membuat artikel lebih SEO?
Tidak. Split Post adalah mekanisme presentasi dan navigasi konten. Jangan menganggap pagination sebagai jaminan peningkatan ranking. Gunakan terutama ketika pembagian artikel memang bermanfaat bagi pembaca.
Apakah Split Post dapat meningkatkan pageview?
Karena setiap perpindahan halaman menghasilkan pemuatan URL dengan parameter halaman yang berbeda, secara teknis sistem ini dapat menghasilkan beberapa pemuatan halaman untuk satu artikel. Namun, jangan membuat pagination secara berlebihan hanya untuk mengejar pageview karena hal tersebut dapat mengganggu pengalaman pengguna.
Apakah kode ini cocok untuk Plus UI?
Kode pada tutorial ini disesuaikan dengan struktur postingan Plus UI yang menggunakan selector .pS.postBody. Jika struktur tema Anda berbeda, selector JavaScript mungkin perlu disesuaikan.
Kenapa pagination tidak muncul?
Periksa apakah JavaScript sudah berada sebelum tag body penutup, apakah elemen #postSplit tersedia, apakah artikel memiliki penanda nextpage, dan apakah selector postingan sesuai dengan struktur tema.
Kenapa halaman kedua kosong?
Periksa penulisan penanda nextpage dan pastikan konten halaman kedua benar-benar berada setelah penanda tersebut di dalam wrapper #postSplit.
Apakah saya harus menambahkan nextpage di halaman terakhir?
Tidak. Penanda nextpage hanya diperlukan untuk memisahkan satu bagian dengan bagian berikutnya. Halaman terakhir tidak memerlukan penanda tambahan.
Split Post Siap Digunakan
Dengan memasang CSS, JavaScript, wrapper #postSplit, dan
penanda <!--nextpage-->, artikel Blogger yang panjang
dapat dibagi menjadi beberapa halaman dengan navigasi yang lebih
terstruktur. Gunakan pembagian berdasarkan subtopik dan selalu uji
tampilan pada desktop maupun perangkat mobile sebelum menerapkannya
pada artikel lainnya.
