色彩斑斓: 2006/10

沙扬娜拉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>

上一个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

添加滚动条

自定义Blog里的引用

带有按钮效果的图片或链接

“Top of Page”、”Top of post”

简化显示

RSS/Feed

SEO

标签类

Blogger beta Hack:为标签添加说明

其他

模板：

Blogger beta：Blogger模板小升级

现在你已经可以在Blogger beta的模板中添加中文字符了，在模板中我们直接可以看到一些Title的属性已经是中文了，这说明Blogger团队正在汉化Blogger beta，不久我们就可以用上中文的Blogger了。据Blogger的一位成员说，几个月之后Blogger将完全迁到Blogger beta。
现在我们已经可以做出一个真正的中文Blogger了。

Blogger beta技巧：标题形式显示所有文章

http://用户名.blogspot.com/search/label/?max-results=999

把用户名改成你的Blog地址看一看会出现什么结果呢？它将会显示出你所有的帖子（<999）。当然，如果你添加过以前介绍的在存档页和标签页显示标题，那么，结果也会是标题的形式显示所有的帖子。

如果你没有应用以前的Hack应该怎么让它在标签页显示标题呢？只要用下面的代码完全替换

<b:includable id='main' var='top'>
中间省略……

<b:include name='nextprev'/>

<b:include name='feedLinks'/>
</b:includable>

这一部分即可。

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

<div class='blog-posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<h2 class='date-header'>Contents</h2>
</b:if>
</b:if>
</b:if>

<b:loop values='data:posts' var='post'>


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
</b:if>
</b:if>



<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<a expr:href='data:post.url'><data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

<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>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>
</b:includable>

(via Hans)

Blogger beta技巧：添加导航栏

以前我们把标签做成导航，尽管那个Hack也可以添加一些自定义的按钮，但似乎不太方便。这次我们直接得用Blogger beta里的Links Widget来制作导航，无论添加还是调节顺序都将变得非常方便。这里我们将它添加在标题之上，如果添加在标题下，需要调节Header-wrapper的大小，或者再定义一个区域。(via Hans)

1.为了让字体颜色和鼠标经过时的颜色都可以在Fonts&Colors里方便的修改，我们先定义这两个颜色的变量。

<Variable name="headerTextColor"
description="headerTextColor"
type="color" default="#000" value="#006699">
<Variable name="headerCornersColor"
description="headerConersColor"
type="color" default="#000" value="#940f04">

2.添加CSS以定义导航栏区域

#menubar h2 {display:none;}
#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}
#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}
#menubar a:hover {
background-color: $headerCornersColor;
}

3.在Html里添加相应的区域，即红色的代码。

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

4.保存模板之后就可以到Page elements里添加链接或到Fonts&Colors里修改相应的颜色了。

Blogger beta:技巧：随机显示页首图片（Banner）

此Hack（via Gabriel Lau）在每次刷新页面时随机显示页首的Banner，是不是很酷呢？这是Wordpress里一个默认的插件，现在我们也可以在Blogger beta里体验它了。

1.首先要备份你的模板，这是很重要的。另外你要为你的Blogger制作几张适合你的Blog的图片，并上传到一些图片服务器上。下面的以“Rounder4”这个模板为示例，不同的模板可能不同，因为有一些模板并没有Banner，或者位置不同，请做相应的修改。

2.先来看一下在CSS里定义Header背景的部分。这一部分不同的模板可能不同。

#header {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

3.我们要做的就是用脚本重写background url，把下面的代码<body>之后。

<script type="text/javascript">
var banner= new Array()

banner[0]="图片地址1"
banner[1]="图片地址2"
banner[2]="图片地址3"
banner[3]="图片地址4"
banner[4]=“图片地址5”
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

4.自定义部分。注意用红色标出的数字，如果你有N张图片，那么红色数字应该为N-1。比如这儿有5张图片，那么值为4。

5.一些补充。Blogger beta中头部CSS中以Header-wrapper来定义其样式，默认它有一个角，所以鱼把Header-wrapper去掉了，这样更和谐一些，如果你的图片比较大，可以用Height属性来定义头部的高度。如鱼用的：

#header{
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif%22) no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
height:200px; }

最近好像Blogger服务器非常不稳定，经常不能保存模板。很浪费时间

Blogger beta技巧：输出评论

尽管想偷懒不写这一篇了，可是仍有不少朋友问到。

在Blogger beta里评论已经有单独的RSS输出了，先在设置里启用它。“Settings——》Site Feed——》Switch to :Advanced Mode”.

选择Advanced Mode之后，Blogger beta会为我们提供三种RSS地址：

http://用户名.blogspot.com/feeds/posts/full(所有帖子全文输出)

http://用户名.blogspot.com/feeds/comments/full（评论全文输出）

http://用户名.blogspot.com/feeds/文章编号/comments/full（单篇帖子评论输出）

我们知道在Blogger beta中有一个Widget叫Feed，因此我们只要把评论用Feed在侧边栏输出即可。

Template——》Page Elements——》Add a page elements——》Feed

轻松一下，性格测验

要评估自己的性格，选出你最喜爱的一张（请同时考虑形状和颜色）。

鱼觉得这个测验很准（我喜欢第四张图片），不过可惜，只能测试人性好的一面，嘿嘿。谁让丫头整天说我不好呢，我想知道到底我哪里太差。
这些天似乎一直面对代码，都快疯了。呵呵。你会选择下面的哪张图片呢？之前不要看答案哦。

测试结果：1) 时常自我反省,敏感的思想家你对于自己及四周的环境能够比一般人控制得更好更彻底。你讨厌表面化及肤浅的东西；你宁愿独自一人也不愿跟别人闲谈，但你跟朋友的关系却非常深入，这令你的心境保持和谐安逸。你不介意长时间独自一人，而且绝少会觉得沉闷。2) 独立，前卫，不受拘束你追求自由及不受拘束，自我的生活。你的工作及消闲活动都与艺术有关。你对于自由的渴求有时候会使你做出令人出人意表的事。你的生活方式极具个人色彩；你永远不会盲目追逐潮流。相反地，你会根据自己的意思和信念去生活，就算是逆流而上也在所不惜。
3) 精力充沛，好动，外向你不介意冒险，特别喜欢有趣的，多元化的工作。相比之下，例行公事及惯例会令你没精打采。你最兴奋的是可以积极参与任何比赛活动，因为这样你就可以在众人面前大显身手了。
4) 务实，头脑清醒，和谐你作风自然，喜欢简单的东西。人们欣赏你脚踏实地，他们觉得你稳重，值得信赖。你能够给予身边的人安全感，你给人一种亲切，温暖的感觉。你对于俗气的，花花绿绿的东西都不屑一顾，对时装潮流抱着怀疑的态度；对于你来说，衣服必须是实用及大方得体的。
5) 专业，实事求事，自信你掌管自己的生活，你相信自己的能力多于相信命运的安排。你以实际，简单的方式去解决问题。你对日常生活中所遇到的事物抱有现实的睇法，并且能够应付自如。人们知道你可担重任，因此都放心把大量工作交给你处理。你那坚强的意志使你时刻都充满信心。未达到自己的目标之前，你绝不罢休。
6) 温和，谨慎，无攻击性你生性随和，但处事谨慎。你很容易认识朋友，但同时享受你的私人时间及独立生活。有时候，你会从人群中抽身而出，一个人静静地思考生活的意义，并自娱一番。你需要个人的空间，因此有时会隐匿于美梦当中，但你并不是一个爱孤独的人。你跟自己及这个世界都能够和陆共处，而你对现状亦非常满意。
7) 无忧无虑，顽皮，愉快的人你喜欢自由自在，无拘无束的生活。你的座右铭是：生命只能活一次，因此你尽量享受每一刻。你好奇心旺盛，对新事物抱有开放的态度；你向往改变，讨厌束缚。你觉得身边的环境都不断在变，而且经常为你带来惊喜。
8) 浪漫，爱幻想，情绪化你是一个感性的人。你拒绝只从一个严肃，理智的角度去理解事物。你的感觉亦十分重要。事实上，你觉得人生必需要有梦想才叫活得充实。你不接受那些轻视浪漫主义及被理智牵着鼻子走的人；而且不会让任何事物影响到你那丰富的感情及情绪。
9) 具分析力，可靠，自信你对事物的灵敏度令你可以发现到旁人忽略了的东西。这些就是你的宝石，你喜欢发掘这些美好的东西。你的教养对于你的生活有很特别的影响。你有自己高雅独特的一套，无视任何时装潮流。你的理想生活是优雅而愉快的，而你亦希望跟你接触的人们都是高雅而有教养的。

Blogger beta技巧：存档/标签页仅显示标题

这个技巧不仅让你可以在存档/标签页显示标题，而且会在每个标题的前面显示一个［＋/－］符号，只要单击就会在当前页展开/收缩内容。相信这会让读者更容易的找到自己所想要的东西。

1.保存这个脚本文件，上传到自己的空间，如Google pages等。这个脚本在以前的收缩/展开文章中用过，如果你已添加，可直接跳到第三步，建议重新下载再上传一次，内容可能有变化。

2.在Head之间引用脚本文件，添加下面代码：

<script type='text/javascript'
src='脚本文件地址' />

3.确保已经展开Widget，然后搜索非红色的代码，在相应的位置，把下面的红色部分添加到代码中。最后保存。

<b:includable id='PeekABooPost' var='post'> <div class='post uncustomized-post-template'> <table><tr> <td width='40px'> <a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a> </td> <td> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> </td> </tr></table> <div class='post-body' expr:id='data:post.id' style='display:none'> <p><data:post.body/></p> <div style='clear: both;'/>  </div> </div> </b:includable>
<b:includable id='main' var='top'>
 <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:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <b:include data='post' name='PeekABooPost'/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/>
<b:include data='post' name='post'/>
</b:if>
<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>

Blogger beta:改变/隐藏Feed订阅地址

在Blogger beta中默认的Feed地址是在最下方的，我们可以把它变成一个Widget放在侧边栏或者你想要的地方。复制下面的代码，把它放在你想要的地方吧。

<b:widget id='FeedsWidget' locked='false' title='Feeds' type='Blog'>
<b:includable id='main'>
<h2 class='sidebar-title'>Syndication</h2>
<b:if cond='data:feedLinks'>
<ul class='xoxo'>
<b:loop values='data:feedLinks' var='f'>
<li><img src='http://photos1.blogger.com/blogger/6537/1341/1600/feed-icon-12x12.jpg' alt='' /> <a expr:href='data:f.url + "?alt=rss"' rel='alternate'><data:f.name/> Feed</a></li>
</b:loop>
</ul>
</b:if>
</b:includable>
</b:widget>

但我觉得，好像大多数人都用Feedburner或Feedsky烧制了RSS，那么我们可以把它隐藏起来。在CSS中加入这一句

.feed-link { display: none }

Blogger beta新闻两则

一是现在你可以直接在Add a page elements里添加Google adsense了。这是Blogger classic默认的功能。好像现在自定义性更强了，可以很方便的设置颜色和样式。

二是太平洋时间5:30 到 7:30，Blogspot因为网络故障而不能访问。看来Google的廉价主机真的很不稳定，软件有时候也不能解决一切问题。

Feedburner:自动Ping Google blogsearch

因为更新没有规律，所以欢迎订阅鱼的Blog

前几天Google blogsearch正式支持主动Ping，Google也提供了相应的API让用户可以自动Ping Google blogsearch，但对我们这些初级用户来说，只能以体力劳动代替脑力劳动了。

但是如果你用Feedburner烧制了你的Blog的话，那么我们可以放轻松一些啦。因为Feedburner最近添加的功能中就包括自动Ping一些博客搜索，其中包含了Google blogsearch。默认Google blogsearch不在其中，而且最多只能选择五个，所以你要去掉一个，然后就可以把Google blogsearch添加上了。

它的位置在Publicize——》PingShot

Blogger：提交Google Sitemaps(已更新)

感谢Sein,Google sitemaps是非常重要的SEO手段，通过它可以让你的网站迅速并且完整的提交到Google。但对Blogger这样的BSP来说，我们不能上传文件，所以不能用常规的方法去生成Sitemaps文件然后提交。那么我们应该怎么办呢？

我们知道Google sitemaps是一种XML文件，其实Blogger本身就提供了这种文件，Atom。因此我们只要把它提交到Sitemaps就行了。

你需要提交的地址是：

http://用户名.blogspot.com/atom.xml

关于如何使用Sitemaps可以查看它的帮助，一般的问题都可以在那儿找到。

Update：其实在提交了Atom之后，我又提交了Blogger的两种形式的Feed。发现只有RSS格式的没有出现错误。这点在评论里已经有朋友提到。因此你可以提交下面类似的地址：

http://用户名.blogspot.com/rss.xml

自定义网址前的小图标：Favicon(已更新)

如果你用Firefox或IE7(IE里面显示的是静态的)，在地址栏或标签上会看到本站的那个黑色的小花，而且是会动的。它是怎么做的呢？

发现了一个非常Cool的网站，以前鱼也写过类似的文章，但那个图标是静态的。在这个网站上你可以生成一个动态的图标，而且可以任意选择本地文件上传，自定义滚动的文字（好像不支持中文），动心了吗？

生成之后下载它提供的一个压缩文件，里面包含了一个.ico文件，一个 .gif文件。把它们上传到如Google pages（ICO文件必须更改名称，只要不是Favicon即可，比如鱼用的Sunricon.ico）得到地址。然后在Head之间添加下面代码：

1.如果是静态的Favicon（只需上传ICO文件）

<link rel="shortcut icon" href="favicon.ico文件地址" />

2.如果是动态的Gif（上传两个文件）

<link rel="shortcut icon" href="favicon.ico文件地址" / >
<link rel="icon" href="animated_favicon1.gif文件地址" type="image/gif" />

Blogger beta:高亮作者评论

此Hack可以让Blog作者的评论高亮显示。

1.添加以下CSS以定义作者评论的样式，你也可以修改下面的代码，让它以你自己喜欢的方式显示，懒得修改就直接复制过去得了。默认红色、加粗。请把这一部分放在<b:skin>]]></b:skin>之间，为了条理你可以把它放在“Comments”那一部分里。

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#CC3300; /*字体颜色*/
text-decoration:bold; /*字体样式，默认加粗*/
}

2.确定已展开Widget，寻找并添加红色部分代码。最后保存

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/>
<data:comment.author/>
</b:if> said...
</dt>
<b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p><data:comment.body/></p> </dd> <b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if>
</dd>
</b:if>
<dd class='comment-footer'>

视频：硬盘是如何工作的？

电脑的硬件中只有硬盘才是最令鱼迷惑的，因为从来没有见过它在里面是怎么转的，磁头在这样精密的条件下是如何工作的？

这个视频包含了从开启电源、删除文件夹、快速格式化、复制粘贴直到关闭电源一系列过程的磁头的变化。

预告：Blogger beta模板的详细制作过程

Hans开了一个专门的博客来写Blogger beta的模板制作过程，并将详细的介绍做法，这对任何使用Blogger的人来说无疑是条非常让人兴奋的消息，鱼也一样期待……

本博客将在第一时间将方法翻译过来，敬请期待。

盛宴：Google收购YouTube

首先，这不是资讯，鱼是Gfans，要跟风一下，为Google庆祝，纯粹个人心情。

Google video在中国并没有被开放，也一直为此感到惋惜，尽管Google video并不怎么流行。G.F.就要用Google的服务，这样才会舒心，作为Fans当然希望Google会更加强大，渗入生活的每一个细节，这是在Google的理念之内的。

鱼经常看一些（应该是很多）来自YouTube的视频，可是在速度上有待提高，Google的这次收购会让它的光芒更盛，Writely的老用户都会真切的感觉到收购之前和收购之后，它在使用速度和稳定性上的提高。速度是一种体验，而且是非常重要的。

Google的理念是Don't be evil，但实际上它已经变得很Evil了，相信很多Web 2.0公司都有危在旦夕的感觉，一旦Google进入某一个领域。国内的视频市场仍然没有老大出现的迹像，会不会将是Gootube呢？

鱼现在最期待的是Google会推出自己的音视频播放器，这样就可以扔掉Media player啦。

在线颜色调配工具

选择一个颜色之后，它会自动给出与颜色最打配的颜色，是设计网页时非常得力的一个工具，推荐给大家.另外你也可以用它来得到颜色的十六进制值。

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

以前用Classic Blogger的时候就想加上这个效果，因为懒所以一直没动，今天又在此人极度凶悍那里看到介绍这个JavaScript，终于下定决心把它添加上了。另外，为了搭配本Blog的效果，对它做了一点小小的修改，希望这点会对你有点用处。效果就是鼠标指向本站链接时出现的那个小框框

1.在CSS里添加以下代码：

/* Fading Tooltips By Dustin Diaz*/
body div#toolTip { position:absolute;z-index:1000;width:220px;background:#ff8c05;border:2px double #0f7f00;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px; }
body div#toolTip p { margin:0;padding:0;color:#ffffff;font:11px/12px verdana,arial,sans-serif; }
body div#toolTip p em { display:block;margin-top:3px;color:#ffffff;font-style:normal;font-weight:bold; }
body div#toolTip p em span { font-weight:bold;color:#ffffff; }

2.引用脚本文件，像以前添加JS一样，将此信息添加在head之间

<script type="text/javascript" src="addEvent.js文件地址"></script>
<script type="text/javascript" src="sweetTitles.js文件地址"><br /></script>

3.自定义。在CSS中我们可以看到五个颜色值，background:#ff8c05 背景色 double #0f7f00边框颜色还有其它三个都表示文字的颜色，一个是Title属性值的颜色，一个是链接的链色，还剩一个不知道。如果你知道请一定告诉鱼。

如果你很喜欢这个效果的话，这儿是下载地址。解压之后要将其中的两个JS文件上传（如Googlepages中），然后修改代码中JS文件的地址。其余的文件没什么用处啦。压缩文件中的CSS文件是默认的颜色，如果你喜欢可以用那里面的代码。

Blogger beta Hack:为标签添加说明

这个Hack（via Hoctro）可以让你的读者浏览标签的时候在标签的前面看到关于此标签的一些信息。类似于每个标签前面都有一篇不带标题的置顶文章。这个小小的很体贴的Hack，可以让你的读者明确的知道关于他们所打开的当前标签的一些详细信息，而不仅仅限于“标签”那几个字面上的理解。

顺带说一下，在Blogger beta里置顶贴是很容易实现的，因为Blog是按时间顺序排列的，而且帖子的日期是可以修改的，所以只要写一篇“未来”时间的帖子就可以让它置顶了。

在使用每一个Hack之前请备份你的模板，最好先在一个测试Blog上试一下，以免造成不可恢复的错误。这个Hack需要你展开Widget。

1.寻找下面这行代码

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

找到之后向后继续找到<b:includable id='main' var='top'>这一行，然后紧跟这一行之前粘贴如下代码：

<b:includable id='sub-introduction' var='data:posts'>
<b:if cond='data:blog.pageType != "item"'>
<b:loop values='data:posts' var='post'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.title == "Introduction"'>
<div class='post'>
<div class='post-body'>
<p><data:post.body/></p>
</div>
</div>
</b:if>
</b:if>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:post.title == data:label.name'>
<div class='post'>
<div class='post-body'>
<p><data:post.body/></p>
</div>
</div>
</b:if>
</b:loop>
</b:loop>
</b:if>
</b:includable>

2.现在再回到<b:includable id='main' var='top'>，继续寻找下面的代码所包围的那一部分代码：

<div id='blog-posts'>
...

<b:include name='nextprev'/>

用下面的代码完全替换中间的代码

<b:include name='sub-introduction' values='data:posts'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.title == "Introduction"'>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='postQuickEdit'/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='postQuickEdit'/>
<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:if>
</b:loop>
</div>

3.保存之后。我们要以特殊名字的文章来实现我们当初的目的。现在创建一篇新文章，要确保（1）文章名字与标签名字完全相同（2）此说明文章的标签也应一致。写完之后，可以把这篇文章的时间“回到过去”，以免让它显示在Blog里。

4.如果要在首页显示置顶说明。那么文章的标题要设置成“Introduction”，不要添加标签。时间要置前。选中"Post Options"中的“Don't allow” Reader comments，即不允许添加评论。

Blogging习惯

响应Yee的Blogging习惯.

鱼是条懒鱼（The last minute person），这是首要的，所以做事总会慢别人几拍。记得去年高考长假里第一次接触Msn spaces，过了几个月之后才知道这就是Blog，但是那个Blog一直搁置了很长时间（一直当个人网页用^-^），后来觉得可以用它来记录一些东西，交一些朋友。因为鱼不擅长文字，所以刚开始用它来贴一些自己在网上碰到的感兴趣的东西，说实话这种Copy挺无聊的，尤其看到自己的“落后性”，再后来就把那个Blog删掉了。其间挪过N次“窝”，最后，碰到了Bloggerspaces，再到Blogger解封，心终于安静下来，可以认真写一点东西了，再不用为BSP的功能不够强大、服务不够稳定而整天忧心了。

想了一段时间，觉得Blog应该写自己最熟悉，最关心，最感兴趣的内容，这样才能展现自我，所以我选择了在日常应用中遇到问题，解决问题的方法这个主题。个人觉得一个Blog应该注意的有以下几点：

1.有自己的主题。如果纯粹是记录个人心情，当然越随意越好，如果希望让更多的人接受，就应该有一个主题，这个主题最好是自己喜欢的，熟悉的，感兴趣的。

2.应该时常更新。相信大多数人都不是专业Blogging，所以可能更新并没有规律，但是最好有一点规律，在不能写Blog的时间里要向读者声明，以免他们一次次的刷新网页却不见更新。

3.最好写自己的东西。我们并不是每个新闻源的缔造者，所以我们要从很多渠道来获得信息。个人觉得，应该写更多的别人没写过的东西。国内很多知名的Blog就主要以国外的Blog相关信息为主，如Gseeker（不知道这个定位是否准确），尽管是别人的信息，但经自己的加工之后，就是自己的劳动成果。信息重复是很让人心烦的，就像Google，几乎每发现一点什么东西之后，鱼的Google reader里就是出现大量的类似的报道相同内容的信息，这让你的Blog失去个性。

4.坚持不懈。这是每件事成功的前提

5.适度的宣传。在宣传之前请确定你的Blog非垃圾Blog

6.赚钱放在最后。看一些人Blog里一点内容都没有就到处贴Adsense，鱼最讨厌这样的Blog。尽管Google声明自己“Don't be evil”，但却给了别人Evil的机会。多考虑一点读者的感受吧！

7.鱼写Blog主要靠那一点点“责任感”，无论心情好坏，都会写

最后感谢那些Readers，交到朋友才是最主要的，这本来就是鱼写Blog的本意。写到这儿。

飞出地球

这应该是一次比较难得的机会，记得上初三的时候，班主任曾跟我们说过一次这样的事，可当时连网络为何物都不知道，觉得遗憾，所以这次机会决不能错过。

黎明号(DAWN)是美国宇航局(NASA)的太空船，按计划，它将在2007年6月20日发射升空。目的地是谷神星和灶神星，这是两颗自形成以来一直完好无损的最大的原行星，它们位于火星和木星间小行星带。

为激发公众对太空探索的热情，你可以在美国宇航局网站报名，你的名字将被写入安装在探测器上的芯片里，跟黎明号(DAWN)太空船一起，飞往小行星带。同时，还会给你一份文件，证明你的名字跟飞船一起旅行过。报名截止日期：2006年11月4日。

报名地址：
http://www.dawn-mission.org/DawnCommunity/Sendname2asteroid/nameEntry.asp
详细信息请登陆NASA的网站：
http://www.dawn-mission.org

鱼的名字已经写上啦^-^

Blogger beta:"Top of Page"、"Top of post"

这个Hack(via Hans)在文章脚部处添加了两个链接，一个回到页首，一个回到帖子标题处。

1.备份模板，展开Widget

2.找到下面的代码，并添加红色部分（如果使用了本Blog之前介绍的展开伸缩文章，可跳过此步）

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id' >

3.继续向下寻找代码，找到文章脚部（Post-footer），比如我们把它添加在Quick edit之后，或者任何你想要的地方添加以下代码：

<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>Top of Page</a>
<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);' title='Scroll to top of post'>Top of Post</a>

4.保存模板

Blogger beta模板：UnderWater

使用之前请先查看压缩文件中的Readme

原模板预览（下载）

鱼修改过的模板预览（下载）

第一个模板中包含了以下Hack：

1.三栏

2.伸展/收缩文章

第二个模板在第一个的基础上包含了以下Hack：

1.标签Widget

2.收缩链接

3.……更多细节上的修改

添加滚动条

<div style="overflow:auto; height:300px; width:400px"> <table cellpadding="0" cellspacing="0" style="width:250px;"> <tr> <td> 文字部分</td> </tr> </table> </div>

Blogger beta高级教程篇：设计自己的模板

写在之前，十一长假结束后本Blog的更新频率将降低，实际上这几天也的确很累，强烈建议本Blog的读者订阅本Blog的全文输出Rss：

http://feeds.feedburner.com/eool（推荐）http://feed.feedsky.com/if ly（延迟时间较长）

希望可以交到更多的朋友，欢迎交换链接

继上一篇我们细节性的分析了Blogger beta的结构之后，这次我们会从总体上概括Blogger beta模板的组成（via Hoctro），并最终可以做出自己的模板，或者将其它的模板转换到Blogger beta上来。相信这将是非常令人激动的时刻。一个最好的展现自己个性的机会（你喜欢鱼昨晚上修改过的模板吗？）。

引用文章请尽量注明出处 ^-^

将代码完全折叠起来，我们可以从总体上（上面的图片中）看到Blogger beta的模板结构，以及它们之间的包含关系。请注意“xxxxx-wrapper”标记。

这张图片（点击查看完整图片）是我们把代码的下一级展开之后所看到的，这一级的代码大体展示出模板的组成。上一张图片我们看到了几个“xxxxx-wrapper”标记，现在你又会发现在每个“xxxxx-wrapper”标记之后都会出现“b:section”标记，“b:section”标记内是“b:widget”标记。如果我们再继续向下展开代码，里面的内容将是各个Widget标记的实际Html执行代码，本篇文章主要研究Blogger beta的主要构成，从总体上把握Blogger beta的组成，因此不再向下深究。

从上面两张图片中我们可以看出Blogger的主要组成有四个区域：页首、文章区域、侧边栏、页脚。

下面我们将详细讨论这四个区域：

1.页首

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

这一部分在Blog中起的作用就是显示Blog标题和描述。我们可以看到每一个“Section”会包含一个“Class（类）”，所以整个模板中含有四个Class（类），分别显示Header、Main、Sidebar、Footer（从而，我们可以通过修改针对不同区域的CSS来控制模板）。另外，Section也有它的"id"——“Header”。maxwidgets='1' showaddelement='no'这两个参数分别说明了“此区域最多的Widget个数”和“是否显示Add a Page Element选项”

在b:section中只包含了一个Widget，可以看到它的ID是“Header1”，Locked="true"这个参数规定它在Layout设置中是不可移动的。 title='brand new blog (Header)'指定它在Layout编辑中显示的名称 type='Header'会告诉Blogger这是一个Header类型。

2.Main Section

这个区域是Blog的最主要部分，用来显示Blog文章，同时这也是最复杂的部分，如果我们把代码展开就会发现，这部分的代码占了所有Html的80％。

<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>

这里只要注意 id="main" 以及它的一个widget (id=blog1) 就行了，其它的参数同上一部分类似。

3.侧边栏区域

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/>
<b:widget id='HTML1' locked='false' title='html code' type='HTML'/>
<b:widget id='Text1' locked='false' title='a text' type='Text'/>
<b:widget id='Image1' locked='false' title='pic' type='Image'/>
<b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/>
<b:widget id='TextList1' locked='false' title='list' type='TextList'/>
<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>

相信现在你已经可以很容易的分辨出Section标记，以及它包含的所有Widget（这里包含了所有Blogger里可以添加的Widget）。相信已不用再详细说明，要注意那些“ID”，比如你想要两个“标签”模板在你的Blog上，那么你可以复制相应的Widget，但要确保它们的ID是“独一无二”的，比如“Label1”、“Label2”。

4.页脚部分

这部分是最简单的，因为大多数时候我们不会在这里放太多东西。

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

*自定义部分

或许接下来我们才进入真正自定义模板的主题，我们上面刚才看到的代码并不是一无是处的，把它放在Blogger中的时候它就会起作用。只要我们再加上相应的CSS，我们的Blog就会以任何我们想要的形式展现出来（要懂一点CSS）。

在任何一个已存在的模板中，我们已经完全可以把它转换到Blogger beta中来了。无须复制/粘贴长长的代码，我们只要把上面提到的四个Section复制过去即可。下面是一个示例：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
*/
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>

<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='brand new blog (Header)' type='Header'/>
</b:section>
</div>
<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 id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/>
<b:widget id='HTML1' locked='false' title='html code' type='HTML'/>
<b:widget id='Text1' locked='false' title='a text' type='Text'/>
<b:widget id='Image1' locked='false' title='pic' type='Image'/>
<b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/>
<b:widget id='TextList1' locked='false' title='list' type='TextList'/>
<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 class='clear'> </div>
</div> 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> 
</body>
</html>

在上面的代码中我们并没有把每个Widget的详细Html复制过去，但是保存之后你会发现所有的Widget已经被Blogger执行了。接下来只要写入控制各个区域的CSS，并修改相应的“ID”即可。

如果你做了漂亮的模板，欢迎来Show一下。

Blogger beta：自定义Blog里的引用

这是鱼的第一百篇Blog。写一个不算Hack的“Soft-hack”。呵呵。效果就像本篇贴子的引用。

你觉得还喜欢这样的效果吗，当然颜色是可以自定义的也终于发现Windows live writer的BuG了，在Html编辑模式下就不能用汉字了，不得不Copy。不过的确非常喜欢这个编辑器，太方便了。昨天有人问Live writer是什么，它是微软Live战略里的一个软件，离线写Blog，Google一下吧，或者去官方博客看看（可以从那儿下载）。

言归正传，我们知道在默认的Blogger里也存在一个“引用”，不过这个小小的Hack更实用些，用它来说明一些东西还是非常方便的。

这个Hack里用到三个变量，我们要先在Head里定义它。如鱼定义的代码为：

<Variable name="pullquoteBgColor" description="pullquoteBgColor" type="color" default="#660000" value="#003366">
<Variable name="pullquoteTextColor" description="pullquoteTextColor" type="color" default="#660000" value="#ffff66">
<Variable name="pullquoteborderColor" description="pullquoteborderColor" type="color" default="#660000" value="#e6e6e6">

里面有一些初始值，不要太关心，过一会我们可以方便的在“Fonts & Colors”里个性的设置它。

定义了变量我们就可以在CSS中添加以下CSS来“描述”这个区域了，在这里你也可以完全让它变成任意你喜欢的样子。

下面是CSS：

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(图片地址);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

里面有一张图片，你需要自己保存并上传，最后改变CSS里的地址，右键另存这张图片

在最后的最后，我们要到“Fonts & Colors”里面点击鼠标来挑选我们喜欢的颜色，你会发现里面多了三个颜色变量。分别是：pullquoteBgColor（背景颜色）、pullquoteTextColor（文字颜色）、pullquoteborderColor（边框颜色）。如果你想在贴子里使用引用的时候，需要用＜span class="pullquote"＞＜/span＞将文字包围起来

添加公告栏

有朋友问侧边栏里的公告栏，代码很简单，首先在侧边栏里添加一个Html/JavaScript模块，在里面加上下面的代码，公告栏的内容自己修改。可以根据自己的情况适当修改代码

<table border="0" width="80%" bgcolor="#ffffff">
<tbody><tr>
<td class="RegionContent"><p>
</p><marquee scrolldelay="1" direction="up" onmouseover="this.scrollDelay=3000" style="font-size: 12px; color: rgb(65, 65, 65); line-height: 17px;" onmouseout="this.scrollDelay=1" scrollamount="1" height="90">
已得到Wallop邀请的朋友请在评论里留下你的Email，谢谢。
</marquee></td>
</tr>
</tbody></table>

这篇Blog通过Windows live writer撰写，感觉非常不错哦。以后就用它了。如果你看过之前介绍的“优化头部信息”并做了修改，可能会检测不到Blog的生成属性。

最新消息：Google blog search支持主动Ping

据我所知Google blog search对Blogger beta支持的并不怎么样。因为只会收录不超过五篇的内容。

当你的Blog更新了现在你通过这个地址http://blogsearch.google.com/ping来通知Google blog search收录你的内容，这个东西类似于Feedsky的Ping
但是个人认为这个功能没多大用处，因为Google blog search收录速度已经够快了，几乎一发布就会被收录.

Blogger beta：图片解剖Blogger beta模板代码

说明(点击看大图)：
1.所有蓝色的部分都是位于Style标记之间的CSS样式表代码，红色的部分是位于Body标记之间的Html代码。
2.并不是所有的模板都完全一样，但大体类似。
3.享受自己的Hack吧^-^
4.via Blogatech

A)头部（Header）。此部分位于页首部，包含标题和网站描述，概括了整个页首部分。

CSS=
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

HTML=
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>

<ItemPage>
</h1>
<p id="description"><$BlogDescription$>
</div>

B）导航栏（Navigation Bar）。此部分代码默认在代码中是不显示的。如果你要去掉NavBar只要在CSS中添加以下代码即可：

CSS=
#b-navbar { height:0px; visibility:hidden; display:none
}

C) Blog标题（Blog title）

CSS=
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}

HTML=
<$BlogTitle$>

D)Blog 描述（Blog Description）

CSS=
#blog-description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<$BlogDescription$>

E)Blog日期首（Blog Date Header）。贴子发布时自动生成日期。

CSS=
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
.date-header {
margin:1.5em 0 .5em;
}

HTML=
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

F)文章标题（Blog Item Title)

CSS=
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;

HTML=
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

G)文章区域（Post Division）。此部分包含了Blog Date header, Blog Item Title, Blog Item Body 和 Blog Item Footer。

CSS=
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
.post div {
margin:0 0 .75em;
line-height:1.6em;

HTML=
<div class="post">
</div>

H)文章援引区域（Post Block Quote）

CSS=
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

HTML=
<blockquote>

I)文章文字区域（Blog Item Body)

CSS= .post div {
margin:0 0 .75em;
line-height:1.6em;
}

HTML=
<$BlogItemBody$>

J)个人资料部分（Blog Member Profile Division）

CSS=
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

HTML=
<$BlogMemberProfile$>

K)文章底部（Post Footer）这部分包含了Authors Nickname, Item Date Time, Item Comment Count, Comments and blog item control variables等

CSS=
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}

HTML=
<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>

L)链接（Links）

CSS=
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

HTML=
<h2 class="sidebar-title">Links</h2>
<ul>
<li><a href="http://news.google.com/">Google News</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
</ul>

M)之前文章（Previous Posts）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

HTML=
<h2 class="sidebar-title">Previous Posts</h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

N)存档（Archives ）

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;

list-style:none;
}

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;

letter-spacing:.2em;
color:#999;
}

HTML=
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>

O)侧边栏区域。此部分包含了Member Profile, Links, Resent Posts and Archives等

CSS=
#sidebar {
width:220px;
float:right;
}

#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;

HTML=
<div id="sidebar"><div id="sidebar2">
</div>

P)页脚部分

CSS=
#footer {
width:660px;
clear:both;
margin:0 auto;
}

#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

#sidebar p {
color:#666;
line-height:1.5em;

HTML=
<div id="footer"><hr />
<p> </p>
</div>

Blogger beta：头信息优化

< data="'blog'" name="'all-head-content'/">

我们在Blogger Beta模板代码的头部会发现这样一条语句，它是用来做什么的呢？这条语句的作用就是加载那些无需修改的头部信息，比如RSS地址，网页编码等
那么我们可以做些什么呢？比如鱼，很希望别人订阅自己烧录的Feedburner地址，而不是Blogger默认的地址，这样更容易统计网站的信息。那么这个语句就变得非常关键了。
我们应该怎么做呢？把这条语句删除我们就可以自定义任何自己想要的信息了。其中有两条是必须要添加上的，一条是网页编码(如果你是按Blogger默认的编码就是UTF-8)，另一条是RSS。
下面是这两句的内容：
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<link href='http://feeds.feedburner.com/eool' rel='alternate' title='RSS for this blog' type='application/rss+xml' />

其它内容：
name 属性
1、<meta name="Generator" Content="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
　　
2、<meta name="KEYWords" content="">向搜索引擎说明你的网页的关键词；
　　
3、<meta name="DEscription" content="">告诉搜索引擎你的站点的主要内容；
　　
4、<meta name="Author" content="你的姓名">告诉搜索引擎你的站点的制作的作者；
　　
5、<meta name="Robots" content= "all|none|index|noindex|follow|nofollow">
　　
其中的属性说明如下：
　　
设定为all：文件将被检索，且页面上的链接可以被查询；
　　
设定为none：文件将不被检索，且页面上的链接不可以被查询；
　　
设定为index：文件将被检索；
　　
设定为follow：页面上的链接可以被查询；
　　
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
　　
设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性
　　
1、<meta http-equiv="Content-Type" content="text/html";charset=gb_2312-80"> 和 <meta http-equiv="Content-Language" content="zh-CN">用以说明主页制作所使用的文字以及语言；
　　
又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
　　
2、<meta http-equiv="Refresh" content="n;url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink；
　　
3、<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
　　
4、<meta http-equiv="Pragma" content="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
　　
5、<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
　　
6、<meta http-equiv="Pics-label" content="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
　　
7、<meta http-equiv="windows-Target" content="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
　　
8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" content="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果，这个功能即 FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

Update:忘了补充了，你必须在每一条语句后面加一个“ /”以让标记“结束”，这些信息都是放在Head之间的。

Blogger beta:优化Blogger导航

ExplodingBoy又设计了一系列免费的导航图标，因此Hoctro又为我们带来了新的Hack，不过他的方法却不能在首页显示，而且原来的Older posts也不能用了，所以鱼推荐直接用最简单的Img标记引用图片以替代原来的文字，从而优化Blogger的导航栏。

找到自己喜欢的图片上传，并找到代码的以下位置，用红色标出的部分替换为图片（注意图片对应，Newer：前 Older:旧 Home:主页）。

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</b:if>
</div>
<div class='clear'/>
</b:includable>

如果你不会用Img引用图片的话，那么只要仿照这个格式就行：<img src="图片地址">

Blogger:如何合并多个Blogger帐号

相信不少人拥有不止一个Blogger帐号，这样给我们的管理带来了麻烦。如果你只是在不同的帐号里建了多个空Blog以占“位置”的话（鱼注册了不少哦），只要把帐号删了，再到主Blog里继续“占用”即可。如果你用不同的帐号写Blog，该如何迁到同一帐号下呢？

确定你的主帐号之后，到不同的帐号中把所有的Blog做如下设置Settings——》Permissions——》Add authors，添加主要的Blogger帐号并将权限设为Admin。
之后，你就可以到主帐号中去把各个Blog的其它帐号删掉了。
(via Blogger Tips&Tricks)

Blogger beta:另一个Mp3播放器dewplayer

之前介绍了一个Mp3播放器，在现在的Blogger beta中IE中运行会出现脚本错误的问题。今天碰到了这个播放器，测试了一下，发现它在侧边栏里是可用的，而在贴子里仍会出问题。给需要的人用吧，反正文章已经写过了

很精致的一个播放器，好像设计它的作者是一个法国艺术家。

如果你要使用这个播放器，请将此链接另存并将Flash上传到FTP服务器（Google pages），然后添加下面代码。红色部分替换成相应的地址。

<object data="路径/dewplayer.swf?son=mp3文件" width="200" height="20" type="application/x-shockwave-flash"><param value="路径/dewplayer.swf?son=mp3文件" name="movie"/></object>

Update:
看到评论里夜摘星提到用Embed可以解决问题，再试一下。

继续发送Wallop邀请

需要邀请的朋友太多，而一个人的力量太小，所以大家要多多分享，把你邀请的朋友贴出来。鱼又注册了三个帐号，可以邀请24个人，先到先得。见谅！

想不到仍有这么多夜猫子（习惯了抓虾这么叫我），24个邀请已经发完了，下面整理出这些地址已经得到邀请了，请向他们索要邀请。鱼明天去公园，可能不会上网。睡了晚安。
Gogle#live.com
zjunjie#gmail.com
followtear#gmail.com
iblader#gmail.com
lenmore#gmail.com
kuex#163.com
wek1004#gmail.com
infin2u#live.com
maixiaotian#gmail.com
diablo_yt#vip.163.com
yeswhy.wang#gmail.com
1981911#gmail.com
wongjun78#gmail.com
jraynorlxx#gmail.com
bowenri#msn.com
richard9090@msn.com
dennis#msn.com
kirajun#gmail.com
hu.conghua#gmail.com

http://maixiaotian.blogspot.com
http://jraynorlxx.blogspot.com

Wallop邀请

如果还没有找到帐号，请到评论中试试，有很多人已经有了哦，欢迎已经有帐号的在评论中把你的地址留下，包括你邀请的人的，谢谢

鱼建了三个帐号发送邀请，现在已发送完毕，但是已经有更多的人拥有邀请啦^-^，下面是名单，有需要者可以直接发邮件向他们询问，相信他们一定会满足你的要求的。得到邀请后，上传一张头像，在右上角的齿轮那儿就可以向别人发送邀请了。祝你们好运。

thestral_lord#126.com（邀请已发完）
kelvenboy#msn.com
yanghuiqiao#gmail.com
72changes#gmail.com
tenzor10#gmail.com
antengj#gmail.com
dovedoane#hotmail.com
oqbdpo#gmail.com
liangwei2000#gmail.com
izhouning#gmail.com
jflycn#gmail.com
casanova#live.com
KityBoy#Gmail.com（邀请已发完）
uuyh#msn.com

来得更晚的朋友请到他们的博客上看看有没有更多的人拥有邀请
http://ethul.blogspot.com
http://oqbdpo.spaces.live.com
很遗憾留下博客地址的并不多……

请留言在这些邮件地址之后的朋友发送邮件向这些人获取邀请，见谅！请不要重复发送邮件。

赠送Wallop邀请

如果你对Wallop感兴趣，可以留下邮箱，邀请不多，先到先得，未得到邀请的朋友请向留言的朋友索要，如果你不想分享请不要留言，谢谢。
现在有十四个邀请。请得到邀请的朋友也留下BLog地址，鱼会整理地址以方便其它人索要邀请。
现在的Wallop比以前的Mywallop速度要快得多，更多功能体验中。

在网页上添加Google widget

Google开放了Google widget，现在你可以在任何网页上添加Widget，同样包含Blogger。有一定程度的自定义，比如修改边框、颜色、语言等等。不过现在的Widget似乎并不多。感兴趣不妨试一试

Blogger V3.0:在单独贴子中添加JavaScript代码

我们知道在Blogger beta模板中其对JavaScript的支持是非常完美的，基于此，我们才可以实现那么多以前觉得不可思议的功能。但是，当你单独在某一篇文章中加入JS的时候，就会出现错误提示，告诉你并不允许在贴子中添加JS。此时我们忽略这个提示，帖子尽管可以发布，可是鱼发现它并没有被执行……
Amit在他的Blog中提到是可以执行的，为什么呢，难道我做错了？我试了Google reader和Google Adsense事实证明没有执行。

今天Blogger又进行了一些升级，比如添加链接、图片。

带有按钮效果的图片或链接

当你的鼠标移过本站的链接，尤其是图片的时候你会发现，链接（图片）会有少许的位移，就像按钮被按下的效果。我们知道CSS中有一个事件是a:hover，它用来定义鼠标经过链接时所发生的效果，我们定义当鼠标经过时，将链接向下、向右各移一个像素，那么当鼠标经过的时候的效果看起来就像按钮被按下了。
如果想单独让某一个链接出现这样的效果，我们可以用Span来设定某一个特定的链接
1.在CSS中添加以下定义，“pushbutton”是唯一的ID，可以自定义，只要不与模板中其它ID重复。
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

2.在链接上添加Span，例如：＜span class="pushbutton"＞＜a href="url"＞＜img src="imagesource"/＞＜/a＞＜/span＞

如果我们要让整个模板中的链接都实现这样的效果，可以在模板中所有出现a:hover　的地方添加属性：position: relative; top: 1px; left: 1px;

Blogger V3.0：标签Widget

针对标签的Hack恐怕是Blogger中最多的了吧，如以前的将标签变为导航栏，以下拉菜单展示标签等。这一次我们要做一个Widget，读者可以选择自己喜欢的标签形式。一共有三种样式，Blogger默认、菜单、放大类型。

Step0:备份模板。
Step1:如果你已经添加了标签，请在Page Elements里将它先去除。然后Edit Html（无须展开Widget），找到Label区域，会看到类似代码：<b:section class='sidebar' id='sidebar' preferred='yes'>
将下面的代码复制/粘贴到上面的代码之后：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<h2>Multi-style Labels</h2><br/>

<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>

<img src='http://sunrrr.googlepages.com/list.jpg'/></a>

<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>

<img src='http://sunrrr.googlepages.com/menu.jpg'/></a>

<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>

<img src='http://sunrrr.googlepages.com/zoom.jpg'/></a>

<b><a href=''></a></b><br/><br/>

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

}

function menuStyle() {

var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";

<b:loop values='data:labels' var='label'>

display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";

</b:loop>

display = display + "</select>";

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

}

function linkStyle() {

var display = "<ul>";

<b:loop values='data:labels' var='label'>

display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";

</b:loop>

display = display + "</ul>";

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

}

// set default to zoom style

zoomStyle();

</script>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

另外你也可以单独添加Zoom类型的标签，需要以下代码：

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<h2>Labels</h2><br/>

<div class='widget-content'>

<script language='javascript' type='text/javascript'>

var max = 0;

var min = 10000;

<b:loop values='data:labels' var='label'>

if (<data:label.count/> > max)

max = <data:label.count/>;

if (<data:label.count/> < min)

min = <data:label.count/>;

</b:loop>

var display = "";

<b:loop values='data:labels' var='label'>

var delta = <data:label.count/> - min;

var size = 100 + (delta * 100) / (max - min);

document.write("<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>");

</b:loop>

obj = document.getElementById('LabelDisplay');

obj.innerHTML = display;

</script>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

其中用到的三张图片请自己下载保存，并修改代码中的地址
http://sunrrr.googlepages.com/list.jpg
http://sunrrr.googlepages.com/zoom.jpg
http://sunrrr.googlepages.com/menu.jpg

Blogger V3.0:添加标签云

相信这是很多人期待的功能吧。以前用Delicious为Blogger添加标签云，现在我们的方法更简单。
请于修改之前备份你的模板。
Step1:我们知道，Blogger beta的代码分为三部分：样式表、布局、Widget。第一步我们不需要展开代码，添加CSS代码。找到 ]]＞＜/b:skin＞，并将CSS添加在其之前。

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Step2：添加布局部分代码。我们仍然要先找到 ]]＞＜/b:skin＞　，但这一次我们要在它之后、Head之前添加以下代码：
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

修改YOURBLOG为你的名字，其中关于颜色，文字大小等值可以自定义，以跟你的Blog色调打配。
简单介绍一下，maxFontsize表示字体最大值，minFontSize表示字体最小值，minColor表示颜色最浅值，maxColor表示颜色最深值。

Step3:最后要修改的是Widget本身了。继续往下看就会找到Label的Widget
类似这一句：<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
如果你没有展开代码，只需要用以下代码替换这一行;相反，你要替换整个Widget。

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>

// Don't change anything past this point -----------------

function s(a,b,i,x){

if(a>b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}

else{

var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}

return v

}

var ta=0

var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = "<data:label.name/>";

ts[theName] = <data:label.count/>;

</b:loop>

for (t in ts){

if (!labelCount[ts[t]]){

labelCount[ts[t]] = new Array(ts[t])

}

}

tz = labelCount.length-1;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){

for (var i=0;3 > i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {

a.appendChild(document.createTextNode(t));

li.appendChild(a);

}

ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);

}

lc2.appendChild(ul);

</script>

<noscript>

<ul>

<b:loop values='data:labels' var='label'>

<li>

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

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

</noscript>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Step4：Game Over ^-^

订阅：博文 (Atom)