「次の投稿」ナビを上部に移動する: 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;
}
  • このサイトに新規記事を投稿する時、同時に Facebook にも投稿するように設定している。 Next Scripts: Social Networks Auto Poster  というプラグインを利 ...
  • WordPress では、タグクラウドにそれぞれのタグの投稿記事数が表示されないのが標準であるが、時に投稿数が表示されているものもみかける。 どうすれば記事数を表示できるのか、調べてみたが、これがなか ...
  • FlexSlider は Celtispack プラグインパック に含まれていて、画像ギャラリー作成時に、FlexSlider を選択できる。 このサムネイルが70x70pxで小さいので大きくする方法 ...
  • Blogger からKusanagi-WordPress への移転が完了し、一段落したので、これまでの経緯を振り返り、次回のためのマニュアルとして記す。 BloggerからWordPressに移行決 ...
  • Blogger に表を挿入するには、ExcelよりもGoogleDoc Spreadsheets からコピペした方が、書式が反映されやすい。 バンコクでミャンマーVISAをとるには バンコクでミャンマ ...
  • 今時のCMSを調べてみると、Wordpress の他に、Concrete5 、Modx、Drupal 等があった。Concrete5 を使ってみることにした。 お名前コムVPS、CentOS Linu ...
  • 支那ブロック回避対策でBloggerから引っ越しを検討する際に、あらためてVPSサービスの現状を調べてみた。 rootでログインできる自前サーバーである。 現在はお名前.com VPSを使用して、wo ...

タグクラウド

blogger カテゴリ人気記事 Views most

blogger・ブログ カテゴリ人気記事 月間

20151106

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 29
20151106