Membuat page navigation di blogger/blogspot

Page navigation adalah alat pada blog yang akan membantu melakukan navigasi pada halaman utama, agar postingan lama pada blog dapat diakses oleh pembaca. Page navigation ini biasanya berbentuk penomoran halaman (numbered pagination) dan terletak tepat dibawah halaman. Contohnya anda dapat lihat pada blog ini.

Template blog pada mesin blogger/blogspot, biasanya tidak menyertakan page navigation berbentuk penomoran. Sebagai solusinya kita dapat memasangkannya secara manual pada blog. Berikut ini caranya :

Cara membuat page navigation di blogger

1. Log-in ke dashboard blogger dengan id anda.
2. Masuk ke tab rancangan dan pilih menu edit html
3. Temukan kode dibawah ini

]]></b:skin>

Kemudian ganti kode diatas dengan kode dibawah

.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>

Kode diatas merupakan kode css yang membuat model navigation terbentuk. Anda dapat melakukan modifikasi jika punya kemampuan mengenai css.

5. Sekarang temukan kode

</body>

Ganti kode tersebut dengan kode 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://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

Simpan template anda.

Untuk menyesuaikan page navigation dengan blog anda, kita perlu melakukan perubahan pada beberapa paremeter :

var pageCount = 5;

Kode ini menentukan jumlah postingan yang akan ditampilkan per halaman.

var displayPageNum = 5;
Kode ini menentukan jumlah maksimal nomor navigasi halaman yang akan ditampilkan pada halaman.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
Kedua baris diatas menentukan teks yang akan ditampilkan untuk halaman sebelumnya dan halaman berikutnya.

Penyesuaian label
Masalah dasar pada template blogger adalah halaman-halaman label blogger akan menampilkan 20 posts. Kita harus memotong ini ke nilai yang sudah di berikan pada pageCount variabel (atau posting per halaman). Untuk itu kita harus mengedit template :

Masuk ke halaman Edit HTML dan dan cek pada expand widget template

Sekarang temukan kode dibawah ini

'data: label.url'

(termasuk tanda kutip) kemudian ganti dengan

'data:label.url + &quot;?&amp;max-results=5&quot;'

Angka 5 adalah jumlah postingan yang akan ditampilkan per halaman.

Jika Anda menggunakan widget label cloud dari phydeaux3, temukan kode dibawah

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

Kemudian ganti dengan

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Setelah pemasangan, page navigation tersebut akan seperti gambar dibawah ini :

Selamat mencoba !, semoga page navigation ini berfungsi dengan baik di blog anda.