左上角加入了一个搜索框，输入点什么比如"咖啡"然后回车⋯⋯用到了 jQuery 和 Google 的 AJAX Search API。
简单说来就是把搜索关键词传给 Google 并且通过 API 得到返回的结果。嗯，总之效果就是这样子啦。
这里有篇文章有详细的使用方法介绍：Google Powered Site Search with jQuery 。
不过我觉得一般 blog 不会用到诸如图片搜索、新闻搜索、视频搜索（搜索到的都是来自 YouTube 的也没法看啊混蛋），所以我并没有照搬上边这篇文章里的方法，而是作了些修改，并且用到了 Google Custom Search Engine ，顺便加上了 API key ，这样就可以很方便地从多个域名中获取搜索结果或者从搜索结果里提出剔除某些不希望出现的域名结果。
HTML 简单地写成这样：
<form id="searchForm" method="post">
<input id="s" type="text" value="搜索内容..." />
</form>
或者加个按钮也可以，但是我没加，直接回车搜索简洁省空间。JS 部分如下：
var config = {append:false,perPage:8,page:0}
$('#searchForm').submit(function(){
googleSearch();
return false;
});
function googleSearch(settings){
settings = $.extend({},config,settings);
settings.term = $('#s').val();
var apiURL = 'https://www.googleapis.com/customsearch/v1?key=你的 API Key 写这里＆cx=自定义搜索 ID 写这里';
var resultsDiv = $('#resultsDiv');
$.getJSON(apiURL,{q:settings.term,rsz:settings.perPage,start:settings.page*settings.perPage},function(r){
var results = r.responseData.results;
if(results.length){
var pageContainer = $('<div>',{'class':'pageContainer'});
for(var i=0;i<results.length;i++){pageContainer.append(new result(results[i]) + '');}
if(!settings.append){resultsDiv.empty();}
pageContainer.appendTo(resultsDiv).fadeIn('slow');
var cursor = r.responseData.cursor;
if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
$('<div>',{'class':'moreresults',html:'More…'}).appendTo(resultsDiv).click(function(){
googleSearch({append:true,page:settings.page+1});
$(this).fadeOut();
});
}
}else {
resultsDiv.empty();
$('<p>',{'class':'notFound',html:'没找到你想搜神马⋯'}).hide().appendTo(resultsDiv).fadeIn();
}
});
}
function result(r){
arr = [
'<section class="webResult">',
'<header><h2 class="entriestitle"><a href="',r.unescapedUrl,'">',r.title,'</a></h2></header>',
'<div class="articlecontent"><p>',r.content,'</p></div>',
'</section>'
];
this.toString = function(){return arr.join('');}
}
需要修改的有三部分，前两部分分别是 Google Custom Search Engine 的唯一 ID 和你域名的 API key ，最后一部分是搜索结果的 HTML 结构，如果不喜欢这个结构当然也可以自定义，搜索结果的 JSON 数据遵循 OpenSearch 1.1 规范结构，可以从中调用数据添加到结果中。
然后只要给设定好地输出内容加上 CSS 就可以了。