Memasang numbered page navigation pada bahagian bawah blog

Numbered page navigation seperti yang boleh anda lihat pada bahagian bawah blog ini, sememangnya memudahkan dan sangat membantu visitor untuk explore setiap muka surat yang ada pada blog kita. Visitor hanya perlu klik pada nombor yang berikutnya jika ingin melihat entri atau artikel yang telah di post sebelumnya.

Untuk memasang numbered page navigation ini, sila ikut beberapa langkah di bawah.

p/s: Sila save script template anda terlebih dahulu.(Penting)

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya, tick pada Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan Ctrl+ F. Seterusnya, taip atau paste kod ]]></b:skin> pada kotak Find dan kemudian tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan pastekan di atas atau sebelum kod ]]></b:skin> (Rujuk langkah 2)

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyudVYGECPvBgRaW6gUnUilBoOX5xW-2YcsPhRcQ52jAAEN9qmVsXG-UEVwYot2arsqK97oUrmbdg2q6BdD1TOE4CyuRCqErnAACf56h1f7gid0IGAgGA_z8E5VFj5xD5jue9IL0D6zC4/s400/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyudVYGECPvBgRaW6gUnUilBoOX5xW-2YcsPhRcQ52jAAEN9qmVsXG-UEVwYot2arsqK97oUrmbdg2q6BdD1TOE4CyuRCqErnAACf56h1f7gid0IGAgGA_z8E5VFj5xD5jue9IL0D6zC4/s400/wp2.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.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 #919106;
background: #666 url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyudVYGECPvBgRaW6gUnUilBoOX5xW-2YcsPhRcQ52jAAEN9qmVsXG-UEVwYot2arsqK97oUrmbdg2q6BdD1TOE4CyuRCqErnAACf56h1f7gid0IGAgGA_z8E5VFj5xD5jue9IL0D6zC4/s400/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}


Langkah 4

Dengan menggunakan keyboard, tekan Ctrl+ F dan taip atau paste kod </body> pada kotak Find dan seterusnya, tekan Enter.

Langkah 5

Salin kod berwarna merah di bawah dan pastekan di atas atau sebelum kod </body> (Rujuk langkah 4) .

Edit angka 7 yang di bold pada kod di bawah mengikut jumlah post pada front page (muka depan) blog anda.

&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://sites.google.com/site/testsajasite/pagenav.js' type='text/javascript'&gt;&lt;/script&gt;


Langkah 6

Sekali lagi, dengan menggunakan keyboard, tekan Ctrl+ F dan taip atau paste kod 'data:label.url' pada kotak Find. Seterusnya, tekan Enter.

Langkah 7

Salin kod hijau di bawah dan gantikan kod 'data:label.url' (Rujuk langkah 6).

Edit angka 7 yang di bold pada kod di bawah mengikut jumlah post pada front page (muka depan) blog anda.

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

Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save