Cara Membuat Pagination Number di Blogger

Pagination default blogger yang sangat simple sekali dan hanya menampilkan older dan newer post mungkin kurang menarik bagi saya,

Dan menurut saya kurang user friendly, namun ada beberapa keuntungan disitu bahwa mungkin dengan menggunakan pagination default blogger anda akan mengurangi custom script di blog anda,

dan besar kemungkinan loading theme akan lebih cepat dibandingkan pagination ini, tetap keputusan di tangan anda.

Kali ini saya akan memberikan tutorial membuat pagination yang disertai dengan number page (nomer halaman).

Cara Membuat Pagination Nomer di Blogger

Cara Membuat Pagination Nomer di Blogger

Oke kita lakukan saja, pertama anda harus backup theme anda sebelum melakukan step selanjutnya.

Kedua, setelah anda sudah berhasil membackup theme anda sekarang saatnya untuk styling pagination yang mau kita pakai. caranya pergi ke menu theme => Edit HTML.
kemudian cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas/sebelum kode ]]></b:skin>.


/* Start Max_rooted Pagination - Custom CSS */
#blog-pager, .blog-pager {
display:block;
padding:5px 0;
}
.showpage a, .pagenumber a, .totalpages, .current {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #ffffff;
color: #333;
border: 1px solid #f2f2f2;
font-size: 12px;
border-radius: 2px;
transition: all .3s;
} 

.showpage a:hover, .pagenumber a:hover, .current {
background: #008cff;
color: #ffffff;
text-decoration:none;
}
/* End  Max_rooted Pagination */

Ketiga, tambahkan fungsionalitas pagination. Cari kode </body> dan letakkan kode dibawah ini tepat diatasnya.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Start Max_Rooted Pagination -->
<script type='text/javascript'> //<![CDATA[
var postperpage=3; var numshowpage=4; var prevpage ='Sebelumnya'; var nextpage ='Selanjutnya'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/mtmxlog/paginationblogger/af9de291/paginationblogger.js' type='text/javascript'/>
<!-- End Max_Rooted Pagination -->
</b:if>

Setelah itu, sekarang kita tinggal mengaturnya. pahami kode diatas dan mari kita atur !

var postperpage = 3; - kode ini untuk mengatur berapa postingan yang akan di tampilkan per halaman, dan disitu settings defaultnya hanya 3, anda bisa mengubah sesuka hati anda.
var numshowpage = 4; - Ubah nilai numshowpage ke berapa banyak halaman yang Anda inginkan ditampilkan dalam navigasi halaman bernomor.
Anda juga dapat mengubah nilai "Sebelumnya" dan "Selanjutnya" ke teks yang ingin Anda tampilkan dengan mengubah value/hasil dari var prevpage dan var nextpage

Setelah anda mengatur saatnya untuk testing silahkan akses blog anda dan lihat apa hasilnya.



Thanks.

Comments

Post a Comment

About This Blog

MaxRooted, sebuah blog yang menyediakan banyak sekali tutorial seputar teknologi mulai dari android, komputer khususnya linux, tips unik, trik terbaru, dan lain lain.

Pages

Subscribe