[Blogger.com] Ссылки постраничной навигации

На Blogger стандартная навигация по страницам архива и отдельным сообщениям оригинальностью не блещет. Две стандартные ссылки «Предыдущие» и «Следующие», да ссылка на главную между ними. Помимо того, что это не оригинально, это, в первую очередь, еще и противо-интуитивно и не удобно: совсем не понятно, почему «Предыдущее» ведет на следующую страницу, а «Следующее» — на уже просмотренную. Здесь временна́я направленность противоречит логической. На мой взгляд, гораздо лучше использовать слова «Раньше» и «Позже».

Текст ссылок Blogger берёт из своих внутренних переменных, но нам способа настроить их не предоставляет. Поэтому находим в шаблоне сегмент nextprev и правим наживую.

Было:

<b:includable id='nextprev'>
  <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>

  </div>
  <div class='clear'/>
</b:includable>

Стало:

<b:includable id='nextprev'>
  <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;' 
      title='Позже'>← Позже</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;' 
      title='Раньше'>Раньше →</a>
      </span>
    </b:if>

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

  </div>
  <div class='clear'/>
</b:includable>

Можно на этом не остановиться и пойти дальше. Например, убрать лишнюю ссылку на главную, предвинуть ближе к друг другу 2 наши ссылки и поместить между ними тире. Итоговый вариант кода:

<b:includable id='nextprev'>
  <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;' 
      title='Позже'>← Позже</a>
      </span>
      <b:if cond='data:olderPageUrl'>
        —
      </b:if>
    </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;' 
      title='Раньше'>Раньше →</a>
      </span>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

И соответствующие правки в CSS:

#blog-pager-newer-link {
  float: none;
  margin-left: 0px;
  display: inline;
 }

#blog-pager-older-link {
  float: none;
  display: inline;
 }

#blog-pager {
  text-align: center;
  font-weight:bold;
 }

Что получилось, можно увидеть внизу любой страницы этого блога.