Cara Membagi Isi Postingan Menjadi Beberapa Halaman

Cara Membagi Isi Postingan Menjadi Beberapa Halaman - Tips blogging kali ini akan memberikan sebuah tutorial bagaimana isi artikel atau postingan di dalam blog sehingga menjadi beberapa halaman. Tips ini ditujukan untuk penulisan artikel yang panjang sehingga tampilannya menjadi lebih singkat dan dinamis karena menggunakan efek slider yang halus untuk perpindahan halaman. Cara melakukan trik ini cukup mudah dimana sobat blogger hanya perlu menambahkan kode HTML tertentu di editor postingan blogger saat menulis artikel. Untuk lebih jelasnya silahkan ikuti saja langkah-langkahnya dibawah ini.

Cara Membagi Isi 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

Itulah tips blogging tentang Cara Membagi Isi Postingan Menjadi Beberapa Halaman kali ini. Semoga bermanfaat.

Sumber: Arlina Design