Membagi Konten Artikel Menjadi Beberapa Halaman Dengan Efek Slide

Baca Juga

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

Tutorial ini sangat cocok bagi sahabat yang mempunyai goresan pena artikel yang cukup panjang di blognya, sehingga akan menghemat ruang di halaman posting. Oke, eksklusif saja silakan ikuti langkah-langkah berikut ini.

Membagi Konten Artikel Menjadi Beberapa Halaman

1. Login ke blogger > Buka Template > Salin instruksi 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 instruksi 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 gres lalu salin instruksi 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 eksklusif 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 kafetaria gummi bears chocolate kafetaria soufflé cake. Sweet icing gummies cupcake pudding. Sugar plum sugar plum marshmallow
toffee. Bear claw chocolate kafetaria 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 kafetaria 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

Demikian tutorial cara menciptakan isi konten dibagi menjadi beberapa halaman dengan dampak slide biar bermanfaat dan membantu acara blogging sahabat semua.