Numbered Page Navigation Versi Abu Farhan

Memasang numbered page pada sesebuah blog sememangnya memudahkan pelawat untuk melihat kesemua entry2 kita. Walaupun fungsinya sama seperti older post yang biasa kelihatan di mana2 blog, namun numbered page kelihatan lebih kemas dan pelawat lebih mudah untuk mengetahui seberapa banyak entry yang ada dalam sesuatu blog itu. Untuk melihat contohnya sila klik preview 

Widget ini berasal daripada pemiliknya iaitu Abu Farhan yang sememangnya terkenal dengan berbagai jenis widget yang begitu cantik dan memudahkan. Dan disini saya hanya mengulang semula artikel beliau dalam bahasa melayu.


Ok, untuk membuatnya anda hanya perlu mengikuti beberapa langkah di bawah :


1) Login Blog => Design => Edit Html => Expand Widget Template
2) Setelah itu cari kod di bawah :

]]></b:skin>

Copy kod di bawah ini tepat di atas kod ]]></b:skin>

.showpageNum a {padding: 3px 8px;margin:0 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background: #ddd;}
.showpageOf {margin:0 8px 0 0;}.showpageNum a:hover {border:1px solid #888;background: #ccc;}
.showpagePoint {color:#fff;text-shadow:0 1px 2px #333;padding: 3px 8px;margin: 2px;font-weight: 700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background: #666;text-decoration: none;}

Setelah itu cari pula kod di bawah ini :

</body>

Copy kod di bawah ini tepat di atas kod </body> 

&lt;script type='text/javascript'&gt;var home_page=&quot;/&quot;;var urlactivepage=location.href;var postperpage=7;var numshowpage=4;var upPageWord ='Prev';var downPageWord ='Next';&lt;/script&gt;&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

Kod berwarna biru di atas adalah di antara salah satu style numbered page yang ada. Anda boleh menukarnya dengan membuat beberapa pilihan di bawah mengikut kesesuaian anda:

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5
6. Style 6

Dan di bawah ini pula contoh untuk style kod di atas :

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5
6. Style 6

Perhatikan penerangan bagi kod yang diwarnakan dengan warna hijau

var postperpage=7;

var numshowpage=4;

Postperpage : Berapa banyak post yang mahu anda tampilkan pada blog

Numshowpage : Berapa banyak nombor yang mahu ditampilkan contohnya 4 maka akan jadi seperti ini (1,2,3,4.........25)

Jika sudah selesai cari pula kod di bawah ini :

'data:label.url'

Gantikan kod diatas dengan kod di bawah ini :

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

Klik dahulu preview dan jika tiada sebarang error maka klik save template