Membuat Page Navigator Blog Dengan Scroll

Membuat Page Navigator Blog Dengan Scroll - Selamat pagi sobat blogger, dipagi yang cerah ini, saya akan membagikan tutorial membuat page navigator dengan scroll, pada template biasanya terdapat page navigator seperti ini.

Tapi, apakah sobat sudah pernah bertemu dengan blog yang mempunyai page navigator blog seperti dibawah ini?

Pasti setelah melihatnya dan merasakan perbedaanya sobat ingin mengetahui cara membuat page navigator tersebut. Page navigator ini memiliki scroll bar di bawahnya yang bisa digeser-geser untuk menggantikan tombol next dan prev untuk menampilkan halaman lainnya.
Bagaimana? menarik bukan? ingin mencobanya? silahkan ikuti tutorial berikut!

Membuat Page Navigator Blog Dengan Scroll :
1. Buka Blogger

2. Klik Template -> Back up template dulu untuk jaga-jaga -> Pilih Template HTML

3. Copy dan paste 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/AVvXsEhZhzvxoybm-pYDXxsBfNIBhQ19FWX3nnwHkhKYod6LxsYpbmX5gwHY1saqx74IvpBJPBqa2Kvu7nCf2ZHbQesZD7ztsTLCLBF_NoosmMx1ZiW-Pg2kf8udflVQOORCaUTDlk4xVH2RjYuY/s1600/slider_knob.gif) no-repeat 50% 50%;cursor:hand} .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.

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

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

6. simpan template

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

Oh iya saya hampir lupa, tutorial ini saya dapatkan dari blog KompiAjaib
Selamat mencoba dan semoga berhasil :D