Membagi Postingan Blog Menjadi Beberapa Halaman

Semangat Pagi Sobat Pencari Ilmu! Pastinya sobat sering membuat postingan di blog yang pembahasannnya sangat panjang sehingga ketika ditampilkan dibrowser menjadi sangat panjang, tentunya menjadi sangat tidak elok dilihat. Nah kali ini saya akan berbagi tutorial bagaimana caranya membagi postingan yang pajang menjadi beberapa halaman. Berikut langkah-langkahnya :

1. Login terlebih dahulu ke dasbor blog anda
   
   
   
   
   
   
   
2. Pilih "Tema" pada menu sebelah kiri
   
   
   
3. Klik sesuaikan, pilih Edit HTML
4. Tambahkan script berikut diatas kode </body> . untuk mempermudah  mencarinya gunakan CTRL + di keyboard
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').show('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow');
return false;
});
});
</script>
5. Buatlah postingan terlebih dahulu, pada halaman postingan pilih mode HTML kemudian bagilah postingan menjadi beberapa bagian dengan menambahkan DIV atau SPAN dengan menambahkan atribut CLASS. contoh script dapat dilhat pada kode berikut :
   <!--to posting page -->
   <div class="content_1">
   DISINI POSTING HALAMAN PERTAMA
   </div>
   
   <div class="content_2" style="display:none;">
   DISINI POSTING HALAMAN KEDUA
   </div>
   
   <div class="content_3" style="display:none;">
   DISINI POSTING HALAMAN KETIKA
   </div>
6. Untuk menampilkan tombol halamanya, masukkan kode dibawah ini pada mode HTML. Paste pada tang </DIV> postingan yang terakhir.
   <!--button on alltutorials html-->
   <div style="font-size: 22px; font-weight: bold;">
   Halaman : <a class="button_1" href="#">
   <img height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6CrhEua0GMhbjZTDC5JlW4gjWxFbvUpzgGQNNUsLbcdxqpln34sdnxAyUUBQmk5kV5En_YiRwQdXEvV23FMOAeWFbDpL1yQW9tZfcDEagjYWQAwPcjxso9QHLnZwcVqHqRGd2-iv6tPu/s1600/1.png" title="page posting 1" width="25" /></a>&nbsp;<a class="button_2" href="#"><img height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifxrM9YA3TvRuNg8QjIosUvPpcGIOu5uOnJ2U9e57jQmvaAfOGFHaqen3TRaC-ZHbP8M5BhlQbCHFePq9cSBM1zcypAjCJ1bo96f46BQYpjOYjqtecoVvn7TApvelWm4pc-yRpv-4uS-g6/s1600/2.png" title="page posting 2" width="25" /></a>&nbsp;<a class="button_3" href="#"><img height="25" src="http://4.bp.blogspot.com/-
   x7TFtw7YNK0/VLDn8H_xs3I/AAAAAAAACn0/681_f2L8gOA/s1600/3.png" title="page posting 3" width="25" /></a></div>