「次の投稿」ナビを上部に移動する: Blogger Next post Previous post upper side.

次の投稿」前の投稿」にページタイトルを表示すること、
次の投稿」を次の記事」に変更すること、
はできた。

* Bloggerの「次の投稿」にページタイトルを表示するには？
＊次の投稿を「次の記事に」変えるには？

今度はこれをもっと上の方に表示したい。
記事の上に表示したい。
それを試みたが、記事の上にはかなわず、記事の直下、コメントフォームの上には移動できた。

記事の直下に配置できた。

その手順は次の通り。

Step 0  上記、Bloggerの「次の投稿」にページタイトルを表示するには？ の作業が完了している前提で。

Step 1  Blogger account にログインし、  Blogger ダッシュボードに行く

Step 2 Template -> HTMLを編集に行く。

Step 3  Ctrl+F で   <data:post.body/> を検索見つける。

 2～3個見つかるかもしれないが、2個めに移動。

Step 4 <data:post.body/> の直後に次のコードを挿入する。

  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>次の記事 &#187;&#187;</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&#171;&#171; 前の記事</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>

  <div class='clear'/>

Step 5 既存の「次の投稿」リンクを隠す。前記Step4で挿入したコードがテンプレートの上の方にあるので、見つける。<div class='blog-pager' id='blog-pager'> を検索。

Step 6 これをコンディションタグで隠す。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    ここに前記コードを配置する。
 </b:if></b:if>

例えば、次のようになる。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='blog-pager' id='blog-pager'>
     <b:if cond='data:newerPageUrl'>
       <span id='blog-pager-newer-link'>
       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
       </span>
     </b:if>
     <b:if cond='data:olderPageUrl'>
       <span id='blog-pager-older-link'>
       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
       </span>
     </b:if>
     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     <b:if cond='data:mobileLinkUrl'>
       <div class='blog-mobile-link'>
         <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
       </div>
     </b:if>
 </div>
 </b:if></b:if>

Step 7 テンプレートを保存する。
Step 8 スタイルを整えるには、次のようなCSSコードを、テンプレートに追加する。

/* 前の投稿・次の投稿 */
#blog-pager-newer-link {
float: right;
text-align: right;
padding: 0.2em 10px;
}
#blog-pager-older-link {
float: left;
text-align: left;
padding: 0.2em 10px;
}
#blog-pager-newer-link:hover {
background-color: #ffffcc;
}
#blog-pager-older-link:hover {
background-color: #ffffcc;
}
.blog-pager a {
background-color: transparent;
font-size: 25px;
}
.blog-pager span {
border-style: solid;
border-width: 3px;
border-color: #004d00;
width:240px;
}
#blog-pager-older-link-title {
font-size: 16px;
}
#blog-pager-newer-link-title {
font-size: 16px;
}