Membuat Page Navigator Blog Dengan Scroll

Hari ini saya merasa bosan dengan tampilan blog pager atau page navigator blog Kompi Ajaib yang ada di homepage. Sudah waktunya berburu script lagi untuk menggantinya dengan tampilan lain yang mungkin bisa mengusir rasa bosan ini. Akhirnya saya ingat Maskolis pernah share sebuah template dengan page navigatornya lain dari biasanya. Setelah saya searching di Maskolis akhirnya ketemu juga, nama templatenya Johny Prett. Kemudian saya coba pasang scriptnya seperti yang bisa Anda lihat di homepage blog ini (jika belum saya ganti lagi heehehehe....). Page navigator ini memiliki scroll bar di bawahnya yang bisa digeser-geser untuk menggantikan tombol next dan prev untuk menampilkan halaman lainnya.

Sebagai gambaran untuk page navigator dengan scroll ini seperti tampak pada gambar di bawah ini.

Bagaimana Anda ingin mencobanya juga? Silahkan copy kode-kodenya di bawah ini.

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(http://4.bp.blogspot.com/-wjkd4Db57mI/Ul_SzpY94pI/AAAAAAAAaQI/rnHHqqZRPA4/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}

Untuk gambar scroll-nya ada baiknya diupload ulang pada blog masing-masing dan silahkan sesuaikan warna-warnanya agar sesuai dengan tema blog masing-masing.

Kemudian copy kode pemanggilnya dan simpan di bawah halaman blog seperti contoh kode di bawah ini.

<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>

Di bawah ini kode pemanggilnya yang harus Anda copy.

<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>

Untuk keamanan silahkan hosting js-nya dengan akun sendiri. Angka 8 untuk mengatur jumlah post pada setiap halaman dan angka 6 untuk mengatur jumlah angka halaman yang tampil.

Dan setelah saya coba ternyata page navigator ini responsive juga, artinya lebar page navigator ini mengikuti setiap lebar device sehingga tampilnya tidak menumpuk.

Selamat mencoba....