Page Navigator Blog Dengan Scroll dan Number

Cara memasang Page Navigator Dengan Scroll disertai dengan number ini sangat simple dan menarik. Tutorial ini di ambil dari blog Kang Adhi Suryadi yakni  KOMPI AJAIB. Penampakannya seperti gambar dibawah ini :

DEMO

Cara Menerapkan Page Navigator Scroll dan Number Pada Blog

Langkah 1

Copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

.paginator{margin:0 10px 0 -8px;font-size:1em}
.paginator table{border-collapse:collapse;table-layout:fixed;width:100%}
.paginator table td{white-space:nowrap;text-align:center;padding:0}
.paginator span{display:block;color:#fff;padding:3px 0}
.paginator span strong{padding:2px 6px;}
.paginator span a{padding:2px 6px;color:#888}
.paginator span a:hover{background:#ccc;color:#000}
.paginator span strong{background:#878773;font-style:normal;font-weight:400}
.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/AVvXsEjQ-f9wFKpfAmuI716rIijDfISnwFfTQZh7BRKMorkEjvR8DPND0bS3bHkK4TcorSEr9ysifQmbXDoeiGqf-aAlDSTEdi4eGneJ7uY4UwgWdx2k9xJwXpdo-DI1vhGX59lhxzvtKFERlu3m/s1600/slider_knob.gif) no-repeat 50% 50%;cursor:pointer}
.paginator .current_page_mark{position:absolute;z-index:1;top:0;left:0;width:0;height:3px;overflow:hidden;background:#878773}
.fullsize .scroll_thumb{display:none}
.paginator_pages{width:600px;text-align:right;font-size:.8em;color:gray;margin-top:-10px}

Langkah 2

Perhatikan contoh kode di bawah ini, biasanya ada di bawah halaman blog :

<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
.......................................
.......................................
.......................................
</b:widget>
</b:section>
Simpan kode pemanggilnya di sini!
</div>

Kode pemanggil :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script src='http://yourjavascript.com/222106553/page-scroll.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=8;
var numshowpage=6;
</script>
<script src='http://yourjavascript.com/354622140/page-scroll-blogger.js' type='text/javascript'/>
</b:if>
</b:if>

Agar dapat berjalan baik, sesuaikan jumlah postperpage dan homepage.
Angka 8 = jumlah post per halaman
Angka 6 = jumlah angka halaman.

Page navigator ini responsive dan valid HTML5.

Untuk keamanan silahkan hosting ulang js-nya dengan akun masing-masing.

Image :Devanart
Sumber :http://www.kompiajaib.com/2013/10/membuat-page-navigator-blog-dengan.html