Cara Membagi Postingan Blogspot Menjadi Beberapa Halaman
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 dipakai para blogger untuk meningkatkan jumlah pageview blog mereka. Sebagai pemilik blog, Anda juga sanggup 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 sanggup Anda lakukan :
1. Letakan script dibawah ini sempurna diatas instruksi </head> , lalu Simpan tema.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
(abaikan kalau 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 kawasan 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 bab 1 disini !
</div>
<div class="content_2" style="display: none;">
Letakkan artikel bab 2 disini !
</div>
<div class="content_3" style="display: none;">
Letakkan artikel bab 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 bab 1 disini !
</div>
<div class="content_2" style="display: none;">
Letakkan artikel bab 2 disini !
</div>
<div class="content_3" style="display: none;">
Letakkan artikel bab 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 bab 1 disini !" yaitu area mengetikan atau menempatkan artikel Anda untuk halaman pertama, begitu juga untuk halaman berikutnya.
4. Setelah selesai, Publikasikan artikel Anda dan lihat kesudahannya !
Perlu Anda ketahui, script yang dibentuk tersebut terdiri dari 3 buton, artinya postingan Anda akan terbagi menjadi 3 halaman. Untuk menciptakan 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 sanggup Anda lakukan. Sekarang Anda sanggup menciptakan sebuah artikel yang panjang dan membaginya menjadi beberapa halaman untuk meningkatkan jumlah pageview blog Anda. Semoga bermanfaat.
Sumber http://cari2-cara.blogspot.com/