bonggiey: Numbered Page Navigation Bar For Blogger

Bar navigasi muka surat untuk blogger merupakan satu trick yang bagus untuk mencantikkan blog. Ia amat sesuai untuk blog yang mempunyai banyak post. selain itu, ia juga menyenangkan pengunjung untuk mengetahui berapa post yang kita ada.

Langkah 1: Masukkan kod CSS

*PERHATIAN! sila backup template anda didalam Download Full Template sebelum melakukan perubahan*

Pergi ke Dashboard >> Layout >> Edit HTML

Cari kod berikut:

]]></b:skin>

Sebelum kod tersebut, masukkan kod berikut:

.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: Masukkan Kod Java

cari kod berikut atau yang nak sama dengannya:

<b:section class=’main’ id=’main’ showaddelement=’yes’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

selepas </b:section>, masukkan kod berikut:

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=10;
  var displayPageNum=6;
  var upPageWord ='Previous';
  var downPageWord ='Next';

function showpageCount(json) {
  var thisUrl = home_page_url;
  var htmlMap = new Array();
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);

  var title = post.title.$t;

if(title!=''){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }

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

  }

  for(var p =0;p< htmlMap.length;p++){
  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
  if(fFlag ==0 && p == thisNum-2){
  if(thisNum==2){
  upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
  }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '<span class="showpagePoint">'+thisNum+'</span>';
  }else{
  if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
  }
  }

  if(eFlag ==0 && p == thisNum){
  downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
  eFlag++;
  }
  }
  }

  if(thisNum>1){
  html = ''+upPageHtml+' '+html +' ';
  }

  html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

  if(thisNum<(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += '</div>';

var pageArea = document.getElementsByName("pageArea");
  var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
  html ='';
  }

for(var p =0;p< pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&&pageArea.length>0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }
}

function showpageCount2(json) {

var thisUrl = home_page_url;
  var htmlMap = new Array();
  var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
  thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
  var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);

  var title = post.title.$t;

if(title!=''){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }

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

  }
  }
  itemCount++;
  }

  for(var p =0;p< htmlMap.length;p++){
  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
  if(fFlag ==0 && p == thisNum-2){
  if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'</a></span>';
  }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '<span class="showpagePoint">'+thisNum+'</span>';
  }else{
  if(p==0){
  html = labelHtml+'1</a></span>';
  }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
  }
  }

  if(eFlag ==0 && p == thisNum){
  downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
  eFlag++;
  }
  }
  }

  if(thisNum>1){
  if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
  }else{
  html = ''+upPageHtml+' '+html +' ';
  }
  }

  html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

  if(thisNum<(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += '</div>';

  var pageArea = document.getElementsByName("pageArea");
  var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
  html ='';
  }

for(var p =0;p< pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&&pageArea.length>0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }
}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
  if (thisUrl.indexOf("/search/label/")!=-1){
  if (thisUrl.indexOf("?updated-max")!=-1){
  var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
  }else{
  var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
  }
  }

var home_page = "/";
  if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
  if (thisUrl.indexOf("/search/label/")==-1){
  document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
  }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
  }
  }
  </script>

Tekan "save template"

Untuk perubahan:

var pageCount=10;

*didalam kod ini, Number 10 membawa maksud 10 post per muka surat. Number mestilah sama dengan tetapan blogger akaun pada Dashboard >> Setting >> Formatting >> Show >> 10 posts

Sekian.

Regard,

safif kun @ bonggiey

Pages

Thursday 24 March 2011

Numbered Page Navigation Bar For Blogger

No comments:

Post a Comment