• Blogger用 ページナビゲーション　ガジェット版

Blogger用 ページナビゲーション　ガジェット版

投稿者 hyperhands 時刻: 水曜日, 4月 14, 2010 カテゴリー , ,
記事が多い時にリストページに表示される記事数を制限し、ページに分けて各ページへのリンクを作成することで、１ページの表示が無駄に長くなることがなくなり、読みやすくなります。
以前、スクリプトをテンプレート内に張り付けるバージョン、そして外部ファイル化するバージョンと公開してきましたが、今回は、ガジェット版の「簡単Pageナビ for Blogger Ver1.00」の公開です。
※　Blogger（＆Picasa）以外にホスティングサーバを必要としません。

使用方法

簡単Pageナビ Ver1.00 をあなたのBloggerへ追加
左側の「add to Blogger」ボタンを押下してガジェットを追加します。
次に、テンプレートHtml内で「'data:label.url'」として記載されている
「data:label.url」　を　「data:label.url + "?max-results=5"」　へと全て置換します。

テンプレートのデザインによって様々ですが、複数見つかるかもしれません。
これらは、すべて特定のラベルのリスト先頭ページを表示するためのリンクとして動作していますので、「設定＞フォーマット」メニューに設定した表示投稿数に合わせた数だけ表示するように変更します。


表示位置は、テンプレートに「id='blog-pager'」のタグが記載されていると思います。
リスト表示になるページでは、その中身をクリアして簡単Pageナビが表示されるようになります。

また「id='headline-updated'」があれば、その中身に最近更新した記事のヘッドラインを表示するようになっています。
※　通常のテンプレートにはヘッドライン用のIDは記載されていませんので、適宜このタグ「<div id='headline-updated'/>」をテンプレート内に記載すると動作するようになります。

好みに応じて、コード内のスタイルを調整してやれば完成です。
※　アーカイブページではページング動作しませんので、必要に応じて改造してご使用下さい。

















ご注意
  • 追加したガジェットは、「ブログの投稿」ウィジェットより後に読みこまれる位置に配置する。
  • ハイパーハンズへのリンク表示部は修正・削除をしないでご利用下さい。
  • ウィジェットのタイトルは無しにする。
※　リンク表記なしでのご利用をご希望の方は、有料にてお受け致します。
マウスオーバーで説明が表示されます。

ソースコード


グラフィック使用のCSS
背景に画像を使用したバージョンのCSSです。
@IEに対応するために、スクリプトも修正しました。

<style type='text/css'>
.blog-pager{
 border: 0px solid red;
}
.blog-pager table{
 padding: 0px;
 margin-left: auto;
 margin-right: auto;
 border: 0px solid blue;
}
.blog-pager tr{
 padding: 0px;
 margin: 0px;
 border: none;
}
.blog-pager td{
 padding: 0px;
 margin: 0px;
 align: center;
 vertical-align: middle;
 border: 0px solid green;
}
.headPager{
 display: block;
 padding-right: 8px;
 border: 0px solid black;
}
.headPager a:hover{
 font-weight: bold;
 text-decoration: none;
 color: darkblue;
}

#prevPageLink,#nextPageLink{
 margin-top: 4px;
 padding: 0px;
 border: 0px solid black;
}
.pageLink ,.currentPageLink{
 text-align: center;
 padding: 0px;
 margin: 0px;
 border: 0px solid red;
}

.currentPageLink {
 text-decoration: none;
 padding: 7px 12px 7px 12px;
 margin: 0px;
 color: white;
 font-weight: bold;
 text-decoration:none;
 border: 0px solid blue;
 background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S8ay2e9Wo0I/AAAAAAAABaY/y6NRdxWJwic/s128/currentPage.png) no-repeat;
}

.currentPageLink:hover{
 color: white;
 text-decoration: none;
}
.pageLink{
 padding: 7px 12px 7px 12px;
 margin: 0px;
 color: blue;
 text-decoration: none;
 border: 0px solid blue;
 background: url(http://lh5.ggpht.com/_BdRZoJ1uqRY/S8ay2dgBFBI/AAAAAAAABag/H_nPzqdr8U8/s128/itemPage.png) no-repeat;
}

.pageLink:hover{
 color: darkblue;
 font-weight: bold;
 text-decoration: none;
 background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S8ay2T0no-I/AAAAAAAABac/yo34eSyVgYY/s128/hoverPage.png) no-repeat;
}
// ヘッドライン
.headline{
  margin:20px;
  padding: 20px;
  font-size: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px; /* Safari、Google Chrome */
  -moz-border-radius: 10px; /* Firefox */
  background: beige;
  border: 1px solid #black;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
.headline li{
 list-style: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7XhO_pFrbI/AAAAAAAABQo/MH-fwAFdODw/s128/ico_dots7_4.gif);

}
.headline abbr{
  margin-left: 5px;
}
.headline h2{
 margin-top: 0px;
 color: #ff5555;
 text-shadow: 2px 2px 3px #550000; 
}
.headline h5{
 margin-top: 0px;
 margin-left:20px;
 border-bottom:3px double #112299;
 color: #1133aa;
 font-size:18px;
 font-weight: bold;
 text-shadow: 2px 2px 2px #silver; 
}
.headline .Temporary{
 margin: 20px;
 line-height: 40px;
}
.headline .updated{
 color: #3355ff;
 font-size:10px;
 font-weight: bold;
}
.headline .title{
 margin-left: 5px;
 font-size:13px;
 color: #11cc33;
 //text-shadow: 1px 1px 2px #000000; 
}
.headline .commentCount{
 margin-left:5px;
 font-size:13px;
 color: #ff3355;
 font-weight: bold; 
}

</style>

<script type='text/javascript'>
<!--
//--------------------------------------------
// 簡単Pageナビ for Blogger Ver1.00
// ハイパーハンズへのリンク部分は
// 修正・削除をしないでご利用下さい。
// 
// License agreement with GNU LGPL
// This code Created by S.Kobayashi
// Copyright (C) 2010 Hyperhands.com
//--------------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";

var pageNo = 0;
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var labelName = "";
var headlineID = 'headline-updated';
var blogPagerID = 'blog-pager';
var blogPager;

var nextImg = [
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Ol-f2WI/AAAAAAAABas/R53PdkxwHoE/s128/nextPage.png',
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-O57iR7I/AAAAAAAABaw/dLBx22puDqQ/s128/nextHover.png'
];
var prevImg = [
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Og6H_9I/AAAAAAAABao/LpDYqkrlmMw/s128/prevPage.png',
  'http://lh6.ggpht.com/_BdRZoJ1uqRY/S8a-OhetXMI/AAAAAAAABak/kY-k_7bcJUw/s128/prevHover.png'
];


function startBlogPager(){

  if( currentUrl.indexOf("#PageNo=" ) > -1){
    var strNo = currentUrl.substring(  currentUrl.indexOf("#PageNo=" )+8);
    pageNo = parseInt( strNo )-1;
  }

  if ( currentUrl.indexOf( labelPrefix ) > -1 ){
     isLabel=true;
  } else if( currentUrl.indexOf( '.html' ) == -1 ){
     isHome=true;
  } else if( currentUrl.indexOf( '/p/' )> -1){
     isStatic=true;
  } else {
    isItem=true;
  }


  viewPager();
}

function viewPager(){
  try{
    blogPager = document.getElementById( blogPagerID );
    if( blogPager != undefined ){
    if( isLabel || isHome ){ 
      if( isLabel ){
      blogPager.innerHTML = '';
      var t = document.createElement( 'table' );
      var tr = document.createElement( 'tr' );
      t.appendChild( tr );
      blogPager.appendChild( t );
      blogPager = t;
        var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
        labelName = currentUrl.substring( st );
        if( labelName.indexOf("/") > -1){
          labelName = labelName.substring(0,labelName.indexOf("/"));
        }else if( labelName.indexOf("?") > -1 ){
          labelName = labelName.substring(0,labelName.indexOf("?"));
        }
        feedUrl += "-/" + labelName;
        headlineUrl += "-/" + labelName;
        blogUrl += labelPrefix + labelName + "?";
      }else{
        blogUrl = blogUrl + "search?";
      }

      feedUrl = feedUrl + "?orderby=published";
      headlineUrl = headlineUrl + "?orderby=updated";
      blogUrl += "orderby=published&max-results=" + maxResults ;

      feedUrl += ("&max-results=" );
      headlineUrl += ("&max-results=" );
      var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
      var s = createScript( srcStr );
      blogPager.appendChild( s );

    }
    }else{
      alert( 'blogPagerID = ' + blogPagerID );
    }
  }catch( e ){
    alert( e );
  }
}
function appendTD( obj , className ){
  var td = document.createElement( 'td' );
  if( className != undefined ) td.setAttribute( 'class', className );
  td.appendChild( obj );
  blogPager.appendChild( td );
}
function createScript( srcStr ){
  var s = document.createElement( 'script' );
  s.setAttribute( 'type', 'text/javascript' );
  s.setAttribute( 'src', srcStr );
  return s;
}
function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = document.createElement( 'span' );
   head.setAttribute( 'class', 'headPager' );
   var txt = 'Pages( ' + totalPage + ' )';
   var ab = document.createElement( 'abbr' );
   ab.setAttribute( 'title', 'あなたのBloggerにも簡単Pageナビを追加\r\n -- Powered by Hyperhands');
   var a = document.createElement( 'a' );
   a.setAttribute( 'href', 'http://aspnet.hyperhands.com/2010/04/blogger_14.html' );
   a.setAttribute( 'target', '_blank' );
   a.setAttribute( 'style', 'background:url(http://lh4.ggpht.com/_BdRZoJ1uqRY/S8Txk6oMcBI/AAAAAAAABZM/xSSIJDiRbBs/ico_opwin7b.gif) no-repeat;padding-left:15px;' );
   a.appendChild( document.createTextNode( txt ) );
   ab.appendChild( a );
   head.appendChild( ab );
   appendTD( head );
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      getHeadline( i );
      var className = 'pageLink';
      if( pageNo == i) className = 'currentPageLink';

      var targetIndex = 0;
      var script;
      if( className != 'currentPageLink' ){
         var srcStr = feedUrl + 1 + '&start-index=';
         targetIndex = ( maxResults * i );
         if( targetIndex == 0 ) targetIndex = 1; 
         srcStr += ( targetIndex + '&alt=json-in-script&callback=redirectTargetPage' );
         script = createScript( srcStr );
      }
      var a = document.createElement( 'a' );
      var id = 'targetPageLink' + targetIndex;
      a.setAttribute( 'id', id );
      a.setAttribute( 'class', className  );
      a.appendChild( document.createTextNode( i+1 ) );
      if( script != undefined ) blogPager.appendChild( script );
      appendTD( a );
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}


function getHeadline( i ){
  try{
   if(i==0){
    var div = document.getElementById( headlineID );
    if( div != undefined ){
      var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
      blogPager.appendChild( createScript( srcStr ) );
    }
   }
  }catch( e ){
    alert( e );
  }
}

function viewHeadline( result ){
  try{

    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var idPrefix = '.post-';
      var feed = result.feed;
      if( feed.entry.length > 0 ){
        var h5 = document.createElement( 'h5' );
        var prefix = "";
        //if( isHome ) prefix = "このサイト";
        if( isLabel ) prefix = decodeURI( labelName ) + " で";
        h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
        div.appendChild( h5 );

        var ul = document.createElement( 'ul' );
        div.appendChild( ul );
        for( var i=0; i< feed.entry.length; i++){
          var entry = feed.entry[i];
          var h = document.createElement( 'li' );
          h.setAttribute( 'class', 'updatedHeadline' );
          var id = entry.id.$t;
          id = id.substring( id.indexOf( idPrefix  ) + idPrefix.length );// 将来のコメントHeadline化で使用する
          h.setAttribute( 'id', 'uHeadline-' + id );
        
          var d = document.createElement( 'span' );
          d.setAttribute( 'class', 'updated' );
          var upd = entry.updated.$t;
          var monthDay = upd.substring(5,10).replace('-','/');
          var time = upd.substring(10,16).replace('T',' ');
          d.appendChild( document.createTextNode( monthDay + time ) );
          h.appendChild( d );

          var t = document.createElement( 'a' );
          t.setAttribute( 'class', 'title' );
          t.setAttribute( 'href', getLink( entry ) );
          var title = entry.title.$t;
          var abbr = document.createElement( 'abbr' );
          abbr.setAttribute( 'title', '記事を表示するリンク' );
          abbr.appendChild( document.createTextNode( title ) );
          t.appendChild( abbr );

          // コメントカウント
          for(var j=0; j< entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '[ ' + commentCount + ' ]' ) );
                  c.appendChild( ab );
                  t.appendChild( c );
                }
              }
            }
          }// j loop

          h.appendChild( t );

          ul.appendChild( h );
        }// i loop
      }
    }
  }catch( e ){
    alert( e );
  }
}


function getLink(entry){
   var retLink = ''
    for(var i=0; i< entry.link.length; i++ ){
      if( entry.link[i].rel == 'alternate' ){
        retLink = entry.link[i].href;
      }
    }
    return retLink;
}


function getPrevNext(vector){
  try{
    var startIndex = 0;

    if( vector.toLowerCase() == "prev" ){
      startIndex = ((pageNo-1) * maxResults + 1);
    }else{
      startIndex = ((pageNo+1) * maxResults);
    }

    var imgArr = prevImg;
    if( vector.toLowerCase() == 'next' ) imgArr = nextImg;
    var id = vector.toLowerCase() + 'PageLink';
    var img = createImageHover( id, imgArr );
    
    var a = document.createElement( 'a' );
    a.setAttribute( 'href', 'javascript:void();' );
    a.appendChild( img );
    appendTD( a );

    var srcStr = feedUrl + 1 + '&start-index=' + startIndex  + '&alt=json-in-script&callback=' + vector.toLowerCase() + 'RedirectPage';
    blogPager.appendChild( createScript( srcStr ) );

  }catch( e ){
    alert( e );
  }
}

function createImageHover( id, imgArr ){
  var img ;
  try{

    img = document.createElement( 'img' );
    img.setAttribute( 'id', id );
    img.setAttribute( 'src', imgArr[0] );
    img.setAttribute( 'onMouseOver', 'this.src="' + imgArr[1] + '";' );
    img.setAttribute( 'onMouseOut', 'this.src="' + imgArr[0] + '";' );

  }catch( e ){
    alert( e );
  }
  return img;
}
function prevRedirectPage( result ){
  try{
    var targetLink = document.getElementById( 'prevPageLink' );
    var date = encodeDate( result.feed.entry[0].published.$t );
    var hrefStr;
    if( pageNo == 1) hrefStr =  blogUrl + '#PageNo=1';
    else hrefStr =  blogUrl + '&updated-max=' + date  + '#PageNo=' + pageNo ;
    addEventImage( targetLink, 'onClick', hrefStr );
  }catch( e ){
    alert( e );
  }
}

function nextRedirectPage( result ){
  try{
     var targetLink = document.getElementById( 'nextPageLink' );
     var date = encodeDate( result.feed.entry[0].published.$t );
     var hrefStr =  blogUrl + '&updated-max=' + date  + '#PageNo=' + (pageNo + 2);
    addEventImage( targetLink, 'onClick', hrefStr );
  }catch( e ){
    alert( e );
  }
}
function addEventImage( targetImage, event, hrefStr ){
  try{
    var scriptStr = 'location.href = "' + hrefStr + '";';
    targetImage.setAttribute( event, scriptStr );
  }catch( e ){
    alert( e );
  }
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById( 'targetPageLink' + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + '#PageNo=' + targetLink.innerHTML;
   else targetLink.href =  blogUrl + '&updated-max=' + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

function addLoadEvent( func ) {

}

startBlogPager();
-->
</script>

コメント(4)

hyperhands さんのコメント...

現在、当サイトで使用しているページナビゲーションは背景画像を使用したCSSのバージョンに変更しています。

この背景画像バージョンのCSSを公開しました。

2010年4月15日 16:45  
hyperhands さんのコメント...

現在、画像バージョンのCSSでIEの場合に「Prev,Next」の文字透過ができない不具合があります。

2010年4月15日 19:31  
hyperhands さんのコメント...

結局、画像バージョンはCSSのみでは対応できませんでした。
仕方なくブラウザシェアの多いIEに対応するために、HTML構造を変える必要があったためスクリプトも修正したものをアップしておきました。

2010年4月16日 5:29  
hyperhands さんのコメント...

ページローディングの高速化のため、コード・レイアウトを修正しました。
　修正内容と適用方法は、後日投稿いたします。

2010年4月24日 5:53  
コメントを投稿

関連記事
Gadgets
Javascript
ページング