Cara Membuat Satu Artikel Dibagi Menjadi Beberapa Halaman Di Blog

 Kita sering melihat situs situs berita banyak menampilkan satu artikel di bagi menjadi beberapa halaman,sampai sampai untuk lirik lagu pun kita harus menghabiskan 3  kali klik halaman selanjutnya :D .Mungkin menurut opini saya biar pengunjung situsnya penasaran dan lebih lama berada di situs tersebut.

 Kali ini kita akan membahas bagaimana cara menerapkannya di blog,bagi anda yang tertarik dan ingin menerapkan di blog anda silahkan simak caranya dibawah ini.

1. Login ke akun anda » Klik Tema » Edit HTML.
2. Letakkan kode javascript dibawah ini diatas kode </head> atau </body> gunakan Ctrl+F untuk mempercepat pencarian.setelah meletakkan kode pada tempatnya klik Simpan Tema.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' type='text/javascript'/> <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>

Atau alternatif kode javascript di bawah ini


<script src='https://cdn.statically.io/gh/ryan-lee59/jquery.js/master/jquery.js' type='text/javascript'/> <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>

Lihat contoh gambar dibawah cara peletakan scriptnya dalam template anda.

3. Selanjutnya simpan kode di bawah ini di postingan pada mode HTML bukan compose.Jika ingin membuat postingan tinggal mengisikan tulisan atau gambar pada tiap tiap bagian halamannya.

<!-- Postingan Per Halaman By : www.tamboenman.xyz --> <div class="content_1"> MASUKKAN TEKS PERTAMA / GAMBAR ANDA </div> <div class="content_2" style="display:none;"> MASUKKAN TEKS KEDUA / GAMBAR ANDA </div> <div class="content_3" style="display:none;"> MASUKKAN TEKS KETIGA / GAMBAR ANDA </div> <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>

 Jika anda merasa halamannya masih kurang, anda tinggal menambahkan kodenya saja contohnya : <div class="content_4" style="display:none;">
MASUKKAN TEKS KEEMPAT / GAMBAR ANDA
</div> dan jangan lupa untuk menambahkan halamannya juga <a href="#" class="button_4"> 4</a> diantara kode <p> dan </p>.

Klik Demo Klik Disini

Jika masih merasa belum paham silahkan ajukan pertanyaan pada kolom komentar.Semoga postingan ini bermanfaat bagi anda semua.Selamat mencoba.

Share :

You may like these posts: