Archive for 2006年十二月月
blogger:创作一个自动播放照片的页面元素
Add comment 十二月 14, 2006
blogger 3.0:做一个使文章标题分类的页面元素
依然感谢 Hoctro作了这个hack。
此hack的能够做出一个页面元素,根据你的标签来分类你的文章标题的显示页面元素。
效果如下图:
制作这个hack的方法很简单:首先给你的模板增加一个页面元素,然后找到这个页面元素,用下面的代码替换之。
<b:widget id=’HTML50′ locked=’false’ title=’Contents By Category’ type=’HTML’>
<b:includable id=’main’>
<!– *****************http://hoctro.blogspot.com*****Dec,2006****************** –>
<!– <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’>
<div id=’data2006′/>
<script type=’text/javascript’>
var homeUrl2 = "hoctro.blogspot.com";
var labels = ["Killer Hacks","Simple Hacks",
"3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];
function listEntries2(json) {
var ul = document.createElement('ul');
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl2.length+21);
var label1 = label.replace("%20", " ");
var label2 =label1.replace("%20", " ");
var txt = document.createTextNode(label2);
var h = document.createElement('h4');
h.appendChild(txt);
document.getElementById('data2006').appendChild(h);
document.getElementById('data2006').appendChild(ul);
}
}
}
function search2(query, label) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + label +
'?alt=json-in-script&callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
for (var i=0; i < labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>
<b:include name=’quickedit’/>
<!– </b:if> –>
</b:includable>
</b:widget>
然后按上面颜色较深的部分的改成你的博客设计即可。
不过此hack有个小问题,你的标签不能太长或是中文,否则会显示出乱码。
2006年12月14日晚上7点21分由GG派首次翻译介绍!转载此文章请注明首次介绍翻译者GG派!
Add comment 十二月 14, 2006
blogger 3.0:google自定义搜索如何加在你的ajax搜索代码上/外加代码详解
才跟大家讲了如何为自己的博客制作google ajax搜索样式。现在跟大家讲讲如何把Google Custom Search /自定义搜索,添加到你的google ajax搜索上去.
首先在http://google.com/coop/ 这个网页创建一个google 自定义搜索的引擎。
然后在My search engines/我的搜索引擎 这一项里找到你刚刚自定搜索引擎的control panel/控制面板 ,点击进入,找到code这一项,前面依次是Basics(基本设定)| Sites(在这里添加你要自定义搜索的站点) | Refinements(设定你自定义搜索的搜索后出现的关键词) | Look and feel(设定你自定义搜索的外观),外观后面这一项就是我们要找的code/代码 块了。
点击code,前面的代码依次是一般搜索框代码,把搜索和搜索结果都放在你网页或博客上的样式代码。无需js的代码,能够把自定搜索添加到你的google自定义页上的代码。
最后一项代码就是我们要找的,能够和google ajax搜索匹配的代码,这段代码大概就是这样一个形式:像我做的中文博客搜索的形式:003117241993791897404:-hoflajhuok
如何把这段代码添加进我们前面讲的google ajax搜索呢?
注意看我前面讲的那段ajax代码新增的汉字解释:
<script
src=’http://www.google.com/maps?file=api&v=2&key=这里换成你申请到的KEY代码‘ type=’text/javascript’/>
<script
src=’http://www.google.com/uds/api?file=uds.js&v=1.0&key=这里换成你申请到的KEY代码‘ type=’text/javascript’/>
<link href=’http://www.google.com/uds/css/gsearch.css’ rel=’stylesheet’ type=’text/css’/>
<link href=’http://www.google.com/uds/css/gsearch_darkgrey.css’ rel=’stylesheet’ type=’text/css’/>
<style type=’text/css’>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }
/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }
/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }
/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }
/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}
</style>
<script type=’text/javascript’>
var coreSearch;
function SolutionLoad() {
var controlRoot = document.getElementById(“searchControl”);
// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
// prep for decoupled search form
var searchFormElement = document.getElementById(“searchform”);
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// populate – web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel(“网络”);
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setUserDefinedLabel(“全部博客”);
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction(“你的博客地址“);
searcher.setUserDefinedLabel(“你的博客名称“);
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();《——这里要使用 GwebSearch(); 表示是搜索整个互联网
searcher.setSiteRestriction(“003117241993791897404:-hoflajhuok”);《——这里就填写上面说的你的自定义搜索里得到的代码
searcher.setUserDefinedLabel(“中文博客”);
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();
searcher.setSiteRestriction(“http://www.blogger.com/”);
searcher.setUserDefinedLabel(“博客作者”);
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();《——这里的 GblogSearch(); 表示是使用google的博客搜索,注意这里其实还可以使用“ GnewsSearch(); ”这段代码表示使用google新闻资讯搜索
searcher.setSiteRestriction(“http://ggpai.blogspot.com”);
searcher.setUserDefinedLabel(“GG派”);
coreSearch.addSearcher(searcher);
coreSearch.draw(controlRoot, drawOptions);
}
function doCoreSearch(q) {
coreSearch.execute(q);
}
registerLoadHandler(SolutionLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener(“load”, handler, false);
} else if (node.attachEvent) {
node.attachEvent(“onload”, handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>
Add comment 十二月 13, 2006
声明:草拟了几项blogspot博客公德,希望大家讨论
我草拟了几项blogger博客公德:希望大家讨论以后定案,如果以后有blogspot的博客人员违反,大家共同在博客上谴责!
1。不要在blogspot上刊登敏感词汇,造成blogspot博客再次整体被封!
2。不要刊登有损国家利益的言论。刊登八卦谣言请注明您并未亲自证实此事!纯属听说。
3。不要抄袭,盗用他人博客文章。转载他人博客文章请注明作者和作者相应文章链接。
4。遇到同样是转载、收集、翻译以及一切博客作者经过劳动取得的资料,以第一位刊登的博客 拥有基本版权,如需二次借用此博客文章者,应该著名率先转载、收集、翻译的博客作者名字以及借用资料博客文章之链接。并且一并注明最初原创作者以及博客网页链接。
5。 博客的基本作用即为个人发表言论,评论事物之公共阅览场所。所以不得以博客是私人隐私为理由拒绝遵守博客基本礼貌规则(如上文第3,4条)并指责他人评价 博客内容。如果你真的要搞隐私博客或以该博客是自己记事本之类的言论为由拒绝遵守上文第3,4条博客基本礼貌规则,请利用google提供的功能关闭自己 的博客,只允许通过邀请的特定人员访问。
6。在博客上刊登广告是博客作者通过劳动换取成果的天然权利,任何人无权指责。
7。大家继续补充,并且希望大家以在google这个全球最大的博客写博客而自豪,并且自觉遵守高素质博友的博客基本规则。当然如果你自甘堕落要跟某些垃圾博客网站一样随意抄袭他人文章,剽窃他人劳动成果,那么只能说,群众的眼睛是雪亮的。而且你是在这个全球性博客上丢中国人的脸……
Add comment 十二月 13, 2006
blogger:是时候使用blogspot导航了~
随着GG我今天砰的一声解决了Google Ajax搜索API的技术问题之后,我和咖啡鱼共同组建的中文blogspot导航站点——Blogger Show已经正式完工了。
这个站点除了有最新的博客聚合之外,还有中文博客推荐和搜索。欢迎大家使用~~~
而且咖啡鱼和我已经商量决定,此站点永不刊登广告。尽量做到简洁!
此站点将永久性作为公益性网站为大家的blogspot进行推广!
Add comment 十二月 13, 2006
blogger 3.0:运用google AJAX搜索API到你的博客,横向式
感谢作者 Hoctro,这个hack技巧实在太完美了~~~超级推荐大家使用。
具体效果如图: 或者参见本博客右上搜索。
安装方法:
第一步: 在下面的网址申请一个google AJAX搜索API的key :http://code.google.com/apis/ajaxsearch/signup.html
很容易就能申请到,只需输入你要申请的网址,然后同意google条款,确定~~得到一个key的代码。
第二步:把下面的css编码加入你的排头, 正好放在 ] ] ></b:skin> 后面, </head> 前面。
替换下面代码中的key为你在第一步申请到的key。还有再往下把你的博客地址写上去。看我的加深颜色的提示!两个wW9cday6o7K3g的位置替换成你申请地key。然后再把下面深色的http://hoctro.blogspot.com/博客地址变更为你的地址,地址下面的Hoctro’s Place 替换成你的博客名称。
<script
src=’http://www.google.com/maps?file=api&v=2&key=wW9cday6o7K3g‘ type=’text/javascript’/>
<script
src=’http://www.google.com/uds/api?file=uds.js&v=1.0&key=wW9cday6o7K3g‘ type=’text/javascript’/>
<link href=’http://www.google.com/uds/css/gsearch.css’ rel=’stylesheet’ type=’text/css’/>
<link href=’http://www.google.com/uds/css/gsearch_darkgrey.css’ rel=’stylesheet’ type=’text/css’/>
<style type=’text/css’>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }
/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }
/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }
/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }
/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}
</style>
<script type=’text/javascript’>
var coreSearch;
function SolutionLoad() {
var controlRoot = document.getElementById("searchControl");
// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
// prep for decoupled search form
var searchFormElement = document.getElementById("searchform");
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// populate - web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel("The Web");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setUserDefinedLabel("Blogsphere");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction("http://hoctro.blogspot.com/");
searcher.setUserDefinedLabel("Hoctro's Place");
coreSearch.addSearcher(searcher);
searcher = new GblogSearch();
searcher.setSiteRestriction("http://googleblog.blogspot.com/");
searcher.setUserDefinedLabel("Google Blog");
coreSearch.addSearcher(searcher);
searcher = new GwebSearch();
searcher.setSiteRestriction("http://www.blogger.com/");
searcher.setUserDefinedLabel("Blogger");
coreSearch.addSearcher(searcher);
coreSearch.draw(controlRoot, drawOptions);
}
function doCoreSearch(q) {
coreSearch.execute(q);
}
registerLoadHandler(SolutionLoad);
function registerLoadHandler(handler) {
var node = window;
if (node.addEventListener) {
node.addEventListener("load", handler, false);
} else if (node.attachEvent) {
node.attachEvent("onload", handler);
} else {
node['onload'] = handler;
}
return true;
}
</script>
第三步: 增加两个新的页面元素到你的博客, 注明是搜索,和搜索结果的页面元素名称,并且把两个页面元素放到你想显示的位置。
然后再用以下代码整体替换你刚刚加在博客上的两个页面元素:
<b:widget id=’HTML41′ locked=’false’ title=’搜索’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<div id=’searchform’>读取中/Loading…</div>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
<b:widget id=’HTML42′ locked=’false’ title=’搜索结果’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<div id=’searchControl’>读取中/Loading…</div>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
第五步,恭喜,完成了~~看看效果吧~~~
Add comment 十二月 13, 2006


