Bloggerのオリジナルテーマにページ切り替えボタンを設置する

長いタイトルになってしまいましたが、Bloggerのオリジナルテーマにページ切り替えボタンを設置していきます。

既存のテーマであれば、標準で設置されているので気にすることは少ないのですが、オリジナルのでテーマをつくるとページ切り替えボタンが出てきません。

簡単に設置できそうな気はするのですが、ネットにある情報の多くがページ番号付きのボタンをメインに扱っていて（せっかく作るならコレくらいしたいですが！）シンプルな左右だけのボタンについて参考になる情報も少なかったので、ここでしっかり扱っていきます。

コードは既存のテーマを参考に作っていますが、よくよく見ると、公式のヘルプにもそれらしいことが書いてあったので、そちらも参考にしながらすすめてみてください。

Bloggerのページ切り替えボタンの働き

投稿の一覧であっても、各記事であっても、前後の画面に移動をするために必要になります。

このページであれば下の方にある「←」「家」「→」のボタンです。

記事一覧のページであれば、最初に10件の記事を表示して、ボタンを押すと11件目から表示という働きをします。各記事であれば、前後の記事への移動です。

ページによって処理が違いますが、コードはいたってシンプル。では、Bloggerにページ切り替えボタンを実装していきましょう。

<!--教示処理分岐-->
<ul>
<b:loop var='post' values='data:posts' >
<b:include cond='data:blog.pageType == "index"' name='PostList' data='post'/><!--トップ・カテゴリ-->
<b:include cond='data:blog.pageType == "item"' name='PostShow' data='post'/><!--記事の表示-->
</b:loop>
</ul>
</b:includable>	

【コード11】

<!--ページ移動ボタン教示の処理-->
<b:includable id='nextprev'>
<div style="display: flex; justify-content: space-between;" class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a class="waves-effect btn-large orange" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><i class="material-icons ">arrow_back</i></a>	
<b:else/>
<a class="btn-large disabled btn-large orange"><i class="material-icons">arrow_back</i></a>
</b:if>
<a class="waves-effect btn-large orange" expr:href='data:blog.homepageUrl' expr:title='data:newerPageTitle'><i class="material-icons">home</i></a>
<b:if cond='data:olderPageUrl'>
<a class="waves-effect btn-large orange" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class="material-icons ">arrow_forward</i></a>
<b:else/>
<a class="btn-large disabled btn-large orange"><i class="material-icons">arrow_forward</i></a>
</b:if>
</div>
</b:includable>

ここでプレビューをクリックしてみましょう。左右のボタンと家ボタンが表示されると思います。

これでページの切り替えができるようになりました。記事一覧・各記事同じコードで済むのは助かります。