Cara Membuat Artikel Dibagi Menjadi Beberapa Halaman

Ada yang menarik saat saya berkunjung ke banyak Blog Bule di luar sana, saya perhatikan template blog yang mereka pakai sangat bagus dan terlihat Elegant salah satu yang menarik adalah tampilannya terdapat dalam satu Judul Artikel disajikan dalam beberapa halaman yang dibagi, hal ini menjadi perhatian saya dan tantangan bagaimana caranya membuat seprti itu.

Menurut saya Trik yang dipakai oleh Blogger tersebut sangat bagus mendorong pengunjung lebih penasaran untuk terus mengikuti isi dari Konten yang disajikan tersebut, apalagi jika bisa menampilkan Tulisan yang kontennya bagus dan berkualitas sudah dapat dipastikan lebih penasaran lagi pengunjung untuk terus betah berlama lama disitu. Seperti yang kita ketahui bersama salah satu ciri Konten yang berkualitas adalah lamanya kunjungan dari pembaca di Blog tersebut.

Terkait dengan hal tersebut disini akan saya posting Cara Membuat Artikel Dibagi Menjadi Beberapa Halaman dengan sedikit ditambahkan efek slide. Cara ini menurut saya cocok untuk blog Tutorial, Blog Cerpen yang menyajikan konten yang wajib harus terus diikuti perkembangannya karena artikel yang di tulisnya panjang. Nah bagi sobat yang mau mencobanya mari kita simak bersama Cara Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan kode tersebut sebelum 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}

Langkah Ke Dua
Silahkan salin kode Jquery dibawah ini lalu letakkan sebelum 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>

Perhatikan kode yang ditandai maxIndex=4 silahkan sobat sesuaikan dengan jumlah halaman yang mau ditampilkan atau dibagi. Lalu silahkan SAVE templatednya.


Langkah Ke Tiga
Silahkan buat postingan baru lalu salin kode HTML dibawah ini dan letakkan pada tab HTML bukan di Compose ya sobat.

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

Result

Sebelum di Publish silahkan sobat Pratinjau terlebih dahulu jika dirasa sudah cukup silahkan Publish dan selesai, semoga bermanfaat.