Cara Buat Next Page Atau Multiple Page Dalam Artikel Blogspot

Cara Buat Next Page Atau Multiple Page Dalam Artikel Blogspot


Cara Buat Next Page Atau Multiple Page Dalam Artikel Blogspot 


Bukan lagi rahsia untuk pemilik blog yang lain, banyak orang mungkin terkejut apabila mengetahui bahawa saya tidak mempunyai niat untuk berhijrah ke Wordpress. 


Boleh lihat contoh multiple page disini: Contoh Next Page In Article


Kalau ikutkan memang dah berniat nak move ke wordpress, sebab segalanya dihujung jari, klik-klik terus dapat apa yang diinginkan, tapi platform Blogspot masih lagi jadi pilihan. 


Kita ada pilihan, dari segi buat artikel masih lagi sesuai menggunakan platform blogspot, untuk ecommerce, boleh juga guna blogspot, cuma kena setup lebih sikit, saya sendiri pun ada buat wordpress untuk setup e-commerce, ni website nya (Rhonshop). 


Adakala datang juga sedang berfikir keseorangan yang kita ni adalah satu-satunya yang masih menggunakan platform ini, platform simple, cuma kena perbetulkan tetapan dari segi coding untuk lebih responsive. 


Cuba memahami diri sendiri, nak pindah banyak benda lagi nak kena adjust, jika ada solusinya maka tidak la perlu bertindak untuk move. Saya faham bahawa tutorial ini bukan untuk semua orang, tetapi benda ni berguna untuk saya sendiri. 


Saya mempunyai satu keluhan dari pengguna Blogger antara orang sentiasa bagitahu anda, blogspot tak banyak fungsi yang dapat digunakan. 


Walaubagaimanapun tak 100% berjaya memanipulasi fikiran manusia, kenapa? sebabnya kebanyakan masalah dapat diselesaikan. Hari ini, saya akan menyelesaikan salah satu "masalah" yang anda dengar atau fikir benda ini tidak dapat dilakukan di Blogger: iaitu PAGINATION PAGE IN ARTICLE BLOGSPOT (membahagikan catatan menjadi halaman lain untuk mempercepat loading dan menurunkan bounce rate). 


Saya selalu mendengar keluhan bahawa mustahil untuk dibahagikan halaman selanjutnya (next page) dalam artikel di Blogspot. 


Hari ini, saya akan berkongsi sedikit rahsia mengenai pembahagian halaman dalam artikel blogspot:


Kalau ikutkan mustahil untuk dibuat! Baiklah mari saya tunjukkan kepada anda caraya: 


Cara ini tidak memerlukan tetapan pada bahagian html tempalate anda. Anda boleh melakukannya sepenuhnya dalam artikel! Saya akan menunjukkan cara menggunakannya (dan saya akan menggunakan artikel ini untuk menunjukkan bagaimana ia berfungsi!) 


Sebagai contoh hari ini, saya akan membuat artikel 2 halaman sahaja. Sebenarnya, anda boleh membahagikan halaman menjadi sekurang-kurangnya dua halaman atau paling banyak halaman dan tanpa had. 


Langkah 1: Tulis artikel anda


Pastikan korang tulis artikel siap-siap, edit apa-apa yang patut terlebih dahulu sehingga selesai tulisan artikel, letakkan gambar sekali, jangan dipublishkan lagi, save terlebih dahulu!


Langkah 2: Pasang kod


Buat catatan baru (new post) dan buka tetingkap komposisi HTML. Tampal kod berikut:


<span class="content1">

****Add your 1st page content here****

</span>

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

****Add your 2nd page content here****

</span>

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

****Add your 3rd page content here****

</span>

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

****Add your 4th page content here****

</span>

<p><b>Halaman Seterusnya: <span style="color: #3d85c6; border-style: solid; padding: 3px">

<a href="#" class="page1">1 |</a>

<a href="#" class="page2">2 |</a>

<a href="#" class="page3">3 |</a>

<a href="#" class="page4">4</a></span></b></p>

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

Seterusnya apa yang anda perlu buat adalah, masuk balik ke artikel yang dah siap anda buat tadi:


  • Salin separuh dari artikel yang anda buat tadi (SALIN HTML), masukkan dalam ****Add your 1st page content here****
  • Dan artikel selebihnya, masukkan pada bahagian ****Add your 2nd page content here****
  • Seterusnya ikut seperti yang saya jelaskan

Walaubagaimanapun, tidak semua template sesuai untuk code ini!

Itu sahaja untuk tutorial kali ini, jika ada pertanyaan, sila tinggalkan komen anda. Dan jika ada yang dapat membantu untuk bagi fungsikan benda ni dalam template saya guna ini, kongsikan pada bahagian komen.

Catat Ulasan

Terbaru Lebih lama