PHÂN TRANG CHO TRANG CHỦ TRONG BLOGSPOT

Blogspot theo mặc định sẽ chỉ hiển thị phần "Bài đăng cũ hơn" ở dưới bài viết. Nhưng ta có thể hack một chút để biến nó thành các phân trang 1/2/3/4/.... như hình

Đầu tiên, ta chèn đoạn code CSS sau vào ngay trên dòng ]]></b:skin> trong phần chỉnh sửa HTML của Blog :

.showpageArea {padding: 0; margin:0;
}

.showpageArea a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
background-color: #6f6f6f;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #00558f;
color: #575757;
background-color: #3D3D3D;
}

.showpageNum a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #00558f;
color: #575757;
background-color: #5D5D5D;
}

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

.showpage a:hover {font-size:11px;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #000;
color: #fff;
background-color: #6f6f6f;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #00558f;
color: #fff;
background-color: #1589a2;
}

Tiếp theo, tạo một tiện ích HTML/javascript rồi dán đoạn code sau vào:

<script type="text/javascript">

var home_page_url = location.href;

var pageCount= 5;
  var displayPageNum=9;
  var upPageWord ='Trang trước';
  var downPageWord ='Trang sau';

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">'+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 src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>