Cara Membuat Pagination Number di Blogger

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, di artikel 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.


Bagaimana ? apakah anda mengerti dengan tutorial yang saya tulis saat ini? jika anda tidak mengerti silahkan bertanya kepada saya melalui kolom komentar. Jangan lupa untuk terus mengunjungi blog maxrooted karena akan ada update tutorial terbaru seputar teknologi disini !

Note ! Jika anda ingin copas, mohon untuk menyertakan link sumber

Comments