Sistem Navigasi Halaman Blogger dengan Script Baru

Pernah saya ngebahas di artikel-artikel sebelumnya tentang Hack Sistem Navigasi Halaman pada Blogger. Trik ini bertujuan untuk me-replace link Next Post dan Older Post dengan sistem navigasi halaman yang berbeda. Script yang lama tsb memiliki beberapa kelemahan, diantaranya loading script yang cukup lama.

Kelemahan lainnya, script yang lama memiliki keterbatasan dalam menampilkan jumlah artikel blog kita. Selain itu, script yang memberatkan loading blog sehingga blog butuh waktu untuk menampilkan secara penuh.

Nah untungnya, Abu Farhan berhasil membuat script yang lebih baik. Script-nya ini lebih ringan dan 'bersahabat' dengan blog kita..hehehe

Ok. Pertama-tama, masukkan kode Javascript-nya ke dalam blog kita.

Letakkan kode Javascript ini tepat sebelum </body> :

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Saran saya, kode Javascript yang ber-URL merah di atas didownload dan di-hosting di tempat lain sehingga meminimalisasi bandwith limitnya. Jadi, bisa aja trik ini engga muncul gara-gara bandwidth mencapai batas karena terlalu banyak orang yang mengakses.

Jangan lupa ubah setting-annya sesuai blog kita:

postperpage untuk mengatur banyak artikel yang akan ditampilkan di setiap halaman.

numshowpage untuk mengatur banyak halaman yang akan terlihat di sistem navigasi halaman ini.

Langkah berikutnya, masukkan kode CSS ke dalam blog.

Masuk ke Layout > Edit HTML.

Cari ]]></b:skin>

dan letakkan CSS di bawah ini tepat sebelum kode tsb.

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Untuk kode CSS ini, bisa juga menggunakan style yang lama. Kalo ngerasa kurang sreg, bisa juga memakai 6 style lainnya.

Langkah terakhir, masuk ke Layout > Edit HTML.

Kemudian ceklis Expand Widget Templates.

Cari

data:label.url

dan timpa dengan

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

Ganti angka 7 dengan berapa jumlah artikel tiap halaman yang kamu inginkan.