Cara Memasang Page Number Navigation Bar Pada Blog

 

Cara Memasang Page Number Navigation Bar Pada Blog 

Kali ini saya nak tunjukkan tutorial cara pasang Page Number Navigation bar pada blog untuk memudahkan pelawat membuka halaman lain. Ikut langkah-langkah di bawah dengan betul. Kalau ada masalah sila kongsi di bahagian comment k.

Langkah 1

1. Seperti biasa masuk ke Dashboard > Template > Edit HTML > Proceed

2. Tekan Ctrl + F dan cari code di bawah:

]]></b:skin>

3. Paste code di bawah sebelum code ]]></b:skin>

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

Langkah 2

1. Cari code di bawah:

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

2. Selepas </b:section> paste code di bawah:

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=6;

var displayPageNum=10;

var upPageWord ='Previous';

var downPageWord ='Next';

function showpageCountundefinedjson) {
  var thisUrl = home_page_url;
  var htmlMap = new Arrayundefined);
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

forundefinedvar i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substringundefined0,19)+post.published.$t.substringundefined23,29);
  timestamp = encodeURIComponentundefinedtimestamp1);

  var title = post.title.$t;

 ifundefinedtitle!=''){
  ifundefineditemCount==0 || undefineditemCount % pageCount ==undefinedpageCount-1))){
  ifundefinedthisUrl.indexOfundefinedtimestamp)!=-1 ){
  thisNum = postNum;
  }

  ifundefinedtitle!='') postNum++;
  htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
  }
  }
  itemCount++;

  }

  forundefinedvar p =0;p&lt; htmlMap.length;p++){
  ifundefinedp&gt;=undefinedthisNum-displayPageNum-1) &amp;&amp; p&lt;undefinedthisNum+displayPageNum)){
  ifundefinedfFlag ==0 &amp;&amp; p == thisNum-2){
  ifundefinedthisNum==2){
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  ifundefinedp==undefinedthisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  ifundefinedp==0){
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';

 }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ undefinedp+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  ifundefinedeFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  ifundefinedthisNum&gt;1){
  html = ''+upPageHtml+' '+html +' ';
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages undefined'+undefinedpostNum-1)+')&lt;/span&gt;'+html;

  ifundefinedthisNum&lt;undefinedpostNum-1)){
  html += downPageHtml;
  }

  ifundefinedpostNum==1) postNum++;
  html += '&lt;/div&gt;';


var pageArea = document.getElementsByNameundefined&quot;pageArea&quot;);
  var blogPager = document.getElementByIdundefined&quot;blog-pager&quot;);

ifundefinedpostNum &lt;= 2){
  html ='';
  }

forundefinedvar p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

ifundefinedpageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

ifundefinedblogPager){
  blogPager.innerHTML = html;
  }


}


function showpageCount2undefinedjson) {

var thisUrl = home_page_url;
  var htmlMap = new Arrayundefined);
  var isLablePage = thisUrl.indexOfundefined&quot;/search/label/&quot;)!=-1;
  var thisLable = isLablePage ? thisUrl.substrundefinedthisUrl.indexOfundefined&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
  thisLable = thisLable.indexOfundefined&quot;?&quot;)!=-1 ? thisLable.substrundefined0,thisLable.indexOfundefined&quot;?&quot;)) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
  var thisUrl = home_page_url;

forundefinedvar i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substringundefined0,19)+post.published.$t.substringundefined23,29);
  timestamp = encodeURIComponentundefinedtimestamp1);

  var title = post.title.$t;

 ifundefinedtitle!=''){
  ifundefineditemCount==0 || undefineditemCount % pageCount ==undefinedpageCount-1))){
  ifundefinedthisUrl.indexOfundefinedtimestamp)!=-1 ){
  thisNum = postNum;
  }

  ifundefinedtitle!='') postNum++;
  htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

  }
  }
  itemCount++;
  }

  forundefinedvar p =0;p&lt; htmlMap.length;p++){
  ifundefinedp&gt;=undefinedthisNum-displayPageNum-1) &amp;&amp; p&lt;undefinedthisNum+displayPageNum)){
  ifundefinedfFlag ==0 &amp;&amp; p == thisNum-2){
  ifundefinedthisNum==2){
  upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  ifundefinedp==undefinedthisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  ifundefinedp==0){
  html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
  }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ undefinedp+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  ifundefinedeFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  ifundefinedthisNum&gt;1){
  ifundefined!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
  }else{
  html = ''+upPageHtml+' '+html +' ';
  }
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages undefined'+undefinedpostNum-1)+')&lt;/span&gt;'+html;

  ifundefinedthisNum&lt;undefinedpostNum-1)){
  html += downPageHtml;
  }

  ifundefinedpostNum==1) postNum++;
  html += '&lt;/div&gt;';

  var pageArea = document.getElementsByNameundefined&quot;pageArea&quot;);
  var blogPager = document.getElementByIdundefined&quot;blog-pager&quot;);

ifundefinedpostNum &lt;= 2){
  html ='';
  }

forundefinedvar p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

ifundefinedpageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

ifundefinedblogPager){
  blogPager.innerHTML = html;
  }

}

</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;
  if undefinedthisUrl.indexOfundefined&quot;/search/label/&quot;)!=-1){
  if undefinedthisUrl.indexOfundefined&quot;?updated-max&quot;)!=-1){
  var lblname1 = thisUrl.substringundefinedthisUrl.indexOfundefined&quot;/search/label/&quot;)+14,thisUrl.indexOfundefined&quot;?updated-max&quot;));
  }else{
  var lblname1 = thisUrl.substringundefinedthisUrl.indexOfundefined&quot;/search/label/&quot;)+14,thisUrl.indexOfundefined&quot;?&amp;max&quot;));
  }
  }

 var home_page = &quot;/&quot;;
  if undefinedthisUrl.indexOfundefined&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOfundefined&quot;.html&quot;)==-1){
  if undefinedthisUrl.indexOfundefined&quot;/search/label/&quot;)==-1){
  document.writeundefined'&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.writeundefined'&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
  }
  </script>

 3. Klik Save Template.

Untuk customize:

Korang boleh tukar code berwarna di bawah:

var pageCount=6; - Nombor 6 untuk show berapa banyak post per page. Setting ni mesti sama dengan setting pada Dashboard > Setting > Formatting > Show > 6 posts

var displayPageNum=10; - Nombor 10 untuk show berapa page pada navigation bar.

var upPageWord ='Previous'; - Boleh tukar Previous dengan Sebelum atau sebagainya.

var downPageWord ='Next'; -  Boleh tukar Next dengan Selepas atau sebagainya.