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

blogger blogspot tutorial tutorial blog 7/09/2012 04:36:00 pm