√ Membuat Navigasi Blog Keren

Membuat Navigasi Blog Keren

Friday, 23 December 2011

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 ayo kita buat.
Udah paham? yakin ?, oke kalau sudah yakin kita mulai eksperimenya...

Langkah pertama kamu masuk ke ...

1. Masuk/login ke blogger sobat.

2.Masuk ke rancangan>>>Edit HTML.
3. Sebelum mengedit sebaiknya sobat centang dulu tulisan " Expand Template Widget"

4. Masukkan Script berikut diatas kode ]]></b:skin>, gunakan ctrl+F untuk mempermudah pencarian kode.

.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;
}

5. 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="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=8;
</script>
<script src='http://izulpagenumberruler.googlecode.com/files/izoelpagenumberruler2.3.js' type='text/javascript'/>

6. Nah tulisan yang warnanya "merah" 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........