Cara Membuat Nomor Page Navigation di Blogger

Nomor navigasi halaman merupakan salah satu fitur yang mengesankan untuk membuat blog semakin menarik. Wordpress telah dahulu membuat numbered page navigation dengan nama wp-pagenavi yang dikembangkan oleh Laster Chan, kemudian menyusul Muhammad Rias (Techie Blogger) telah mengembangkan sistem navigasi halaman untuk blogger, tapi masih ada sedikit bug. Sehingga Abu Farhan telah mengembangkan dan melengkapai fitur navigasi halaman di blogger.

Masih bingung ya, seperti apa sih Nomor Navigasi Halaman itu, langsung saja liat screenshotnya dibawah ini:


Langsung aja gunakan dan letakkan script berikut sebagai berikut langkah-langkahnya:

1. Login ke Blogger.
2. klik Template.
3. Klik Edit HTML.
4. Tidak usah cheklist Expand Template Widget ya..
5. Cari kode seperti dibawah ini

]]></b:skin>


Ganti dengan Kode ini:


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

6. Cari kode </body> dan ganti dengan Javascript dibawah ini:
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://makeuse.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

7. selesai

Anda perhatikan, ada beberapa kode yang dapat anda sesuaikan dengan keinginan sendiri.
var pageCount=5;
Kode ini menentukan jumblah posting yang akan di tampilkan per halaman.
var displayPageNum=5;
Kode ini menentukan jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman.
var upPageWord ='Previous';
var downPageWord ='Next';
Masing-masing kedua baris itu menentukan teks yang akan ditampilakan untuk halaman sebelum dan halaman berikutnya.

Edit Label
Sering terjadi masalah tampilan navigasi page menjadi tidak menarik di sini. Biasanya halaman label blogger hanya menampilkan 20 posting saja. Disini kita akan pangksa dengan nilai yang kami berikan untuk pageCount (posting per halaman). Di bagian ini kita edit template dengan cara klik Edit HTML dan checklist Expand Template Widget, kemudian cari kode:
'data:label.url'
Ganti kode tersebut (termasuk tanda ') dengan kode ini:
'data:label.url + &quot;?&amp;max-results=5&quot;'
5menentukan jumlah posting yang akan ditampilkan per halaman.
Sekarang bilamana template anda menggunakan widget phydeaux3, maka carilah kode:
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
Gantilah kode itu dengan kode ini:
a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;
5 menentukan jumlah posting yang akan ditampilkan per halaman.

Navigasi halaman sudah sempurna, sekarang bisa anda coba!