Cara Membuat Numbered Pagination pada Blogger dengan Cepat dan Mudah

Cara Membuat Numbered Pagination pada Blogger dengan Cepat dan Mudah

Cara Membuat Numbered Pagination pada Blogger dengan Cepat dan Mudah - Didalam template blog, kita harus memasang yang namanya numbered pagination. Itu ialah navigasi yang berupa numerik/angka.

Biasanya ada di bagian bawah homepage, setelah 5/lebih artikel ditampilkan. Lalu, navigasi tersebut akan muncul dibawahnya berupa angka.

Fungsi Numbered Pagination pada Blog


Fungsinya ialah untuk mempermudah pembaca/pengunjung dalam mencari artikel yang mereka cari dengan lompat ke halaman berikutnya. Berikut ini adalah tutorial membuat numbered pagination pada blogger.

Cara Cepat dan Mudah Membuat Numbered Pagination pada Blogger


  • Style Pagination
Untuk mempercantik pagination ini, kita akan menambahkan CSS pada tahap pertama. Kalian buka Theme/Tema=>Edit Html=>pastekan kode dibawah ini sebelum kode ini ]]></b:skin>

/* Start XOmisse 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: #333333;
color: #ffffff;
text-decoration:none;
}
/* End  XOmisse Pagination */ 

Kalian dapat mengedit tampilan pagination nya seperti warna background, warna font, padding, margin, dll supaya pas dengan Tema blogger kalian.
  • Menambahkan Fungsionalitas Pagination
Sekarang, kita akan menambahkan JavaScript untuk mengubah navigasi lama menjadi navigasi bernomor/numerik.

Pertama, kalian buka Tema=>Edit HTML=>pastekan kode dibawah ini sebelum kode </body>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Start XOmisse Pagination -->
<script type='text/javascript'> //<![CDATA[ /** WRITTEN BY XOMISSE.COM **/
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
<!-- End XOmisse Pagination -->
</b:if>

Disini, kalian dapat mengganti angka pada 'postperpage' mengenai berapa post yang akan tampilkan disetiap halaman dan juga, berapa halaman yang kalian ingin tampilkan dengan nomor/numerik pada 'numshowpage'. Kata 'prevpage' dan 'nextpage' juga bisa kalian ganti sesuka hati,
  • Simpan template dan lihat hasilnya.

Akhir Kata ...

Sebenarnya untuk pagination sendiri memiliki style yang banyak, tergantung kesukaan penggunanya. Ok, sekian saja pembahasan mengenai Cara Membuat Numbered Pagination pada Blogger dengan Cepat dan Mudah. Semoga artikel ini memecahkan masalah kalian. Terimakasi telah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel