Cara Membuat Artikel Dibagi Menjadi Beberapa Halaman

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

Menurut aku Trik yang dipakai oleh Blogger tersebut sangat cantik mendorong pengunjung lebih penasaran untuk terus mengikuti isi dari Konten yang disajikan tersebut, apalagi jikalau mampu menampilkan Tulisan yang kontennya cantik 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 yaitu lamanya kunjungan dari pembaca di Blog tersebut.

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

Langkah Pertama

Silahkan sahabat salin isyarat CSS dibawah ini lalu letakkan isyarat tersebut sebelum isyarat ]]><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 isyarat Jquery dibawah ini lalu letakkan sebelum isyarat </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 isyarat yang ditandai maxIndex=4 silahkan sahabat sesuaikan dengan jumlah halaman yang mau ditampilkan atau dibagi. Lalu silahkan SAVE templatednya.


Langkah Ke Tiga
Silahkan buat postingan gres lalu salin isyarat 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 sahabat Pratinjau terlebih dahulu jikalau dirasa sudah cukup silahkan Publish dan selesai, biar bermanfaat.