Page Number Navigation

LANGKAH-LANGKAH:

                     1. Masuk ke menu Tata Letak

2. Klik Tambah Gadget



3. Pilih HTML/Javasript





4. Masukkan (Copy/Paste) script berikut pada Kolom HTML/Javasript berikut, beri judul Page Number Navigation

Masukkan Script berikut sepertii langkah nomor 4:

<!-- Stylish colored  Navigation Widget For Blogger By bdlab @ http://24work.blogspot.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }/* 24work.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* 24work.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */
</style>
<a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=1;
var numshowpage=9;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js' type='text/javascript'></script>
<!-- Stylish colored Numbered Page Navigation Widget For Blogger By bdlab @ http://24work.blogspot.com -->


Catatan : 

Pada saat anda lihat blog anda setelah dipasang page number navigation, anda akan terserang "Grab This"
yaitu kalo anda klik menu label dan menu yang lain maka anda akan memasuki situs tertentu yang tidak anda harapkan. untuk mengatasinya dengan cara sebagai berikut:

1.  masuk ke blogger anda (masukkan email dan password anda)
2. masuk ke menu tata letak
3. edit pada gadget "html/javaskrip" tempat anda meletakkan "Page Number Navigation"
4. hapus skrip sebagai berikut :  <a href="http://24work.blogspot.com/" target="_blank" title="Grab this"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>

Catatan lain:

Rubah script brikut sesuai kebutuhan anda :


var postperpage=1; 
apabila anda hanya ingin menampilkan satu halaman saja, bisa anda ganti dengan angka lain sesuai kebutuhan, kalau anda ganti dengan 5, maka akan tampil lima halaman, begitu pula selanjutnya.

var numshowpage=9;
apabila anda ingin menampilkan 10 tampilan page number, kalau anda ganti 5 maka akan menampilkan 6 page number, begitu pula selanjutnya.