4 Oct 2012

[Blogger] ページ番号付きのページナビゲーションを追加する簡単な方法 - Pagination in Blogger

Pagination in Blogger | Stylify Your Blog

Blogger テンプレートのカスタマイズについてあれこれ検索していたら、たまたま自分の好みにあう Page [現在のページ番号] of [全ページ数] で始まるページナビゲーションを見つけました。
しかも意外と簡単そうだったので、早速、追加してみることにしました。

手順は、次のとおりです。

  1. [テンプレート > HTML の編集] 画面を開き、次の文字列を検索する。
    ※[ウィジェットのテンプレートを展開] にチェックを入れない。
    ]]></b:skin>
  2. 1. で検索した文字列の前に次のコードを追加する。
    .blog-pager,
    #blog-pager {
      font-family:"Times New Roman", Times, serif;font-weight:normal;
      font-size: 12px;
      width: 700px;
      padding: 17px;
    }
    
    .showpageNum a,
    .showpage a {
      background: #069;
      color: #FFF;
      margin-right: .6em;
      text-decoration: none;
      font-size: 15px;
      font-style: italic;
      line-height: 0;
      text-align: center;
      padding: 12px 18px 12px;
      -moz-border-radius: 36px;
      -webkit-border-radius: 36px;
      border-radius: 36px;
    } 
    
    .showpageNum a:hover,
    .showpage a:hover {
      background: orange;
      color: #FFF;
      margin-right: .6em;
      text-decoration: none;
      font-size: 15px;
      font-style: italic;
      line-height: 0;
      text-align: center;
      padding: 12px 18px 12px;
      -moz-border-radius: 36px;
      -webkit-border-radius: 36px;
      border-radius: 36px;
    }
    
    .showpageOf {
      margin: 0 8px 0 0;
      font-family: 'Coming Soon', cursive;text-decoration:none;
      font-size: 100%;
    }
    
    .showpagePoint {
      background: orange;
      color: #FFF;
      margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
  3. 次の文字列を検索する。
    </body>
  4. 3. で検索した文字列の前に次のコードを追加する。
    <script type='text/javascript'>;
    var home_page=&#39;/&#39;;
    var urlactivepage=location.href;
    var postperpage=4;
    var numshowpage=4;
    var upPageWord =&#39;Prev&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
  5. [テンプレートを保存] ボタンをクリックする。
以上です。


Recommended Post Slide Out For Blogger