带缩略图的相关文章

带缩略图的相关文章

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

这里要介绍的是不依赖任何第三方服务的Hack,相对于第三方的要麻烦一点,但也正是这些麻烦的地方,让此Hack拥有更强的可定制性。修改自Blogger PluginsOX牛闻,主要是把一些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文件,并上传到你的空间里,相信最终肯定能得到你满意的效果。

4 comments now

  1. Blogger真是强大,啥都做得出来!
    不过这个脚本,以前有用过类似功能的,标签的文章较多时,会很影响访问速度

    回复删除
  2. @Belen:
    是,不过通过减少max-result的数字大小可以明显加快速度,标签很多的话也不用担心显示数量的问题

    回复删除