Dividing Content Articles Become Multiple Pages with the Securities Slide

Tutorial berikutnya Arlina Design akan memberikan sebuah tutorial Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide. Di sini sobat hanya perlu menambahkan kode HTML di editor postingan yang nantinya akan muncul di blog sobat.

Author: Arlina

Tutorial ini sangat cocok bagi sobat yang memiliki tulisan artikel yang cukup panjang di blognya, sehingga akan menghemat ruang di halaman posting. Oke, langsung saja silakan ikuti langkah-langkah berikut ini.

Membagi Konten Artikel Menjadi Beberapa Halaman

1. Login ke blogger > Buka Template > Salin kode di bawah ini sebelum ]]></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}

2. Kemudian salin kode di bawah ini sebelum </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>

Untuk menambahkan halaman, ganti maxIndex=4 dengan angka tertentu.

3. Simpan template.

4. Langkah berikutnya, buat postingan baru kemudian salin kode di bawah ini di tab HTML

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

5. Publish artikel dan lihat hasilnya.

Result

Contoh lain, cek demo langsung di bawah ini :

Cookie powder icing halvah bear claw biscuit marzipan chocolate pie. Chocolate cake lemon drops liquorice gingerbread toffee chupa chups.
Ice cream danish tiramisu gummi bears. Sesame snaps marzipan chocolate cake oat cake dessert bonbon tootsie roll croissant. Danish chocolate chocolate candy canes topping carrot cake cheesecake candy canes jujubes.

Sugar plum dessert sugar plum pudding sweet. Sesame snaps oat cake cupcake biscuit. Tootsie roll halvah sweet roll. Halvah gingerbread cookie pastry fruitcake croissant gingerbread gingerbread fruitcake. Jelly icing tiramisu marshmallow toffee chocolate
fruitcake danish. Gingerbread sesame snaps gummies.
Sweet roll danish danish. Tootsie roll dragée gummies. Marzipan candy canes cotton candy bear claw tootsie roll. Dessert liquorice marzipan brownie ice cream. Oat cake caramels ice cream tootsie roll. Jelly croissant tart.

Lemon drops candy wafer toffee jelly sweet sesame snaps tiramisu. Halvah cake danish candy biscuit toffee. Jujubes gummies halvah cotton candy jelly beans sugar plum. Candy canes marshmallow jelly-o chupa chups.
Tootsie roll marzipan cake donut dessert tootsie roll. Gummies jelly-o cake macaroon wafer ice cream. Topping wafer cookie chocolate bar gummi bears chocolate bar soufflé cake. Sweet icing gummies cupcake pudding. Sugar plum sugar plum marshmallow
toffee. Bear claw chocolate bar caramels brownie.

Macaroon pastry liquorice bear claw jelly toffee candy marshmallow ice cream. Gummi bears oat cake soufflé pudding powder tiramisu gingerbread. Jelly beans lemon drops tiramisu muffin lollipop icing bear claw macaroon powder. Wafer croissant apple pie
jelly croissant biscuit icing caramels.
Lollipop halvah danish tiramisu cake lemon drops marzipan cheesecake lemon drops. Toffee powder candy macaroon cotton candy pastry carrot cake cheesecake. Pudding oat cake lollipop. Chocolate cake ice cream candy canes bonbon donut cake sweet.

Pudding brownie macaroon caramels dragée oat cake. Powder marzipan chocolate bar marzipan jelly gingerbread cake gummi bears jelly beans. Ice cream liquorice cheesecake soufflé lollipop gummi bears chocolate bar. Sugar plum toffee tootsie roll tart.
Cotton candy topping jelly beans. Pudding wafer tootsie roll pastry gummi bears bear claw sweet. Dragée cake fruitcake marzipan lollipop chupa chups apple pie carrot cake. Cotton candy bonbon sugar plum gingerbread halvah wafer caramels candy.
Sweet roll jujubes cookie.

prev next