Cara Menciptakan Pagination Dengan Fungsi Refresh Di Postingan Blog

Halo teman Blanter, kini saya akan membagikan sebuah tutorial cara menciptakan pagination number di postingan. Pagination number ibarat ini biasa kita jumpai pada website-website informasi ataupun blog yang memiliki artikel panjang, hal tersebut dilakukan semoga pembaca tidak bosan dengan artikel yang terlalu panjang ke bawah dan juga berkhasiat semoga pembaca terdeteksi aktif di blog tersebut (tidak AFK).

Tutorial pagination ini memakai script gres dan juga otomatis kecuali pengaturan bagian-bagian artikel yang ingin dibentuk muncul di nomor tertentu, maka hal ini akan mempermudah teman untuk mengatur bagian-bagian artikel yang akan dihilangkan dan dimunculkan pada halaman selanjutnya.

Jumlah untuk pagination ini tidak terbatas (unlimited) teman sanggup menciptakan halaman sebanyak mungkin dan dilengkapi dengan kolom iklan berukuran 768x90. Saat berpindah halaman, blog akan otomatis refresh menuju halaman artikel selanjutnya.

Perlu diperhatikan, minimal teman mengenal tag pembuka dan penutup pada HTML dan usahakan artikel tersebut tidak copy paste dari Microsoft word atau situs lainnya alasannya yaitu akan mempersulit pengeditan.

Demo

Tertarik untuk menciptakan pagination di postingan blog? Silahkan ikuti tutorial di bawah ini :

Masuk ke Blogger > Tema > Edit HTML

Letakan CSS di bawah ini sempurna di atas instruksi ]]></b:skin> teman juga sanggup meletakannya di atas </style> dan memakai Tag Kondisional.

/* Pagination CSS by Idblanter.com */ .post-content{display:none}.dblanter{font-size:130%;text-align:center} .paging .tombol,.paging:before{font-size:14px;padding:8px 12px} .paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif} .paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important} .tombol.blanter{background:#000} .paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px} @media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}

Selanjutnya letakan Javascript di bawah ini sempurna di atas instruksi </body>

<script style='text/javascript'> //<![CDATA[  function get_n(n){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===n)return void 0===o[1]||o[1]}$(document).ready(function(){var n=get_n("n");$(".post-content").hide(),void 0===n?$(".content_1").show():$(".content_"+n).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.paging").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==n&&$(".tombol.n1").toggleClass("blanter"),n==n&&$(".tombol.n"+n).toggleClass("blanter")}); //]]> </script>

Untuk memunculkan tombol pagination number secara otomatis di semua artikel, letakan instruksi di bawah ini sempurna di bawah kode <data:post.body/> instruksi ibarat ini ada banyak, jadi pastikan coba satu-persatu.

Bagi teman yang ingin memasang Pagination pada artikel tertentu saja maka instruksi di bawah ini hanya perlu di letakan sempurna di paling bawah artikel (mode HTML)

<div class='dblanter'><b>HALAMAN SELANJUTNYA:</b></div><br/> <center><a href='#' target='_blank' title='Kunjungi blog '><img alt='iklan banner' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0TGi8P4UOsM_4P7uYECkVoBAKJb196N2AfHIfg7IlxpatpE8koQZp-C81DJtbN0-p5XqIKwi8wpUnbRzk0K5uYa9mJQZuB6w_kldzOLNx_n2GsQOv4xE6tnSS91yE6xytcXnkWswa3g/s1600/AdSpace768x90.png' title='Kunjungi blog '/></a></center> <br/><p class='paging'/>

Langkah terakhir, teman harus melaksanakan pengaturan manual untuk mengatur setiap kata-kata pada postingan semoga tampil pada halaman yang teman inginkan melalui Edit Post > masuk ke Mode HTML bukan Compose, kodenya ibarat ini

<div class="post-content content_1"> </div>

Ganti angka 1 dengan 2,3,4,5 dan seterusnya.

Contoh Penerapannya ibarat ini :

<div class="post-content content_1"> Teks Postingan 1 </div> <div class="post-content content_2"> Teks Postingan 2 </div> <div class="post-content content_3"> Teks Postingan 3 </div>

Simpan.

Lihat Juga : Masign Magz Premium Material Design Blogger Template

Nah, itulah tutorial yang sanggup saya bagikan kali ini, semoga bermanfaat untuk sobat. Terimakasih. 😊

Sumber https://www.idblanter.com