Cara Membagi Posting Blog Menjadi Beberapa Halaman (Multiple Pages)

Cara Membagi Posting Menjadi Beberapa Halaman (Break Post In Multiple Pages)

Artikel panjang di blog kita bisa dibagi menjadi beberapa halaman atau beberapa bagian.

Tujuan membagi posting menjadi beberapa halaman (multiple pages) ini adalah untuk meningkatkan pageviews.

Namun, membuat posting menjadi beberapa halaman ini ini akan ngeselin pembaca, karena harus mereka harus klik beberapa kali jika akan membaca postingan berikutnya (Lihat DEMO).

Banyak situs berita menerapkannya untuk meningkatkan pageviws, terutama Tribunnews yang menang jagonya ngeselin pembaca dalam hal multiple pages dan judul umpan klik (clickbait headlines).

Cara Membagi Posting Menjadi Beberapa Halaman (Multiple Pages)

Pastikan ada kode ini di template blog Anda:

<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>

CSS
Simpan di atas kode ]]></b:skin>

.post-pagination {margin: 40px auto;text-align: center;width: 100%;float:left;}
.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;}

loading...
JavaScript
Simpan di atas kode </head>

<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>

Save your template!
Simpan Template!
SAAT POSTING
Saat menulis postingan yang akan dipilah menjadi beberapa halaman, klik mode HTML.
Post > New post > klick mode HTML
Copas kode berikut ini:

<div class=”content_1″>
Posting Bagian Pertama di Sini
</div>
<div class=”content_2″ style=”display: none;”>
Posting Bagian Kedua di Sini
</div>
<div class=”content_3″ style=”display: none;”>
Posting Bagian Ketiga di Sini
</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>

Publish!

Demikian Cara Membagi Posting Blog Menjadi Beberapa Halaman (Break Post In Multiple Pages).

Loading...

JANGAN LUPA DOWNLOAD APLIKASI PRIBUMI ONLINE VERSI ANDROID
SILAKAN KLIK GAMBAR DI BAWAH INI

Comments

comments

Related posts

Leave a Comment