Membagi Postingan Web/Blog Menjadi Beberapa Halaman

Abdul Hamid Info - Sebenarnya cara ini sudah ada bagi sobat yang menggunakan dan membuat blog dengan wordpress atau joomla, karena pada wordpress dan joomla sudah memiliki fitur untuk membagi postingan menjadi beberapa halaman, dan jangan heran kalau pengguna wordpress dan joomla memiliki rangking alexa yang tinggi padahal visitornya tidak banyak.

Dengan fitur ini, pageviews (PV) blog menjadi lebih tinggi, karena untuk satu postingan bisa dibagi menjadi beberapa halaman, untuk contoh yang sudah saya lakukan silahkan lihat postingan saya yang sudah saya bagi menjadi 3 bagian (pageviews). Klik Demo dibawah untuk lihat contohnya

Demo

Untuk para bloggers jangan berkecil hati karena blogspot belum mempunyai fitur ini, hal ini bisa kita siasati secara manual walaupun agak ribet.

Membagi postingan menjadi beberapa halaman menurut refrensi yang ada sangat bermanfaat untuk merampingkan alexa rank dan juga membuat pengunjung betah berlama-lama diblog sobat karena pasti banyak pengunjung merasa bosan apabila artikel atau postingan sobat terlalu panjang.

biar sobat tidak penasaran silahkan ikuti langkah-langkah Cara Membagi Posting Blogspot Menjadi Beberapa Halaman.

► Tambahkan Script berikut pada template blog diatas kode </body>

Kode:

<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;
});
});

Baca Juga

• Cara Menyembunyikan (auto-hide) Shoutmix (buku tamu)
• Menghilangkan Tulisan Newer Post/Posting Baru di Blogspot
• Menu Navigasi Dalam Navigasi Bar (Navbar)

</script>

Perhatikan Script yang saya beri warna merah diatas, apabila blog sobat sudah memiliki script sejenis atau lebih tinggi, maka script diatas dihapus saja. jika sudah di copy-paste script diatas, save template.

► Buat postingan terlebih dahulu, atau bisa juga dengan mengedit postingan yang sudah ada. Pada halaman postingan pilih Menu mode HTML kemudian bagilah postingan dengan menambahkan DIV atau SPAN dengan menambahkan attribut CLASS.

Pada blog ini dicoba memakai DIV CLASS, berikut contohnya:

Kode:

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

► Untuk menampilkan tombol halamannya, masih dalam mode HTML, tambahkan kode berikut dibawah postingan tadi setelah </div> konten terakhir (misalnya content_3), berikut script tombolnya:

Kode:

<p style="font-weight:bold;">Pages:
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="button_3"> 3</a></p>

atau sobat juga bisa menampilkan tombol berbentuk gambar(image), berikut scriptnya yang sudah dimodifikasi:

Kode:

<!--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/AVvXsEiGE9ZQONuepqasQAlKaiNHHHnvwN7Q4vsmTkdl2Uac7eqx-gjUhcnajHXFWx-wxvngleWug3vdmGLfqVak1rjpiH2aztu7p1IBbbdkvnYrhpiq05cNJGcQCME2WXXLjvavD_lM9_-MLXPT/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/AVvXsEiwppxeZLUDgpds2hxOppHblBkFjh-GRdeYWyrwvz1GN1yd7c5D-L8cCWqUuZ06CSjiYETogyTWHE5nHorJi3BUQ_c-7EDgVnrowV4fZGuW6CjdvR1h61VPAKB7ltDFXNmDoQ-H27Go3IqH/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>

Setelah semua selesai, tinggal sobat publikasikan atau update postingannya. selesai juga kita membuat Cara Membagi Posting Blogspot Menjadi Beberapa Halaman. semoga bermanfaat.[at]

Advertise

Halaman: