Cara Membuat Page Pagination Seperti Wordpress di Blogger Terbaru
Jika kamu lihat blog seperti Tribunnews ada pagepagation bukan, tidak hanya wordpress yang bisa di buat seperti itu tapi blogger juga bisa lho.
Namun sebelum itu saya memberikan jika beberapa keuntungan jika menggunakan page pagation ini.
- Halaman bisa rapi teratur jadi tidak berantakkan serta menghemat tempat agar pengunjung tidak capek scrol ke bawah
- Cocok untuk blog komik atau blog berita
- Bisa meningkatkan pageview karena ada efek reflesh nya.
Nah jika kalian ingin mencoba tutorial berikut ini tutorialnya.
Cara Membuat Page Pagination di Blogger
Langkah pertama kalian Buka Tema > Edit HTML dan masukkan kode berikut ini di bawah kode </head>
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
</style>
</b:if>
Selanjutnya tambah kode berikut ini di atas kode </body>
<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
//<![CDATA[
function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n("halaman");$(".post-content").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});
//]]>
</script>
</b:if>
Untuk memanggil di postingan bisa pakai kode HTML berikut ini.
<div class="post-content content_1">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_2">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_3">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_4">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_5">
ISI ARTIKEL DI SINI
</div>
<div class="arlinapage">
</div>
<div class="pagearl">
</div>
Jika kamu ingin lebih cantik dengan warna gardient bisa tambahkan kode berikut ini.
<style type='text/css'>
/* Membagi Halaman di Postingan */
@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}
</style>
Nah sobat blogger, itulah tutorial singkat yaitu Cara Membuat Page Pagination di Blogger Terbaru, semoga bermanfaat
