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(http://4.bp.blogspot.com/__hqk0jmhlcE/Sy3y4FwkDMI/AAAAAAAAADc/K5VSdixsvmc/s400/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(ttp://4.bp.blogspot.com/__hqk0jmhlcE/Sy3y4FwkDMI/AAAAAAAAADc/K5VSdixsvmc/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://4.bp.blogspot.com/__hqk0jmhlcE/Sy3y4FwkDMI/AAAAAAAAADc/K5VSdixsvmc/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

{ 70 comments.. read them below or add one }

Mi vida Mi vida 8:48 AM
xde perubahan...
YASSIN SULAIMAN YASSIN SULAIMAN 9:12 AM
Tak berapa jelas penerangan diatas.

Ini apa maksudnya : ]]>

langkah 4 body pada kotak Find dan seterusnya, tekan Enter. - ini dimana duduknya?

Bolah tak jika anda memudahkan lagi cara nak buat perkara diatas. TQ
♥chentaMAYA™ ♥chentaMAYA™ 9:19 AM
thx kongsi bersama! dulu penah psg~ ps2 tkr tmplate da elg! hee~
Legasi Piston Pecah Legasi Piston Pecah 1:15 PM
macam taw jek tengah cari mende nih..thanks
Nescafe ais Nescafe ais 2:39 PM
@Mi vida

Bergantung pada jumlah post. Kalu jumpalh pos baru setakat 5, memang benda ni tak keluar.
Mi vida Mi vida 3:19 PM
ade perubahan dah..lupa nk update komen..harharhar...
Nescafe ais Nescafe ais 3:24 PM
@Mi vida

Ok..Kira dah jadi lah yer.Haha
Melz Melz 10:38 PM
hoho senang kau buat terus :D
M Ridzuan al-Kindy M Ridzuan al-Kindy 2:06 PM
Terima kasih atas perkongsian..

Saya dh try di blog saya.
Alhamdulillah jadi...
kinsyakrn kinsyakrn 8:32 AM
nes..dh jadi tp bila klik kat page yg kita nak..dia xpergi. tetap m/s 1 je.
Armyrule Armyrule 7:08 PM
penah try tp xjdi gak...camna ni...kat first page show 7 artikel so code ni var postperpage=7; kena tukar no brapa baru nak jd
Nescafe ais Nescafe ais 8:22 PM
@Armyrule

Kalau faham, boleh jadi sebenarnya bro.

Var post per page tu kena ikut jumlah post pada muka depan. Kalau kat muka depan tu ada 7 post, tak payah edit angka 7.
shuko shuko 9:28 AM
nk try la pasni...sblom ni byk yg xjd..xtau naper
kinsyakrn kinsyakrn 6:15 PM
mcm ni nes..bila akak klik kat pg 2 ke next pg ke.. xgi pun.. duk page pertama aje.
kinsyakrn kinsyakrn 6:53 PM
sori nes..akak dh dpt solutionnya.. tsilap faham masa edit lgkh 5 & 7. jumlah post muka hadapan xsama dgn yg akak edit. thx ye jenguk yg akak buat. tqvm...
Syahmi Bin Ghani Syahmi Bin Ghani 5:47 PM
This comment has been removed by the author.
Syahmi Bin Ghani Syahmi Bin Ghani 5:50 PM
This comment has been removed by the author.
Kyuubi_85 Kyuubi_85 12:16 AM
dah jadi!!! haha... many thanks.. :D
Salahuddin Harith Salahuddin Harith 9:45 AM
seperti biasa nescafe...langkah-langkah tutorial blog nes memang senang ikut..

alhamdulillah, jadi diblog saya
Aiza Aiza 9:15 PM
yeh... dulu wat skang dah delete.. alhamdulilah mnjadik gak delete.. ekekeke
DaHLia DaHLia 8:34 PM
mcm xnak jadi jer...huhuh...
Iza Iza 2:23 PM
ok dah jadi dah....
sekali try je terus jadi....
thanks....
Legasi Piston Pecah Legasi Piston Pecah 12:27 AM
problems la pulak...dulu dah buat..jadi,tibe2 jek tak kuar page navigation tuh....macam mana?
Si Panda Si Panda 12:01 PM
kalau kita set 5 dia tak keluar ea.. kena pakai 7 gk?? sebab bila try 5 dia tak muncul tapi bila pakai 7 baru la dia keluar..
Tranxec Tranxec 2:04 AM
tak menjadi lah..kod biru ada kat header blog..
camne??
Iza Iza 2:48 PM
Salam...
Aku terpaksa tukar template tp bila buat semula, dh xnk jadi.kenapa ek?ada template yg x sesuai ke utk letak benda ni.....
Admin Admin 9:53 AM
slm,

dah byk kali try, masih tak menjadi nk buat page navigation kt blog saya..err kalau mohon admin buat semakan kt html code blog saya bole tak?
Admin Admin 10:11 AM
kt blog saya dah dah-tertulis html code utk page navigation camni:

#blog-pager-newer-link {
display: none;
}

#blog-pager-older-link {
display: none;
}

#blog-pager {
display: none;
}

p/s: betul ke camni?
Iza Iza 3:44 PM
Aku cuba buat lg ni tp xnk jadi jgk la......apa masalahnya ek? pening2
THE DESAMINIUM THE DESAMINIUM 10:35 PM
'data:label.url'..try search kt code...tp xjumpa...mcm mana ni bro??
Syue Mustafa Syue Mustafa 4:01 PM
Error matching blog to blogger entry. If you are the owner of this blog, please check that there is no typo in your blog address and that you have pasted the code from the Add Ads page correctly.

Naper tak boleh yer?
Syahmi Bin Ghani Syahmi Bin Ghani 12:46 AM
kepada neslo..boleh tolong bagi kode untuk mukasurat style google

maklum di http://directdownloadmoviefree.blogspot.com/
bdkminang bdkminang 12:47 PM
saya buat tak jadi la..ni code saya
,
Dara lapok Dara lapok 10:35 PM
salam..
ade masalah pd code awk..

url(ttp://4.bp.blogspot.com/__hqk0jmhlcE/Sy3y4FwkDMI/AAAAAAAAADc/K5VSdixsvmc/s400/wp2.jpg) 0 -25px repeat-x;

tertinggal [h] kat ttp:// tu..

sile betulkan..

tq.. (^^)v
** a i l y ** ** a i l y ** 5:19 PM
'data:label.url'

Aily tak jumpa pun code ni :(
AnonymousAnonymous 12:50 PM
Huh...tak lepas..Tension2
░♥si lampu neon♥░ ░♥si lampu neon♥░ 12:13 PM
tak berkesan. anyway thanks admin good blog;)
Iza Iza 7:33 PM
@Iza

aku dah tukar sekali lg template tp bila buat, xnk jd jgk.apa masalahnya ek?
Lg 1, aku berkenan dgn reply komen.nk buat jgk la...
Salahuddin Harith Salahuddin Harith 7:17 AM
tak jadi la nescafe, cammana ek? dah try 3-4 kali dah
fioxphrofile fioxphrofile 1:11 PM
nescafe. aku try. kalo preview memang xnmpk.
tapi kalo da save, baru nampak. :)
so xyah preview.

lg satu , kod wane biru tu ada huruf tertinggal kat coding image.. :)

take note!!
DaHLia DaHLia 6:55 PM
oke da jadi..pas edit sana sini sket...

nes, kalo nk letak mender ni kat atas page ada cara x?
Shuk Shuk 2:55 PM
thnks utk tutorial nie.dah jdi..huhu :)
alkisah69 alkisah69 1:47 AM
@Nescafe aissaya dah 6 post x p x keluar jugak kenape?
Shari Shari 11:28 PM
alhamdulillah jadi :)
alkisah69 alkisah69 6:59 PM
nescafe tlong buat kat saye leh x ???
ezrul ezrul 2:22 AM
cara ni sama ke klu guna blog wordpress?
alif alif 10:29 PM
semasa preview tak kuar pun nombor tu..ermm tak berani nak save la...

atau memang masa preview tak kuar..kena save baru kuar ker..
yahaya yahaya 8:36 AM
ada cara lain cuma masukkan kat add gadget sahaja.kalau tak jadi tu sebab nya ada kod lain yang menyebabkan ia tak keluar..
Kazen Kazen 6:32 PM
@yahaya
so camne caranye? show it
p-DaUz :D p-DaUz :D 12:05 PM
bro. asal kat page depan banyak post.
dekat 15 post. then page 2 baru jadi 5 post.
camne nk bagi kat page depan ada 5 gak ek?
Lyana Lyana 1:52 PM
tapi jumlah post saya banyak jugak, dalam seratus lebih... tapi kenapa saya tengok blog saya tak ada perubahan pun....
amry amry 2:41 PM
dah jadi....ngeeee :)
SyoknyaDownload SyoknyaDownload 7:24 AM
kenapa blog ni skarang tak guna ni lagi...adakah ini akan memberatkan template?


add my facebook :alifsyk

www.syoknyadownload.blogspot.com
Ejen 010 Ejen 010 3:47 PM
sioknye ada benda ni..memudahkan..berbaloi²..

http://sampulfdc.blogspot.com/
Anwar Suran Anwar Suran 8:49 AM
kat blog saya ada banyak code nie:

'data:label.url'

adakah perlu untuk saya copy terhadap semua dengan code ini?

'data:label.url + "?&max-results=7"'

plz bantu :(
Nescafe ais Nescafe ais 1:58 PM
@Anwar Suran

paste pada 'data:label.url' yang atas sekali.
♀ syera teli ♀ ♀ syera teli ♀ 10:54 AM
suda jdi . trime kaseh ek ?
:DDDD
akuamir akuamir 4:00 PM
terima kasih bro,,
skali test suda jadi,,
mmg cantik step by step ko..
faiz faiz 4:45 PM
thanks..dah try jadi...saye letak kat atas kod tu baru jadi..letak bawah tak jadi
drkcrmsn drkcrmsn 5:36 AM
wahhh! bagus sangatt. dh lame carik code ni. yg ni je jd. thanks! :)
NURUL AIN NURUL AIN 2:03 PM
macammane ye nk buang numbered navigation nih?
vqoley vqoley 3:05 PM
wuh.. alhamdulillah.. dah lame aku cari cara ni. menjadi btul la cara ni.. penerangan dia pun bgus...
Shafiq Mujahid Shafiq Mujahid 6:24 PM
wah.. ^^ cara ini sangat membantu saya.. ^^
hendra setiawan hendra setiawan 3:44 PM
mantap gan, terima kasih banyak ya atas ilmunya.. :)

www.jamtanganori.com
Mohd Selim Zainal Mohd Selim Zainal 11:23 AM
Assalammualaikum...

mselim3 dah cuba tapi tak berjaya lah... tak tahu apa sebab nyer....

mselim3

pls: boleh tolong mselim3 tak?