cara membagi halaman postingan Blogger yang panjang menjadi beberapa bagian

Membuat sebuah postingan di blog memang diajurkan untuk tidak terlalu panjang agar  para visitor blog kita tidak dibuat jenuh karenanya, apalagi jika isi artikel tersebut hanya berisikan teks saja ataupun terlalu pendek ,begitu kata para pakar SEO. Saya pribadi jika menemukan sebuah artikel berita ataupun tulisan - tulisan panjang akan saya skip atau baca cepat saja,hal tersebut dapat membuat mata cepat lelah dan bosen. Namun jika kondisi mengajurkan kita untuk membuat sebuah artikel yang panjang tanpa membuat visitor kita merasa jenuh. 

Selain itu ada juga beberapa Manfaat membagi postingan menjadi beberapa halaman, antara lain :

• Jika pengunjung menemukan posting Anda lebih menarik maka mereka akan membaca lebih lanjut dengan pindah ke halaman berikutnya sehingga meningkatkan tampilan halaman Anda.

• Semakin tinggi tampilan halaman dan pengunjung menghabiskan terlalu banyak waktu di situs secara bertahap akan menurunkan rasio Bounce Rate.»

• Dengan memisahkan satu posting menjadi beberapa halaman, Anda akan mendapatkan banyak slot untuk menempatkan iklan yang meningkatkan pendapatan iklan Anda.

Posting yang sangat panjang dan berukuran besar akan membutuhkan banyak waktu untuk dimuat yang memperlambat situs Anda. Jadi dengan membaginya, Anda dapat meningkatkan kecepatan halaman Anda. Ketahui pentingnya kecepatan halaman untuk SEO.

  Kita dapat membagi postingan kita menjadi beberapa bagian.Simak caranya>>

Untuk Blog  di  WordPress

Memisahkan postingan di wordpress sangat sederhana dan ada banyak plugin untuk melakukannya,

Anda tinggal memasukkan kode <!--nextpage--> di tengah-tengah posting atau di bagian pertama tulisan (jika postingnya dibagi dua bagian/halaman). Nantinya, di bawah bagian pertama akan muncul "Page 1" dan "Page 2".Jika tidak berfungsi, berarti template WP Anda tidak mendukungnya. Maka, solusinya, gunakan plugin: Splitter. Plugin WP ini "Automatically split a post into pages by adding a `nextpage` tag, with html validity maintenance" (secara otomatis membagi posting kedalam beberapa bagian (halaman) dengan menambahkan tag "nextpage" dalam kode html).

Untuk Blog  di  Blogger

       
<span class="content1">

******** Kalimat artikel pertama *********

<!--👇Tombol Next setelah Akhir paragraf 👇-->
<div style="text-align: right; "> 
<span class="content1" style=" background-color: #0587f2;border-radius: 9px; border: 3px solid
  rgb(45, 150, 223); box-shadow: rgb(161, 159, 159) 3px 3px 1px;padding: 1px 0px
  2px 11px;">
<a class="page2" href="#"><b style="color:white;">NEXT</b></a>
</span>
</div>
<!--sampai sini -->
</span>


<span class="content2" style="display:none">

****Kalimat Artikel Kedua****

<!--👇Tombol Next setelah Akhir paragraf👇 -->
<div style="text-align: right; "> 
<span class="content2" style=" background-color: #0587f2;border-radius: 9px; border: 3px solid
  rgb(45, 150, 223); box-shadow: rgb(161, 159, 159) 3px 3px 1px;padding: 1px 0px
  2px 11px;">
<a class="page3" href="#"><b style="color:white;">NEXT</b></a>
</span>
</div>
<!--sampai sini -->
</span>


<span class="content3" style="display:none">

****Kalimat artikel ke tiga****

<!--👇Tombol Next setelah Akhir paragraf 👇-->
<div style="text-align: right; "> 
<span class="content3" style=" background-color: #0587f2;border-radius: 9px; border: 3px solid
  rgb(45, 150, 223); box-shadow: rgb(161, 159, 159) 3px 3px 1px;padding: 1px 0px
  2px 11px;">
<a class="page4" href="#"><b style="color:white;">Next</b></a>
</span>
</div>
<!--sampai sini -->
</span>


<span class="content4" style="display:none">

**** kalimat artikel ke 4****


<!--👇Tombol Previous setelah Akhir paragraf👇 -->
<div style="text-align: right; "> 
<span class="content4" style=" background-color: #0587f2;border-radius: 9px; border: 3px solid
  rgb(45, 150, 223); box-shadow: rgb(161, 159, 159) 3px 3px 1px;padding: 1px 0px
  2px 11px;">
<a class="page3" href="#"><b style="color:white;">Previous</b></a>
</span>
</div>
<!--sampai sini -->
</span>

 

       
<p><b>Halaman: <span style="color: #3d85c6;"><br />
<a class="page1" href="#">1</a>
<a class="page2" href="#">2</a>
<a class="page3" href="#">3</a>
<a class="page4" href="#">4</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
jQuery(document).ready(function(){

jQuery('.page1').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});

jQuery('.page2').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});

jQuery('.page3').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});

jQuery('.page4').click(function(){
jQuery('html,body').animate({ scrollTop: 0 }, 0);
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
});
});
</script>