Cara Membuat Next Page Artikel Di Dalam Posting

Posted by Admin Ganteng on
Kali ini saya mau berbagi Cara Membuat Next Page Artikel Di Dalam Posting. Mungkin buat kamu yang sering baca-baca berita atau artikel sempat melihat artikel yang di bagi-bagi ke laman berikutnya tapi tetap di halaman tersebut.

Mungkin kalau kamu pernah bermain di wordpress berbayar kamu pernah menggunakan <!-- nextpage -->, nah kalau dalam blogger harus ada beberapa script yang dipasang. Untuk itu saya mau berbagi cara untuk membuat hal tersebut.

Langsung saja ke langkah-langkah pemasangan dan kode-kodenya.
1. Masuk ke Blogger kamu
2. Lalu masuk ke menu Tema terus Edit HTML
3. Setelah itu salin kode dibawah ini dan tempatkan tepat berada di atas kode ]]></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}

4. Setelah itu cari kode </body> dan salin serta pastekan kode berikut di atas kode </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 halamannya kamu bisa merubah maxIndex=4; sesuai dengan yang kamu butuhkan. Setelah itu simpan template

5. Terakhir salin kode HTML di bawah dan pastekan ke dalam posting dalam Mode HTML (Jangan Compose).

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

6. Setelah itu Publish postingan kamu, dan lihat hasilnya

Silahkan cek demo di bawah ini

Sekian tutorial Membuat Next Page Artikel Di Dalam Posting yang saya bagikan ini, semoga bermanfaat untuk kamu sekalian. Tutorial ini di dapatkan dari arlinadzgn dan di publikasikan kembali oleh Kang Gira

Comments

Post a Comment