Numbered Page Navigation for Blogger

Page Navigation  က စာဖတ္သူေတြ၊ လာေရာက္ေလ့လာ သူေတြအတြက္ အဆင္ေျပေစပါတယ္။ စာမ်က္ႏွာ တစ္ခုခ်င္းကို စိတ္ႀကိဳက္ေရြးၾကည့္ရတာေပါ့။ Wordpress user ေတြအေနနဲ႔ေတာ့ ရင္းႏွီးၿပီးသားျဖစ္ပါလိမ့္မယ္။ Blogger user ေတြ အေနနဲ႔လည္း အခု စတင္ၾကရေအာင္။

Template ကို Hack ၾကမယ္ေပါ့ဗ်ာ။ အဆင္လိုက္ ေအာက္မွာ ေဖာ္ျပထားပါတယ္။

1.Login ဝင္ၿပီး  Blogger Dashboard ရဲ႕  Layout > Edit Html ကို သြားပါ။

2. ဒီ ‘Expand Widget Templates’ ဆိုတာကို မကလစ္ပါနဲ႔။

3. ၿပီးေတာ့ ]]></b:skin> ကို ဒီ Ctrl + F  အသံုးျပဳၿပီး ရွာပါ။

ၿပီးရင္ ေအာက္ပါ ပံုစံ အတိုင္းျဖစ္ေအာင္ စီစဥ္ပါ။

/* Page Navigation styles */
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.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 #999;
  background: #666;
  text-decoration: none;
  }
]]></b:skin>

4. </body> ဆိုတာ ရွာပါ။

ေအာက္ပါ ပံုစံကို ေျပာင္းထားလိုက္ပါ။

<!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://kangismet.googlecode.com/files/kangismet-pagenav.js' type='text/javascript'/>
<!--Page Navigation Ends -->
</body>

အဲဒီကုဒ္ တစ္ခ်ိဳ႕ကို မိမိ စိတ္ႀကိဳက္ျပင္ဆင္ႏူိင္ပါတယ္။

varpostperpage=4;

ဒီ ကုဒ္ ကေတာ့ တစ္မ်က္ႏွာတည္းမ်ာ ေဖာ္ျပမယ့္ page အေရအတြက္ ကို ေျပာတာပါ။

varnumshowpage=6;

ဒီ ကုဒ္ကေတာ့ page navigation အရည္အတြက္ကို ေဖာ္ျပေပးမွာပါ။

var upPageWord =&#39;Previous&#39;;
downPageWord =&#39;Next&#39;;

ဒီ ႏွစ္ေၾကာင္းကေတာ့ Previous နဲ႔ Next page ကိုေဖာ္ေဆာင္ပါတယ္။

Source : bloggerhack