Bloggerのいけてないページナビゲーションをカスタマイズする

Blogger(Simpleテンプレート)のページナビゲーションは、ページ数もわかりませんし、正直微妙です。
なのでカスタマイズしたいと思います。
なお、以下のサンプルを 参考 まるまる利用させて頂きました。

Add a Numbered Page Navigation Widget
http://www.widgetgenerators.com/2013/01/add-numbered-page-navigation-widget.html

ブログに掲載するにあたってちょっとだけ使いやすいようにしていますが、一時ソースは上記URLです。

この記事で実現できるページナビゲーションは以下の画像のようになります。

また、JavascriptとCSSをいじることによって様々なページナビゲーションを実装できます。

デフォルトのページナビゲーションは以下の通りです。
ちょっと何が何だかですね。

 これを以下の様にします。

それでは、実装方法です。

ページナビゲーションの実装方法

Bloggerにログインして、テンプレートからHTMLの編集をクリックします。
そして、Ctrl+Fで以下のものを探します。

</b:template-skin>

見つけたら、その下に以下のCSSを貼り付けます。
なお、このCSSを弄れば、好きなデザインのページナビゲーションにできます。

<style type='text/css'>
.page-navi {
  clear: both;
  margin: 10px auto;
  text-align: center;
}

.page-navi span,
.page-navi a {
  padding: 10px;
  margin-right: 5px;
  padding: 5px 10px;
  color: rgb(255, 255, 255);
  background: rgb(195, 195, 195);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.page-navi a:hover,
.page-navi .current {
  background: rgb(255, 132, 0);
  color: rgb(255, 255, 255);
  text-decoration:none
}

.page-navi .pages,
.page-navi .current {
  font-weight: bold
}

.page-navi .pages {
  border: none;
}
</style>

次に、テンプレートから以下のものを探します。
Ctrl+Fで探しましょう。

<!-- navigation -->
<b:include name='nextprev'/>

見つかった上記のものを消し、以下のものへ書き換えます。

<!-- page navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:include name='pageNavi'/>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:include name='pageNavi'/>
  </b:if>
</b:if>

次に、テンプレートから以下のものを探します。

<b:includable id='nextprev'>

見つけ出したらそのすぐ上に、以下のコードを貼り付けます(</b:includable>～<b:includable id='nextprev'>の～の間に貼り付けます)。
なお、pageNaviConfの設定を変更すると、1ページあたりの記事数などを変更できます。

<b:includable id='pageNavi'>
  <div class='page-navi'>
    <script type='text/javascript'>
      var pageNaviConf = {
        perPage: 5,
        numPages: 5,
        firstText: 'First',
        lastText: 'Last',
        nextText: "»",
        prevText: "«" }
</script>
<script src='http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/page-navigation.min.js' type='text/javascript'/>
<div style='clear:both;'/>
</div>
</b:includable>

上記コードの
http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/page-navigation.min.js
は、ダウンロードして、自前で用意したサイトにアップロードして使ってください。
その際、上記コードのURLの書き換えを忘れないでください。
いきなり使えなくなっても知りませんよ…。

これで終了です。
あとはちゃんと機能するか確認します。