Search This Blog

Memasang Navigasi Page Number

  • Monday, June 11, 2018 at 12:12:00 PM
  • 0 Comments
  • Views
Awal Kisah
Kemarin aku terinspirasi dari halaman-halaman forum yang di bawah setiap halaman nya selalu tertera numbered pagination, dan ketika blogwalking aku sering melihat tutorial tentang cara memasang pagination ke template blogspot. Akupun tertarik menerapkannya ke template blogku.
Oke tutorial kali ini aku dapat dari situs luar berbahasa inggris, nama situs nya Xomisse.
Disitu dijelaskan secara sederhana bagaimana cara menerapkan kode numbered pagination nya. Biar ga lupa aku simpan di postingan ini cara-cara menerapkannya ke template blogspot. Untuk hasilnya bisa dilihat di halaman index dan halaman label blog ini.

Cara Install
Pertama-tama kita akan menambahkan style ke CSS. Untuk melakukannya, buka Template > Edit HTML dan cari ]]></b:skin>. Tepat di atas tag ]]></b:skin> tempel kode berikut ini:
/* 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 */ 
Kamu dapat mengedit CSS di atas untuk menyesuaikan tampilan paginasi dan membuatnya sesuai dengan desain blog kamu. Saranku adalah mengubah warna, menyesuaikan ruang padding dan menambahkan font kamu sendiri.
Langkah kedua kita akan menambahkan JavaScript untuk mengubah navigasi default menjadi paginasi numerik pada halaman indeks. Sekali lagi pergi ke Template > Edit HTML. Cari tag penutup </body> yang berada di akhir template kamu. Tepat di atas tag </body> tempel kode berikut ini:
<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>
Ubah nilai postperpage ke jumlah posting yang akan muncul di setiap halaman index kamu. Ini harus sesuai dengan pengaturan di Settings > Posts, comments and sharing settings > Posts > Show at most kamu.
Ubah nilai numshowpage ke berapa banyak halaman yang kamu ingin tampilkan dalam navigasi.

Referensi
No comments
No comments

Post a Comment