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;
}

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.
Credit to Abu-Farhan.
semoga bermanfaat :D
mantap punya nih, tapi koq kayaknya ribet banget ya..maaf rabun HTML saya :(
ReplyDelete@ Darin: kalo menurut saya sih cara yg ini malah lebih simple daripada yg sbelumny dan mudah bgt koq :)
ReplyDeletecoba diikutin lagi pelan2.. tinggal copy paste aja koq :)
ReplyDeleteAku bener e pengen nyoba. Tapi blogku dah fulll javascript.. :(
ReplyDeletekeren euy.........
ReplyDeleteNah ni dya yang kucari-cari... tak coba..... thanks tutorx.
ReplyDeletethx infonya...
ReplyDeletemantap mas, terima kasih tutornya....
ReplyDeleteScript yang merah tidak bisa didonlot mas
ReplyDelete@1311987628176974684.0
ReplyDeleteok. sudah diperbaiki..
makasih udh ngasitau :)
"kode Javascript yang ber-URL merah di atas didownload dan di-hosting di tempat lain". maksud dr kalimat tersebut saya ngga ngerti (maaf, newbie). saya harus hosting dimana ya mas?mohon detail petunjuknya mas Farhan...thanks bgt udah posting artikel ini...
ReplyDeletebingung ajarin si ka
ReplyDeletekaya mana cara ngedit script nya ini
mklum lg belajar si
follow back pleace....
ReplyDeletegan w g ngerti biar blog ada script nya gie mna
ReplyDeleteBagus juga buat tampilan...
ReplyDeleteizin copy yaw..
thank's gan script'a...
ReplyDeletethanks broo... nice script
ReplyDelete