Cara Memasang Halaman Selanjutnya pada Artikel

Baca Juga

Tips Blogger - Cara Memasang Halaman Selanjutnya pada Artikel – Memasang halaman selanjutnya pada sebuah artikel atau membagi konten artikel menjadi beberapa halaman adalah suatu cara yang di gunakan para blogger untuk membuat artikelnya menjadi lebih ringkas. Cara ini sangat cocok di gunakan oleh sobat yang memiliki artikel yang sangat panjang  sehingga ketika pembaca sudah sampai tengah-tengah artikel yang panjang, akan muncul tulisan “Baca Selanjutnya” dan membuka keseluruhan artikel tersebut.

Selain itu dengan cara ini juga akan menghemat ruang pada tampilan halaman postingan. Tutorial mengena Cara Memasang Halaman Selanjutnya pada Artikel yang saya bagikan dengan Efek slide., sehingga akan tampak lebih menarik sekaligus SEO Frendly. Ok langsung saja kita imak caranya berikut ini.

Membagi Konten Artikel menjadi beberapa Halaman Dengan Efek Slide

1. Login Ke Blog > Buka Template > Edit Html

2. Salin Kode berikut ini dan letakkan sebelum 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}

2. kemudian salin kode berikut ini dan letakkan tepat sebelum 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>

3. simpan Template

4. Langkah Berikutnya, buat postingan baru kemudian salin kode di bawah ini di teb Html
(Tab HTML Artikel ya, bukan di Teb HTML tempalte)

<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. Publis Artikel dan Lihat Hasilnya

Nah, Begiulah tutorial mengenai Cara Memasang Halaman Selanjutnya pada Artikel. Semoga bermanfaat dan Selamat Mencoba.