带缩略图的相关文章

相关文章的显然是吸引读者继续阅读的好手段，而带图片的话当然就更具有吸引力啦，也无怪乎会出现不少像LinkWithin和无觅这样的服务，而且感觉使用这种方式的用户有越来越多的趋势。

这里要介绍的是不依赖任何第三方服务的Hack，相对于第三方的要麻烦一点，但也正是这些麻烦的地方，让此Hack拥有更强的可定制性。修改自Blogger Plugins与OX牛闻，主要是把一些style改为class，让你在修改时更方便一点，同时也解决了原方法中图片缩放导致便得难看的问题。

这里首先要给大家一点建议：最好使用Blogger自身或者Picasa的相册，因为它们会自动生成任意尺寸的缩略图，好看之余也加快了速度。而你就算使用了别的相册也没关系，尽管总体效果可能稍差点，但像长宽比被压缩得不成样的情况还是基本可以避免的。

首先，请进入Blogger后台，点设计，之后是修改HTML，点下载以备份一下你的模板，然后就可以正式开始了。

首先请找到]]></b:skin>，复制以下内容在其上面：

/* Related Posts */
#related-posts{
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts a {color:#000;} /* 链接的颜色 */
#related-posts a:hover {color:#000;} /* 悬浮时的链接颜色 */

.related-img {
width:104px; /* 图片的宽度 */
height:104px; /* 图片的高度 */
overflow:hidden; /* 针对非上述相册所用，防止图片太大溢出 */
}

.related-img img {
max-width:200px; /* 针对非上述相册所用，避免图片太大时只能看到图片小小的左上角的情况，增大数值可使图片更清晰，但改得太大看不到全局，减小太多则图片失真明显 */
}

.related-text {
width:100px; /* 文字部分的宽度 */
height:45px; /* 文字部分的高度 */
margin: 3px 0 0;
text-align: center;
}


根据上面的灰色注释进行修改吧，改好了可删去灰色部分，下同。

然后找到</head>，复制到上方：

<script type='text/javascript'>
var thumbsize="104"; //缩略图大小，针对Blogger及Picasa相册
var defaultimg="http://aooggg.googlecode.com/files/noimage.png"; //找不到缩略图时的替换图片地址 
</script>
<script language="javascript" type="text/javascript" src="http://pstrey-js.googlecode.com/files/relatedthumbs.js"></script>


继续，勾上扩展窗口小部件模板，搜索<div class='post-footer-line post-footer-line-1'>，找不到的话搜索<data:post.body/>也行，复制到下面：

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>
</b:if >
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:if ></b:loop ><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'> ox </a><a href='http://www.oxn.in/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; //显示相关文章的最大数量
var relatedpoststitle="Related Posts"; //标题
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if >
<!-- Related Posts with Thumbnails Code End-->

注意到里面斜体的6了吗？减小这个数值可以提高页面的载入速度，但相关文章的范围也会减少，一些老的文章显示不出来，增大数值的话则刚好相反。

OK，到了这里就基本大功告成了，对效果不满意的话，你还可以对CSS进行修改，更进一步地，还可以下载并修改JS文件，并上传到你的空间里，相信最终肯定能得到你满意的效果。