2012-07-21

前後の記事へリンクを設置

Bloggerテンプレをカスタマイズしてたら、
個別記事ページの下に prev, next リンクが無いことに気づく。
デフォルトのデザインの時はあったっけか?

とりあえずあった方が便利なので頑張ってつけてみることに。
STheme」というテンプレート用なので、他のテンプレだとコードが違うかも。
  1. htmlにcssを貼る。
    .prevnext{margin:0;padding:0.6em 0;width:100%;overflow:hidden;}
    .prev-link{float:left;}
    .next-link{float:right;}
  2. htmlのウィジェットのテンプレを展開。
    <div class='postmetadata'> というコードを検索。
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='box'>
        <div class='postmetadata'>
          <small>
            This entry was posted on <b:if cond='data:post.dateHeader'><data:post.dateHeader/></b:if><b:if cond='data:post.labels'> and is filed under <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' expr:title='&quot;View all posts in &quot; + data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>. You can follow any responses to this entry through the <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>RSS 2.0</a>.<b:if cond='data:post.allowComments'> You can <a href='#respond'>leave a response</a>.<b:else/> Responses are currently closed.</b:if>
          </small>
  3. 2.の一行目 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    の下に、次のコードをペースト。
    <div class='prevnext'>
    <b:if cond='data:newerPageUrl'>
    <div class='next-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'>next post</a> &#187;
          </div>
        </b:if>
    <b:if cond='data:olderPageUrl'>
    <div class='prev-link'>
          &#171; <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'>prev post</a>
    </div></b:if>
    </div>
    
    次の記事があったらそこにリンクを貼る。前の記事があったらそこにリンクを貼る。 っていう記述っぽい。一応これでリンクが貼れたので、メモまで。

0 件のコメント: