• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Sunday, December 20, 2009

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

29 comments:

  1. 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

    ReplyDelete
  2. thx kongsi bersama! dulu penah psg~ ps2 tkr tmplate da elg! hee~

    ReplyDelete
  3. macam taw jek tengah cari mende nih..thanks

    ReplyDelete
  4. @Mi vida

    Bergantung pada jumlah post. Kalu jumpalh pos baru setakat 5, memang benda ni tak keluar.

    ReplyDelete
  5. @YASSIN SULAIMAN

    Sila rujuk tutorial yang sebelum-sebelum ini. Tuan mungkin masih baru di blog ini. Sila cari sampai dapat kotak Find itu. Ia duduk di atas task bar.Tempat tekan start.

    p/s: Gua tak tau nak mudahkan macam mana lagi, mungkin tuan boleh bantu.

    ReplyDelete
  6. @Legasi Piston Pecah

    Gua ada mimpi malam tadi.Haha

    ReplyDelete
  7. @3109367669154773048.0

    Boleh buat semula kat template baru. Hee juga

    ReplyDelete
  8. ade perubahan dah..lupa nk update komen..harharhar...

    ReplyDelete
  9. @Mi vida

    Ok..Kira dah jadi lah yer.Haha

    ReplyDelete
  10. Terima kasih atas perkongsian..

    Saya dh try di blog saya.
    Alhamdulillah jadi...

    ReplyDelete
  11. nes..dh jadi tp bila klik kat page yg kita nak..dia xpergi. tetap m/s 1 je.

    ReplyDelete
  12. 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

    ReplyDelete
  13. @kinsyakrn

    Ok jer gua tengok kat blog akak. Apa yang first page aje.

    ReplyDelete
  14. @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.

    ReplyDelete
  15. nk try la pasni...sblom ni byk yg xjd..xtau naper

    ReplyDelete
  16. mcm ni nes..bila akak klik kat pg 2 ke next pg ke.. xgi pun.. duk page pertama aje.

    ReplyDelete
  17. 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...

    ReplyDelete
  18. jadi la number aku buat ikut tutorial ni...bagus tol...terima kasih banyak banyak bro...nak tengok hasilnya...meh tengok kat blog aku nih
    promote ckit..hehehe

    http://directdownloadmoviefree.blogspot.com/

    ReplyDelete
  19. jadik siot aku buat tutorial ni...bagus tol..hasilnya korang nak tengok

    http://directdownloadmoviefree.blogspot.com/

    ReplyDelete
  20. dah jadi!!! haha... many thanks.. :D

    ReplyDelete
  21. seperti biasa nescafe...langkah-langkah tutorial blog nes memang senang ikut..

    alhamdulillah, jadi diblog saya

    ReplyDelete
  22. yeh... dulu wat skang dah delete.. alhamdulilah mnjadik gak delete.. ekekeke

    ReplyDelete
  23. ok dah jadi dah....
    sekali try je terus jadi....
    thanks....

    ReplyDelete
  24. problems la pulak...dulu dah buat..jadi,tibe2 jek tak kuar page navigation tuh....macam mana?

    ReplyDelete