Content Pagination With Reload Page For Blogger With Javascript

Content pagination with reload page for blogger with javascript ini aku buat hanya hingga 5 halaman saja, namun kemungkinan ke depannya aku perbaiki semoga dapat bebas menciptakan lebih dari 5 halaman konten.

Content pagination dengan reload halaman ini dibentuk dengan javascript tanpa memerlukan jquery library sehingga tidak akan banyak mengganggu loading halaman blog.

Sebagai demonya silahkan coba pada halaman demo beikut ini.

Demo

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan gunakan isyarat berikut ini pada postingan mode HTML untuk menciptakan postingan dengan content pagination with reload page ini.

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

Silahkan sesuaikan pembagian konten page-nya dan tombolnya sesuai keperluan.

Namun Anda juga dapat menyimpan style CSS dan javascript-nya di edit HTML semoga lebih simple saat menciptakan postingannya.

Semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post