Cara Mudah Membagi Postingan Blog Menjadi Beberapa Halaman

Tutorial.web.id – Cara Membagi Artikel Panjang Pada Postingan Blogspot Menjadi Beberapa Halaman. Cara ini sangat efektif bagi artikel postingan blog yang panjang, karena biasanya pengunjung blog suka ilfil untuk membaca dikarenakan postingan yang terlalu panjang. Dengan spilt post atau membagi postingan menjadi beberapa halaman, blog akan menjadi lebih rapi dan enak dibaca.

Selain membuat postingan blogspot lebih nyaman untuk dibaca, ternyata dengan cara membagi artikel panjang menjadi beberapa halaman juga berdampak positif untuk SEO blog itu sendiri. Jika sobat ingin memasangnya pada blog, sobat tinggal mengikuti stepnya dibawah ini.

LANGKAH MEMBAGI POSTINGAN MENJADI BEBERAPA HALAMAN PADA BLOGSPOT

1. Pastikan sudah masuk blogger
2. Kemudian klik Theme/Template » Edit HTML
3. Letakan kode di bawah ini di atas ]]></b:skin> atau </style>

/* split halaman postingan */
.post-pagination { margin:40px auto; text-align:center; width:100%; float:left; }
.button_1,.button_2,.button_3 { border:2px solid #43ce8e; font-weight:640; padding:6px 36px; color:#f9f7f7; transition:ease 0.69s !important; }
.button_1:hover,.button_2:hover,.button_3:hover { background:none repeat scroll 0 0 #43ce8e; color:#ffffff; text-decoration:none; }

4. Selanjutnya copy paste kode jQuery dibawah ini tepat diatas tag </body>

<!-- split halaman postingan -->
<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','#43ce8e');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#43ce8e');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#43ce8e');
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','#43ce8e');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#43ce8e');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#43ce8e');
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','#43ce8e');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#43ce8e');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#43ce8e');
return false;
});
});
</script>

5. Klik simpan template.

Agar kode tersebut dapat bekerja membagi artikel postingan blogspot menjadi beberapa halaman, sisipkan kode berikut pada halaman postingan, pastikan sobat pilih ke Mode HTML kemudian masukan kode berikut ini:

<div class="content_1">
 Masukan artikel Anda yang Halaman 1
 </div>
 <div class="content_2" style="display: none;">
 Masukan artikel Anda yang Halaman 2
 </div>
 <div class="content_3" style="display: none;">
 Masukan artikel Anda yang Halaman 3
 </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>

Jangan lupa untuk mengganti tulisan yang ditandai warna kuning dengan artikel postingan yang sobat ingin bagi menjadi beberapa halaman

Demikian tutorial cara mudah membagi artikel postingan blogspot menjadi beberapa halaman. Jika ada yang kurang jelas, silakan bertanya di kolom komentar ya. Terimakasih.

Berlangganan update artikel terbaru via email:

Share this post