200705 ~ 特色他

May 31, 2007

修正 Blogger feed：基于 Yahoo Pipes 的 hack

Posted by Ken Lai on 11:36:00 AM

原文：Blogger feed corrector: Yahoo Pipes based hack
更新：现在可以试试这个 hack 了。Yahoo 修复了日期问题。在此感谢所有在反馈中支持我的人。
　　就像大多数人都知道的，Blogger 的 feed 按照更新日期而不是发布日期来排序。这让你在编辑旧文章时很不方便，因为这会文章重新出现在 feed 中。最近，Yahoo 发布了一个让人激动的 feed 服务── 管道（Pipes），Aditya 有了一个好点子──使用管道对 Blogger feed 按发布日期重新排序。我想我会在它的基础上 hack，让大家都能轻松使用。
　　这个 hack 是给那些不使用 Feedburner，而是使用 Blogger 自身提供的 feed 的用户（页面底部的“Subscribe to:”链接）。我根据 Aditya 的 hack 作了一些修改，使得它适用于所有的 feed。对模板作一些小修改，就能使用重新排序的 feed 来替代 Blogger 的 feed。如果你希望这样，首先到 pipe's page 中填上你博客的地址，检查一下管道（pipe）是否按照发布日期对文章排序，而不是更新日期。
　　如果你对要使用它，下面我将告诉你如何在模板中使用。在模板中找到这个 includable。

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url'
expr:type='data:f.mimeType'
target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

　　替换红色部分的代码：

<a class='feed-link'
expr:href='"http://pipes.yahoo.com/pipes/KEflSli82xGIHxezIBeTaQ/run?feed="
+ data:f.url + "&amp;_render=rss"' expr:type='data:f.mimeType'
target='_blank'><data:f.name/> (RSS)</a>

　　保存模板后再查看博客时，你会发现“Subscribe to”链接已经指向了重新排序的 feed。你可以发布文章请求你订阅者重新订阅新的 feed，这样旧文章的更新将不会再打扰他们。

　　声明：
　　1.由于新的 feed 由管道创建，所以 feed 标题显示为管道的名称“Blogger feed corrector”。在你的文章中，可以在阅读器中重命名 feed，或者自行修改管道名称。
　　2.Yahoo 对通过管道的 feed 只提供 RSS 和 JSON 格式（很自然，由于 Google 的原因，他们不是很支持 Atom）。所以，重新排序的 feed 只支持 RSS 格式。不过这不适什么问题，因为几乎所有的阅读器都支持 RSS。
　　如果在使用过程中发现还有其他需要告诉大家的，请一定让我知道。

[翻译]标签云式 AJAX 标签

Posted by Ken Lai on 12:14:00 AM

原文：AJAX Labels with Label Cloud
　　为了满足更高的要求，我将讲解如何把 AJAX 标签和非常流行的 Phydeaux3 标签云 hack 集成在一起。
　　请注意：为了预防意外，请在下面三处备份你的模板：
　　a. 安装标签云前；
　　b. 安装 AJAX Labels 前；
　　c. 在下面提到的第四步前。
　　1. 第一步是安装标签云。按照 Phydeaux3的文章中的步骤进行安装。如果安装中出现问题，请在文章后面发表评论。在这里我还无法帮助你。如果你已经安装了，跳到下一步。
　　2. 第二步要安装的是标签云中的一部分。除了文章中的第三步（可选的那个），其余按步骤安装。
　　3. 如果你安装了标签小部件，你可能不得不删除它。（我不是很确定）按 Phydeaux3 的建议做。
　　4. 在 Phydeaux3 标签云代码中找到下面部分：

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

　　替换成：

a.href = 'javascript:getCat("' + encodeURIComponent(t) + '",null)'

　　我并没有测试过。希望它能工作。如果不行，请撤销更改。

[翻译]加入 BlogU 学员 Blogroll！！

Posted by Ken Lai on 12:40:00 AM

原文：Join the BlogU Students Blogroll!!
　　看来大部分人觉得在 BlogU 学院中添加 blogroll 是不错的注意！当然，这是自愿的。如果你从 BlogU 的文章中学到了怎样个性化自己的博客，想加入 BlogU 学员 Blogroll，现在就是好机会！！
　　在 blog 中添加 blogroll，我提供了几种不同的显示方案。
方案 #1 - 完整的 blogroll:　

经典 Blogger 模板 - 把代码放到侧边栏中你希望显示的位置

Blogger Beta 模板 - 在“控制台->模板->页面元素->添加页面元素”中添加“HTML/JavaScript”，然后粘贴代码。

<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>

方案 #2 - 使用按钮显示完整的 blogroll：
　　和方案 #1步骤相同，不过在添加代码时使用下面的代码：

<a title="Students of BlogU" target="_blank" href="http://www.bloggeruniversity.blogspot.com/">
<img border="0" src="http://h1.ripway.com/anniebluesky/blogustudent.png" width="80" height="15"></a><script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>

方案 #3 - 展开/合拢式 blogroll：
　　1...在 CSS 中添加下面的代码（在<head>和</head>标签之间）。注意，如果你已经在代码中添加了展开/合拢的代码，请跳到第三步。

.commenthidden {display:none}
.commentshown {display:inline}

　　2...把下面的代码放到<head>和</head>标签之间的非 CSS 部分中：

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

　　3...　　

经典 Blogger 模板 - 把代码放到侧边栏中你希望显示的位置　　

Blogger Beta 模板 - 保存后，在“控制台->模板->页面元素->添加页面元素”中添加“HTML/JavaScript”，在窗口中添加下面的代码：

<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')" title="Students of BlogU">+/- BlogU Students blogroll</a><br><br>
<div id="blogustudents" class="commenthidden">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
</div><br>

方案 #4 - 使用按钮的展开/合拢式 blogroll:

步骤和方案 #3相同，在第三步时使用下面的代码。(请注意这里的设置和侧边栏中的的不同。我喜欢按钮在 +/- 的“外侧”而不是“里侧”。这项设置使得只在点击 +/- 时显示按钮。）

<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')">+/- BlogU Students Blogroll</a><br /><br>
<div class="commenthidden" id="blogustudents">
<a title="Students of BlogU" target="_blank" href="http://www.bloggeruniversity.blogspot.com/">
<img border="0" src="http://h1.ripway.com/anniebluesky/blogustudent.png" width="80" height="15"></a>
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
</div>

　　我自己最喜欢方案#4，因为在 blogroll 有一个非常艺术的按钮

！在添加 blogroll 后，发送一封邮件：

blogger.university@gmail.com
包含你的博客的标题
包含你的博客的地址

当我看到 blogroll 在你的博客中后，我会把你添加你的博客！

[翻译]用“摘要”（pullquote）打破厌倦

Posted by Ken Lai on 12:51:00 AM

原文：Pullquotes to Break the Boredom

　　我非常希望有新的“摘要”（格式），但我把所有热情都花在 blogosphere，没有时间来研究“摘要”！
　　今晚，所有的热情都冷却过后，非常非常意外，我真的改变了我的 blog！
　　当我开始建立 Buttermilk Clouds 时我就爱上了其中的引用格式（blockquote）。线条简单典雅，而且避免引用的文字改变文章的整体感觉。今晚我尝试是否能把它修改成“摘要”（格式）。结果非常不错！（摘要、CSS还有其他一些代码都能按照我希望的方式正常工作。我很容易对不同的东西都感兴趣...）。就像你看到的，我使用字号稍大的不同字体剧中显示。
　　要想拥有自己时尚的摘要格式，在“模板/编辑 HTML”中，在CSS里面添加下面的代码：

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: <span style="color: rgb(153, 0, 0);">#555</span>;
text-align: center;
font-size: <span style="color: rgb(102, 102,0);">1.4em</span>;
border-top: <span style="color: rgb(102, 51, 102);">3px double <span style="color: rgb(255, 102, 0);">#ccc</span></span>;
border-bottom: <span style="color: rgb(102, 51, 102);">3px double <span style="color: rgb(255, 102, 0);">#ccc</span></span>;
}
.pullquote p {
padding: 0;
margin: 0;
}

　　如果想使用不同的字体颜色，修改 color 属性。而 size font 决定字体大小。border color 属性中的 border solid、dotted、dashed 值分别对应实线、点、虚线三种边框。保存模板后，在创建新文章时，加入下面的代码。（一个小技巧：）如果你经常使用，而又不想手动写代码，我们有自动完成的办法。打开“设置/文档格式/文章模板”添加下面的代码：

<blockquote class="pullquote"><p>...摘要内容...</p></blockquote>

<p>在这里输入文章内容...</p>

　　摘要是非常有用的小家伙。为什么？因为每个人都会看看她，这就是原因。

[翻译]下拉菜单式“旧文章”和“博客归档”

Posted by Ken Lai on 8:09:00 PM

原文：Blogger 'Previous Posts' & 'Archives' Drop Down Menu
　　我知道下拉菜单有一些问题，我也正在学习如何去解决。在 Blogger Forum 的 thrbr 帮助下，我正逐步的修复问题。我从自己订阅的杂志里基本上知道了所有所需要的知识，但我还是不知道怎么把下拉菜单添加到侧边栏而不会因为长标题扩展。放轻松点，我现在知道怎么弄，现在我将与你分享这一切。
　　修改“最近文章”或“旧文章”: 在模板中找到下面的代码：

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

　　替换成：

<select name="PreviousItemsMenu" onChange="location.href=this.options[this.selectedIndex].value;" 
style="background-color:#ffffff; color:#555555; font-family: Trebuchet MS; width: 123px;" >
<option value="/">Previous Items</option>
<BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$></option>
</BloggerPreviousItems>
</select>

　　修改“博客归档”: 找到下面的代码：

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

　　替换成：

<select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;"
style="background-color:#BDDEAD; color:#080808; font-family: Comic Sans MS; width: 130px;">
<option value="/">- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
<option value="/">Current Posts</option></select>

　　如果要让菜单符合 blog 的样式，修改上面红色部分的代码就行了。例子中使用了不同的颜色，字体和字号来表示各种选项。
　　如果侧边栏中不停变长的链接列表困扰着你，这也许是一种解决方法。我并不是说这解决了所有侧边栏的问题，但就现在来看工作得很好。在 A drop-down menu alternative 中说到另一种方法虽然不使用下拉菜单，但也提供了相同的功能。我使用这种方法来显示所有文章。

[翻译]自定义 blogger 模板

Posted by Ken Lai on 9:34:00 PM

原文：Customizable blogger template
　　在 RealityTopia Blog 的这篇文章中对模板进行了一些深入修改。George Mikos 没有使用简单的可自定义的模板，而是自己写模板源代码。他不仅告诉你怎么作，还告诉你为什么要这么做。如果能知道作每个步骤的原因，那么学习起来就容易很多了。而他正好做到了这些，而且深入浅出。很像他值得骄傲的模板代码一样，他也应该感到骄傲。
　　我打算好好学习一下他的方法。我对每个部分都非常感兴趣，特别是使用 CSS 浮动属性来得到显示分辨率的宽度是 1024 x 768 还是 800 x 600。
　　文章中很多内容都需要好好消化。我强烈推荐想自己创建模板的人仔细研究这篇文章。
译注：是很不错的文章，讲解很详细。

[翻译]如何优化网页读取速度

Posted by Ken Lai on 7:10:00 PM

原文：How to optimize web pages for faster loading
　　如果网页加载速度很快，博客的读者当然会很高兴。问题是──怎么让它快速加载？让我告诉你我的发现──优化网页，这就是答案。下面是一些优化网页的方法。
　　减少网页中的不必要的空格是一种降低 Page weight 的方法。Page weight 在读取过程中起到了重要的作用。一些工具，比如 HTML Tidy，能自动从网页代码中去掉多余的空格和空行。当然你也能自己去掉代码中（多余的）空格。这能去掉网页中大部分多余的重量（weight），从而加快一些读取速度。
　　由于每个独立的域都会花一部分时间进行 DNS 查找，减少使用其他域的 CSS、JavaScript 和图片会减少读取时间。虽然不总是很使用，但是，尽量少使用不同域的文件是可能的。我检查我的 blog，把所有图片都以PNG格式保存在本地，然后上传到我的网页服务器。这样所有（几乎所有）都来自同一个域。
　　当然也可以修剪网页。在 Blogger 中这简单的等于减少主页的文章数量。在设置/格式设定/显示中可以对其进行修改。我选择了5篇文章，可能以后还要修改。
　　去掉博客中不必要的元素。对我来说包含声音文件是很大的错误。它需要大量的时间来读取，同时也经常惹恼读者。试着不要使用 Java applets──JavaScript 读取更快速。问问自己，侧边栏的一个小时钟是否能值回读取它的时间？特别是每个人在右下角都能看到时间的时候。从读取速度上好好审阅一下 blog，也许能减少向你的 blog 中添加一些不必要的东西。
　　我们还用方法提高图片的读取速度。只需要在 img 标签中加上 width 、height 属性。比如，以前的标签像这样：

<img SRC="blogheader.gif">

blogheader.gif 的宽、高分别是30、15，那么改成如下格式：

<img SRC="blogheader.gif" width=30 height=15>

　　为什么这样修改能提高速度？后一种标签帮助浏览器在读取图片前决定页面的布局。这当然是有原因的，如果页面中有很多图片，每次读取图片后计算页面页面布局将花费更多的时间。
　　减小图片尺寸能减少读取时间。Online Image Optimizer 能减小 gif、 jpg和png图片的尺寸。这是在线免费工具，而且很容易使用。
　　我已经尝试把所有的图片转换成 PNG，因为没有版权问题，而且读取快速。但是，如果你仍然想使用 gif 和 jpg，有一个好规则──如果不需要高清晰的分辨率，首先使用 GIF，因为它读取更快。JPG 一般使用于照片，而 GIF 用于其他。
　　使用上面的一些方法能加快 blog 的读取时间，让你的拥有更多愉快的读者和老读者！！
感谢以下网站：
Chami.com Tips, WebWeaver.nu, Netscape Devedge

检查 URL 是否有效

Posted by Ken Lai on 6:57:00 PM

#---------- check_url.py ----------#
from httplib import HTTP
from urlparse import urlparse

def checkURL(url):
 p = urlparse(url)
 h = HTTP(p[1])
 h.putrequest('HEAD', p[2])
 h.endheaders()
 return h.getreply()

if __name__ == '__main__':
for url in ('http://msnbc.com/nonsense','http://msnbc.com/',
           'http://w3c.org/','http://w3c.org/nonsense',
           'http://w3c.org/Consortium/','http://ibm.com/',
           'http://ibm.com/nonsense'):
 print url, checkURL(url)[:2]

------------------------------------------------------------------------
% python check_url.py
http://msnbc.com/nonsense (200, 'OK')
http://msnbc.com/ (302, 'Object moved')
http://w3c.org/ (301, 'Moved Permanently')
http://w3c.org/nonsense (301, 'Moved Permanently')
http://w3c.org/Consortium/ (301, 'Moved Permanently')
http://ibm.com/ (200, 'OK')
http://ibm.com/nonsense (404, 'Not Found')

　　虽然还有点小问题，不是100%准确。不过对于大多数情况是没有问题的。

创建 email 地址图标

Posted by Ken Lai on 2:09:00 PM

　　注意到有些网站上有这样的图标吗？如果想要，快来这里创建一个吧。

[翻译]在 blog 中添加 Google 搜索引擎

Posted by Ken Lai on 1:58:00 PM

　　通过 Co-op - now with Custom Search Engine 可以轻松向你的 blog 中添加 Google 搜索引擎，而且可以按照你的需要自定义。
　　填上要搜索的网站地址和语言，得到代码后复制到你的 blog。非常简单！！
译注：需要 Google 账号，而且设定界面是英文。英语不好就找朋友帮忙吧。

别了 Windows

Posted by Ken Lai on 12:54:00 PM

在我看来，windows 只能当做游戏机了。不稳定、低效率，完全不能忍受。昨晚差点就砸电脑了。别了，祝 windows 早日死亡。

[翻译]高亮显示作者评论与评论通知

Posted by Ken Lai on 12:02:00 PM

原文：Author comment highlighting and notification
　　中断了一两个星期后，我又回来了。在评论部分我有了新的 hack ——高亮显示作者的评论并且可以在作者恢复评论后通知读者。你也许已经注意到了我的评论以红色显示，这也就是我所说的“高亮”。我相信这能帮助读者在长篇的评论找到我回复。一些读者问我如何在他们的博客中使用这种功能。现在我就与你们分享这一切。
　　评论回复通知是我在老 blogger 中做过的另一个 hack。当有人在博客中发布了问题（评论），在回复后，除非发表评论的人经常访问，要不很难看到。如果是通过搜索或者链接访问的，那么可能他不会记得博客地址。有时，你的回复很长但却再也没有得到回音。通过使用通知，只要简单的点击能自动发送邮件给评论的人。邮件会包含你的姓名、文章标题和固定链接，这样就能轻松的看到你的回复。这个 hack 实际上是我的网站 Anniyalogam.com 提供的一项服务（请注意邮件只有读者在个人资料中公开了邮件地址的情况下才能发送。）。
　　现在开始修改代码。首先找到 comment-body 类，复制粘贴后修改为 comment-body-author，并球该成需要的评论显示方式。比如，我想设置颜色和粗体显示。

.comment-body {
 margin:0;
 padding:0 0 0 20px;
}
.comment-body p {
 font-size:100%;
 margin:0 0 .2em 0;
}

.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;
}

　　然后在模板中搜索“id ='comments-block'”，找到这段代码后添加其中红色和蓝色两部分代码。红色部分用来高亮作者评论，蓝色用来通知读者。
　　在完成修改以后，在任何有评论的文章中你都会发现在评论后面有一张图片（不是在发表评论的页面中）。就像下面的例子中 Richard 的评论。

　　当我回复 Richard 后，只要我点击图片，一封类似下面内容的就会发送到他个人资料中的邮箱中（如果没有公开邮件地址，将不会发送邮件）。

Subject: Response to your comment has been posted
"Ramani has responded to your comment on Peekaboo posts improved again. Please click this link to see the response."

　　为了安全考虑，只有在博客作者登录时才会显示图片。访客不会看到图片也不能使用这项功能。同时，请谨慎的使用（读者不会喜欢你发送的无关紧要的邮件）。

[翻译]优化 tab 式标签

Posted by Ken Lai on 2:14:00 AM

原文：Tweak your label tabs
　　我在 Hoctro 标签页面的基础上又进行了改进。很多人都有10个以上的标签，我肯定他们不想以 tab 的方式显示所有的标签。在修改的版本中允许只显示排名前5的标签（以使用频率为基础）。我同样做了其他两处改动：
1. 显示指向主页的“Home”；
2. 修改了标签链接地址。在 tab 页面中显示前 100 条结果（还记得我前一个 hack 吗？）。
　　如果希望使用这个升级版，首先安装 Hoctro 原来的 hack。然后在“页面元素”中编辑“tab 式标签部件”，修改排序方式为“按频率排序”。然后在 Hoctro 的代码中找到下面的代码。

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <div id='tabsF'>
    <ul>
      <li><a expr:href='data:blog.homepageUrl'><span>Home
         </span></a></li>
      <script type='text/javascript'>
        var labelnum = 0;
        <b:loop values='data:labels' var='label'>
        if (labelnum++ &lt; 5) {
           document.write("<li><a expr:href='data:label.url + 
"?max-results=100"'><span><data:label.name/></span></a></li>");
        }
        </b:loop>
      </script>
    </ul>
  </div>
</b:includable>
</b:widget>

　　保存后就可以了。当然，你也可以修改 tab 数量。我想你能轻易找到对应的代码，如果你看过我以前的 hack 肯定没问题的 ;-)
　　Ricardo & Vivek 提到如何把链接放到侧边栏中，并以新窗口模式打开。这是一个让你的 blog 在转向其他页面时也保持显示好方法。

太厉害了，blogspot再次无法访问

Posted by Ken Lai on 2:08:00 AM

　　不知道是我这里的问题还是全国都一样。blogspot 再次无法访问。幸好我用的 Firefox，幸好这个世界上有人开发了 FoxyProxy、Tor。他们太伟大了。
　　向这些伟大的人致敬。

一个自己很喜欢的歌手唱的很喜欢的歌的喜欢的flash

Posted by Ken Lai on 2:31:00 AM

张学友——我真的受伤了

[翻译]在 blogger 中添加 Del.icio.us 与 Digg 链接

Posted by Ken Lai on 11:59:00 PM

原文：Del.icio.us and Digg hotlinks for your Beta blog
　　很多博客都在自己的网站中添加像 Delicious 或者 Digg 这样社会书签网站，浏览的人能方便的提交自己喜欢的文章。Vivek Sanghi 指出在这篇文章中的方法在新 blogger 中已不适用了，同时建议我也许可以研究一下。我找到了新的方法而且在我的 blog 中也正常的工作，你能在我文章的标签旁边找到这些链接。
　　如果你想把链接添加到 blogger 中，展开模板代码，找到“post-labels”，你会看到下面这段代码。在 /span 前面添加红色的代码。

<span class='post-labels'>
<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>

  <a expr:href='"http://digg.com/submit?phase=2&amp;url=" +
    data:post.url + "&amp;title=" + data:post.title'
     target='_blank'>DiggIt!</a>
<a expr:href='"http://del.icio.us/post?url=" +
    data:post.url + "&amp;title=" + data:post.title'  
        target='_blank'>Del.icio.us</a>

</span>

　　如果你对老模板中的 $BlogItemPermalinkUrl$ 和 $BlogItemTitle$ 很熟悉，我在这里其实使用了等价的 data:post.url 和 data:post.title。你也可以使用这个链接到其他的书签。

[翻译]在 blog 中使用PPT

Posted by Ken Lai on 1:18:00 PM

原文：Embed Powerpoint in Your Blog
　　让我们说点不一样的东西。在 blog 中显示 PPT 怎么样？
　　登录 SlideAware，注册一个免费帐号。下载 PPT 插件，然后安装。在创建 PPT 后，保存为 SlideAware。集成到 blog 就很简单了：

<iframe src="http://personal.slideaware.com/yourmailadress/presentationid" width="480" height="380" style="border:none"></iframe>

下面显示效果：

[翻译]显示相关文章

Posted by Ken Lai on 10:06:00 PM

原文:Related Posts
　　在看到 Hoctro 一个类似的 hack 文章后，我一下想到了这个点子。但不太走运的是，他要求所有的文章标题都有一个相同的前缀，而我希望按照标签显示相关的文章。我想用新的 JSON 格式做点什么。而我也在 Beautiful Beta 上阅读了关于如何解析 JSON 属性的文章。
　　如果你的标签中使用了任何 url 保留字符，比如“?”“/”。这个属性可能不会正常工作。在这里我没有对 url 进行编码。
　　首先，进入“模板 -> 编辑 HTML”。粘贴下面代码到 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>

　　保存后点击“展开窗口小部件代码”。找到 blog1 部件中的下列代码：

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

　　一般来说是在 post-footer-line 段下面（不论是行 -1，-2 还是 -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&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
    </b:loop>
  </b:if>

　　粗体字的 3 行就是我添加的代码。;)
　　保存。“模板 -> 界面元素”中添加一个“HTML/Javascript 部件”。我把它放在了文章部件下面。请在上面的代码正常工作的情况下添加这个部件。在部件中粘贴下面的代码：

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

　　现在回到“编辑 HTML”，展开模板代码，找到你刚才添加的“HTML/Javascript 部件”。看起来应该类似于下面这样。添加粗体部分：

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<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>

　　在第一部分代码中的 < results="10.">用来调整相关文章的显示数量。

[翻译]用 RSS 代替 Atom

Posted by Ken Lai on 12:26:00 PM

原文：Replace Atom With RSS
　　在你的 blogger 页面的最下面会看到类似于这样的一行：

Subscribe to: Posts (Atom)

　　或者

Subscribe to: Post Comments (Atom)

　　这取决于你当前浏览的页面的类型（索引，固定链接，搜索，标签等等）。
　　如果你想使用 RSS，那么进入“模板 -> 编辑 HTML”，选中“展开窗口小部件代码”，然后找到下面的代码段。

<b:includable id="feedLinksBody" var="links">
</b:includable><div class="feed-links">
<data:feedlinksmsg>
<b:loop values="data:links" var="f">
   <a class="feed-link" href="data:f.url" type="data:f.mimeType" target="_blank"><data:f.name> (<data:f.feedtype>)</data:f.feedtype></data:f.name></a>
</b:loop>
</data:feedlinksmsg></div>

　　从代码上来看，可以选择你希望使用的 feed。但是不走运的是，并没有提供可选的项或者还没有计划这么做。所以我们只能自己手动编辑。
　　把上面的代码替换成下面的。

<b:includable id="feedLinksBody" var="links">
</b:includable><div class="feed-links">
<data:feedlinksmsg>
<b:loop values="data:links" var="f">
   <a class="feed-link" href="data:f.url%20+%20%22?alt=rss%22" type="application/rss+xml" target="_blank"><data:f.name> (RSS)</data:f.name></a>
</b:loop>
</data:feedlinksmsg></div>

[翻译]随机显示文章

Posted by Ken Lai on 10:20:00 PM

原文：Display Random Post
　　是否曾经想如何随机显示文章？你马上就能知道:D
　　首先，把下面的 javascrpit 代码添加到模板头部标签之间（模板 -> 编辑 HTML）。

<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://purplemoggy.blogspot.com";

function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>

　　把 _yourBlogUrl 设定成你的 blog 地址。然后在任何地方添加下面的链接：

<a href="javascript:randomPost();">View Random Post</a>

　　由于使用了 JSON feed 回调，你还需要确认你的 blog 有汇总 feed（summary feed）。

译注：May 05, 2007 1:57 AM 作者在评论中写到：
如果想作成按钮样式，可以这么作：

<input type="button" onclick="randomPost();" value="View Random Post"/>

特色他

May 31, 2007

修正 Blogger feed：基于 Yahoo Pipes 的 hack

May 27, 2007

[翻译]标签云式 AJAX 标签

May 25, 2007

[翻译]加入 BlogU 学员 Blogroll！！

May 22, 2007

[翻译]用“摘要”（pullquote）打破厌倦

May 20, 2007

[翻译]下拉菜单式“旧文章”和“博客归档”

May 19, 2007

[翻译]自定义 blogger 模板

May 18, 2007

[翻译]如何优化网页读取速度

检查 URL 是否有效

创建 email 地址图标

[翻译]在 blog 中添加 Google 搜索引擎

别了 Windows

May 14, 2007

[翻译]高亮显示作者评论与评论通知

May 12, 2007

[翻译]优化 tab 式标签

太厉害了，blogspot再次无法访问

May 11, 2007

一个自己很喜欢的歌手唱的很喜欢的歌的喜欢的flash

May 10, 2007

[翻译]在 blogger 中添加 Del.icio.us 与 Digg 链接

[翻译]在 blog 中使用PPT

May 9, 2007

[翻译]显示相关文章

[翻译]用 RSS 代替 Atom

May 8, 2007

[翻译]随机显示文章

Categories

Blog Archive