Bikin Navigasi Halaman Dengan Scroll

00.40 ---
Pag Navi adalah navigasi halaman yang berguna untuk memudahkan kalian dalam melihat-lihat artikel. Blogger biasanya hanya menyediakan navigasi 'posting lama' , 'beranda' dan 'posting baru'. Namu semua itu dapat di ganti menjadi seperti ini.


Bedanya navigasi ini adalah dengan dilengkapi fitur scroll. Yaitu nomor halaman dapat di tampilkan semua... Untuk lebih jelasnya silahkan di coba.

1. Login Blogger.com.
2. Masuk ke Rancangan ~> Edit HTML.
3. Cari kode ]]></b:skin>.
4. Letakkan kode berikut tepat di atasnya.

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNu3ov8QUXteP_AmxiSq-LQqnhCfYDRFOmZ7p27facsU3uZs8GoAx_Tg8tmleHmcGqN90h7NcDg2096JQo9h_ooTIRlXC1Xn_-bS-2pXEYatvNxaSA0UKG9Ge9LqFbWd5Bui4HN5ISNo8/s1600/slider_knob.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. Kemudian cari kode </body>, lalu pastekan kode berikut tepat di atasnya.

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

6. Simpan. Semoga berhasil :D

2 komentar:

Zh!nTho mengatakan...

wah punyaku pake Css3 Gan heheheheh, Ngomong2 Tempat Kode nya itu Kok Gelap Jadinya Kode nya Gak Keliatan

Sadeva Aldy Pratama mengatakan...

@Zh!nTho : oh iy gan maaf, sya mke gabungan CSS soalnya, jadinya hanya bisa di lihat dengan browser mozilla. Akan segera sya ganti warnanya :D

Posting Komentar