Blogger に次の記事と前の記事のリンクを設置する方法

• 概要
• 環境
• サンプルコード
• 最後に
• 参考サイト

概要

リンクを追加する方法を紹介します

環境

• Blogger 2025/09/22
  • テンプレート Contempo (light)

サンプルコード

data:olderPageUrl と data:newerPageUrl を使います
今回は記事の下部に表示していますが好きな箇所に設置してもらっても OK です

ポイントは data:view.isPost が使えるスコープで行いましょう

<b:includable id='postFooter' var='post'>
   <div class='post-bottom'>
   <div class='post-footer float-container'>
      <b:include name='footerBylines'/>
      <b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>
      <!-- 独自追加2025/09/22 -->
      <b:if cond='data:view.isPost'>
         <!-- float解除で強制改行 -->
         <div style='clear: both;'/>
            <div class='post-nav'>
               <b:if cond='data:olderPageUrl'>
                  <a class='post-nav-btn older' expr:href='data:olderPageUrl'>前の記事</a>
               </b:if>
               <b:if cond='data:newerPageUrl'>
                  <a class='post-nav-btn newer' expr:href='data:newerPageUrl'>次の記事</a>
               </b:if>
            </div>
            <style>
               .post-nav {
               display: flex;
               justify-content: space-between; /* 左右端に配置 */
               margin: 20px 0;
               }
            </style>
      </b:if>
      <!-- 独自追加2025/09/22 -->
      </div>
      <b:if cond='data:view.isSingleItem'>
         <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/>
         <b:else/>
         <b:include data='post' name='postFooterJumpLink'/>
      </b:if>
   </div>
</b:includable>

最後に

テンプレートによって使える変数などがことなるので注意しましょう
data:post.next と data:post.previous が使えるらしいのですが自分は使えませんでした

参考サイト

• https://www.techyleaf.in/how-to-add-previous-next-buttons-to-blogger/