Bloggerにページナビゲーションを導入する方法

http://customize-your-blogger.blogspot.com/2009/11/how-to-create-numbered-page-navigation2.html

1．Bloggerにログイン後、 [レイアウト] → [ページ要素] → [ガジェットを追加] → [HTML/JavaScript] をクリック。


2． [HTML/JavaScript] のコンテンツ欄に下記のコードを追加する。

<style type="text/css">
.showpageArea a {
text-decoration:underline;
}
 
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
 
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
 
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
 
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
 
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
 
.showpage a:hover {
text-decoration:none;
}
 
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>
 
<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 ='';
 
 
 
htmlMap[htmlMap.length]='/';
postNum++;
 
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
 
  
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);
 var title = post.title.$t;
   if(thisUrl.indexOf(timestamp)!=-1 ){
     thisNum = postNum;
   }
 
   postNum++;
   htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
 
}
 
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};
 
 
for(var p =0;p< banyaknomer;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; 
 
htmlMap[htmlMap.length]=labelHtml;
postNum++;
 
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);
 
 
 var title = post.title.$t;
 
   if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
   }
 
   if(title!='') postNum++;
   htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
    
 itemCount++;
}
 
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};
 
for(var p =0;p< banyaknomer;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>

3．次に以下の赤色の部分を変更し、[保存] をクリック。

• var pageCount=10;
  
  : メインページに表示する投稿記事数(下の画像にある「メインページの投稿記事数」に合わせるとよいと思います)

• var displayPageNum=6;
  
  : 表示するページナビゲーションの数字の数
• var upPageWord ='Previous';
  
  : ページナビゲーションの「Previous」の表示
• var downPageWord ='Next';
  
  : ページナビゲーションの「Next」の表示

4．保存後、 [HTML/JavaScript] ウィジェットを [ブログの投稿] の下に移動しページ要素を [保存] する。