Membagi Konten Artikel Menjadi Beberapa Halaman

Membagi Konten Artikel Menjadi Beberapa Halaman - Kesempatan kali ini, saya akan membagikan tutorial cara membagi konten artikel menjadi beberapa halaman. Bagi kalian yang sering melakukan update artikel yang cukup panjang/ banyak jumlah katanya, maka tutorial ini sangat cocok untuk kalian ikuti. Sebab dengan membagi konten artikel menjadi beberapa halaman dapat menghemat ruang di halaman postingan kalian. Selain menghemat halaman ruang, juga dapat meningkatkan jumlah pageview.

Tutorial ini cukup mudah untuk kalian ikuti, sebab kalian hanya perlu menambahkan kode HTML di bagian editor postingan yang nanti akan muncul pada blog kalian. Oke langsung saja, ikuti langkah-langkah dibawah ini.

Membagi Konten Artikel Menjadi Beberapa Halaman

1. Masuk terlebih dahulu, dalam akun blog kalian

2. Buka menu Template > Edit HTML 

3. Carilah kode ]]></b:skin> atau </style> dengan cara tekan Ctrl+F pada keyboard kalian untuk memudahkan pencarian

4. Tambahkan kode CSS di bawah ini, tepat berada di atas kode ]]></b:skin> atau </style> 

 /* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px} 

5. Selanjutnya, tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script> 

Silahkan kalian ganti kode maxIndex=4 dengan jumlah halaman yang kalian inginkan.

6. Klik pada tombol Simpan Template
7. Langkah selanjutnya yaitu buatlah sebuah postingan baru, tambahkan kode di bawah ini pada postingan kalian dalam posisi tab HTML (Ingat, rubah ke posisi HTML bukan Compose)

 <div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div> 

8. Jika sudah, langsung saja klik pada tombol Publikasikan dan lihat hasilnya

Itulah tadi, tutorial cara membagi konten artikel menjadi beberapa halaman. Dengan membagi konten menjadi beberapa halaman dapat menghemat ruang tampilan halaman blog kalian, sehingga tutorial ini sangat cocok bagi kalian yang sering membagikan artikel dengan jumlah kata yang banyak. Namun yang perlu untuk diperhatikan juga, buatlah pengunjung blog kalian se nyaman mungkin. Artinya jika memang artikel kalian jumlah katanya masih sedikit, tidak perlu untuk membagi dalam beberapa halaman.

Mungkin itu saja, yang dapat saya sampaikan pada tutorial kali ini, semoga bermanfaat dan selamat berkarya.