Skip to main content
Ivhaa Design

follow us

Content Pagination With Reload Page For Blogger

Kalian mungkin pernah lihat jika ada konten blog yang di bagi menjadi beberapa halaman, atau sering di sebut dengan Content Pagination. Pada artikel kali ini saya akan memberikan tutorial lagi buat kalian semua. Tutorial ini saya dapat dari blog kompi ajaib, ini bukan maksud untuk copy paste tapi di share kembali di blog.

Baca juga:



Dengan adanya Content Pagination ini pendapat dari google adsense mungkin bisa bertambah serta banyak klik. Selain itu juga pengunjung juga bisa betah dengan membaca artikel kita dengan di bagi beberapa halaman ini.

Contant Pagination ini hanya bisa di bagi menjadi 5 halaman aja, kompi ajaib mungkin akan membuat nya lebih dari itu kita tinggal tunggu tutorial nya ya sobat.

Jangan takut jika blog di pasang Content Pagination akan membuat loading blog menjadi ringan, ini hanya menggunakan javascript tidak menggunakan Jquary libary jadi aman.

Jika kalian ingin mencobanya, ikuti aja langkah berikut ini, caranya cukup mudah kok kalian tinggal copy aja kode HTML berikut ini, taruh di postingan gunakan mode HTML.

<style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Content 1 tulis di sini......
</div>

<div id="page2">
Content 2 tulis di sini......
</div>

<div id="page3">
Content 3 tulis di sini......
</div>

<div id="page4">
Content 4 tulis di sini......
</div>

<div id="page5">
Content 5 tulis di sini......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

Ganti aja pembagian teks nya di blog kalian, jika kalian tidak ingin kerepotan membuat nya CSS nya bisa kalian pasang di kode HTML blog kalian. Selamat mencoba

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar