Bloggerの個別記事のページナビゲーションに記事タイトルをつける方法

完成図

多くのブログで個別記事に前後の記事のページのリンクがついてますが、それをBloggerで実現できないかなと思っていたのですが、なんとかできました。イメージ的にはこういう感じになります。

サンプルソース

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="navigation_post">
 <b:if cond='data:newerPageUrl'>
<span style="float:left;"><a expr:href='data:newerPageUrl' id="newxx">新しい記事</a></span>
 </b:if>

 <b:if cond='data:olderPageUrl'>
 <span style="float:right;"><a expr:href='data:olderPageUrl' id="oldxx">以前の記事</a></span>
 </b:if>
</div>
<div style="clear:both;"></div>
<!-- ページャのスクリプト -->
<script type="text/javascript">
// <![CDATA[
function showTitleOld(root) {
  var title="";
 for (var i = 0; i < root.feed.entry.length; i++) {
    title= root.feed.entry[i].title.$t;
  }
  document.getElementById("oldxx").innerText = title+">>";
}
function showTitleNew(root) {
  var title="";
 for (var i = 0; i < root.feed.entry.length; i++) {
    title= root.feed.entry[i].title.$t;
  }
  document.getElementById("newxx").innerText = "<<"+title;
}
//]]>
</script>

<b:if cond='data:newerPageUrl'>
<script type='text/javascript'>
  var sHome="<data:blog.homepageUrl/>";
  var sNewURL="<data:newerPageUrl/>";
  sNewURL = sNewURL.replace(sHome, "");
  sNewURL = "/" + sNewURL;

  document.write(unescape("%3Cscript")+" src='"+sHome+"/atom.xml?redirect=false&amp;path="+sNewURL+"&amp;max-results=1&amp;alt=json-in-script&amp;callback=showTitleNew' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
</b:if>


<b:if cond='data:olderPageUrl'>
<script type='text/javascript'>
  var sHome="<data:blog.homepageUrl/>";
  var sOldURL="<data:olderPageUrl/>";
  sOldURL = sOldURL.replace(sHome, "");
  sOldURL = "/" + sOldURL;

  document.write(unescape("%3Cscript")+" src='"+sHome+"/atom.xml?redirect=false&amp;path="+sOldURL+"&amp;max-results=1&amp;alt=json-in-script&amp;callback=showTitleOld' type='text/javascript'"+unescape("%3E%3C/script%3E"));
</script>
</b:if>
<!-- /ページャ -->
</b:if>

テンプレートに上記のようなものを追加すれば、その位置に表示されます。

テンプレートでは、data:newerPageUrl、data:olderPageUrlのように記事のURLだけは取得できるので、そのURLからフィード（Feed）情報から記事タイトルを取得してそれに置き換えるという風にしています。

サンプルソースは、ベタベタに書いてますのでわかりやすいとはおもいますが・・・。

挿入箇所

Blog1のmainあたりに以下の部分があるかと思います。

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

ここに以下のように変更します

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- navigation -->
    <b:include name='nextprev'/>
</b:if>
ここに、上記のサンプルをコピペする

原理

以下のようにPath指定でフィード（Feed）を取得できることを利用しています。

https://blog2.k05.biz/atom.xml?redirect=false&path=/2012/04/00609.html
https://blog2.k05.biz/feeds/posts/default?redirect=false&path=/2012/04/00609.html

「クリボウの Blogger Tips: Blogger の投稿ページ URL からその投稿のみ記載のフィードを得る方法」を参考にさせていただきました。