Post Pagination Blog

Salah satu slogan utama seorang blogger adalah "Content Is King!". Mesin pencari seperti Google juga menganggap konten adalah raja. Artikel yang berisi dengan pembahasan lengkap dan panjang menjadi parameter search engine dalam menempatkan postingan di halaman indeks. Maka dari itu, sebisa mungkin untuk menulis artikel blog yang panjang dan terarah sesuai topik.

Tapi meski disukai SERP, artikel yang kepanjangan bukan favorit kebanyakan pengunjung. Rata-rata visitor tidak nyaman dengan post yang kelebihan muatan sehingga harus di scroll berkali-kali. Mereka yang malas melakukan aktivitas itu akan dengan mudah meninggalkan artikel blog dan akhirnya menambah rasio pantulan yang negatif untuk blog kita.

Hal yang dapat dilakukan demi mengakali masalah artikel yang terlalu panjang adalah membuat Post Pagination. Fungsinya memecah konten menjadi beberapa bagian, dan dipisahkan dengan tombol penomoran sehingga pengunjung dapat mengakses bagian artikel dengan sub pembahasan yang berbeda satu per satu. Caranya silahkan ikuti tutorial SyamSalabim berikut.

TUTORIAL

1. Masuk ke Dashboard blog dan edit Template melalui Tema > Edit HTML.

2. Copy paste kode CSS berikut tepat di bawah </b:skin>.

CSS
<style>
.post-page {
text-align: center;
}
.post-page a {
display:inline-block;
border: 2px solid #007bfd;
font-weight: 900;
padding: 6px 30px;
color:#007bfd;
transition:ease 0.69s !important;
}
.post-page a:hover {
background: none repeat scroll 0 0 #007bfd;
color: #fff;
text-decoration: none;
}
</style>

3. Selanjutnya kode JQuery berikut di atas </head>. Jika template blog sudah memiliki JQuery, langkah ini bisa diabaikan.

JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

4. Terakhir salin kode Javascript di bawah ini tepat di atas </body>.

Javascript
<script>
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','#007bfd');
jQuery(this).css('color','#fff');
jQuery('#button-2').css('background','#fff');jQuery('#button-2').css('color','#007bfd');
jQuery('#button-3').css('background','#fff');jQuery('#button-3').css('color','#007bfd');
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','#007bfd');
jQuery(this).css('color','#fff');
jQuery('#button-1').css('background','#fff');jQuery('#button-1').css('color','#007bfd');
jQuery('#button-3').css('background','#fff');jQuery('#button-3').css('color','#007bfd');
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','#007bfd');
jQuery(this).css('color','#fff');
jQuery('#button-1').css('background','#fff');jQuery('#button-1').css('color','#007bfd');
jQuery('#button-2').css('background','#fff');jQuery('#button-2').css('color','#007bfd');
return false;
});
});
</script>

5. Silahkan Simpan Tema yang sudah dimodifikasi.

6. Sekarang Agan bisa beralih ke Post dan buat Entri Baru. Jangan lupa ganti mode penulisan Compose ke HTML.

7. Kode HTML di bawah ini adalah format dari Post Pagination. Silahkan copy paste kodenya ke dalam postingan.

HTML
<div class="content_1">
Konten Halaman 1
</div>
<div class="content_2" style="display: none;">
Konten Halaman 2
</div>
<div class="content_3" style="display: none;">
Konten Halaman 3
</div>

<div class="post-page">
<a id="button-1" href="#">1</a>
<a id="button-2" href="#">2</a>
<a id="button-3" href="#">3</a>
</div>

8. Tentunya teks yang berwarna merah bisa Agan ganti dengan konten yang dimiliki. Setelah di Publikasikan bentuknya akan seperti berikut.

Post Pagination
Konten Halaman 1
1 2 3


Demikian cara membuat Post Pagination pada artikel blog guna mengatasi konten blog yang terlalu panjang untuk di baca pengunjung. Post Pagination ini dapat diterapkan khususnya untuk artikel yang memiliki daftar poin-poin pembahasan yang berbeda meski dalam satu subjek artikel.

Sebagai contoh yang Syams aplikasikan pada artikel di blog lain dengan judul: Teori One Piece. Artikel tersebut bersifat Top List dengan tiap teori memiliki konten pembahasan masing-masing disertai uraian yang cukup panjang. Postingan itu sendiri mencapai ribuan kata dan tanpa Post Pagination akan cukup melelahkan membaca semuanya sekaligus.

Contoh lainnya dapat Agan praktekkan sendiri untuk mengetahui cara terbaik ketika membagi konten artikel ke dalam beberapa bagian. Jika Agan mengalami kendala dalam membuat Post Pagination, silahkan tinggalkan komentar sehingga Syams dapat membantu agar tutorial di atas sukses diikuti.