Bikin Navigasi Halaman Dengan Scroll

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/AVvXsEhMXwrNYnzg_fWdmqh0ZCxKLEMk_SEqzRTHYxUxNpb2mH2B5uhcTFpCyp-nDPq682YQjPgdky9Mk8kU5vvG_BgdltqyyZ3B7pcakRBTXMApPBM_2Dpk7c4OB3iBrrGav1HrCWuqn4CHZ1Q/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://www.geocities.ws/alprablog/user/js/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://www.geocities.ws/alprablog/user/js/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

6. Simpan. Semoga berhasil :D

Real Page http://alprablog.blogspot.com/