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

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

Pagination in Blogger | Stylify Your Blog

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

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

[テンプレート > HTML の編集] 画面を開き、次の文字列を検索する。
※[ウィジェットのテンプレートを展開] にチェックを入れない。
```
]]></b:skin>
```

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;}

次の文字列を検索する。
```
</body>
```

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'/>