Cara Membagi Artikel Menjadi Beberapa Halaman dengan Efek Slide

Tutorial ini sangat cocok bagi yang memiliki tulisan artikel yang cukup panjang di blognya, sehingga akan menghemat ruang di halaman posting.

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

Cek demo langsung di bawah ini :

Membagi Konten Artikel Menjadi Beberapa Halaman

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.

Membagi Konten Artikel Menjadi Beberapa Halaman

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.

Membagi Konten Artikel Menjadi Beberapa Halaman

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.

Membagi Konten Artikel Menjadi Beberapa Halaman

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.

Membagi Konten Artikel Menjadi Beberapa Halaman

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

/* Multiple Page Slide */ a.movepg.nexter,a.movepg.prever{color:#fff} .slidecontent br {display:none;} .slidecontent br:first-child {display:block;} .separatoru{overflow:hidden;max-height:240px;margin:0 0 20px}.separatoru 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 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} //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(); //]]>
source:www.arlinadzgn.com/2016/04/membagi.konten.artikel.dengan.efek.slide.html

Incoming search terms:

Tags: #Tips Trik Android

Update Firmware Andromax A16C3H V11.7 Cara Jitu Smartfren Bungkam Opreker
Update Firmware Andromax A16C3H V11.7 Cara Jitu Smartfren Bungkam Opreker
Smartfren sebagai perusahaan Telekomunikasi sekaligus pemegang brand
Ini Dia Penampakan Wujud Xiaomi Mi 6
Ini Dia Penampakan Wujud Xiaomi Mi 6
Xiaomi Mi 6. Sumber: weibo Bocoran soal
Bagini Cara Hoaxers Memanipulasi Berita Asli Menjadi Berita Hoax
Bagini Cara Hoaxers Memanipulasi Berita Asli Menjadi Berita Hoax
Semakin maju teknologi, semakin mudah orang berekspresi

Leave a reply "Cara Membagi Artikel Menjadi Beberapa Halaman dengan Efek Slide"

Must read×

Top