替换“较新的帖子”“较早的帖子”链接为文章标题

2013-10-23补充：6月26日的问题解决方法有三：
一、 (newerLinkTitle + " }") 和 ("{ " + olderLinkTitle) 中的箭头不能省略，建议用 < > 或者 { }，标签（Label）页面就能显示箭头帮助导航；
二、突破20篇文章限制；
三、用页码代替“上一篇”“下一篇”。详情可参考建立 Blogger 存档页面（二）。

2013-06-26补充：由于发现替换标题之后，标签（Label）页面无法显示“较新的帖子”、“较早的帖子”链接，导致只能显示该标签（Label）以下的前20篇文章。这可能与我更改了标签（Label）页面的显示方式有关，所以把此功能撤下。

回到了久违的 Blogger，又开始马不停蹄地折腾起来。就像跟小三离婚后又找回结发妻子复婚一样充满怀念却又不失激情。这几天为了修复这段“感情”付出了不少努力，情郁于中，不得不发泄，所以接下来就让我把“新仇旧账一起算”，像当初刚搬到 WordPress 洋洋洒洒了一系列新手笔记一样，这次定得好好总结一番，以启后人。今天要记录的是如何使 Blogger 能够拥有如 WordPress 般靓丽的上下篇文章导航。

也不知道是不是众所周知，Blogger 的“较新的帖子”和“较早的帖子”链接就像隔着衣服瘙痒一样，有是有，但力道不够。既然都给出链接，为什么不再友好一些直接给出对应标题，也好让人知道文章内容。难道是刻意保持神秘，希望能吸引点击？总之，就我个人而言，我还是喜欢能显示标题，这样更符合用户体验。如果你跟我想得一样，那么就接着往下看吧。

开始干活

一、加载 jQuery

由于实现这项功能得靠这货，所以请到 jQuery 官方主页引用最新的地址。目前最新的是1.10.1：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'/>

进入后台，选择 Template > Edit HTML，将以上代码粘贴至 </header> 前面。注意：如果你的模板里已经有类似代码，要不就替换为最新的，要不就不要变，不需要重复引用。

二、添加代码

在后台 Layout 界面最下方添加小工具，选择 HTML/JavaScript，复制以下代码在内容框，标题留空：

<script type="text/javascript">
  $(document).ready(function(){
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
      var newerLinkTitle = $("a.blog-pager-newer-link").text();
      $("a.blog-pager-newer-link").text(newerLinkTitle + " }");
    });
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
      var olderLinkTitle = $("a.blog-pager-older-link").text();
      $("a.blog-pager-older-link").text("{ " + olderLinkTitle);//rgt
    });
  });
</script>

其中 (newerLinkTitle + " }") 和 ("{ " + olderLinkTitle) 中的 } 和 { 是标题边上的箭头，可以自行替换，比如 》 和 《。鼠标悬停在标题上时，会显示“较新的帖子”或“较早的帖子”以帮助访客确认。

最终效果

参考文章

1. Replace Older & Newer post links with post titles
2. Customizing blog pager (Home, Newer Post & Older Post links)（如果你想要进一步修改“较新的帖子”、“较早的帖子”和“主页”链接样式）