Friday, August 28, 2009

Membuat Navigasi Halaman Versi 1.0 (Page Script)

Selain dengan menggunakan Breadcrumbs untuk membuat navigasi halaman, ada teknik lain yang diperkenalkan oleh vietwebguide yaitu page script. Berbeda dengan breadcrumbs, karena page script layaknya sistem navigasi halaman pada forum atau blog dengan basis Wordpress. Pengunjung bisa menelusuri halaman perhalaman dari sebuah blog dengan mudah, selain itu pengunjung bisa mengetahui posisi halaman yang sedang dibuka dan jumlah halaman dari blog tersebut. Navigasi halaman ini lebih sederhana dan ringan untuk blogger dari pada navigasi yang pernah booming sekitar tahun 2008 dengan nama (kalau tidak salah) Page Navigation. Mau mencoba???
Langkah pemasangan Page Script untuk Blogger
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<b:include name='nextprev'/>
Langkah 5
Ganti (replace) kode pada langkah 4 dengan kode dibawah ini:
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {font-size:12px;color: #060;font-weight:bold;padding:0px 4px;}
</style>
<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span>
<input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>
<script type="text/javascript">
var blogID = "7350022283544621464";
var home_page = "http://modification-blog.blogspot.com/";
var pager_max_main = 5;
var pager_first_text = "Awal";
var pager_last_text = "Akhir";
var pager_prev_text = "Sebelumnya";
var pager_next_text = "Berikutnya";
</script>
<script src="http://hensblog.googlecode.com/files/pagerscriptv20.js" type="text/javascript"></script>
</b:if>
Langkah 6
Simpan Template dan Preview (Baca Keterangan lebih dulu)

Keterangan:
  • var blogID = "7350022283544621464"; = Ganti angka dengan ID Blog anda yang bisa diperoleh melalui Adress Bar pada saat Mode Maintenance
  • var home_page = "http://modification-blog.blogspot.com/"; = Ubah alamat blog dengan alamat blog anda
  • var pager_max_main = 5; = Ubah nilai 5 untuk menentukan berapa jumlah artikel yang akan ditampilkan per index
Selamat mencoba dan semoga berhasil, tinggalkan pesan pada komentar dibawah jika mengalami kegagalan. Happy Blogging walaupun lapar... :)