Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide

4/23/2016
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.

Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide

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.


Contoh lain, 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

Demikian tutorial cara membuat isi konten dibagi menjadi beberapa halaman dengan efek slide semoga bermanfaat dan membantu kegiatan blogging sobat semua.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

7 comments

mba komentar saya ini mungkin agak keluar topik..
saya mau nanya cara agar gambar diblok tidak bisa diklik kanan atau di klik seperti diblog mba ini, caranya bagaimana.
Terima Kasih

Balas

Dear, i followed every single step and it's work too.
but it is cropping my post pictures. :(

Balas

Berarti kalau mau tulis artikel harus melalui HTML bukan Compose, apa bisa kita tulis artikelnya di Compose? soalnya saya bingung klau nulis lewat HTML

Balas

tidak bisa,harus melalui HTML karena Compose itu adalah hasil akhir dari penulisan pada HTML..

Balas
This comment has been removed by the author.

tampilannya bagus mbak, sayangnya kalau blogspot buat gini ribet banget tidak seperti WP

Balas

Mb blog ini pakai hosting apa?

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.