Cara membuat navigasi halaman

Hari ini saya akan mengajak teman-teman caranya membuat Navigasi halaman..

Ada yang tau navigasi halaman itu apa? Untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel, selain menggunakan fasilitas searh engine, bisa juga dengan tombol navigasi halaman. Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel pada halaman ke berapa pada blog kita. Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah search engine di google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Oke kita langsung saja buat langkah-langkahnya...

Seperti biasa kita login dulu ke blogger
Lalu kalian menuju menu rancangan
Setelah itu pilih menu Edit HTML dan jangan lupa centang kotak "expand template widget"

Kemudian kalian cari kode berikut ini.

]]></b:skin>

Lalu kalian simpan kode di bawah ini di atas kode ]]></b:skin>.

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

Langkah selanjutnya adalah mencari kode berikut ini.

</body>

Kemudian kalian simpan kode di bawah ini tepat diatas kode </body>

<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--Page Navigation End -->

Jika sudah kalian klik tombol simpan template, Selesai deh...mudah kan..!!

Selamat mencoba...