404 NOT FOUND

BACK TO HOME OR SEARCH SOMETHING

Featured Post

Install Python di Android Dengan Aplikasi QPython

Install Python di Android Dengan Aplikasi QPython

Python merupakan bahasa pemograman yang cukup populer saat ini, sesuatu yang membuat bahasa pemograman ini populer adalah dalam penulisannya yang cukup simpel, dan tentunya python bisa dijalankan di …

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.

PERHATIAN Klik tombol dibawah ini untuk mulai berkomentar, dan saya mohon berkomentarlah dengan baik.

Subscribe