Wednesday, April 29, 2009

在不改变修改过模板下增加打星评分功能

首先切换到 布局 的 修改HTML 项目,找到这行代码:

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



在后面添加如下代码:

<b:if cond='data:blog.pageType == "item"'>



<span class='star-ratings'>


<b:if cond='data:top.showStars'>

<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>

</b:if>

</span>



</b:if>


接着往下面找到下列代码:




<!-- navigation -->

<b:include name='nextprev'/>



<!-- feed links -->

<b:include name='feedLinks'/>


最后跟在下面添加下列代码:




<b:if cond='data:top.showStars'>

<script src='http://www.google.com/jsapi' type='text/javascript'/>

<script type='text/javascript'>

google.load("annotations", "1");

function initialize() {

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);


</script>

</b:if>




就完工了!另外你注意到<script src='http://www.google.com/jsapi' type='text/javascript'/>这一行代码了吗?如果你已经加了<script src='http://www.google.com/jsapi' type='text/javascript'/>这行代码在博客开头的位置,那么可以把这行代码去掉,因为已经不需要了!

Saturday, April 18, 2009

给blogspot博客提供文章和评论总计功能

这个扩展hack就是可以给出你的Blogger博客的所有文章和评论总和。如图:



安装非常简单,只需要新建一个HTML/JavaScript,将如下代码复制进去就好了!



<div style="float: left;"><img style="width: 48px;" src="http://4.bp.blogspot.com/_ImJ3wuFG4BE/SN9OTw4Tc5I/AAAAAAAACzE/_CFoCwFO8aE/s00/stats.png"/></div>


<div style=" float: left; text-align: left;">

<script style="text/javascript">

function showpostcount(json) {

document.write(parseInt(json.feed.openSearch$totalResults.$t,10));

}</script>

<script src="http://ggq.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> 篇文章


<br/>

<script src="http://xuexiji.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> 个评论</div>

<div style="clear: both;"></div>



当然注意要把红色的http://xuexiji.blogspot.com 改成你的博客地址了!




注意绿色的http://4.bp.blogspot.com/_ImJ3wuFG4BE/SN9OTw4Tc5I/AAAAAAAACzE/_CFoCwFO8aE/s00/stats.png部分网址是此统计的图片效果,你也可以改成你想要显示的图片。

Thursday, April 9, 2009

给Blogger添加相关文章功能

本Hack是根据标签来判断文章相关性的,注意标签中不能包含像?/之类的字符,对文章的标签数量也没有限制。在咖啡鱼的教材中,是将相关文章放在 "页面元素"中,需要添加一个HTML/Javascript模块。本例有点改动,将相关文章放在文章后面,自己比较喜欢这种形式。

1、把下面代码放在<head></head>中。其中的"i < 12"是控制文章数量的,建议数值不要太大,以免影响浏览速递。

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link [k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 12) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

2、找到下面黑色的代码,在</b:if>与</b:loop>之间,插入如下红色的代码。注意:"max-results=12"是控制相关文章的显示数值。
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&amp;max-results=12"' type='text/javascript'/>
</b:if>

</b:loop>
</b:if>


3、找到自己想要显示相关文章的位置,将下面红色代码放进去,保存就OK那了。本例就放在评论前,如下面黑色代码。
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates(); printRelatedLabels(); </script> </b:if>

<div id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data: post.numComments == 1'>
1 条评论:
<b:else/>
<data:post.numComments/> 条评论:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data: post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data: comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author />

4、完成,看看效果吧!