Kang Usep: Cara Membagi Posting Blog Menjadi Beberapa Halaman

Sunday, December 11, 2016

Cara Membagi Posting Blog Menjadi Beberapa Halaman

Sering kita temui pada Blog berita atau blog yang menggunakan platform wordpress atau joomla ada tombol halaman berikutnya, sehingga membaginya menjadi beberapa laman tujuannya untuk meningkatkan pageview blog. Nah, karena pada platform Blogger tidak menyediakan fitur ini, maka kita harus secara manual membuatnya.

Cukup ikuti langkah-langkah di bawah ini untuk membagi satu posting blog menjadi beberapa laman :

1. Pastikan Anda memiliki plugin jquery di blog Anda, jika tidak maka tambahkan kode di bawah ini tepat di bawah kode <head> dalam template Anda

2. Buat postingan, pada bagian postingan klik mode HTML bukan Compose, kemudian copy code dibawah

<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.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;
}
</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','#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>

<div class="content_1">

Add content here

</div>
<div class="content_2" style="display: none;">

Add content here

</div>
<div class="content_3" style="display: none;">

Add content here

</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>
</div>
<br />
<br />
<br />

Ganti Tulisan Add content here dengan konten Anda, selesai

Catatan : Setiap Anda mau membuat posting ulangi lagi copy code nomor dua, ingat mode HTML bukan Compose

Sekian posting Cara Membagi Posting Blog Menjadi Beberapa Halaman , jika ada kesulitan silahkan berbagi dalam komentar !