Membuat Page number ala Coffepark

Beberapa waktu lalu ketika saya cek analytic untuk blog ini ternyata saya menemukan search query “cara buat page navigation untuk blogger” dengan jumlah cukup banyak. Padahal apa yang saya tulis sebenarnya adalah Cara Membuat Page Navigation (Page Numbering) tanpa Plugin yang jelas-jelas untuk blog berbasis wordpress. Entah karena apa kok bisa “tersesat” begitu, padahal jelas-jelas istilah plugin lebih identik untuk blog berbasis wordpress. Duh, jadi merasa bersalah juga nih, hehhee… Maaf juga deh bagi kawan-kawan bila tidak menemukan tulisan yang dicari. Namun berhubung baru-baru ini juga saya mulai ngoprek blogger, akhirnya diulik juga deh. Mudah-mudahan tulisan kali ini bisa menjadi “redemption” bagi kawan semua yang sempat terjerumus kesini, hehhee…
Mudah saja sebenarnya membuat page navigation untuk blogger ini, ikuti saja dua langkah mudah berikut:
Pertama, secara default blogger akan menampilkan sampai 20 konten per navigasi. Namun kita dapat memotong jumlah ini dan menyesuaikannya sesuai keinginan kita dengan menambahkan sedikit parameter. Cari dan temukan kode di bawah ini:

'data:label.url'

Gantikan dengan

'data:label.url + "?&max-results=6"'

Jika ada beberapa kode yang sama maka ganti saja semua kode tersebut, dengan begini akan membatasi jumlah konten yang muncul dalam navigasi pencarian, arsip, dan labels.
Kedua, tambahkan kode CSS dan script (tersedia dengan sampel di bawah) tepat sebelum kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}
.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyB0uhMbH8kn4UPv_-yXF69lTqPf3W3OPokhs_N2j-blgY_0zR_E8xv0bvmfER725CxACYD1XQjpHWPBtNaynR0vDBJCWBpjy8UugTizgzSxaitxwMG1wC9TMdBeDEgm80TU-t5u7528/s1600/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
margin:0px 1px 0 1px;padding:3px 10px;color:#eee;line-height:30px;cursor:pointer;}
.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyB0uhMbH8kn4UPv_-yXF69lTqPf3W3OPokhs_N2j-blgY_0zR_E8xv0bvmfER725CxACYD1XQjpHWPBtNaynR0vDBJCWBpjy8UugTizgzSxaitxwMG1wC9TMdBeDEgm80TU-t5u7528/s1600/transpdark.png) repeat-x;background-position:0px -15px;
border:2px solid #555;-webkit-border-radius:3px;
-moz-border-radius:3px;border-radius:3px;color:#ffffff;-text-decoration:underline;}
.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyB0uhMbH8kn4UPv_-yXF69lTqPf3W3OPokhs_N2j-blgY_0zR_E8xv0bvmfER725CxACYD1XQjpHWPBtNaynR0vDBJCWBpjy8UugTizgzSxaitxwMG1wC9TMdBeDEgm80TU-t5u7528/s1600/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#eee;}
.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyB0uhMbH8kn4UPv_-yXF69lTqPf3W3OPokhs_N2j-blgY_0zR_E8xv0bvmfER725CxACYD1XQjpHWPBtNaynR0vDBJCWBpjy8UugTizgzSxaitxwMG1wC9TMdBeDEgm80TU-t5u7528/s1600/transpdark.png) repeat-x;background-position:0px -15px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #aaa;-webkit-border-radius:3px;  -moz-border-radius:3px;border-radius:3px;color:#eee;text-decoration:underline;font-weight:bold;
</style>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://dvslabs.googlecode.com/files/bg-pagenavigation-v2.js' type='text/javascript'/>
</b:if>
</b:if>

Agar diketahui juga, di dalam script yang diatas terdapat kode-kode berikut:

<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

Sesuaikan angka yang berwarna merah dan tentukan nilai angka yang sama sesuai dengan jumlah yang ditentukan pada langkah pertama, lihat kembali di atas. Nah, berikut kode-kode navigasi halaman untuk blogger dengan style dan desain yang cantik: