Wednesday, July 21, 2010

Home » » Cara Memasang Page Number Navigation Bar Pada Blog

Cara Memasang Page Number Navigation Bar Pada Blog

Share

 
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.
 

10 comments:

♥aMyLiAiNdAhOuSe♥ said...

langkah 1 & 2 bole pilih ke atau dua2 kena gune?

zuar said...

2 2 kena gune..tp sblm tu buat backup template dlu k:-D

Anonymous said...

camne nak buat backup template bro,saya tak tahu....

♥♥Miss Farah♥♥ said...

tak blh jadi la..huhu

budak pinky said...

:D tq

karinkishido said...

x boleh..kuar error jek..

Anonymous said...

coder no 2 template blog aku xder arr..??

ZulFadli said...

tak jadi o0o T_T

shaimaa' che rahmat said...

nape sy nye xjd...huhu kua url web awk kt header lak...pls help me...=(

PotiaCasaDelarossa said...

dah try buat tp x jadi??... mungkin korang salah search code ni sbb ada sesetengah hacked templates code diatas berada amat jauh ...daripada kod ni


saya tak guna cara diatas..

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Singgah je???Komen la sikit.:-D

Related Posts Plugin for WordPress, Blogger...

Artikel Sensasi

Blog Archive