Membuat Navigasi Blog Keren

Pastinya udah ada bayangan kan waktu membaca judulnya ?, ya navigasi blog, ituloh yang ada di bawah posting di halaman muka blogger kamu, yang biasanya skrinsutnya kaya gini nih.......

Belum mudeng juga ??, ituloh yang fungsinya buat menunjukan posting paling lama blog kita, nah kalau yang di skrinsut di atas itu kan udah umum dan engga unik engga acan, tapi navigasi yang akan saya buat di sini lebih keren (setidaknya menurut saya) modelnya kaya penggaris(ruller bahasa inggerisnya) soalnya ada nomor nomornya, kalau masih penasaran lihat contohnya di sini. 

 Udah paham? yakin ?, oke kalau sudah yakin kita mulai eksperimenya...


Langkah pertama kamu masuk ke ...

Blogger

Design

Edit HTML, jangan lupa beri tanda centang di kotak expand widget template.

Kemudian kamu cari kode ]]></b:skin>.

Kalau sudah ketemu, letakkan kumpulan kode berikut di atas kode ]]></b:skin>.

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i977.photobucket.com/albums/ae255/h3n6r4/Others/pagenavigationscrool.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

Nah langkah selanjutnya kamu cari kode </body> di template kamu, terus letakkan kode berikut di atasnya,

<script src='http://izulpagenumberruler.googlecode.com/files/izoelpagenumberruler.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=8;
</script>
<script src='http://izulpagenumberruler.googlecode.com/files/izoelpagenumberruler2.3.js' type='text/javascript'/>

Nah tulisan yang warnanya "IJO" bisa kamu sesuaikan dengan pengaturan blog kamu, misalkan

postperpage=4 = jumlah post perhalaman di halaman pertama blog kamu
numshowpage=8 = jumlah nomor yang akan di tampilkan pada navigasi blog kamu nantinya


Mudheng, jelas ??, silakan mencoba semoga berhasil........