Blogger 添加相关文章

2013. 10.28 21:27 / 670字 / 1,054阅 / 0评

文章末尾有相关文章推荐可以提高阅读者粘性，对于他/她来说能够多读一篇感兴趣的文章也算见好事。今天就来介绍一下在 Blogger 中添加相关文章的方法。

在谷歌中搜索关键词“related posts blogger”，出来三条有价值的结果：blogger-related-posts、LinkWithin 和 How To Add Related Posts Widget To Blogger With Thumbnails。第一篇介绍了一个自定义能力很高的小工具，对我来说反而有点复杂。第二篇是大名鼎鼎的 LinkWithin，相信不用我多介绍，最后我也选择了它。第三篇是纯代码篇，虽然没有第一篇复杂，但也没有第二篇省事儿，于是还是排除了。

LinkWithin 简洁易用，在首页输入邮箱地址（没有广告收入所以只能靠卖 email 来赚钱了吧）、博客地址，然后选择博客平台（Blogger、独立博客 WordPress、TypePad 和其他），最后选择一下一共显示多少篇文章（3~5篇，范围有点小）。我选择了 Blogger，显示5篇。LinkWithin 还有个特点是，它会根据你的博文是否有图片来决定以何种形式显示，因此有缩略图版和文字列表版，自动切换。这反倒省去了我选择何种显示方法的麻烦。如果5篇文章中唯有一篇没有图片，那么它会提供默认的缩略图，这也是可以更改的。

以下是我作为记录的 css 样式，效果图如上所示。更多请看 Q&A。

/* LinkWithin
----------------------------------------------------------------*/
.linkwithin_div li {
    list-style: square!important;  
    line-height: 2!important;
}
.linkwithin_textlist {
    margin-left: 2em!important;
}
#linkwithin_logo_0 {
    display: none!important;
}
.linkwithin_div {
    background: #f9f9f9;
    margin: 1px -30px 0px;
    padding: 0 30px 20px;
    border-bottom: 1px solid #eee;
}
.linkwithin_inner {
    width: 100%!important;
}
.linkwithin_posts a {
    padding: 22px!important;
    border-right-color: #eee!important;
}
.linkwithin_posts a:hover {
    background: #eee!important;
}
.linkwithin_textlist a:hover {
    background: none!important;
}
.linkwithin_textlist a {
    padding: 0!important;
}
.linkwithin_filler_0 {
    background: url(https://lh3.googleusercontent.com/-RT54jWhpfj0/Umf-TlwZq8I/AAAAAAAAALw/SRF7sMsyOTI/s800/linkwithin-default.jpg)!important;
}
.linkwithin_posts {
    overflow: auto;
    border-left: 1px solid #eee!important;
    border-right: 1px solid #eee!important;
    margin-right: 4px!important;
}
.linkwithin_img_0 {
    border: 1px solid #eee!important;
}

LinkWithin 默认缩略图地址为：http://www.linkwithin.com/default.jpg，需要替换的话，请在代码里搜索 .linkwithin_filler_0，替换 background 括号里为相应图片地址。比如我就替换成以下的模样。