色彩斑斓: 2006/12

分享所有的订阅Feed

连自己的Google reader订阅也取消了，但这些Feed却是好长好长时间来的积累，给那些需要的人。包括互联网最新资讯，喜欢的Google，Blogger，以及其它有趣的网站。一共400个左右。希望不要浪费太多的时间在这上面，记住网络仅仅是生活的一小部分。或许鱼以后会开心情Blog，希望与朋友们分享自己的幸福。

我的全部订阅Feed下载

停止更新。

也不知道有没有可能再回来。或许会是不同的面目。或许会写更多关于自己的东西。

沉浸网络太长时间了，自己的正常生活严重受到干扰。阳光应该在自己的生命中扮演更重要的角色。曾经因为Blog错失了美好的感情，因Blog荒废了学业，因Blog影响自己的休息，因Blog几乎扔掉了自己所有的爱好。

无法计算自己耗费在网络上的时间到底有多长，几年来，自己的生活都以电脑为中心，时常觉得自己失去的太多太多，可是却无法摆脱。即使将来也是，但它的位置将回归网络的本质。电脑是一种工具，提醒自己。

在此也劝那些寄生于网络的朋友们，善待自己。多付出一些精力给身边的人，他们才是真正的活在你生活中的人。

展开折叠评论升级版

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没什么用处，看起来也很烦。点击下面按钮去掉它。

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

自适应模板的定义及添加Widebar

修改前备份模板。不同的模板情况可能不同，根据实际情况修改，下面的内容仅供参考。

什么是自适应模板？不同的电脑显示器的大小不一样，因此我们的Blog在不同的显示器上显示的效果也是不同的。有的模板把Blog的宽度设为具体的某一值，这样在所有的显示器上所显示出来的样式是一样的。但是，我们也可以让BLog自动适合显示器的大小。如本Blog。

自适应模板的宽度是以百分数来定义的，不像固定模板一样是固定的数值。更改也很简单，预先计算好各个区域的大小，再修改为百分值即可。

Widebar这里指的是跨越两个侧边栏的宽度的侧边栏，当然，首先你有两个侧边栏。Widebar是在两个侧边栏之上或之下的一个新的区域。下面的示例中我们将定义一个Widebar。

以Bloggeruniversity为例,这个Blog包含了四部分，两个Sidebar，一个Widebar，另一部分是文章区域（main-content).

整个浏览器的所有显示区域为100％，下面我们先从总体上来分配一下各部分的宽度。

左边距：5％

右边距：2％

中间部分：93％（包括文章区域，两个侧边栏，一个Widebar）

然后我们来详细分配“中间部分”各部分的区域分配。

文章区域：50％

左侧边栏：22％

右侧边栏：22％

余下的6％留作侧边栏之间的空白

因为Widebar在两个侧边栏之上或之下，所以它的宽度为两个侧边栏之和：44％。

1.先在CSS里定义Widebar区域的样式。

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}

2.在页面中添加Widebar区域。找到<div id='main-wrapper'>(不同模板中此区域名字可能不同，如可能叫“content-wrapper”),添加下面代码以添加区域，无须选中扩展代码。

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

现在再回到“页面元素”就会发现多了一个区域。

via BloggerUniversity

为Blogger添加Lightbox Gone Wild

Lightbox Gone Wild可以在不离开当前页面的情况下加载其它的页面或信息，跟之前写过的Lightbox类似。效果很酷，除了应用起来有些烦琐之外。Yupoo上有这种效果。

1.在<head></head>之间添加下面代码。

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=1093361"></script> <script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&id=2655847"></script> <link rel="stylesheet" type="text/css" href="http://singpolyma.googlepages.com/lightbox.css" />

2.使用。添加下面的格式。

<div id=" lightbox-id" style="display:none;"> 展示的内容 </div>

关闭Lightbox的链接：

<a href="#" class="lbAction" rel="deactivate">关闭</a>

开启Lightbox的链接：

<a class="lbOn" href="# lightbox-id">开启Lightbox</a>

via Singpolyma

Blogger结束Beta

Blogger官方Buzz宣布了这一消息，另外Blogger的图片上传服务器和Picasaweb进行了整合。

精通CSS（CSS Mastery的中文版）

看到MarchBox的介绍，中午订购了一本《精通CSS》（CSS Mastery的中文版）。
尽管可以看懂普通的代码，却总是觉得需要进一步提高一下，专心研究一样东西，是一种享受，也应该是生活的一部分。这样，或许，嘿嘿，就可以自己做模板了。最低要求也要把那些漂亮的Wordpress模板转换到Blogger上来，先给鱼的丫头一个小小的承诺。爱你。
有意者也可以学一下哦。期望快点给寄过来。

Google map test

Loading map...

添加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的十大原因：

1.我们是Google Fans。

2.自定义性强，只有想不到，没有做不到。

3.与Google Adsense完美结合，让你的Blog产生收益。

4.FTP方式发布Blog，更加自由，绑定您的域名。

5.干干净净，完全没有广告。

6.多用户共同编辑，控制访问人群。

7.轻松的模板编辑方式。

8.强大的技术力量支持，全球范围内的Blogger hackers为您服务。

9.与Google Analytics，Google webmasters等站长工具完美结合

10.没有文字过滤（尽管如此，请不要使用Blogger来发布一些反动信息）

还有更多的优点等待你的发现！欢迎补充！

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）出的部分我们可以自定义显示相关文章的数目。页面加载速度和相关文章的数目之间的平衡自己掌握好了。

侧边栏Feed订阅部分代码

更换了一下订阅部分的样式，更加简洁方便，如有需要可以根据下面的代码自己修改一下。新建一个Html模块，把代码放上，把我的订阅地址更换为你自己的。我的订阅地址：http://feeds.feedburner.com/eool

<script type="text/javascript"><br />function showDiv(objectID) {<br />var theElementStyle = document.getElementById(objectID);<br />if(theElementStyle.style.display == "block"){<br />theElementStyle.style.display = "none";<br />}else{<br />theElementStyle.style.display = "block";}<br />}<br /></script><br /><style type="text/css"><br />#TW-feed, #TW-feed ul {list-style:none; margin:0px; padding:0px}<br />#TW-feed li ul {display:none;position:absolute;background-color:#ffffff;padding:3px;border:1px solid #cccccc;}<br />#TW-feed li {font-weight:bold; color:#EC8132;}<br />#TW-feed ul li {padding-bottom:3px;}<br /></style><br /><div onmouseover="showDiv('TW-Pop');return false;" onmouseout="showDiv('TW-Pop');return false;"><br /><ul id="TW-feed"><br /><li><img border="0" src="http://sunrrr.googlepages.com/rssbuttonfirst.jpg" /><br /><ul id="TW-Pop" style="display: none;"><br /><li><a href="http://www.zhuaxia.com/add_channel.php?url=http://feeds.feedburner.com/eool"><img border="0" alt="订阅到抓虾" src="http://sunrrr.googlepages.com/zhuaxiabutton.gif" /></a><br /></li><br /><li><a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/eool"><img border="0" alt="Google Reader or Homepage" src="http://sunrrr.googlepages.com/google_button.png" /></a><br /></li><br /><li><a href="http://www.gougou.com/sub/http://feeds.feedburner.com/eool"><img border="0" alt="订阅到狗狗" src="http://sunrrr.googlepages.com/gougoubutton.gif" /><br /><br /></a></li><br /><li><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/eool"><img border="0" alt="Add to My Yahoo!" src="http://sunrrr.googlepages.com/addtomyyahoo4.gif" /></a><br /></li><br /><li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/eool"><img border="0" alt="Subscribe with Bloglines" src="http://sunrrr.googlepages.com/bloglinesbutton.gif" /></a><br /></li><br /><li><a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/eool"><img border="0" alt="Subscribe in NewsGator Online" src="http://sunrrr.googlepages.com/ngsub1.gif" /></a> <br /></li><br /><li><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://feeds.feedburner.com/eool&ru=http://feeds.feedburner.com/eool"><img border="0" src="http://sunrrr.googlepages.com/my_msn.gif" /></a><br /></li><br /><li><a href="http://www.rojo.com/add-subscription?resource=http://feeds.feedburner.com/eool"> <img alt="Subscribe in Rojo" style="border: 0pt none ;" src="http://www.rojo.com/corporate/images/rojowidered.gif" /></a><br /></li><br /><li><a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/eool"><img border="0" alt="Add to netvibes" src="http://sunrrr.googlepages.com/add2netvibes.gif" /></a><br /><br /></li><br /><li><a href="http://feeds.feedburner.com/eool"><img width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/eool?bg=ffffff&fg=0000FF&anim=1" height="26" /></a></li><br /><li><!-- Feedsky FEED 订阅统计发布代码开始 --><a href="http://feed.feedsky.com/ifly" title="色彩斑斓"><img style="border:0" alt="" src="http://www.feedsky.com/feed/ifly/sc/gif" /></a><!-- Feedsky FEED 订阅统计发布代码结束 --></li><br /></ul></li></ul></div>

Blogger:折叠式链接列表

以前我们通过在侧边栏展开/收缩栏目来让友情链接收缩起来，唯一的缺点就是添加链接时比较麻烦。这个Hack直接就是一个链接列表，但是却可以展开收缩，比较方便。不用展开模板代码，找到侧边栏部分的合适位置，例如：

<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='BlogArchive2' locked='false' title='相关文章' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='标签' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='存档' type='BlogArchive'/>
<b:widget id='Feed1' locked='false' title='评论' type='Feed'/>

例如你可以放在这之间
<b:widget id='HTML2' locked='false' title='链接' type='HTML'/>

然后把下面的代码放在任意两个b:widget 之间,添加完代码保存。然后在“页面元素”就会发现多了一个链接列表，现在就可以添加链接了。

<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = (new Date()).getTime();
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

via Singpolyma

页面加载转换效果

更新：我把这个效果从这个Blog里去除了，效果自己加上试一试吧，反正很简单。很Cool哦

在IE下有效，FX（好像我见到的大多数人都习惯称之为FF）下只能看到加载效果。转换滤镜不起作用。Gecko 的浏览器下面也可以看到。效果请在IE下打开这篇BLog的单独链接查看。很Cool～

没有效果要多试几次哦。这个效果要求新的页面在后台完全加载结束后才会进行转换，因此会觉得加载时间长一些。不过Blogspot还是蛮快的嘛

1.添加到<Head></head>区域，放在前面好了。

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />

2.添加到</body>之前

<script language="JavaScript" type="text/javascript">
function loading(){
document.getElementById("loading").style.display="block";
}
window.onbeforeunload=loading;</script>
<div id="loading" style="position:absolute;top:300px;left:0px;width:100%;text-align:center;z-index:100;display:none;"><span style="background-">请稍候，页面正在加载... </span></div>

via s5s5

更改默认Feed地址

在以前写过的头信息优化这篇文章中，曾介绍过如何修改Blogger的默认的Feed地址，但太粗略，所以在这里再详细写一下。

在头信息，也就是<head></head>之间，有这样一句：

<b:include data='blog' name='all-head-content'/>

这句的作用就是在加载网页的时候自动加载所有关于此Blog的一些相关信息，如网页编码、生成工具以及Feed地址等元内容。里面所包含的内容在模板编辑中我们是无法看到的，那么它究竟包含了些什么呢？

打开你的Blog，然后查看页面的源代码，此时这一句所囊括的内容便一览无余。如我的Blog：

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate" type="application/atom+xml" title="色彩斑斓 - Atom" href="http://sunr.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="色彩斑斓 - RSS" href="http://sunr.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="色彩斑斓 - Atom" href="http://www.blogger.com/feeds/23208269/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=23208269" />
<link rel="alternate" type="application/atom+xml" title="色彩斑斓 - Atom" href="http://sunr.blogspot.com/feeds/7941511704063610200/comments/default" />

红色部分，属性rel="alternate" ，会自动通知浏览器或其它Feed探测器后面的Feed地址。其中最后一句是某一篇文章的评论Feed地址，如果做修改会丢掉此部分。

1.修改就变得很简单了，首先去掉<b:include data='blog' name='all-head-content'/>，然后把下面的代码替换到它的位置上。

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='自定义的Feed地址' rel='alternate' title='RSS' type='application/atom+xml'/>
<link rel="service.post" type="application/atom+xml" title="博客名称 - Atom" href="http://www.blogger.com/feeds/你的BlogID/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.blogger.com/rsd.g?blogID=你的BlogID" />

2.另外我们也可以隐藏在Blog最下方的订阅提示。修改CSS。

.feed-link { display:none; }

Blogger:自动隐藏搜索栏（Navbar）

貌似在IE中只能隐藏。CSS标准不统一，FF下一切正常。

以前也介绍过一个简单隐藏Navbar的方法，但那种方法会完全去除Navbar，即使我们需要的时候。现在我们可以让它在鼠标移动到上面的时候显示出来。其它时候会自动隐藏，用了一个滤镜。添加下面的CSS：

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

把这些代码放在

body {
background:$bgcolor;

之上即可。

Blogger:显示“您的位置”

在一些门户网站上我们可以看到一类导航会显示出你所在的“位置”。这个BloggerHack就是针对此功能的。

示例可查看我的测试BLog，http://hacktests.blogspot.com

1.找到以下位置：<b:widget id='Blog1' locked='true' title='博客文章' type='Blog'>紧跟其后把下面代码粘贴过去：

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

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
您的位置:
<a expr:href='data:blog.homepageUrl' rel='tag'>主页</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>

</b:includable>

2.在下面找到下面代码，<b:if cond='data:post.dateHeader'>紧跟其后添加

<b:include data='post' name='breadcrumbs'/>

3.添加CSS。可根据自己需要修改。

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}

4.保存Game over

Blogger相关文章模块

感谢GG（没找到你的地址）提醒：只要“：”这个符号是英文标点":"，就能查询这个英文冒号前的中文，从而搜索相关文章。

这段JS是根据文章标题来过滤相关文章的，所以对中文支持不怎么样，效果见这篇文章。

这个模块可以在侧边栏上显示出与当前正查看的文章相关的文章。只在某一项目页起作用。不太完美的地方就是要等一段时间才会把相关文章“过滤”出来。添加也非常简单，无须展开代码，找到侧边栏的任意两个b:widget之间，把下面的代码加上就行。

<b:widget id='BlogArchive2' locked='false' title='相关文章' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title'>
<h2 id='relatedTitle'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='RelatedPosts'>
<div expr:id='data:widget.instanceId + "_ArchiveList2"'>
<b:if cond='data:style == "HIERARCHY"'>
<ul id='relatedArticles'><b:include data='data' name='interval'/></ul>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
<script language='JavaScript' type='text/javascript'>
// 'Related Article' hack by Hoctro - Nov 2006 http://hoctro.blogspot.com
// Some rights reserved - 2006
//Cross browser event handling written by Scott Andrew
function addEvent2(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
}
else {
elm['on' + evType] = fn;
}
}
function copyNodes2() {
var ele = document.getElementById('relatedArticles').cloneNode(true);
var aList = ele.getElementsByTagName('a');
var atext = "<data:blog.pageTitle/>";
var arr = new Array(3);
arr = atext.split(":",3);
var related = document.getElementById('relatedArticles');
var relTitle = document.getElementById('relatedTitle');
relTitle.firstChild.nodeValue = relTitle.firstChild.nodeValue + " about " + arr[1] + 's';
while (document.getElementById('relatedArticles').hasChildNodes()){
document.getElementById('relatedArticles').removeChild(document.getElementById('relatedArticles').firstChild);
}
var listLen = aList.length;
for (var j=0;j < listLen;j++){
var txt = aList[j].firstChild.nodeValue;
var sarr1 = arr[1].substr(1, arr[1].length-1);
if(txt.search(sarr1) != -1) {
var litxt = document.createElement('li');
txtNode = aList[j].cloneNode(true);
litxt.appendChild(txtNode);
related.appendChild(litxt);
}
}
}
// Load event to run our script
addEvent2(window, 'load', copyNodes2, false);
</script>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<b:loop values='data:posts' var='i'>
<a expr:href='data:i.url'><data:i.title/></a>
</b:loop>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>

via Hoctro's place

Anki的Blogger模板

Anki放出了他的Blogger模板，预览及下载请看原文

Google是革新的终结者吗？

Steve Jenson，Blogger团队的一名成员，今天离开了Google。Steve是下半年第二个离开Blogger团队的成员，至少是我们已知的第二个。

Google的确推出了一系列很酷的作品，也收购了很多很有成就的产品，但是被收购之后呢？它们还像以前那样继续焕发光彩吗？下面请看一些例子。

以时间线为续：

2003年二月。Google收购Pyra工作室，也就是Blogger的开发者。但是让我们等待了三年半之后，2006年八月，Blogger才做出了一些更新。

2004年七月。Google收购IdeaLab，Picasa和Hello的开发者。首先我非常喜欢Hello这款产品，即时分享图片，是我认为的现在分享图片的最佳软件，Hello像一个FTP服务器，即时传输图片，在国内的连接情况跟Google的一些服务一样会经常挂掉，但它的思想却是创新性的，我觉得它跟最近推出的Picbus的原理是完全一样的，相信用过这两款软件的人会自然的分辨出它们谁更优越。但是在Hello进入Google之后却再也没被提起过，最后的版本是05年一月的。

2005年十一月。Google收购了网络分析软件，也就是现在的Google Analytics，并由收费变为免费提供服务，尽管Google Analytics的用户迅速增加，可是中间有一年的时间没有再对它进行改进。

2006年二月。Google从Adaptive Path得到了Measure Map，它是一个Blog统计包。当时我们以为Google或许会把它整合到Google analytics或者单独把它免费推出，最糟的也会把它整合到Blogger里。不幸的是，自从收购这家公司之后就再也没有Measure Map的消息了。

2006年三月。Google收购了Sketchup这款3D绘图软件，并把它整合到Google earth免费提供给用户。但是，它被收购之后就再也没有一个新功能被添加进去了。

via Amit

订阅：博文 (Atom)