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 dapat mengusir rasa bosan ini. Akhirnya saya ingat Maskolis pernah share sebuah template dengan page navigatornya lain dari biasanya. Setelah saya searching di Maskolis alhasil ketemu juga, nama templatenya Johny Prett. Kemudian saya coba pasang scriptnya ibarat yang dapat Anda lihat di homepage blog ini (jika belum saya ganti lagi heehehehe....). Page navigator ini mempunyai scroll kafe di bawahnya yang dapat digeser-geser untuk menggantikan tombol next dan prev untuk menampilkan halaman lainnya.

Sebagai citra untuk page navigator dengan scroll ini ibarat tampak pada gambar di bawah ini.

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

Copy instruksi 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/AVvXsEgslP_V3jY14fpkixVxsInQUbKda0Knfq-iAN0AEIjlgZklAPmYEzLtAK1x09oJojDhZF-VGJIkt1P0BUqbweLUioYuE5FGimHhjWNPRt0Su_QQveWEb3t4au77rpWL3IqShn8KuDVrLdsa/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 biar sesuai dengan tema blog masing-masing.

Kemudian copy instruksi pemanggilnya dan simpan di bawah halaman blog ibarat pola instruksi 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 instruksi pemanggilnya di sini!
 </div>

Di bawah ini instruksi 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 sesudah saya coba ternyata page navigator ini responsive juga, artinya lebar page navigator ini mengikuti setiap lebar device sehingga tampilnya tidak menumpuk.

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post