Blogger小技巧之三： 在你的每一篇文章之后加上几个“相关文章”

想让你的读者在你的Blogger上面停留更长时间？想让他们读完一篇之后再读一篇？这个“相关文章”的功能就可以做到！

这个功能是根据你的每个帖子的label，自动找出几个同label的帖子放在下面，所以顾名思义它就叫“相关文章”。你的label越多，这个功能越有意思！点下面这个链接看看效果吧：

http://bulake83.blogspot.com/2011/06/9-2.html#ending

前面我说过，我今次介绍的3个小技巧都不需要懂html就可以的。当然，今天会提到一些html的东西，但是不需要你自己会编，只要你懂得如何“查找”和“替换”就能行了（用Word的人都会吧！）。

ok！现在开始！

1. 首先在blogger里面进入“Design”，然后点“Edit HTML”，我用的老版的控制界面，很容易找到这个tab。新版的在“Template”里面，然后也是点“Edit HTML”。

2. 在这个界面中，有个check box是“Expand Widget Templates”，点中它。

3. 搜索</head>

4. 搜到后，用下面这段代码替换这个</head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:20px;
padding-left:5px;
}

#related-posts h2{

font-size: 1.3em;
color: white;
font-family: 微软雅黑, &#8220; Times, serif;
margin-bottom: 0.2em;
margin-top: 0em;
padding-top: 0.1em;
padding-left: 0.4em;
background-color: #3060B2;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewxVlPiH0_jyVnjh2Tes7QqFAEw4r9jw7CzBbIrJRvyFDpVkvu9Ss8qU4t2MtSR-_IIm9C2ddGvt7iW9STpqTR2HexM4zvclZqwbvNk5W8d_WNfXJEbXJT9qPyjJ1Rp7Re-ebQUfLzAs7/s1600/3206799609.jpg&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;您可能会对我的这些文章感兴趣&#65306;&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

注：你可以把上面那句：

您可能会对我的这些文章感兴趣

改成：“这些文章也很有趣”，或者“相关文章”等。

上面还有一句话是说，如果你的帖子没有图的话，那么“相关文章”会选一个默认图给它：

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewxVlPiH0_jyVnjh2Tes7QqFAEw4r9jw7CzBbIrJRvyFDpVkvu9Ss8qU4t2MtSR-_IIm9C2ddGvt7iW9STpqTR2HexM4zvclZqwbvNk5W8d_WNfXJEbXJT9qPyjJ1Rp7Re-ebQUfLzAs7/s1600/3206799609.jpg&quot;;

你可以替换里面的这个：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewxVlPiH0_jyVnjh2Tes7QqFAEw4r9jw7CzBbIrJRvyFDpVkvu9Ss8qU4t2MtSR-_IIm9C2ddGvt7iW9STpqTR2HexM4zvclZqwbvNk5W8d_WNfXJEbXJT9qPyjJ1Rp7Re-ebQUfLzAs7/s1600/3206799609.jpg

换成你想用的某副图片的地址即可。注意图片大小要是72x72的。我目前的默认图是这个：

5. 现在搜索：

post-footer-line post-footer-line-1

你应该可以搜到1-2个结果，其中一个结果大概是这样的：

<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>

就在这个结果的<div class='post-footer-line post-footer-line-1'/>和<div class='post-footer-line post-footer-line-2'/>的中间，另起一行，贴入以下代码：
 <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->
注，这里面有一个：

max-results=8

就是控制你的每篇文章底部显示几个相关文章的。我的blogger的宽度大概显示7篇最合适，你可以根据自己的blogger的情况来调整。注意，如果你想显示n篇，那么在上面的max-results=后面就要填n+1的那个数字。比如说我想显示7篇，那么就在后面写一个8。

6. 点击下面的Save Template，然后去你的Blogger看看效果吧！希望你会喜欢！