Navigasi Halaman 123

Navigasi Halaman 123 di blog, seperti gambar disamping, hingga saya tulis artikel ini penggunanya masih jarang. Ada yang menulis artikel serupa, tetapi setelah dipraktekkan  banyak yang tidak berhasil. Mungkin karena ada beberapa template yang tidak sama kode CSS-nya dengan si pembuat tutorial kali ya, contohnya saya sendiri...hehe.. Mungkin itu salah satu alasan yang membuat  sobat blogger enggan memasangnya. Baru saja saya mencoba cara lain yang cukup mudah dan sudah berhasil.

(nb: berhasil di blog percobaan saya)

1. Salin Kode dibawah ini

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {display: none;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}.showpageNum a:link,
.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">
var pageCount=2;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";
</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js">
</script>

2.Buka Page Elemen, klik Add a Gadget, dan pilih HTML/ Java Script. Paste kode kode diatas pada gadget. klik SAVE.

3. Temukan kode ]]></b:skin>. Untuk mempermudah menemukannya tekan tombol Ctrl+F.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}. 

 4. Temukan kode </body>
     Letakkan kode ini di atasnya:

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends -->

- Var pageCount=2 angka 2 untuk menampilkan jumlah posting yang akan ditampilkan .

- Var displayPageNum=5 angka 5, menampilkan 5 nomor yang ditampilkan di nomor halaman navigasi

- Var upPageWord ='Previous' dapat dirubah sesuai selera anda, seperti, kembali, sebelumnya, dsb

- Var downPageWord ='Next' dapat dirubah sesuai selera anda, seperti, selanjutnya, dsb.

5. Klick Save Template and Done.

Selesai dan lihat hasilnya