Apakah anda pernah menggunakan Page Navigasi 3000 ?? Ini adalah suatu navigasi yang digunakan untuk blogger dan anda dapat melihat demo navigasi ini disini. Dan navigasi ini adalah navigasi yang sangat baru tetapi sangat disukai banyak orang karena navigasi ini sangat sederhana tetapi kualitas dan manfaat navigasi ini sangat bagus karena memiliki Scroll Bar yang dapat anda pindahkan sesuai keinginan anda untuk mencari Page atau Halaman yang anda inginkan. Dan dalam artikel ini saya akan mengajarkan anda cara untuk membuat Page Navigasi ini.

Hasil yang akan dibuat :

Langkah-langkah yang harus diikuti adalah :

1. Login ke akun blogger anda.

2. Pilih blog yang akan digunakan.

3. Minimal anda harus mempunyai 10 artikel agar Navigasi ini berfungsi dengan baik.

4. Save Templates atau Blog Anda sebelum anda menambahkan Page Navigasi ini.

Lihat Gambar …

Cari Kode ini >> ]]></b:skin> Cari kode tersebut dalam templates blogger anda.
Untuk memudahkan pencarian tekan ctr-f dalam browser.

Sebelum anda mencari kode tersebut ingat centang Expand Template Widget agat kode tersebut berhasil ditemukan.

Tambahkan Kode Css dibawah ini dan taruh pada kode diatas yang berwarna hijau

Taruh kode Css yang ada di bawah ini pada kode yang berwarna hijau diatas.
kode Css Taruh diatas kode ini >> ]]></b:skin> Dan jangan menghapus kode ini.
Kode Css :

01.paginator {
02    margin-top:60px;
03    font-size:1em;
04}
05.paginator table {
06    border-collapse:collapse;
07    table-layout:fixed;
08    width:100%;
09}
10.paginator table td {
11    padding:0;
12    white-space:nowrap;
13    text-align:center;
14}
15.paginator span {
16    display:block;
17    padding:3px 0;
18    color:#fff;
19}
20.paginator span strong,
21.paginator span a {
22    padding:2px 6px;
23}
24.paginator span strong {
25    background:#ff6c24;
26    font-style:normal;
27    font-weight:normal;
28}
29.paginator .scroll_bar {
30    width:100%; height:20px;
31    position:relative;
32    margin-top:10px;
33}
34.paginator .scroll_trough {
35    width:100%; height:3px;
36    background:#ccc;
37    overflow:hidden;
38}
39.paginator .scroll_thumb {
40    position:absolute;
41    z-index:2;
42    width:0; height:3px;
43    top:0; left:0;
44    font-size:1px;
45    background:#363636;
46}
47.paginator .scroll_knob {
48    position:absolute;
49    top:-5px; left:50%;
50    margin-left:-10px;
51    width:20px; height:20px;
52    overflow:hidden;
53    background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
54    cursor:pointer; cursor:hand;
55}
56.paginator .current_page_mark {
57    position:absolute;
58    z-index:1;
59    top:0; left:0;
60    width:0; height:3px;
61    overflow:hidden;
62    background:#ff6c24;
63}
64 
65.fullsize .scroll_thumb {
66    display:none;
67}
68 
69.paginator_pages {
70    width:600px;
71    text-align:right;
72    font-size:0.8em;
73    color:#808080;
74    margin-top:-10px;
75}

Kode JavaScript

Lalu setelah anda berhasil menambahkan kode css diatas maka tambahkan kode JavaScript dengan melihat gambar…
biasanya kode ini terletak di paling bawah templates anda…

Tambahkan kode JavaScript ini diatas kode yang berwarna hijau tersebut.
Kode hijau di atas jangan di hapus.
Lihat semua kode JavaScript dibawah :

1<script src='http://newbloggertemplates.googlecode.com/files/paginator3000.js' type='text/javascript'/>
2<script type='text/javascript'>
3var home_page=&quot;/&quot;;
4var urlactivepage=location.href;
5var postperpage=5;
6var numshowpage=6;
7</script>
8<script src='http://newbloggertemplates.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Arti kode ini dalam JavaScript Kode adalah :

1. var postperpage=5;

Banyak Post yang ditampilkan sebanyak 5 buah.

2. var numshowpage=6;

Scroll Bar akan mucul jika sudah melewati 6 Page atau Nomer Navigasi.
Setelah kedua kode tersebut berhasil anda tambahkan maka tekan SAVE dan langkah selanjutnya lihat gambar…

lihat tanda panah dan anda dapat mengubah berapa banyak postingan yang akan anda tampilkan pada halaman utama blog anda dan sesuaikan Jumlah angka dengan Kode JavaScript var postperpage=5; anda agar semua menjadi sempurna dan efektif. Final Result Klik Disini dan lihat navigasinya.

Kesimpulan

Jika anda tidak berhasil untuk membuat navigasi sederhana ini maka anda hanya perlu untuk meninggalkan pesan pada artikel ini dan saya akan memberikan solusi terbaik untuk anda dan semua kode yang ada diatas sangat sering saya gunakan untuk membuat Navigasi saat menciptakan blogger tempates dengan desain sederhana. Jadi anda dapat membuat navigasi ini jika anda belum mempunyai navigasi yang baik untuk blog anda.