Membuat Tombol Next Page Dengan Angka

Coba kalian lihat gambar yang tertera di atas, Pasti tidak asing bukan buat kalian semua, Iya itulah yang bernama Tombol Next Page . Adapun fungsinya , Tombol itu berfungsi untuk mengarahkan pengunjung untuk melihat halaman demi halaman yang berada pada Blog kita Berdasarkan angka yang di tunjukkanya. 


Langsung aja kita ke Pokok pembahasanya yaitu cara membuatnya:


1.
Sign in  Ke Blogger - kemudian Masuk ke Rancangan - Tambah Gadget - pilih HTML/JavaScript. Setelah masuk Copy Pastekan Kode berikut ke dalamnya.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<style type="text/css"> .showpageArea a {text-decoration:underline;} .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;} .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;} .showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;} .showpageOf {display: none;} .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;} .showpage a:hover {text-decoration:none;}.showpageNum a:link, .showpage a:link {text-decoration:none;color:#333333;} </style> <script style="text/javascript"> var pageCount=2;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next"; </script> <script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"> </script>

2.
Masuklah ke HTML dengan cara Click EDIT HTML dan cari Code di bawah ini:

]]></b:skin>

Copy paste kan kode di bawah ini tepat di atas kode  ]]></b:skin>]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

3.
Cari kode HTML dibawah ini 

</body>


Copy pastekan kode di bawah ini tepat di atas kode </body>

1 2 3 4 5 6 7 8 9 10 11

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> var pageCount=2; var displayPageNum=5; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if> <!--Page Navigation Ends -->

4.
Setelah semuanya selesai sekarang tinggal SAVE (Simpan) dan tinggal di lihat aja deh hasilnya


Selamat mencoba melakukan variasi di blog kalian , Bila ada sesuatu yang perlu di pertanyakan bisa langsung di comment kan di blog saya.
Salam Rougerdeluffy