Cara Membagi Postingan Blogspot Menjadi Beberapa Halaman - Anda tentu pernah melihat postingan sebuah artikel yang dibagi menjadi beberapa halaman. Cara ini disebut dengan teknik pagination, yaitu salah satu cara yang digunakan para blogger untuk meningkatkan jumlah pageview blog mereka. Sebagai pemilik blog, Anda juga bisa menerapkan teknik pagination atau membagi postingan menjadi beberapa halaman untuk meningkatkan pageview blog Anda.
Bagi Anda pengguna blogspot yang juga ingin meningkatkan jumlah pageview blog Anda dengan tektnik pagination, caranya sangat mudah. Berikut ini langkah-langkah membagi postingan blog menjadi beberapa halaman yang dapat Anda lakukan :
1. Letakan script dibawah ini tepat diatas kode </head> , kemudian Simpan tema.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
(abaikan jika blog Anda sudah ada script tersebut, baik sejenis atau lebih tinggi).
2. Buat Entri baru, copy kode/script dibawah ini dan pastekan di area mode HTML. Selanjutnya silahkan buat artikel Anda dan letakan masing-masing pada tempat yang telah disediakan.
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 1px solid #076BB8;
font-weight: 900;
padding: 6px 10px;
color:#FFF;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #076BB8;
color: #fff;
text-decoration: none;
}
</style>
<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','#076BB8'); jQuery(this).css('color','#fff'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#076BB8'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#076BB8'); 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','#076BB8'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#076BB8'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#076BB8'); 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','#076BB8'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#076BB8'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#076BB8'); return false; });
});
</script>
<br />
<div class="content_1">
Letakkan artikel bagian 1 disini !
</div>
<div class="content_2" style="display: none;">
Letakkan artikel bagian 2 disini !
</div>
<div class="content_3" style="display: none;">
Letakkan artikel bagian 3 disini !
</div>
<div class="post-pagination"> <div style="font-weight: ;font-family:george;"> <span style="font-size: 20px;"><i>Halaman</i> </span>: <a class="button_1" href="#">1</a> <a class="button_2" href="#">2</a> <a class="button_3" href="#">3</a> </div> </div>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 1px solid #076BB8;
font-weight: 900;
padding: 6px 10px;
color:#FFF;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #076BB8;
color: #fff;
text-decoration: none;
}
</style>
<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','#076BB8'); jQuery(this).css('color','#fff'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#076BB8'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#076BB8'); 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','#076BB8'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#076BB8'); jQuery('.button_3').css('background','#fff'); jQuery('.button_3').css('color','#076BB8'); 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','#076BB8'); jQuery(this).css('color','#fff'); jQuery('.button_1').css('background','#fff'); jQuery('.button_1').css('color','#076BB8'); jQuery('.button_2').css('background','#fff'); jQuery('.button_2').css('color','#076BB8'); return false; });
});
</script>
<br />
<div class="content_1">
Letakkan artikel bagian 1 disini !
</div>
<div class="content_2" style="display: none;">
Letakkan artikel bagian 2 disini !
</div>
<div class="content_3" style="display: none;">
Letakkan artikel bagian 3 disini !
</div>
<div class="post-pagination"> <div style="font-weight: ;font-family:george;"> <span style="font-size: 20px;"><i>Halaman</i> </span>: <a class="button_1" href="#">1</a> <a class="button_2" href="#">2</a> <a class="button_3" href="#">3</a> </div> </div>
3. Tulisan yang berwarna merah "Letakan artikel bagian 1 disini !" adalah area mengetikan atau menempatkan artikel Anda untuk halaman pertama, begitu juga untuk halaman berikutnya.
4. Setelah selesai, Publikasikan artikel Anda dan lihat hasilnya !
Perlu Anda ketahui, script yang dibuat tersebut terdiri dari 3 buton, artinya postingan Anda akan terbagi menjadi 3 halaman. Untuk membuat lebih dari 3 halaman, silahkan Anda menambahkan script jQuery button dan class content yang ada. Jika hanya ingin membuatnya menjadi 2 halaman, silahkan hapus semua perintah button 3 dan class content 3.
Baca juga artikel : Cara Membuat Galeri Foto Di Postingan Blog
Demikian Cara Membagi Postingan Blogspot Menjadi Beberapa Halaman yang bisa Anda lakukan. Sekarang Anda dapat membuat sebuah artikel yang panjang dan membaginya menjadi beberapa halaman untuk meningkatkan jumlah pageview blog Anda. Semoga bermanfaat.