Membuat artikel panjang di Blogger terkadang membutuhkan penyusunan konten yang lebih teratur agar pembaca dapat mengikuti setiap pembahasan dengan nyaman. Dengan teknik Split Post, satu artikel dapat dibagi menjadi beberapa halaman berdasarkan bagian atau tahapan tertentu sehingga informasi tetap tersusun rapi dan pembaca dapat melanjutkan pembahasan secara bertahap tanpa harus membuat beberapa postingan terpisah.
Cara Membuat Artikel Blogger Menjadi Beberapa Halaman dengan Split Post
Pelajari cara membagi satu artikel Blogger menjadi beberapa halaman menggunakan marker, parameter URL, JavaScript, dan navigasi halaman yang responsif.
Split Post dapat digunakan untuk artikel tutorial, panduan panjang, dokumentasi, atau pembahasan yang memang memiliki beberapa bagian yang saling berurutan. Sistem ini bekerja dengan membagi isi artikel berdasarkan penanda tertentu, kemudian JavaScript hanya menampilkan bagian yang sesuai dengan nomor halaman pada URL.
Apa Itu Split Post di Blogger?
Split Post adalah teknik untuk membagi sebuah artikel panjang menjadi beberapa bagian atau halaman. Pembaca dapat berpindah dari satu bagian ke bagian berikutnya menggunakan navigasi nomor halaman.
Dengan pendekatan ini, penulis tetap mengelola satu postingan Blogger, sedangkan script pada halaman artikel bertugas membaca penanda pembagian dan menampilkan bagian yang sesuai.
Bagaimana Split Post Bekerja?
Sistem Split Post sederhana dapat dibangun menggunakan HTML dan JavaScript. Isi artikel ditempatkan di dalam wrapper tertentu, kemudian bagian yang ingin dipisahkan diberi marker <!--next page-->.
Tulis Artikel
Tulis seluruh materi dalam satu postingan Blogger seperti biasa.
Tambahkan Marker
Gunakan marker untuk menentukan batas antara satu halaman dan halaman berikutnya.
JavaScript Membaca
Script membaca marker dan membagi isi artikel menjadi beberapa bagian.
Setelah pembagian dilakukan, JavaScript membaca parameter page pada URL. Jika parameter tersebut tidak tersedia, sistem menampilkan halaman pertama.
Kelebihan Menggunakan Split Post
Split Post dapat berguna ketika sebuah artikel memiliki pembahasan yang panjang dan terbagi secara alami menjadi beberapa tahapan. Teknik ini bukan keharusan untuk setiap artikel, sehingga penggunaannya sebaiknya disesuaikan dengan struktur konten.
Artikel panjang dapat dibagi berdasarkan bab, langkah, atau tahapan pembahasan.
Pembaca dapat berpindah antarbagian menggunakan nomor halaman.
Tutorial yang memiliki banyak tahapan dapat disusun menjadi beberapa bagian yang mudah diikuti.
Konten tetap berada dalam satu postingan sehingga pengelolaannya tidak harus dipisahkan menjadi banyak artikel.
Kapan Sebaiknya Menggunakan Split Post?
Tidak semua artikel membutuhkan sistem halaman. Split Post paling masuk akal digunakan ketika pembagian konten memiliki alasan yang jelas dan setiap halaman tetap memberikan informasi yang cukup kepada pembaca.
Tutorial Panjang
Cocok untuk tutorial yang terdiri dari banyak langkah dan tahapan.
Panduan Bertahap
Setiap halaman dapat digunakan untuk satu kelompok pembahasan tertentu.
Dokumentasi
Dokumentasi panjang dapat dikelompokkan berdasarkan topik atau bagian.
Kapan Tidak Perlu Menggunakan Split Post?
Artikel pendek, berita singkat, pengumuman, atau tulisan yang hanya membutuhkan beberapa paragraf biasanya tidak memerlukan Split Post.
Persiapan Sebelum Membuat Split Post
Sebelum memasang sistem Split Post, pastikan template Blogger dapat menjalankan JavaScript pada halaman postingan dan Anda mengetahui bagian body artikel yang digunakan oleh template.
Langkah 1 — Membuat Wrapper postSplit
Langkah pertama adalah menempatkan isi artikel yang ingin dibagi ke dalam sebuah wrapper dengan ID postSplit.
Wrapper tersebut digunakan JavaScript sebagai area khusus yang akan dibagi menjadi beberapa halaman.
<div id="postSplit">
ISI ARTIKEL ANDA
Langkah 2 — Menambahkan Penanda Split Post
Setelah wrapper dibuat, gunakan marker berikut sebagai pemisah antarhalaman:
<!--next page-->Marker tersebut diletakkan setelah bagian artikel yang ingin ditampilkan sebagai halaman pertama.
Misalnya artikel dibagi menjadi tiga halaman, struktur sederhananya dapat dibuat seperti berikut.
<div id="postSplit">
Halaman 1
Ini adalah isi artikel pada halaman pertama.
Anda dapat menambahkan teks, gambar, 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 pembahasan penutup atau kesimpulan.
Langkah 3 — Menyusun Artikel Menjadi Beberapa Halaman
Pembagian halaman sebaiknya mengikuti struktur pembahasan, bukan dilakukan secara acak. Misalnya artikel tutorial dapat dibagi menjadi pengenalan, persiapan, pemasangan kode, pengujian, dan pemecahan masalah.
Pengertian, tujuan, dan persiapan sebelum memulai tutorial.
Langkah pemasangan kode atau konfigurasi utama.
Pengujian, troubleshooting, dan penyelesaian tutorial.
FAQ, tips tambahan, dan kesimpulan jika memang diperlukan.
Langkah 4 — Menambahkan Gambar pada Artikel
Split Post tetap dapat digunakan walaupun artikel hanya memiliki satu gambar. Gambar tidak perlu dibuat untuk setiap halaman. Satu gambar utama yang relevan dengan keseluruhan artikel sudah cukup jika memang sesuai dengan kebutuhan konten.
Pada artikel ini, gambar utama ditempatkan di bagian awal setelah judul pembuka. Bagian halaman berikutnya tetap berfokus pada teks, kode, penjelasan, dan navigasi.
Langkah 5 — Memasang JavaScript Split Post
JavaScript berikut bertugas menemukan wrapper postSplit, membaca marker, menentukan halaman aktif, menampilkan isi halaman tersebut, kemudian membuat navigasi nomor halaman.
Kode ini ditujukan untuk halaman postingan Blogger dan menggunakan selector .pS.postBody yang umum digunakan pada struktur Plus UI.
<b:if cond='data:view.isPost'>
<script>
(function () {
var post = document.querySelector('.pS.postBody');
if (!post) return;
var split = post.querySelector('#postSplit');
if (!split) return;
var marker = '';
var html = split.innerHTML;
if (html.indexOf(marker) === -1) return;
var pages = html.split(marker);
var params = new URLSearchParams(window.location.search);
var currentPage = parseInt(params.get('page'), 10) || 1;
if (currentPage < 1) {
currentPage = 1;
}
if (currentPage > pages.length) {
currentPage = pages.length;
}
split.innerHTML = pages[currentPage - 1];
var nav = document.createElement('div');
nav.className = 'splitPostNav';
for (var i = 1; i <= pages.length; i++) {
var link = document.createElement('a');
link.textContent = i;
link.href =
window.location.pathname +
(i === 1 ? '' : '?page=' + i);
if (i === currentPage) {
link.className = 'active';
}
nav.appendChild(link);
}
split.appendChild(nav);
})();
Langkah 6 — Memahami Parameter ?page=2
Sistem menggunakan parameter URL untuk menentukan halaman yang sedang ditampilkan. Halaman pertama tidak membutuhkan parameter tambahan.
Halaman 1:
https://www.otaku.web.id/judul-artikel.html
Halaman 2:
https://www.otaku.web.id/judul-artikel.html?page=2
Halaman 3:
https://www.otaku.web.id/judul-artikel.html?page=3
Halaman 4:
https://www.otaku.web.id/judul-artikel.html?page=4
JavaScript membaca nilai parameter page. Jika nilai tersebut adalah 2, sistem menampilkan bagian kedua dari array halaman.
Langkah 7 — Membuat Navigasi Nomor Halaman
Script akan membuat elemen navigasi secara otomatis berdasarkan jumlah halaman yang ditemukan. Jika terdapat tiga bagian, navigasi akan menghasilkan nomor 1, 2, dan 3.
Bagian utama yang membuat navigasi adalah sebagai berikut.
var nav = document.createElement('div');
nav.className = 'splitPostNav';
for (var i = 1; i <= pages.length; i++) {
var link = document.createElement('a');
link.textContent = i;
link.href =
window.location.pathname +
(i === 1 ? '' : '?page=' + i);
if (i === currentPage) {
link.className = 'active';
}
nav.appendChild(link);
}Nomor halaman aktif mendapatkan class active. Dengan demikian, CSS template dapat memberikan tampilan berbeda pada nomor yang sedang dibuka.
Langkah 8 — Menangani Halaman yang Tidak Ada
Pengunjung dapat saja membuka parameter seperti ?page=99 meskipun artikel hanya memiliki tiga halaman. Karena itu, JavaScript perlu membatasi nilai halaman agar tidak melebihi jumlah bagian yang tersedia.
if (currentPage < 1) {
currentPage = 1;
}
if (currentPage > pages.length) {
currentPage = pages.length;
}Dengan pemeriksaan tersebut, parameter yang terlalu besar akan diarahkan secara logis ke halaman terakhir yang tersedia.
Contoh Struktur Split Post Lengkap
Berikut contoh sederhana yang dapat digunakan untuk memahami hubungan wrapper, marker, dan isi halaman.
<div id="postSplit">
Bagian Pertama
Pembahasan pertama artikel.
Tuliskan pengantar dan informasi dasar di sini.
- Poin pertama
- Poin kedua
- Poin ketiga
Bagian Kedua
Lanjutkan pembahasan pada bagian kedua.
Anda dapat memasukkan kode atau langkah tutorial.
Contoh konten tambahan.
Bagian Ketiga
Bagian terakhir dapat digunakan untuk pengujian,
tips, FAQ, atau kesimpulan.
Apakah Setiap Halaman Bisa Memiliki Banyak Elemen?
Ya. Setiap bagian Split Post dapat berisi berbagai elemen HTML yang diperlukan artikel, seperti paragraf, heading, daftar, tabel, gambar, blockquote, video, maupun code box.
Yang perlu diperhatikan adalah posisi marker. Marker harus berada di antara bagian yang ingin dipisahkan dan bukan ditempatkan di tengah struktur HTML yang belum selesai.
Split Post untuk Artikel Tutorial
Artikel tutorial merupakan salah satu jenis konten yang secara alami dapat memiliki beberapa tahap. Misalnya tutorial Blogger dapat dibagi menjadi persiapan, pemasangan kode, konfigurasi, pengujian, dan troubleshooting.
Persiapan
Jelaskan apa saja yang perlu disiapkan sebelum memulai.
Pemasangan
Masukkan langkah teknis dan kode yang diperlukan.
Pengujian
Periksa hasil pemasangan dan jelaskan cara mengatasi masalah.
Split Post dan SEO
Split Post sebaiknya dipandang sebagai teknik penyajian konten, bukan sebagai metode otomatis untuk meningkatkan peringkat pencarian. Penggunaan halaman tambahan tidak dengan sendirinya membuat artikel mendapatkan peringkat lebih tinggi.
Fokus utama tetap pada kualitas dan relevansi informasi, struktur halaman yang mudah dipahami, pengalaman pengguna, performa template, serta kemampuan mesin pencari memahami konten.
Jika artikel dibagi menjadi beberapa halaman, pastikan setiap bagian tetap memiliki konteks yang jelas. Jangan membagi artikel secara berlebihan hanya untuk menghasilkan lebih banyak halaman tampilan.
Apakah ?page=2 Merupakan Artikel Berbeda?
Dalam implementasi Split Post pada tutorial ini, ?page=2 merupakan parameter pada URL postingan yang sama. JavaScript menggunakan parameter tersebut untuk menentukan bagian artikel yang ditampilkan.
Jadi, struktur dasarnya tetap berasal dari satu postingan Blogger. Perlakuan mesin pencari terhadap URL berparameter dapat bergantung pada struktur template, canonical, dan bagaimana halaman tersebut dapat diakses serta dirayapi.
Karena itu, jangan menganggap setiap parameter otomatis menjadi dokumen pencarian yang berbeda. Pastikan konfigurasi template tetap konsisten dan tidak menghasilkan halaman yang membingungkan bagi pengguna maupun mesin pencari.
Apakah Split Post Bisa Digunakan di Plus UI?
Split Post dapat digunakan pada template Plus UI selama selector yang digunakan JavaScript sesuai dengan struktur post body template. Pada implementasi ini, script mencari area .pS.postBody dan kemudian mencari elemen dengan ID postSplit.
Setelah pemasangan, lakukan pengujian pada halaman postingan desktop dan mobile. Pastikan navigasi muncul, nomor halaman dapat diklik, dan isi artikel berubah sesuai parameter URL.
Kesalahan yang Sering Terjadi
1. Navigasi Tidak Muncul
Pastikan artikel memiliki wrapper postSplit dan setidaknya terdapat satu marker <!--next page-->. Jika marker tidak ditemukan, script tidak memiliki bagian yang perlu dibagi.
2. Artikel Tetap Tampil Semua
Periksa apakah JavaScript benar-benar berjalan pada halaman postingan. Pastikan selector .pS.postBody sesuai dengan struktur template yang digunakan.
3. Halaman Kedua Tidak Bisa Dibuka
Periksa alamat URL dan pastikan parameter ditulis dalam format ?page=2. Pastikan juga kode JavaScript membaca parameter page.
4. Isi Artikel Hilang
Periksa penempatan marker. Jangan meletakkan marker di dalam struktur HTML yang belum selesai atau di posisi yang dapat merusak tag pembuka dan penutup.
5. Code Box Rusak
Jika artikel berisi contoh HTML atau JavaScript, karakter seperti < dan > harus di-escape ketika kode tersebut hanya ingin ditampilkan sebagai contoh.
6. Tampilan Mobile Melebar
Code box sebaiknya menggunakan overflow horizontal sehingga kode panjang tidak memaksa seluruh halaman melebar. Template juga harus diuji pada layar kecil.
7. Marker Terlihat di Artikel
Jika marker terlihat sebagai teks biasa, berarti sistem belum memprosesnya atau marker yang digunakan tidak sesuai dengan string yang dicari oleh JavaScript.
Tips Membuat Split Post yang Nyaman
Pisahkan artikel berdasarkan topik atau tahapan pembahasan.
Buat jumlah halaman secukupnya agar pembaca tidak harus terlalu sering berpindah halaman.
Nomor halaman harus mudah ditemukan dan digunakan.
Pembagian halaman sebaiknya membantu pembaca, bukan mengganggu alur membaca.
Pengujian Split Post
Setelah pemasangan selesai, jangan langsung menganggap sistem sudah bekerja hanya karena navigasi muncul. Lakukan pengujian dari halaman pertama sampai halaman terakhir.
Checklist Sebelum Publikasi
Gunakan checklist berikut sebelum menerbitkan artikel yang menggunakan Split Post.
FAQ Split Post Blogger
Apa itu Split Post di Blogger?
Split Post adalah teknik untuk membagi isi satu postingan menjadi beberapa tampilan halaman menggunakan marker dan JavaScript.
Apakah Split Post membuat beberapa postingan?
Tidak. Pada sistem ini, konten tetap berada dalam satu postingan. JavaScript hanya menentukan bagian mana yang ditampilkan berdasarkan parameter halaman.
Apakah harus menggunakan banyak gambar?
Tidak. Artikel dapat menggunakan satu gambar utama saja. Gambar tidak harus tersedia pada setiap halaman Split Post.
Apakah Split Post cocok untuk artikel pendek?
Biasanya tidak diperlukan. Jika artikel dapat dibaca dengan nyaman dalam satu halaman, mempertahankannya sebagai satu halaman lebih sederhana.
Apakah bisa digunakan untuk artikel tutorial?
Bisa. Tutorial yang memiliki banyak tahapan justru dapat lebih mudah disusun jika setiap kelompok pembahasan ditempatkan pada bagian yang jelas.
Apa fungsi marker next page?
Marker <!--next page--> digunakan sebagai pemisah antara satu bagian artikel dengan bagian berikutnya.
Apa fungsi parameter ?page=2?
Parameter tersebut memberi tahu JavaScript bahwa pembaca meminta bagian kedua dari artikel.
Kenapa halaman kedua tidak muncul?
Periksa wrapper, marker, JavaScript, dan selector post body. Pastikan script benar-benar berjalan pada halaman postingan.
Apakah Split Post otomatis meningkatkan SEO?
Tidak. Split Post merupakan teknik penyajian konten dan bukan jaminan peningkatan peringkat pencarian. Kualitas konten dan pengalaman pengguna tetap menjadi bagian penting dari pengelolaan artikel.
Apakah Split Post bisa digunakan di Plus UI?
Bisa selama selector JavaScript sesuai dengan struktur template. Setelah pemasangan, lakukan pengujian pada halaman postingan desktop dan mobile.
Apakah marker boleh diletakkan di mana saja?
Marker sebaiknya diletakkan di antara bagian konten yang lengkap. Hindari menempatkannya di tengah struktur HTML yang belum selesai.
Apakah bisa membuat 4 atau 5 halaman?
Bisa. Jumlah halaman ditentukan oleh jumlah marker yang digunakan. Misalnya tiga marker dapat menghasilkan empat bagian artikel.
Kesimpulan
Membuat artikel Blogger menjadi beberapa halaman dengan Split Post dapat dilakukan menggunakan wrapper HTML, marker, JavaScript, parameter URL, dan navigasi nomor halaman. Dengan sistem tersebut, satu artikel panjang dapat disusun menjadi beberapa bagian tanpa harus membuat banyak postingan terpisah.
Kunci utama implementasinya adalah menempatkan postSplit dengan benar, menggunakan marker <!--next page--> pada posisi yang tepat, kemudian memasang JavaScript yang membaca parameter page.
Untuk artikel tutorial yang panjang, pembagian halaman dapat membantu mengelompokkan materi menjadi bagian yang lebih mudah diikuti. Namun, pembagian sebaiknya tetap dilakukan secara wajar agar tidak mengganggu pengalaman membaca.
Jika Anda menggunakan template Plus UI, lakukan pengujian setelah pemasangan untuk memastikan selector post body, navigasi, parameter URL, dan tampilan mobile bekerja sesuai struktur template yang digunakan.
Untuk mendapatkan tutorial lainnya mengenai Blogger, WordPress, SEO, blogging, dan pengembangan website, kunjungi OTAKU.WEB.ID .
Gunakan Split Post secara proporsional dan berorientasi pada pembaca. Bagilah artikel hanya ketika pembagian tersebut benar- benar membantu struktur dan kenyamanan membaca.
