色彩斑斓: Blogger

显示标签为“Blogger”的博文。显示所有博文

导出Blogger文章和评论

Blogger一再不正常，相信好多人都希望迁走，一般用过Blogger的人相信也就不愿意再粘Live spaces，baidu空间之类的怪物了吧（就不提某某新浪，垃圾Qzone了）。其实个人博客最好的就是有自己的域名和独立的稳定的空间，Blog程序Wordpress是首选。

无论你是不是打算迁出去，做一下备份总比被封之后，啃鸡肋的时候强。

可以去Yo2.cn注册一个帐号，在插件里启用Blogger import插件，然后把文章导进去，另外也提供导出插件。导入的时候不要一次性导入，文章太多可能中断，前功尽弃。

通过CSS应用背景图像

因为喜欢新的Office2007的界面，所以很想使用一下，想来想去，觉得写篇Blog过过瘾比较合适，嘿嘿。比较遗憾的是无论是Word2007还是Windows live writer都不支持Blogger的标签，害得我每次发布了还要到Blogger去添加标签。背景图像是CSS中最重要的应用之一。

可以这样说，如果没有背景图像，就不会产生网页设计师这种职业。我们可能遇到过好多非常漂亮的Blog，它们漂亮的原因皆因运用了大量的背景图片。用CSS应用背景图像是非常简单的。

CSS2中暂时不支持对同一标签应用多个背景图像，但在下一代CSS3中将支持多个背景图像。鉴于此，有时候我们不得不添加一些无语义的标签（大多时候添加空DIV），来为同一模块添加多个背景图像。
语法：background : background-color background-image background-repeat background-attachment background-position
现在并不需要记住语法，我们可以在例子中理解。例如我们要给网页的主体应用一个背景图片，我们可能会写下这样的代码：

Body {background:#FFFFFF url(图片地址) repeat-y fixed left top;}

这条语句的意思是页面的背景颜色为#FFFFFF，背景为"图片地址"，在Y方向上平铺，背景图像固定，对准左上角。可能我们不会应用到背景所有的属性，不需要的可以省略，但要遵从一定的顺序。

以前写过修改页首图片的教程，现在我们看一下Blogger头部的CSS，以及如何修改页首图片。不同的模板CSS可能不一样，请酌情修改，下面是我的模板的CSS：

#header {
width: 96%;
height: 200px;
background-color:
$bodyBgColor;
background: url(http://vvvfly.googlepages.com/f.jpg)
center;
margin: 0 auto;
color: $headerTextColor;
padding: 0;
border-left: 3px solid $borderColor;
border-right: 3px solid
$borderColor;
border-top: 3px solid $borderColor;
}

根据以前我们学过的知识，我们可以知道，这是一个ID为Header的类，应用背景图像的一句为background:
url(http://vvvfly.googlepages.com/f.jpg) center; 这一句很简单，就是引用了http://vvvfly.googlepages.com/f.jpg这张图片，center让它居中显示，没有设定Repeat，浏览器默认水平和垂直的重复显示这个图像，如果你的显示器超过19寸，就可以看到平铺的图片。

对链接应用背景图像

背景图像在网页设计中的应用是非常广泛的，下面再举一个我们司空见惯的例子。我随意找了一个Blog（http://iyubao.blogspot.com/），截取了下面这张图片，这是一组链接，我们可以看到每个链接的左边有一张小小的图片（http://online.sccnn.com/icon/450/arrow_065.gif）。

它是怎么实现的呢？我们通过CSS把内容向右偏移一下为图片留出空间，然后应用背景图像，并让图像对准左边就可以了。在上面的图片中，它可能是这样写的：

.footer-box li {padding-left:20px;
background: url(http://online.sccnn.com/icon/450/arrow_065.gif)
no-repeat left center; }

当然，作者可能对链接还应用了其它样式，或许所写的代码与此有一些出入，但在此我们只介绍与我们所讲的内容有关的样式内容。看了上面的例子，你是不是可以让你的Blog的链接更漂亮一些呢？

CSS背景图像另外比较常用的就是建立圆角框等。

CSS练习——Tuscany Luxury Resorts

假期里将之前买的Css Mastery仔细读了一遍，里面有个例子，觉得设计得蛮不错，所以用了一下午的时间把它搬到了Blogger上。只完成了框架，细节部分如颜色，字体等等有待针对Blogger完善。快过年了，所以最近没时间了，放着吧。有兴趣可以下载源代码自己修改一下。

原作品地址
Blogger版本地址
所有与此模板相关的源代码及图片下载地址

今天是情人节，祝愿天下所有有情人终成眷属！！

预祝新年快乐，在新的一年里写下自己的目标哦！

Blogger Buzz中文版

http://buzz-zh-cn.blogspot.com/

Blogger Buzz是Blogger官方Blog，提供最权威的Blogger升级状况及Blogger服务介绍。

另外个人觉得比较有用的就是可以在Blogs of note上面找到许多有特色的Blog。

其它相关Blogger官方网址：

Blogger status：http://status.blogger.com/
Blogger Help： http://help.blogger.com/
Blogger Group：http://groups.google.com/group/blogger-help

刚才注册了两个Blogger地址，http://buzzcn.blogspot.com和http://blogsofnotecn.blogspot.com不知道为什么Google要用那么长而难记的地址。

域名绑定昨在中国被封

没什么好说的了。也不会心痛了，习以为常。

Google说，Don't be evil。这，比登天还难。

最完美的BSP：支持域名绑定

Blogger已经支持域名绑定，非FTP方式，原来的XXX.blogspot.com域名将指向你自己的域名。所有的Blog数据仍保存在Blogger服务器上。太完美了。

步骤：1.Blogger的设置步骤
设置——发布——选择“切换到自定义域”，再在“您的域”填上自己的域名即可。
2.自己域名的DNS设置。
在域名申请商的后台管理那里添加一条类型为“CNAME”值为“ghs.google.com”的DNS解析。
域名支持二级域名和目录的方式。

我的域名：www.coloor.net(域名解析一般几个小时后生效)

更新：域名绑定在中国被封

展开折叠评论升级版

Thanks to singpolyma.

1.展开代码，紧跟</head>之前，添加下面代码。

<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<div class="commentelem"><div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2706908' type='text/javascript'></scrip>
<script type="text/javascript">
function toggleitem(postid,linkid,newtxt,displaytype) {
if(!displaytype) {displaytype = 'block';}
var whichpost = document.getElementById(postid);
if (whichpost.style.display != "none") {
whichpost.style.display = "none";
} else {
whichpost.style.display = displaytype;
}
if(linkid) {
var lnk = document.getElementById(linkid);
lnk.href = "javascript:toggleitem('"+postid+"','"+linkid+"','"+lnk.innerHTML+"');";
lnk.innerHTML = newtxt;
}
}//end function toggleitem
</script>

2.找到

<b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'>

紧跟它之前添加以下代码：

<b:loop values='data:post.feedLinks' var='f'>
<b:if cond='data:blog.pageType != "item"'>
<script expr:src='data:f.url + "?alt=json-in-script&amp;callback=peekaboo_comments_display"' type='text/javascript'/>
</b:if>
</b:loop>

3.找到

<b:includable id='comments' var='post'> <div class='comments' id='comments'>

将红色部分替换为下面部分：

<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>

4.找到

<b:includable id='main' var='top'>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

红色部分替换为：

<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>

5.找到

<b:includable id='post' var='post'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

红色部分替换为：

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

最后保存模板。

Singpolyma模板

Singpolyma提供了自己的模板下载,示例可以去作者的Blog查看。

Basic template - 基本模板，包括作者Blog上的各功能，像收缩评论等

Comment Form - 基于基本模板，添加了Lightbox式的评论，上一篇文章中介绍的。

Comment Photos and Highlighting - 基于基本模板。显示评论者照片，突出显示评论

Blogger的页内评论

前几天介绍了Lightbox， Singpolyma这个想法实在是高明，通过Lightbox不离开页面添加评论，现在发现的BUG就是在IE7中验证码不能正常显示，估计过几天就会修复。可以稍等几天再添加此Hack。

方法见Yee 或原文

去掉首页地址多余部分

制作者：Singpolyma
Blogger默认的首页地址为：http://USERNAME.blogspot.com/index.html事实上那个Index.html没什么用处，看起来也很烦。点击下面按钮去掉它。

帮别人去掉，点下面按钮。

添加Google Maps

代码存在一些问题，下课后继续修改。^_^ 又一中午没睡觉。郁闷!

成功啦，原来作者的代码中多了两个空格，晕死。看鱼做的示例.

1.像以前添加Google Ajax search一样，先到官方网站上申请一个Key，地址在这儿。

2.备份你的模板。一定要注意这一步，不要出错的时候后悔莫及。

3.紧在</head>之前，添加下面代码。在这一步，我们可以设定默认的Google maps加载时的地点，要用到经纬度，可以通过Google earth得到。经纬度格式示例：4.700000, 52.300000

我实在没办法了，因为只要把代码复制到这上面，就不能正常显示，因此放在了一个文本区域中,如果还不行,那么建议你不要添加了,因为用处不大

4.保存模板，可能会弹出错误提示，可以忽略，因为你申请的Key是为你的Blog地址，而此时的地址是beta.blogger.com

5.现在你只要粘贴下面代码就可以把地图放在文章或侧边栏里了。

<div id="map" style="width:360px; height:260px; border:solid 1px #000000;">Loading map...</div>

via BeautifulBeta

漂亮的引用区域修饰

之前有有一篇类似的，看这儿。

添加上面这种样式，在CSS里添加下面代码，其中那张引号的图片请下载并自己上传。

blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("图片地址") 5% no-repeat #FFF8DD;
}

此样式相应代码，红色十六进制为上下边框的颜色，可自己修改：

blockquote{
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

via BlogU

一个Blogger模板站点

可能建站不久，所以模板不多，但是都非常精美。模板是为以前的Blogger设计的，比较适合记录心情，体现Blog最原始意义的朋友们使用。因为你需要的并不是多少功能，只要看着舒心就好。

访问Blogger Templates

以日历形式显示文章日期

效果及原文请见良人的大秘寶，就是把文章的日期用一张日期的小图片替换。

1.添加CSS

.CAL { background-image: url('http://klcintw.images.googlepages.com/icon-calendar.gif background-repeat: no-repeat; width: 32px; height: 45px; float:left; padding-right:8px; } .MONTH { padding-top: 10px; text-align: center; font-family: "Arial Narrow" font-size: 9px; } .DAY { margin: -2px 0px 0px 0px; padding: 0px; font-family: "Courier New" font-size: 18px; font-weight: bold; text-align: center; }

2.添加JS

<script language="javascript" type="text/javascript" > function makeCal(id,ymd) { var postDate = new Date(Date.parse(ymd)); var panel = document.getElementById("divCal_"+id); panel.innerHTML = "<div class='CAL'><div class='MONTH'>"+postDate.getFullYear()+"-"+(postDate.getMonth()+1)+"</div><div class='DAY'>"+postDate.getDate()+"</div></div>" } </script>

3.找到下面代码：

<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

红色部分替换为：

<div expr:id='"divCal_" + data:post.id'><script type='text/javascript'>makeCal('<data:post.id/>','<data:post.dateHeader/>');</script></div>

已知问题：转换页（如选择下一页）后无法显示日历

控制模块在不同的页显示

之前已经写过类似的文章了，这里主要介绍一下如何只在某一标签页中显示。找到相应的模块，添加红色标出的部分。

1.不在首页显示,添加红色的判断语句。

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:if>
</b:includable>
</b:widget>

2.只在标签页中显示。

<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='"标签页地址" == data:blog.url'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
</b:if>
</b:includable>
</b:widget>

3.只在首页显示，添加的位置与上面的一样

<b:if cond='data:blog.homepageUrl == data:blog.url'>

</b:if>

让所有链接在新窗口中打开

很多人问到这个问题。修改一下Html解决问题。选中“扩展窗口小部件模板”。找到链接模块，添加上一个target='_blank'属性。如下面红色标出的部分。如果你用过之前介绍的链接的Hack，代码可能不同，但也可以找到相应的部分。

<b:widget id='LinkList2' locked='false' title=链接' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<div id='link'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a>
</li>
</b:loop>
</div>
</ul>

Blogger:12个可换主题的模板

PurpleMoggy之前介绍了一个Hack，可以通过JS即时更换Blog的主题，也就是即时调用不同的CSS来显示Blog，方法比较繁琐，而且需要事先做好相应主题的CSS文件。现在作者做了一些现成的供我们使用，一共十二个。只要下载相应的XML文件上传就可以了，另外也提供了相应CSS，及JS的地址，可以自己保存起来。Demo为示例。修改之前请保存模板。这些模板包括了三种方式来改变主题，选择一种你喜欢的方式，然后把另二个模块删除即可。

FTP方式Blogger一键添加最新文章模块

在以前介绍JSON的时候，曾介绍了几个一键Hack，但是不包括FTP发布的用户。Hans又为FTP用户做了一个添加最新文章的Hack，只需要简单的设置，点一下按钮就行了。

1.首先，设置你的Feed地址。如图（在新窗口中打开放大）。

你要得到的就是其中你设置的RSS地址，如图中的地址是：http://home.planet.nl/~hansoosting/testfeed/rss.xml
2.到模块生成页面（Recent Posts Widget for FTP Blogs），填写一些基本内容（要用到RSS地址），点“Creat”按钮，会生成代码，将这些代码复制到你想要的位置就可以了。

文章最大显示篇数为25。

3.安装之后要加一部分CSS来修饰添加上的模块。下面是作者的一个简单示例：

.bbrecpost {margin-top:10px;}.bbrecpostsum {font-style:
italic;}.bbwidgetfooter {margin-top: 10px;margin-bottom: 10px;}

Google Ajax Search应用另一例

很早之前写过一个简单的例子，因为需要调整的东西太多并且容易出错，因此把那篇文章删掉了。Hoctro介绍了另一个Ajax Search，这个更实用一些。比较酷，采用了标签的形式，跟Blog结合的更紧密。示例可以看 Blogger Show，或者原作者Hoctro's Place

1.去http://code.google.com/apis/ajaxsearch/signup.html申请一个Key。

2.添加JS和CSS。这一部分添加在] ] ></b:skin>之后，或者你喜欢的位置。

<script
src='http://www.google.com/maps?file=api&v=2&key=申请到的Key' type='text/javascript'/>
<script
src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=申请到的Key' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }
/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }
/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }
/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }
/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}
</style>
<script type='text/javascript'>
var coreSearch;
function SolutionLoad() {
var controlRoot = document.getElementById("searchControl");
// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// populate - web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("网络");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blog搜索");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction("你的Blog地址");
searcher.setUserDefinedLabel("你的Blog名称");
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.blogger.com/");
searcher.setUserDefinedLabel("Blogger搜索");
coreSearch.addSearcher(searcher);
coreSearch.draw(controlRoot, drawOptions);
}
function doCoreSearch(q) {
coreSearch.execute(q);
}
registerLoadHandler(SolutionLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>

3.通过修改HTML添加两个模块，其中一个是搜索结果，一个是搜索框。无需选中“扩展窗口小部件模板”，找到类似的以下部分：

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='相关文章' type='HTML'/>
<b:widget id='HTML5' locked='false' title='日常使用的软件' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='HTML1' locked='false' title='搜索订阅' type='HTML'/>
<b:widget id='Label1' locked='false' title='标签' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='存档' type='BlogArchive'/>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
<b:widget id='Feed1' locked='false' title='评论' type='Feed'/>
<b:widget id='LinkList1' locked='false' title='[+/-]链接' type='LinkList'/>
</b:section>
</div>

然后把下面的代码放在任意两个b:widget 之间：

<b:widget id='HTML41' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchform'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML42' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchControl'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

4.到页面元素中，拖动刚添加的两个模块到适合的位置，保存。

5.最后介绍一下自定义部分。下面这段代码是第一部分代码中的一部分，我们就是通过这部分定义的Blog搜索。其余红色的部分都是已定义的搜索，可以根据实际情况修改或去除。因为火狐浏览器会缓存js，所以如果几个博客都有这个api插件的话，就会报错,出现这种情况，请点确定。

searcher = new GblogSearch();
searcher.setSiteRestriction("你的Blog地址");
searcher.setUserDefinedLabel("Blog名字");
coreSearch.addSearcher(searcher);

Blogger相关文章模块升级版

之前显示BLogger相关文章的Hack模块，是根据文章的标题来判断文章的相关性。PurpleMoggy的这个Hack是根据标签来判断文章相关性的，应该更合适一些。（标签中不能包含像？/之类的字符）

1.把下面代码放在<head></head>中。选中“扩展窗口小部件模板 ”

<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 < 20) {
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 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:loop>
</b:if>

3.更改为下面形式。其中的粗体为添加的部分。

<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&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

4.保存模板，并转到“页面元素”中，添加一个HTML/Javascript模块，在里面填上下面代码，并保存。

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

5.再回到Html编辑，选中“扩展窗口小部件模板 ”。找到下面的部分，其中粗体部分为要添加的部分。

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

自定义部分：通过蓝色标记（即i < 20和max-results=10）出的部分我们可以自定义显示相关文章的数目。页面加载速度和相关文章的数目之间的平衡自己掌握好了。

订阅：博文 (Atom)