Cara Membagi Artikel Menjadi Beberapa Halaman dalam 2 Langkah Mudah
Untuk WordPress sendiri, ada plugin WP tersendiri
yang menyetel pembagian halaman ini; sedangkan untuk Blogger/Blogspot, dibutuhkan kode atribut HTML, CSS, dan JavaScript (Js) tambahan agar fitur ini bisa berfungsi.
1. Langkah Awal: Menyimpan Kode CSS dan JavaScript (Js)
Simpan kode di bawah ini, di template blogger yang kamu gunakan:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Catatan: Apabila kode Googleapis di atas sudah ada, tidak perlu ditambahkan. Jangan sampai kode di atas duplikat (double) di dalam blogger theme yang digunakan.
Simpan kode CSS yang mengatur tata letak tampilan tombol (Button) untuk Post Pagination di bawah ini, di atas kode /b:skin
.post-pagination {
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
Selanjutnya simpan kode JavaScript (Js) di bawah ini, di atas kode /head
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
Akhiri sesi penyimpan kode CSS dan JavaScript (Js) ini dengan menekan tombol Save Template.
2. Langkah Terakhir: Atribut HTML yang Diperlukan Setelah memasang beberapa kode CSS dan Js
sebagaimana tutorial langkah pertama (No. 1) di atas, saatnya kamu mengimplementasikannya di dalam artikel (postingan) blog.
Selesaikan terlebih dahulu postingan kamu sampai tuntas (termasuk gambar dan video apabila ada ditambahkan)
Masuk ke dalam Post/Content
Beralih gaya tulisan dari mode Compose ke mode HTML
Simpan kode HTML di bawah ini
Selanjutnya publikasikan (Publish)
artikel tersebut Kode HTML yang diperlukan adalah kode di bawah ini:
<div class="content_1">
Postingan (Artikel) Bagian Pertama Silakan Copas di Sini</div>
<div class="content_2" style="display: none;">
Postingan (Artikel) Bagian Kedua Silakan Copas di Sini</div>
<div class="content_3" style="display: none;">
Postingan (Artikel) Bagian Ketiga Silakan Copas di Sini</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>
Tutorial di atas apabila diimplementasikan, terbagi dalam 3 halaman. Jika kamu ingin membagikannya lebih dari 3 halaman, silakan modifikasi dan tambahkan beberapa kode di atas. Itulah tutorial tips dan trik bagaimana cara membuat dan membagi artikel blog menjadi beberapa halaman di postingan Blogger/Blogspot.
Source: How to Break your Post into Multiple Pages in Blogger - https://www.mybloggerlab.com/2015/07/how-to-break-your-post-into-multiple.html