Nggak mau ketinggalan artikel baru Blogger-Holic? Subscribe Sekarang
Hot Categories: Blogger News | Hack | SEO | Tips | Tutorial | more

Sistem Navigasi Halaman Blogger dengan Script Baru

15.3.10 | 17 comments

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

Sistem Navigasi Halaman Blogger dengan Script BaruUntuk kode CSS ini, bisa juga menggunakan style yang lama. Kalo ngerasa kurang sreg, bisa juga memakai 6 style lainnya Abu Farhan.

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

17 comments:

  1. mantap punya nih, tapi koq kayaknya ribet banget ya..maaf rabun HTML saya :(

    ReplyDelete
  2. @ Darin: kalo menurut saya sih cara yg ini malah lebih simple daripada yg sbelumny dan mudah bgt koq :)

    ReplyDelete
  3. coba diikutin lagi pelan2.. tinggal copy paste aja koq :)

    ReplyDelete
  4. Aku bener e pengen nyoba. Tapi blogku dah fulll javascript.. :(

    ReplyDelete
  5. Nah ni dya yang kucari-cari... tak coba..... thanks tutorx.

    ReplyDelete
  6. mantap mas, terima kasih tutornya....

    ReplyDelete
  7. Script yang merah tidak bisa didonlot mas

    ReplyDelete
  8. @1311987628176974684.0
    ok. sudah diperbaiki..
    makasih udh ngasitau :)

    ReplyDelete
  9. "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...

    ReplyDelete
  10. bingung ajarin si ka
    kaya mana cara ngedit script nya ini
    mklum lg belajar si

    ReplyDelete
  11. gan w g ngerti biar blog ada script nya gie mna

    ReplyDelete
  12. Bagus juga buat tampilan...
    izin copy yaw..

    ReplyDelete