色彩斑斓: 2006

分享所有的订阅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

Picasaweb幻灯片模块生成工具

Picasaweb自Blogger beta、Google base、Google calendar之后也支持JSON.

Phydeaux3因此为Picasaweb写了一个生成器把它应用到了Blogger中。

生成器地址

只要找到要显示的相册的RSS地址填到地址框里就行了。

做一个导航栏的下拉菜单如何？(已更新)

已经测试过了，示例请看我的测试Blog

因为晚上有课，写得非常匆忙，也未像以前一样自己试一下，可能存在一些错误。如果觉得写得不清楚，可查看原文。

有导航栏可以让Blog看起来更专业一点。以前也介绍过生成导航栏的方法。如果有大量的分类信息呢？当鼠标移过时显示下拉菜单怎么样？效果可以看原作者的Blog.这里介绍的是把一些链接模块放在导航栏上。

1.Head之间引用JS。比较建议自己下载并上传JS文件

<script src='http://non.alastor.googlepages.com/chrome.js' type='text/javascript'/>

2.定义CSS

chromestyle.css - 银色
chromestyle2.css -蓝色
chromestyle3.css - 绿色
chromestyle4.css - 红色

一共有四种样式，你可以选择一种跟Blog打配的，并把里面的内容添加到Blogger模板中。紧跟在]]></b:skin>之前就可以。

3.导航栏位置

一般我们会把它放在标题下方，不过，只要你愿意，可以放在任何你想要的地方，比如最上方。

这里我们把它放在标题栏下方，找到 header-section结束、content-wrapper开始的地方（即在div id='content-wrapper'这句之前），添加下面代码

<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='http://YOURBLOG.blogspot.com/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>导航 1</a></li>
<li><a href='#' rel='dropmenu2'>导航 2</a></li>
<li><a href='#' rel='dropmenu3'>Content 3</a></li>
<li><a href='#' rel='dropmenu4'>Content 4</a></li>
</ul>
</div>
<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

4.把原侧边栏模块移到导航栏

找到相应的模块代码部分，做一些修改。添加红色部分。因为我们在第三步中已经定义了导航1、2等导航标题，有个Rel属性，下面代码中的Id属性应该与相应的Rel属性对应。

<b:widget id='...' locked='false' title='...' type='...'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
.
.
.
</div>
</b:includable>
</b:widget>

记住要删除原侧边栏模块的标题。

5.美化部分

尽管按上面的方法已经实现了下拉菜单，但对于一些模块会不太完美，比如标签，记数器会让菜单扭曲，作者提供了相应的方法，即把计数器放在链接内部。

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/> (<data:label.count/>)
<b:else/>
<a expr:href='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</b:loop>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

下面代码针对订阅链接，真实效果查看作者导航栏的NewsFeeds。

<b:widget id='Label2' locked='false' title='Newsfeeds' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu2'>
<div class='widget-content'>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default/-/' target='_blank' title='Subscribe to Posts'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Posts</a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default/-/' target='_blank' title='Subscribe to Comments'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Comments</a>
<b:loop values='data:labels' var='label'>
<a expr:href='"http://YOURBLOG.blogspot.com/feeds/posts/default/-/" + data:label.name' target='_blank'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> <data:label.name/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

最简单的生成Blogger下拉菜单的方法

Hackosphere做了一个下拉菜单生成器，如果你的侧边栏上有大量的链接，除了用以前的方法将它收缩起来，也可以试试下拉菜单的形式。

生成地址

注：anniyalogam.com原来在中国是无法访问的，不知道为什么现在解封了。

体验：一键Hack

上文中提到的JSON不知道有没有心动，没有？来体验一下吧，或许你会改变观点！

只要点击下面的按钮就可以“安装”Hack，无需修改任何代码，给喜欢偷懒的人带来的机会哦
首先，在Head之间引用JS，<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
1.最新文章模块（与通过RSS添加有所不同）

其中涉及到一些自定义选项。点击上面的按钮之后会出现对些模块的最基本设置，如标题，以及选择想要添加的Blog（前提你建了多个Blog）。下面有个“Edit Content”就是要编辑的内容了。点击一下。我们要针对自己的Blog做一些修改。

把“beautifulbeta.blogspot.com”替换成你的Blog地址;numposts代表要显示的文章数，默认为10;numchars代表显示摘要的字数，默认为100；showpostsummary是不是显示摘要，值为True和False;showpostdate是不是显示日期，值同样为True或False。

2.最新评论模块

同样我们要自定义一下以适应自己的Blog。替换 'beautifulbeta.blogspot.com' 为你的Blog地址;设置 numcomments为显示的评论数大小;numchars为评论摘要的字数;showposttitle是不是显示评论所属文章的标题，值为True或False;showcommentdate是不是显示评论日期，值为True或False;

3.搜索模块

via BeautifulBeta&Hackospere

迟来的介绍——JSON

因为心情的原因，这篇文章迟来了几天。

Blogger Buzz于21日宣布Blogger支持JSON，同时还有Google Base、Google calendar以及后来的Picasaweb。尽管这一声明对我们普通用户没什么太大的意义，但对那些Blogger hackers们却是件值得惊喜的事。当然我们也是最终受益者。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。是针对程序员的，如果有兴趣可以看下面的一些资料：

JSON官方中文页面

一个更通俗易懂的介绍

JSON究竟可以为我们普通用户带来什么呢？简单！以前我们要实现一个Hack往往要修改大量代码，现在我们甚至只要点一下按钮，国外的一些Hackers们已经把以前的一些Hack转化成了这种形式。

Blogger帮助里提供了一个API来实现这个过程，感兴趣可以看一下。

内网、动态IP如何架设FTP

一般的文件分享我们可以通过网络硬盘来实现，但如果是非常大量的文件呢？比如鱼想把自己的音乐分享给朋友，大约有4G左右，很明显一般的网络硬盘是无法实现的。把自己的电脑变成一台FTP服务器是最好的方法。

鱼为此查了两天的资料才找到了最合适的方法，因为鱼是内网，所以用普通的方法公网就不能访问我的电脑，另外因为是ADSL，属动态IP，需要DDNS。如果你是固定IP，并且公网接入，就会方便很多。

关于详细的架设方法请看这儿

添加Snap链接预览

可视化搜索引擎Snap近期推出了Snap Preview Anywhere服务，它的作用就是提供链接预览，不实用却很炫的一个功能，或许你会喜欢。
当访问者的鼠标悬停在链接上时，该链接的站点缩略图将显示出来。效果如图：

得到的代码只要新建一个“Html模块”，放进去就行，即使放在已有的模块中也可以。
现在的愿望就是每周可以轻轻松松的写一篇Blog。昨晚上正写着呢，Blogspot又挂了，一点心情都没有了。

Blogspot恢复正常访问

有点心虚的感觉，呵呵，祝我们好运。

同样解封的还有中文版的Wikipedia

沙扬娜拉Blogspot

这并不是件值得惊讶的事，确认之后反而觉得很坦然。正好可以休息一阵子了，从十一到现在每天写Blog都要耗费很长时间，加上学习上的压力，的确觉得累了。
即使是以年计，我也会等到Blogspot解封之后再重新回来。呵呵，坦然面对在一个这样的国家发生这样的事，或许历史又在轮回了吧。
默哀

如何提高你的PageRank？

搜索引擎对一个网站来说是非常重要的，鱼的这个Blog超过50％的流量来自于搜索引擎推介，鱼不懂SEO，也懒得去管，当然质量才是一个网站最重要的生存条件。但是在日常稍微注意一点SEO也可能会带来不一样的效果。

来自Global Politician的一项研究表明，来自Wikipedia和Myspace的链接可以让你网站在Google中的排名提高和PR的升高，相信这对一个网站的发展是非常重要的。如果有兴趣不妨看原文，鱼要睡觉了。

如果你不介意，可以把鱼链接上哦，嘿嘿

Http://sunr.blogspot.com

Blogger beta:首页展开/收缩评论

此文已更新，请看这儿

这是鱼在Blogger classic里曾用过的一个Hack，个人认为非常实用。Thanks to singpolyma.

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

<script type="text/javascript">
//<![CDATA[
var comment_form_template = '<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>\n';
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function peekaboo_comments_display(data) {
var template = '';
function zeropad( n ){ return n>9 ? n : '0'+n; }
data.items.reverse();
for(i in data.items) {
if(!data.items[i].link) continue;
var tmp = data.items[i].link.split('#');
data.items[i].link = tmp.join('#c');
var dt = data.items[i].updated.match(/^(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)\.(\d+)([+-]\d+):(\d+)$/);
var time = new Date(parseInt(dt[1],10), parseInt(dt[2],10)-1 /*since January==0 in Date lingo*/, parseInt(dt[3],10), parseInt(dt[4],10), parseInt(dt[5],10), parseInt(dt[6],10), parseInt(dt[7],10)).getTime();
time = time + -(60*60*1000*parseInt(dt[8],10)) + -(60*1000*parseInt(dt[9],10));//adjust to GMT
time = time + -(60*1000*(new Date()).getTimezoneOffset());
time = new Date(time);
time = time.getFullYear() + '-' + zeropad(time.getMonth()+1) + '-' + zeropad(time.getDate()) + ' ' + zeropad(time.getHours()) + ':' + zeropad(time.getMinutes());
if(typeof(data.items[i].content) == 'undefined' !data.items[i].content) data.items[i].content = data.items[i].summary;
var out = comment_form_template;
out = out.replace(/\[\[PERMALINK\]\]/,data.items[i].link);
out = out.replace(/\[\[DATE\]\]/,time);
out = out.replace(/\[\[AUTHOR\]\]/,data.items[i].author.name);
out = out.replace(/\[\[BODY\]\]/,data.items[i].content);
document.write(out);
}//end for i in data
}//end if function peekaboo_comments_display
//]]>
</script>
<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='"http://xoxotools.ning.com/outlineconvert.php?output=json&amp;classes=items&amp;url=" + data:f.url + "&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: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: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>

最后保存模板。

Flash Mp3播放器

Sein为了寻找一个合适的播放器而大费周折，鱼记得以前也看过一款超强的播放器，它就叫FLASH MP3 PLAYER，支持回放、RSS/XSPF播放列表、多种样式、artworks、颜色大小自定义以及一个Js API。更多功能请查看官方的Readme文件。

可以去Musiklab website，Chicago Music Promotions，GeenStijl Dump，Podnova Podcast，看一下示例。

如果喜欢，这是下载地址，我们用到的有三个文件，mp3player.swf、Playlist.xml、Config.xml。添加代码：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="200" id="mp3player"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
<param name="movie" value="http://www.server.com/mp3player.swf" />
<param name="flashvars" value="config=http://www.server.com/config.xml&file=http://www.
server.com/playlist.xml" />
<embed src="http://www.server.com/mp3player.swf" width="300" height="200" name="mp3player"
flashvars="config=http://www.server.com/config.xml&file=http://
www.server.com/playlist.xml"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

它的自定义是通过Config.xml文件来实现的，下面是内容注释。

<mp3config>


<autostart>false</autostart>
<shuffle>true</shuffle>

<repeat>list</repeat>

<volume>80</volume>

<showdisplay>true</showdisplay>
<showplaylist>true</showplaylist>

<linktarget>_top</linktarget>

<backcolor>0xffffff</backcolor>
<frontcolor>0x333333</frontcolor>
<lightcolor>0x000000</lightcolor>

<jpgfile></jpgfile>


<callback></callback>
</mp3config>

记录访问者上一次浏览时间

这些代码来自Javascriptkit,只要新建一个Html/javascript模块，把下面的代码放进去即可。当然，你可以更改欢迎信息。

<script type="text/javascript">
var lastvisit=new Object()
lastvisit.firstvisitmsg="这是你第一次光临本站" //Change first visit message here
lastvisit.subsequentvisitmsg="欢迎回来，你上一次到来是在 <b>[displaydate]</b>" //Change subsequent visit message here

lastvisit.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
lastvisit.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+" expires="+expireDate.toGMTString()+" path=/"
}
lastvisit.showmessage=function(){
if (lastvisit.getCookie("visitcounter")==""){ //if first visit
lastvisit.setCookie("visitcounter", 2, 730) //set "visitcounter" to 2 and for 730 days (2 years)
document.write(lastvisit.firstvisitmsg)
}
else
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", new Date().toLocaleString()))
}
lastvisit.showmessage()
</script>

添加Google ajax search

Google ajax search效果很炫，但却觉得不太实用。

1.先在这儿申请一个Key

2.添加一个Html/javascript模块，标题输入你所在的城市，内容你感兴趣的好了。

3.到代码编辑状态，展开代码。紧跟</head>之前，添加以下代码：<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>

4.然后找到你刚才建的那个模块。例如开始可能是这样的：<b:widget id='HTML1' locked='false' title='Kaifeng' type='HTML'>，然后用下面的代码替换从上一句到</b:widget>的所有内容：

<b:widget id='HTML1' locked='false' title='New York, NY' type='HTML'>
<b:includable id='main'>
<div id='searchcontrol'>Loading .....</div>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=你申请到的Key' type='text/javascript'/>
<script type='text/javascript'>
var local="<data:title/>";
var initSearch="<data:content/>";
// Create a search control
var searchControl = new GSearchControl();
// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
// Set the Local Search center point
localSearch.setCenterPoint(local);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(initSearch);
</script>
</b:includable>
</b:widget>

Blogger beta：页面布局二

上一个Hack比较适应于那些还未进行过修改的Blog，因为它要替换大部分代码，这样以前的Hacks都会被去掉，对我们是一个不小的损失。Photofool介绍了详细的添加方法，尽管有些烦琐，可是还是值得的。此Hack只适应于两栏模式。结果略有不同。实际效果如这个地址。觉得有必要补充一下，这个Hack会在访问者的计算机上写一个Cookies，保存期限为30天，它会记住浏览者所喜欢的布局。getExpireDate(30)修改括号内的数字就可以修改保存期限。
1.备份模板。无需展开代码。
2.紧跟</head>之前添加以下代码：

<link href="http://developer.yahoo.com/ypatterns/scripts/yui/fonts.css" rel="stylesheet" type="text/css"/>
<link href="http://developer.yahoo.com/ypatterns/scripts/yui/grids.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
var blogLayout;
function changeStyle(style) {
obj = document.getElementById('doc');
obj.className = style;
setCookie('blogLayout', style, getExpireDate(30), '/');
}
function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie = escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; EXPIRES=' + expires : '')
+ (path ? '; PATH=' + path : '')
+ (domain ? '; DOMAIN=' + domain : '')
+ (secure ? '; SECURE' : '');
}
function getCookieValue(cookieName) {
var allCookies = document.cookie;
var index = allCookies.indexOf(cookieName + '=');
if (index == -1) {
return null;
}
index = allCookies.indexOf('=', index) + 1;
var endstr = allCookies.indexOf('', index);
if (endstr == -1) {
endstr = allCookies.length;
}
return unescape(allCookies.substring(index, endstr));
}
function getExpireDate(nodays) {
var UTCstring;
Today = new Date();
nomilli=Date.parse(Today);
Today.setTime(nomilli+nodays*24*60*60*1000);
UTCstring = Today.toUTCString();
return UTCstring;
}
blogLayout = getCookieValue('blogLayout');
if (null == blogLayout) {
blogLayout = 'yui-t6';
}
</script>

3.紧跟<body>之后添加如下代码：

<script language="javascript" type="text/javascript">
document.write("<div id='doc' class=" + blogLayout + ">");
</script>

在</body>之前添加如下代码：

<script language="javascript" type="text/javascript">
document.write("</div>");
</script>

4.用<div id="hd"></div>将Header-wrapper包围起来，<div id="hd">紧跟<div id="wrap2">之后， </div> 紧在 <div id="content-wrapper">之前，如红色部分：

<div id="hd">

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='boyr (Header)' type='Header'/>
</b:section>
</div>
</div>

5.把content-wrapper用同样的方式包围起来。<div id="bd">如红色部分：

<div id="bd">
<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

在这一部分里我们还要添加三个区域<div id="yui-main"> <div class="yui-b">，它们都要以</div>结束。如下面代码：

<div id="bd">
<div id='content-wrapper'>
<div id="yui-main"> <div class="yui-b">
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>
</div>
</div>

6.Sidebar-wrapper用<div class="yui-b">包围起来，如代码红色部分。

<div class="yui-b">
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
</div>

7.把Footer-wrapper用<div id="ft">包围起来。如代码部分。

<div id="ft">
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>

8.最后要向上一篇文章一样去掉各个Wrapper的宽度定义

#header-wrapper {
/*width:660px;*/

#outer-wrapper {
/*width: 660px;*/

#main-wrapper {
/*width: 410px;
float: left;*/

#sidebar-wrapper {
/*width: 220px;
float: right;*/

#footer {
/*width:660px;*/

9.添加一个Html/javascript模块。加入下面代码，像上一篇文章提到的，一共有七种效果，分别是"yui-t1"到"yui-t7"，你可以根据自己的情况选择，这里例出了三种，分别是侧边栏在左侧、右侧和下方。

<a href="javascript:void" onclick='javascript:changeStyle("yui-t6");'>layout 1</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t3");'>layout 2</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t7");'>layout 3</a>

补充：好像改变像Layout1的名字，不能在Html/javascript里修改。可以到代码里，找到Html1 Widgt，再在代码里直接修改Layout1的名字
<div class="widget-content">
<a href="javascript:void" onclick='javascript:changeStyle("yui-t6");'>layout 1</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t3");'>layout 2</a>|
<a href="javascript:void" onclick='javascript:changeStyle("yui-t7");'>layout 3</a>
</div>

Blogger beta:页面布局Widget

在Yahoo UI Library中提供了一个Grids CSS,它的功能就是当访问者浏览你的网页的时候可以自定义页面的布局而不用刷新页面。Hoctro把它应用到了Blogger beta中。

修改之前请先保存模板，并建议先在另一个Blog里测试一下。可以在这儿预览一下(点击侧边栏的那七个小图片，就会发现布局的变化)，因为这是鱼的测试Blog，所以经常变动，两天内有效。

1.将侧边栏除“存档”之外的Widget全部去掉，如果没有则添加上。

2.把</head>及之后的代码全部删除，并替换成下面的代码

<link href='http://developer.yahoo.com/ypatterns/scripts/yui/fonts.css' rel='stylesheet' type='text/css'/>
<link href='http://developer.yahoo.com/ypatterns/scripts/yui/grids.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class='yui-t6' id='doc'><div id='outer-wrapper'><div id='wrap2'>
<div id='hd'>

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='css layout (Header)' type='Header'/>
</b:section>
</div> 
</div> 
<div id='bd'><div id='content-wrapper'>
<div id='yui-main'>
<div class='yui-b'><div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div></div> 
</div> 
<div class='yui-b'> <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div> 

<div class='clear'> </div>
</div></div> 
<div id='ft'><div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div></div> 
</div></div></div> 
</body>
</html>

3.把CSS里定义各个容器宽度及位置的代码去掉或者加上/*……*/让它不起作用。如红色标出的部分，一共有五部分。保存模板。

...
/* Header
-----------------------------------------------
*/
#header-wrapper {
/*width:660px;*/
margin:0 auto 10px;
border:1px solid $bordercolor;
}
...
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
/*width: 660px;*/
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
/*width: 410px;
float: left;*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
/*width: 220px;
float: right;*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
...
/* Footer
----------------------------------------------- */
#footer {
/*width:660px;*/
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

4.Yahoo grids提供了七种模式，现在再回到Layout里添加一个Html/javascript模块，在里面加上以下代码。

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t1");' title='yui-t1'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t1.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t2");' title='yui-t2'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t2.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t3");' title='yui-t3'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t3.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t4");' title='yui-t4'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t4.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t5");' title='yui-t5'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t5.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t6");' title='yui-t6'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t6.jpg'/></a>
<a href='javascript:void' onclick='javascript:changeStyle("yui-t7");' title='yui-t7'>
<img class='img_cls' src='http://photos1.blogger.com/blogger2/3768/593528219081732/400/t7.jpg'/></a>
<script language='javascript' type='text/javascript'>
function changeStyle(style) {
obj = document.getElementById('doc');
if (typeof style == "string") obj.className = style;
}
</script>

5.另一个类似的Hack稍后奉上。关于Yahoo grids的详细信息请查看官方的资料。

http://developer.yahoo.com/ypatterns/pattern.php?pattern=grid 和 http://developer.yahoo.com/yui/grids/index.html.

Blogger beta:首字下沉

这个功能似乎不太常用，而且用起来也比较麻烦。看到有人也用到这个小小的修饰，所以也写在这里。

1.在CSS里定义首字的形式。可以自定义font-size(字体大小)，color（颜色）,line-height（行高）.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

2.用的时候把第一个字用<span>包围起来，如<span class="dropcaps">示例</span>

如何在帖子中添加代码

有时候我们需要在帖子中展示一些源代码，如果在Blogger的编辑器中，这些代码就会被执行。这时候，最简单的方法就是通过一些离线Blog撰写软件，这是鱼喜欢上Windows live writer的主要原因，几乎省下了以前一半的时间。现在Windows live writer存在的缺点就是不能为Blogger beta加标签以及上传图片，写完之后还要重新到Blogger中加上标签。

再者就是通过一些网页编辑软件比如Dreamweaver转换，也非常方便。鱼之前就用这种方法。

以上两种方法适宜大量的代码，如果只是几句简单的代码大可不必这么麻烦。只要把"<"用“<”代替，“>”用">"代替即可。

或者我们也可以创建一个Text区域来显示代码

<br /><center><form><textarea rows="3" cols="50" readonly>代码部分</textarea></form></center><br />

关注博客的反向链接

互联网是由链接组成的。
如果你寄生于网络上已经有很长一段时间了，那么你可能会有如此的感觉：尽管Internet非常庞大，可是要找到自己真正喜欢的内容是如此的不容易。腻烦了RSS，讨厌门户的小圈子，网络上的伪装也已感到疲惫，那么是换一种“生活方式”的时候了。
鱼现在喜欢上了一种新的网络的探索方式，就是查看自己网站的反射链接然后一一“拜访”他们，这是真正跟自己的生活相关的，也是所熟悉的、喜欢的。未来的SNS应该包含发现的快乐。
我们应该如何更快、更全面的找到自己Blog的反向链接呢？Technorati是Blog世界里的Google，因此用它来跟踪我们的链接是最佳工具，尽管它在中国已经被封,可是我们可以通过国外的Rss阅读工具如Google reader来订阅自己的地址的反射链接。形式如下：

反向链接：
http://feeds.technorati.com/search/sunr.blogspot.com
关注的内容：
http://feeds.technorati.com/search/咖啡鱼

Google blogsearch也支持搜索结果订阅，只要到Google blogsearch搜索“ link:网址 ”,然后在侧边栏就会提供四种形式的Rss订阅地址。例如鱼搜索 link:sunr.blogspot.com 然后得到的Rss地址为：http://blogsearch.google.com/blogsearch_feeds?hl=en&q=link:sunr.blogspot.com&ie=utf-8&num=100&output=atom

抓虾用户可以用Feedburner烧制Technorati的Rss，然后再订阅。

回复抓虾客服的信

今天收到了抓虾客服的信，连回复内容一并贴出来，仅代表一些个人的想法。希望抓虾会越来越好。

咖啡鱼，

你好！我是抓虾的徐易容。前不久看到你比较抓虾和google reader的观点。我们十分希望进一步了解你的想法

，帮助我们提高，可以吗？

再次感谢你对我们的支持。:)

谢谢，
易容

鱼的回复：
说心里话，我觉得抓虾也算是国内最典型的Web 2.0产品了，是非常有个性，非常实用，非常令人喜爱的服务。它是我唯一一个除G

oogle reader之外的在线RSS阅读器。
很早之前就用Rss阅读器了，试用过很多类似的服务，觉得岂今为止Google reader是最好的在线Rss阅读器。
首先，最主要的是Google reader与众不同的浏览方式，它并不是以单个Feed为阅读对象。我们阅读Feed是为了获取信息，而不必在意信息的来源。

其次，快捷键一直是Google产品的特色，Google reader也不例外，而且是作为Google Reader推出时候的一大特色来介绍的。作为一个阅读者，最重要的是在最短的时间内获得自己最想要的信息，如果把时间浪费在一个个点击那些Feeds上，太不值得了。如果仅仅阅读几个Feed而言，在这点上并不需要太苛求，但是如果是大量的Feed这点就变得非常重要了，非常便捷，非常省时间。比如鱼订阅了接近500个网站的Feed，如果一个个点击来看，这将会是非常繁琐的一项"工作"。在Google reader里我可以一直按空格或滚动鼠标滚轮，以任何舒适的姿式坐着看自己喜欢的内容。如果Google reader推出中文版，相信这将对抓虾造成比较大的影响，Google的号召力是一方面，最重要的是体验，舒适的体验。

最后，我之所以没有放弃抓虾的原因是因为抓虾的"热文排行"，基于以上提到的两点最根本的关于Feed阅读的部分，抓虾都没有做到，所以我的抓虾帐号并不是用来阅读Feed的，只是用来发现一些自己未曾注意却非常优秀的Blog的。但是现在也比较混乱，基本上一个人几个帐号就可以把乱七八糟的内容都推荐上去。建议抓虾推出一个社区，来推荐一些Blog。要有专门的部门来申核推荐。另外抓虾的"热文排行"更新速率太低，基本上过几天再去看看还是那些旧内容，我觉得应该每天更新一次。推荐只是一方面。

好像抓虾的更新速率也比较Google reader慢，以我自己为例，发表一篇Blog，抓虾延迟时间要长一些。

最后的最后，我还是非常支持国产服务的，希望国内也有Google那样值得我们为荣的团队。

Blogger Beta升级：标签编辑/管理功能的增强（已更新）

还记得以前提到的关于Blogger 功能的投票吗？现在我们已经看到效果了，Blogger beta增加了标签管理帖子的功能，而这个功能在投票中是放在第一位的。记得听好多朋友说都投了绑定域名的功能，为什么还不见效果？

更新：

好消息不断哦，刚才发现Google blogsearch对新的Blogger beta收录已经正常了，而且可以收录以前的帖子，这可能是Google blogsearch的一个更新。

反向链接要在Settings里开启

总结篇：Blogger beta 技巧/教程

感谢Yee的总结。

Blogger Beta 发布也有一段时间了，虽然官方承诺的FTP功能到现在一点眉目都没有，但还是有很多不怕功亏一篑的人选择了升级。最近我又收到不少询问如何修改Beta的E-MAIL，但是很抱歉，我对这个目前看来并不安全的系统没有任何深入的研究。好在国内有几个朋友玩得挺起劲的，编译了不少Blogger Beta hack的文章，下面帮他们做一个小汇总。

导航栏

模版效果

让你的链接更迷人一些——Sweet Titles

添加滚动条