Blogger 添加相关文章

@ Blogger 笔记

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

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

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

LinkWithin 缩略图列表
LinkWithin 缩略图列表
LinkWithin 文字列表
LinkWithin 文字列表

以下是我作为记录的 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 括号里为相应图片地址。比如我就替换成以下的模样。

更改后的缩略图
更改后的缩略图

评论