和回到页首相比复杂一些，以下是具体步骤：
1. 找到下列代码，添加粗体字部分（如果没有的话）。<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id' >
2. 找到帖子的底部（<p class="post-footer">）在其后添加下面的代码（可以根据自己需要修改粗体字部分）<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>
via: Blog Navigation: Top of Page and Top of Post
较旧的博文>>
2007-05-12
怎样回到本帖开头
2007-05-01
怎样为你的Blogger添加相册？
虽然Google认为相册不是Blogger的必备功能（即使他们已经推出了google网络相册），不过还是有很多朋友（特别是从msn space上转过来的朋友）还是想在自已的Blogger上添加一个照相簿。托phydeaux3的福，你的这个愿望可以在三分钟后实现（该hack在新版blogger下测试有效，旧版的没试过）：
1. 既然是新版blogger的用户，那么你一定已经有了一个google网络相册（并且相册里已经有些照片了）。
2. 以下就是你要粘贴到自己blogger上的代码，老规矩，你可以修改其中的粗体字部分（你也可以直接到 Picasa Web Albums Widget Creator for New Blogger上进行设置）。为了加快进度，就不一一解释了，不过千万记得修改最后一行中的"my pwa feed "（当然是用你自己的pwa feed代替）<div id="pwFeed" style="text-align: center;"></div><script type="text/javascript"> var imgNum = 0; var pwaHeader = true;var albumDisplay = false ; var pwaLogo = true; var pwaSlideShow = true; var pwaSlideSpeed = 5000; var pwaImageSize = 160; var pwaImageFeed = 20; var pwaBorder = true; var pwaBorderSize = 2; var pwaBorderColor = ' #000'; function pwShow(root) { var feed = root.feed; var entries = feed.entry || []; var pwTitle = feed.title.$t; var album = feed.link[1].href; pwf= document.getElementById('pwFeed'); if(pwaHeader){ h2 = document.createElement('h2'); h2a = document.createElement('a'); h2a.href = album; h2t = document.createTextNode(pwTitle); h2a.appendChild(h2t); h2.appendChild(h2a); pwf.appendChild(h2);} ul = document.createElement ('ul'); ul.id = 'pwaUL'; ul.style.listStyleType = 'none'; if(feed.entry.length > pwaImageFeed){ pwaFetch = pwaImageFeed;} else {pwaFetch = feed.entry.length;} for (var i = 0; i < pwaFetch ; ++i) { var entry = feed.entry[i]; var title = entry.title.$t; var jsonImage = entry.media$group.media$content[0].url; if(albumDisplay){var link = entry.link[1].href;}else {var link = entry.link[1].href;} li = document.createElement('li'); li.style.backgroundImage = 'none'; li.style.border = '0px'; if(pwaSlideShow){li.style.display = 'none'; li.id = 'pwa' + imgNum;} a = document.createElement('a');a.href = link; a.title = title;img = document.createElement('img');img.src = jsonImage + '?imgmax=' + pwaImageSize + '&crop=1'; if(pwaBorder){img.style.padding = '2px';img.style.border = pwaBorderSize + 'px ' + pwaBorderColor + ' solid';} img.style.width = pwaImageSize + 'px'; img.style.height = pwaImageSize + 'px';a.appendChild(img);li.appendChild(a);ul.appendChild(li);imgNum++;} if(pwaLogo){ logoli = document.createElement('li');logoli.style.paddingTop = '3px';logo = document.createElement('img');logo.src = 'http://photos1.blogger.com/x/blogger2/4751/2497/320/550435/picasaweblogo-en_US.gif';logoli.appendChild(logo) ; ul.appendChild(logoli);} pwf.appendChild(ul);if(pwaSlideShow){ pwaPlay();}} var pwaCurrent = 0; function pwaPlay(){if(pwaCurrent >0){ pwPrev = pwaCurrent - 1; document.getElementById('pwa'+pwPrev).style.display = 'none';} else {pwPrev = imgNum -1;document.getElementById('pwa'+pwPrev).style.display = 'none';} document.getElementById('pwa'+pwaCurrent).style.display = 'block'; pwaCurrent++; if (pwaCurrent == imgNum){ pwaCurrent = 0;}setTimeout('pwaPlay()', pwaSlideSpeed)} </script><script type="text/javascript" src=" my pwa feed"></script>
3. 对上述代码进行修改后就可以直接放到侧边栏（或者其他你认为合适的位置）。
因为不是很新的hack，相信有很多朋友都已经用上了，如果有什么疑问，欢迎大家在评论中留言！
via: New Blogger Widget for Picasa Web Albums
更新1：pwa feed地址在哪里？
更新2：怎样实现“照片散落”效果：打开picasa（没有可以到下载的圈圈中下载）然后按图示操作
Blogger随机文章生成器
不算很实用的一个blogger hacks，不过用来玩玩还是挺有意思的。可以生成一个文字（或图片）链接（如右上角的：第一次来，随便给篇文章看看先！），点击该链接会随机显示你的blogger中的一篇文章（貌似Google的“手气不错”）。
你可以直接应用以下代码（黑体字部分可按照自己的需要修改）：<h2 class="sidebar-title">Feeling Lucky</h2>
<div id='myLuckyPost'></div>
<script type='text/javascript'>
var luckyAnchor = 'Are ya feeling lucky punk?';
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
window.location = entry.link[0].href;
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function feelingLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
a = document.createElement('a');
a.href = '#random';
a.rel = luckyNumber;
a.onclick = function(){fetchLuck(this.rel);};
a.innerHTML = luckyAnchor;
document.getElementById('myLuckyPost').appendChild(a);
}
</script>
<script src='/feeds/posts/summary?max-results=1&alt=json-in-script&callback=feelingLucky'></script>
或访问作者的Blogger Feeling Lucky Widget生成页面。
via: Blogger Feeling Lucky Widget
2006-12-20
怎样在文章末尾添加美味书签链接和回到页首�
Hou Jay前几天来信问：如何在blogger文章末尾加个“收藏到美味书签”的连接？不好意思Jay，现在才答复你的邮件。
1. Blogger 3.0（Beta Blogger，新版Blogger）：
1-1. 定位代码<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
1-2. 在其后添加代码<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='美味书签'>del.icio.us</a>
2. Blogger 2.0（Blogger Classic，旧版Blogger）：
2-1. 定位代码<p class="post-footer">
2-2. 在其后添加代码<em><$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
| <a title="收藏到del.icio.us" href="http://del.icio.us/post?url=<$BlogItemPermalinkURL$>&title=<$BlogItemTitle$>" target="_blank">del.icio.us</a>
</em>
搞定（没搞定的留言）。
另外在奉送一个小技巧：怎样为每篇文章添加一个返回页首的链接（TOP，如图）？只要添加下面的代码就搞定：<a href='javascript:scroll(0,0)' title='回到页首'>TOP</a>
就这么多了，希望对大家有帮助!
via:(Google | Blogger [八卦新闻])
2006-09-22
3分钟搞定Blogger页内评论
似乎有不少人对添加页内评论功能很感兴趣，的确，有了页内评论，方便访客留言，增加了与大家的互动。
8O也在网上找了很多不同的添加页内评论的方法，还是没有发现一套完美的解决方案，不是实现起来太复杂（not 菜瓜 friendly），就是功能“太强”，而且不稳定（需要调用其他网站上的js）。
8过功夫不负有心人，搜了这么长时间还是有收获D。按照Browervulsel上的方法，你可以很方便的在blogger上建立自己的页内评论功能。当然任何收获都是有代价D，你接受以下的“牺牲”：
将“谁能发表评论？”设置为“任何人”
关闭“留言显示验证词”
无法启用评论审阅功能
好在访问8O的blogger的朋友们素质都很高，而且流动人口又少（伤心啊555~~~），所以8O认为可以放心大胆的放开评论（言论自由嘛），如果你也想鼓励大家在你的blogger上留言，那么o们就看看怎么在3分钟内搞定页内评论
第一分钟：
老规矩，备份原模版。
既然要放开评论，就彻底的放开。
第二分钟：
复制以下代码，粘贴到</BlogItemComments>
<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<script type="text/javascript">
//<![CDATA[
var expires = new Date();
expires.setFullYear(expires.getFullYear()+1);
function setCookie(name, value) {
document.cookie = name +'='+ escape(value) +'; expires='+ expires.toGMTString();
}
function getCookie(name) {
var key = name + '=';
var c = document.cookie;
var i = c.indexOf(key);
if (i < 0) return '';
var j = c.indexOf(';', i + key.length);
if (j < 0) j = c.length;
return unescape(c.substring(i + key.length, j));
}
function trim(text) {
return text.replace(/^\s+|\s+$/g, '');
}
var bgPosted = false;
function cFrmPost() {
with (cFrm) {
anonName.value = trim(anonName.value);
anonURL.value = trim(anonURL.value);
postBody.value = trim(postBody.value);
if (anonName.value == '') {
alert('Please enter your name');
anonName.focus();
return false;
}
if (postBody.value == '') {
alert('Please enter a comment');
postBody.focus();
return false;
}
anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
}
bgPosted = true;
return true;
}
function bgpostLoad() {
if (bgPosted == true) {
if (cFrm.remember.checked) {
setCookie('anonName', cFrm.anonName.value);
setCookie('anonURL', cFrm.anonURL.value);
}
window.location.reload();
}
}
//]]>
</script>
<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>
<div>
<input type="hidden" name="blogID" value="<$BlogID$>" />
<input type="hidden" name="postID" value="<$BlogItemNumber$>" />
<input type="hidden" name="isPopup" value="false" />
<input type="hidden" name="iden" value="Other" />
</div>
<dl>
<dt><label for="uname">Name</label></dt>
<dd><input type="text" id="uname" name="anonName" maxlength="100" /></dd>
<dt><label for="url">Homepage</label></dt>
<dd><input type="text" id="url" name="anonURL" maxlength="100" /></dd>
<!-- START SPAM PROTECT remove comment to enable
<dt><label for="captcha">Word verification</label></dt>
<dd>
<img src="http://www.blogger.com/captcha?postID=<$BlogItemNumber$>" height="70" width="200" alt="Verification image" />
<br /><input type="text" id="captcha" name="captcha" /><br />
This is <a href="http://help.blogger.com/bin/answer.py?answer=1203">spam protection</a>.
Please enter the text in the image above to leave your comment.
</dd>
END SPAM PROTECT remove comment to enable -->
<dt><label for="comment-body">Comment</label></dt>
<dd><textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
var cFrm = document.getElementById('cFrm');
cFrm.target = 'bgpost';
cFrm.onsubmit = function(){return cFrmPost()};
if (document.cookie != '') {
cFrm.anonName.value = getCookie('anonName');
cFrm.anonURL.value = getCookie('anonURL');
}
cFrm.postBody.value = '';
if (cFrm.captcha) cFrm.captcha.value = '';
document.write(
'</dd><dd><input type="checkbox" id="remember">'+
' <label for="remember">Remember me</label>'
);
//]]>
</script>
</dd>
</dl>
<p><input type="submit" name="post" value="Post" /></p>
</form>第三分钟：
基本上你已经大功告成，你还需要将下面的代码
<a class="comment-link"href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>>
<$BlogItemCommentCount$> comments</a>替换成
<a href="<$BlogItemPermalinkUrl$>#comments">Comments (<$BlogItemCommentCount$>)</a>如果彻底不想让用户打开blogger默认的评论页面，你还需要删除（或屏蔽）
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>测试一下效果吧！有问题可以在这里提，如果只是想测试，请访问页内评论测试页
Tags:
更新1：此贴出现大量Spam评论暂时关闭评论功能，如有问题或建议可使用留言板！！！
2006-09-17
Blogger的导航菜单
做完beta的导航菜单后很想给blogger也做一个。仔细研究了一下代码，发现在blogger上实现导航菜单，似乎比beta上更简单，更灵活（不搬家了）。大致的步骤和beta版的导航菜单是一样的：
1. 选择导航菜单的样式
如果你选择和8O一样的样式（tabsF），可以跳过此步骤。或者下载所有11种样式的导航菜单，从中挑选适合你blogger风格的导航菜单。
2. 添加CSS样式
下面的代码是8O选择的F样式，复制下面的代码，粘贴到CSS样式表的最后（</style>标志前） /*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/------
*/
#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid $bordercolor;
/*Notice the use of $bordercolor to match with the Beta Blogger Settings*/
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(" http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
上述代码中的图片来自Ramani的网站，你也可以将图片放到自己的blogger上，然后更改图片位置。如果你选择其他样式的导航菜单，则将相应的CSS代码复制到上述位置。
3. 最关键的一步（特别感谢8O）<div id="header">
<h1 id="blog-title">
<a href="<$BlogURL$>" style="font-weight:bold; color:#0A409A;">
<$BlogTitle$>
</a>
</h1>
<p id="description"><$BlogDescription$></p>
…………
</div>
用下列格式的代码替换“…………”<div id='tabsF'>
<li><a href="url1"><span>Tag1</span></a></li>
<li><a href="url2"><span>Tag2</span></a></li>
…………
</div>
OK!beta需要5步完成的工作，在blogger上只要三步就搞定，而且你可以随意调整每个Tag的顺序，更重要的是你可以在此放任一链接，使其显示在每页的顶部（不像beta只能显示分类名，且Tag顺序无法调整）。呼！上帝也休息的日子，8O也去放松一下！Tags:
2006-09-12
Blogger-Beta Hack之“导航菜单式的分类”
8"O"又去偷师了，结果就是现在新的界面效果。将分类移到页面的上方，显示成浏览器标签页（导航菜单）的风格。有点儿意思吧？直接进入正题，看看怎样一步一步实现这个效果。
1. 选择导航菜单的样式
如果你选择8"O"-Beta上这种样式，可以跳过此步骤。也可以从下面的11种样式中挑选适合你blogger风格的导航菜单。
感谢exploding boy免费提供这些导航菜单。点击下载所有样式的导航菜单，
2. 添加Label这个页面元素（page element)
如果不是新注册的blogger-beta用户，应该已经在侧边栏上添加了Label。可以跳过此步骤。
没有Label的朋友，可以在可视化模板编辑中添加页面元素，选择Label。
3. 扩展Header
在模板HTML编辑中找到以下代码（友情提醒：更改模板前先备份）：<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
将其更改为：<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">
保存模板后回到可视化模板编辑，将Label从侧边栏拖放到原来的Header下
4. 添加CSS样式
如果你和8"O"一样选择F样式，那么复制下面的代码，粘贴到CSS样式表的最后（"]]>"标志前）/*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/------
*/
#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid $bordercolor;
/*Notice the use of $bordercolor to match with the Beta Blogger Settings*/
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
上述代码中的图片来自Ramani的网站，你也可以将图片放到自己的blogger上，然后更改图片位置。
如果你选择其他样式的导航菜单，则将相应的CSS代码复制到上述位置。
5. 最关键的一步（特别感谢Hoctro）
找到下面的代码：<b:widget id='Label1' locked='false' title='your label title' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a Label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
将其替换成：<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>
开香槟庆祝吧！Tags:
2006-09-09
Blogger-Beta Hack之“折叠Beta——显示摘要”
首页显示摘要是8"O"认为最有用的Hack之一，感谢Kax提供水瓶子的blogger中关于在Beta下如何显示摘要的方法。8"O"这里就借花献佛：
1.定位红色代码
<p><data:post.body/></p>
2.替换为蓝色代码
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<br></br>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>More......</a>
<b:else/>
<data:post.title/>
</b:if>
</p>
</b:if>
3.在帖子模板中添加
<span class="fullpost"></span>
收工！
Tags:
2006-09-05
清清爽爽——“存档的圈圈”
前两天写了一篇Blogger-Beta Hack之“简洁的搜索/标签结果”介绍了怎样在Blogger-Beta下以列出标题的方式显示搜索/标签结果，而不是显示所有帖子的内容。目的是为了获得更好的视觉效果。
今天无意间打开“存档的圈圈”，发现8月的存档居然也是详细显示每个存档的帖子的所有内容，8"O"上月很勤快的写了四十几篇文章，如果不是因为折叠Blogger的关系，存档展开的页面会更长。怎样才能清清爽爽的显示存档的结果呢？Blogger的帮助给我们提供了一个解决方案。跟着8"O"一步一步来实现“通过主题列出存档文件”的效果吧！
1.打开模板编辑，备份原模板（小心驶得万年船）；
2.找到<Blogger>……</Blogger>这段代码；
3.将<Blogger>标签替换成<MainPage> <Blogger>；
4.将</Blogger>标签替换成</Blogger></MainPage> ；
5.复制<MainPage> <Blogger>……</Blogger> </MainPage>间所有代码（连标签）；
6.在</Blogger> </MainPage>标签后粘贴上述代码；
7.将<MainPage>/</MainPage>标签改为<ItemPage>/</ItemPage>
休息一下，上面的工作是把原来的一段<Blogger>……</Blogger>代码替换为
<MainPage> <Blogger>……</Blogger> </MainPage>
<ItemPage> <Blogger>……</Blogger> </ItemPage>
其中“……”内容不变，这样做的原因帮助中已经说明，8"O"就不复述了，大家可能觉得同样的代码出现两次太没有效率（应该会影响网页加载的速度），但是为了实现清洁的存档，目前似乎只有这个方法。继续：
8.将这段代码放入你认为合适的位置<ArchivePage>
<Blogger>
<BlogItemTitle>
<a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a>
<br />
</BlogItemTitle>
</Blogger>
</ArchivePage>
8"O"放在<!-- Begin #main -->
<div id="main"><div id="main2">
之后，你也可以根据帮助中的说明为其添加时间标签<BlogDateHeader> <$BlogDateHeaderDate$> </BlogDateHeader>或者进行其他自定义设置。
注意事项：如果仅按帮助中的步骤似乎可以实现清洁存档，但是如果你点击存档中的标题似乎会出现帖子也无法正常显示的问题（至少8"O"一开始就碰到了这样的状况），如果你也遇到同样的情况，恭喜你！继续往下看吧
1.定位<ItemPage> <Blogger>……</Blogger> </ItemPage>这段代码；
2.找到<!-- Begin #comments -->下面的<ItemPage>标签，将其删除；
3.找到<!-- End #comments -->上面的</ItemPage>标签，将其删除；
保存修改，重新发布，大功告成！
这样你就可以有类似这样的存档的圈圈。是不是让你感觉清爽一点？Tags:
2006-09-02
Blogger-Beta Hack之“简洁的搜索/标签结果”
Blogger-Beta的功能日渐完善，不过似乎还有很多不如人意的地方。8"O"感觉最不方便的就是无法像现在这样在首页显示摘要（在beta中使用摘要），在帖子页显示全文。
Beta另一个不足就是，当你搜索blogger或者选中一个标签时，显示的结果会把包含该关键字/标签的帖子的所有内容显示在一起，实在是太混乱了。能不能像目前的分类一样只显示简单的显示一个标题？
感谢Ramani给我们提供了以下的Hack（也是“下拉标签/分类”Hack的提供者）。
进入模板HTML编辑，找到下面这段代码<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<!-- posts -->
<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>
用下面的蓝色代码替换红色代码 <b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
随便搜索一个关键词或者打开一个标签看看结果吧，一切就是这么简单！
Tags:
Blogger-Beta Hack之“下拉标签/分类”
内建标签/分类功能是Beta带给大家最大的惊喜。但刚推出时，因为对中文的支持不佳，给不少中文用户浇了一盆冷水。随着模板HTML编辑功能的放开，点击中文标签无法显示文章内容的Bug似乎也消失了（Beta越来越完善，是不是可以考虑搬家了？）。
标签/分类带来的好处是，你可以给一篇文章加上若干个标签/分类（就像设置多个关键词），这样给以后搜索文章带来一定的便利，但随着标签/分类的增多，似乎将占去侧边栏很大的一部分空间，而beta的标签/分类和beta的存档（可选择三种不同模式）不同，没有选择的余地。
不过，Blogger-Beta大发慈悲开放模板HTML功能，就让我们简简单单的改变一下默认的标签/分类显示方式吧。
首先，要在侧边栏添加Label这个新的页面元素（page element)。
然后发几个帖子加上标签练练手。
进入模板HTML编辑，记得作改动前要保存原先的模板（beta里有提示保存模板，比原来贴心）
找到下面这段代码<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'> <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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
用下面的蓝色代码替换红色代码<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
搞定，一切就是这么简单！Tags:
2006-08-17
侧边栏上的最新评论
消失了n天，终于放出来了。这两天钻研怎样在侧边栏显示有关blogger的最新评论，目的是……，其实也没什么目的，就是一个无聊的想法，据说侧边栏的十大常用功能中有一项就是显示本博的最新评论，赶个潮流吧。
n天的努力终于有了回报，大家现在看到的“评论的圈圈”就是这几天忙活下来的成果——什么？看不到，我倒！48小时的心血白费了。看不着的同学请举手，看着的接着往下瞧。
网上能搜到n中不同的添加最新评论（以下简称MRC）的方法，英文好的同学可以自学这篇文章。
少废话，还是交代自己的问题吧。
以下文字谨献给和我一样的菜瓜们基本知识：
了解了上面的基本知识后，这个给侧边栏添加MRC方案的基本原理就不难理解了：发表在你的blog（以下简称MBlog）上的最新评论通过邮件直接发布到你的评论专用blogger（以下简称CBlog），然后通过feed显示在你的侧边栏上。没看懂算我白说，还是看看实例吧。
准备开始：
1.这回对浏览器没有特殊的要求，ie，ff都可以。新开一个CBlog，一切从简，因为它的作用只是收集你MBlog上的评论。关键是将CBlog设置成可以通过邮件发布文章，如图：
别忘了记录邮箱地址！
2.回到MBlog，设置自动发送评论到CBlog。
因为blogger不允许直接发送评论给blogger.com的邮件地址，所以，要通过其他邮件地址中转一下。如将上图中的邮件地址设为yourblogger+comments@Gmail.com（这样做的好处是方便在gmail中设置过滤器，感谢Alan），然后再Gmail中设置过滤器，将这些评论转发到CBlog上。
3.ok，到此为止你已经打通了MBlog上的评论通向CBlog的道路。接下来就是要给CBlog做“种”——feed。登陆后，将你的CBlog地址填入，点击next
选择rss.xml，点击next。这一步很关键，千万别选错了！
填入feed的名称，feed在feedburner的地址，顺便注册（已经注册过的就直接sign in吧），点击activate feed激活你的种籽
他们说有了feed会给你带来很多的好处，先不管这么多，点skip directly to feed management。
这样你就有了一个http://xxx.blogspot.com/rss.xml的种，恭喜恭喜！
4.还没完呢，要不然怎么会折腾我两天两夜。现在就要给MBlog的模板动刀了。在header这段加上
<script type="text/javascript" src="http://ghill.customer.netspace.net.au/hearsay/hearsay-v01.js">
</script>
解释一下，http://ghill.customer.netspace.net.au/hearsay/hearsay-v01.js是外国高手写的一段js代码，大家可以根据自己的能力对它进行个性化改编。
5.没多少了。再将下面的代码添加到你希望MRC出现的位子
<div id="recent-comments" ><center><br/><br/><br/>Please wait ... <BR/>loading comments.<BR/><BR/><img src="http://ghill.customer.netspace.net.au/snake_transparent.gif"/>
</center></div>
<script type="text/javascript">
hearsay("http://feeds.feedburner.com/MyCommentBlogRSSFeed", "recent-comments");
</script>
ok测试一下效果，也顺便帮我测试一下我的MRC。Tags:
8月17日更新：经测试上述方法有下列不足之处
1.操作不便，容易使我们菜瓜晕头转向。
2.受转发邮件系统影响很大，只要blogger.com的邮件系统或者gmail.com的邮件系统发生问题，就会干扰MRC的正常显示，往往出现一条评论被重复发表两次的现象。
3.无法记录评论的更改。如果A发表了一条评论，而后又对其进行更改或删除，该条评论还是会显示在侧边栏。
4.无法导入先前的评论（或者导入十分繁琐）。如果先前的评论不多还罢了，评论很多的话，你就一条一条慢慢往CBlog上搬吧。
革命尚未成功，同志仍须努力啊！
2006-08-13
折叠Blogger
将首页的帖子折叠起来，只显示帖子的摘要，这样可以让首页显得干净，加载起来也更快。就像8个圈圈这样，哈哈！
实现后的效果就是现在8个圈圈上的这个样子，首页只有文字，图片和视频都被折进去了。至于怎样折叠？点全文吧！
和当初想给8个圈圈分类一样，我尝试过n种方法，最终还是觉得Blogger自己提供的方案最合适（子曰：自己的孩子自己最了解）。我下面所说的都是Blogger帮助里有的，喜欢翻原版请看如何创建可扩展的帖子摘要？
原理这种东西太高深，我就不说了（一是不懂，二是说不明白），简单的说下怎样实现折叠的效果：
1.将下面的代码放到<style> 与</style>
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
2.在<$BlogItemBody$>后添加下列代码
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
可以对它进行一些个性化的更改，比如把“Read more!”改成“全文”
3.在帖子模板中添加
<span class="fullpost"></span>
如果不嫌累的话可以在每次编辑或者撰写帖子的时候手工添加。
发帖时把需要隐藏的文字（这些文字将不出现在帖子首页）放在<span class="fullpost">与</span>之间。搞定，这样你就可以随意折叠你的Blogger了。Tags:
更新：以上方法只适用于旧版Blogger，新版Blogger可以参考：
Blogger-Beta Hack之“折叠Beta——显示摘要”
和你的帖子玩Peek-a-Boo——另一种全文|摘要显示方式
较旧的博文>>
