× 670字 × 4阅

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

更改后的缩略图
更改后的缩略图
标签页面显示某个标签下的所有文章,存档页面显示某个月的所有文章,如果全部都显示内容,未免过于冗长。所以以文章列表的形式会更加友好。今天要介绍的就是如何在标签页和存档页只显示标题的方法。效果如下。参考文章 Showing only post titles on archive and label pages。 在标签页只显示标题 步骤零:备份模板 步骤一:编辑 HTML 代码 搜索 <b:include data='post' name='post'/>,替换为以下代码: <!--Label and archive page title only hack--> <b:if cond='data:blog.searchLabel'> <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3> <b:else/> <b:include data='post' name='post'/> </b:if> </b:if> <!--/Label and archive page title only hack--> 步骤二:修改样式 .title-only 控制题目样式,比如我的代码如下: 推荐使用 Chrome 或者 Firefox 按 F12 在线修改,确定样式后复制到 css 里更快捷。 步骤三:保存模板 大功告成......
点击加载Disqus评论