Latest News
Monday, July 09, 2012

TUTORIAL MEMBUAT PAGE NAVIGATION

Lama dah tak buat tutorial. kali ni nak buat TUTORIAL MEMBUAT PAGE NAVIGATION. Apa itu PAGE NAVIGATION ? page navigation yang di maksudkan di sini adalah seperti yg terdapat di bahagian bawah sekali di page blog korang. kebiasaannya page navigation yg asal cuma di dalam perkataan, perasan tak ada OLDER POST dan NEWER POST ?


Dengan memasang script ni di blog korang perkataan tu tak wujud lagi kerana ianya diganti dengan NUMBERRED PAGE NAVIGATION, blog pun nampak lebih kemas dan menarik. ada sesetengah template sudah tersedia page navigation ni. Tapi untuk blog template yang sudah di edit sahaja..
Bagaimana  page navigation ni kelihatan? demonya seperti gambar di bawah atau rujuk blog ni di bahagian bawah sekali.


CONTOH PAGE NAVIGATION
page navigation tutorial
Page navigation ini akan mengikut saiz font blog korang jangan risau pasal saiznya.

Cara pasang page navigation di blog seperti berikut :
  1. Login - Dashboard - Design template - Edit - HTML.
  2. Sila cari kod dengan key CTRL+F dan cari kod ni   ]]></b:skin>
Dah jumpa kod diatas sila salin kod di bawah ni dan paste di bawah kod ]]></b:skin>.

.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
Selepas tu cari kod ni </body>
Dah jumpa sila paste kan kod ni di atas kod </body>


<!--Page Navigation Starts--><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://silence-blogz.googlecode.com/files/bloggers_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->

Kalau dah selesai Save.. tak perlu preview kerana sesetengah javascript tidak berfungsi bila di preview.

NOTA: Kalau ada apa-apa masalah boleh kemukakan di ruangan komen. jangan malu-malu ye.. saya tak makan orang. ekekek.. 

INCOMING SEARCH TERM :

tutorial buat page navigation, tutorial buat numberred page, cara buat page navigation
  • Blogger Comments
  • Facebook Comments

5 comments:

  1. bro, ak xnk buat navi yg nombor2 ni tp tukaq jd gambar buleh ajar x? kt blog ak NEWER POSTS, HOME, OLDER POSTS...ak nk tukaq perkataan ni biar gune pic berformat png...cmne ek? tau x caarnya?

    ReplyDelete
  2. Jap-jap Komiko si potia ni male ke female?? aiyakk... ha ha ha tunggu tutorial yg lain lak boleh???

    ReplyDelete
  3. @leakedknowledge yg tu dah ramai org buat tutorial.. tp klu nak nnt aku buatkan tutorialnya ok..

    ReplyDelete
  4. @PariPariPutih sy lelaki la pari2.. gambar tu sempena mengingati seseorg yg pernah sy syg dulu.. dan mungkin selamanya... nak tau kenapa sy kata sekadar nak memperingati??? cuba lihat slideShow.. nnt pari2 tau apa maknanya..

    ReplyDelete
  5. ha ha ha hatoi... tepuk dahi aku tau... kelasss sorry aku ingat ko ni pompan... sapa suh ko buh gambau pompan keh keh keh...

    aku ni lembab sket... so aku kena cari mana slide show yg ko ckp tu..

    pasal glow tu nanti satu hari aku akan buat entri special tuk ko utk cover yg nama ko aku tak tagged tu ka... i promise

    kalau ko tak caya ko tanya leaked ^^

    ha panjang giler komen aku ni kan yg tak de kena mengena langsung ngan tutor ko neh...

    pasal lagu tu ... malu la aku ada ke org nak dengar? elok2 org bw kat blog ko.. kli dengau lagu kesempatan aku tu terus derang bla camner?? ha ha ha...

    semoga terjawab segala persoklan di minda mu ha ha ha ^^

    ReplyDelete

Sebarang Komen yang tidak berkaitan dengan artikel / SPAM akan Di PADAM. Terima Kasih.

Item Reviewed: TUTORIAL MEMBUAT PAGE NAVIGATION Rating: 5 Reviewed By: potia casadelarossa