Cara Membuat Page Navigasi Nomor Dengan Fungsi Scroll

Bagi para blogger pemula seperti saya sendiri.Dulunya juga agak bingung apa itu Page Navigasi dengan Nomor.Tapi Alhamdzulillah sekarang dikit-dikit taulah, Makanya saya share di blog saya ini. Page Navigasi sangatlah dibutuhkan bagi kamu yang sudah memiliki banyak posting, jadi pengunjung akan lebih mudah buat melihat posting kita yang sudah agak lama dan yang baru. Okelah mungkin sobat blogger sudah cukup jelas apa itu Page Navigasi dan apa fungsinya, sebetulya banyak style Page Navigasi tapi disini saya akan share Cara Membuat Page Navigasi Nomor Dengan Fungsi Scroll, lihat SS di bawah ini :

1. Login Blogger>Rancangan>Edit HTML.

2. Backup dulu template kamu buat jaga-jaga kalau gagal.

3. Centang kotak Expand Template Widget.

4. Cari kode ]]></b:skin> biar lebih mudah Ctrl+F.

5. Taruh kode dibawah ini tepat diatas kode  ]]></b:skin>

      .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/AVvXsEi9irCr6WhECzP6f2bORpoLRqVC5Qk29DAvfVlD1PALM6mWMqAIlLVpp83t8ULk5bx_eZ2RLUN_gVKUkrDysrwR_vnYQi0pXAwJ3PlUbE-J_FrEQjaNNs14gVeTR0dldW_QqN55QG2U9ic/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; }

6. Selanjutnya cari kode </body> copy paste kode dibawah ini tepat di atas kode </body> . 

     <script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=7; var numshowpage=6; </script> <script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

7. Terakhir cari kode 'data:label.url' dan ganti dengan kode dibawah ini lalu Save Template.

'data:label.url + &quot;?&amp;max-results=7&quot;'

Silahkan dicoba semoga berhasil...!!ada kesulitan bisa hubungi saya atau tulis komentar dibawah.