架设了自己的博客

Great Firewall不知道出于什么心态，BLOGSPOT又被BAN了，域名绑定也早己被封，真是命运多舛。封封停停已经多次，GFW也就一嫖客，这次又不知道什么时候解封了，把BLOG托管在BLOGSPOT上真是不保险。
对于用惯BLOGGER的人来说，国内任何一个博客网的自由度都比较低，没办法，外国的月亮就是圆。最终选择投入WordPress的怀抱，WordPress本身提供的博客服务也在被封之列，虽然国内有免费的WordPress托管商，还是感觉不自由，选择自己架一个算了。基于WordPress的BLOG架设已经基本上完成，请访问Http://www.jianrong@chen.net，由于最近在忙开题的事情，暂时停止更新。
本博客会继续更新，权当备份。

阅读全文↓

阅读摘要↑

为BLOGGER添加“跳到底部导航”的链接

因为BLOGGER的导航链接放在下边，相当不方便。如果不想做页首导航栏，添加一个“跳到底部”的链接是个不错的解决方法，而且在帖子页也可以方便读者评论。方法很简单：
1.如果想跳到帖子区域的底部，可以在适当位置加入下面代码（如果想跳到导航及发表评论链接，使用该项即可）：
<a href='javascript:scroll(0,main.scrollHeight)' title='Scroll to bottom of posts'>跳到导航链接↓</a>
如本BLOG加在日期显示后面：
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/><a href='javascript:scroll(0,main.scrollHeight)' title='Scroll to bottom of posts'> 跳到导航链接↓</a></h2>
2.如果想跳到侧边栏底部，可以在适当位置加入下面代码：
<a href='javascript:scroll(0,sidebar.scrollHeight)' title='Scroll to bottom of sidebar'>跳到侧边栏底部↓</a>
3.如果想跳到整个页面底部，可以在适当位置加入下面代码：
<a href='javascript:scroll(0,document.body.scrollHeight)' title='Scroll to bottom of this page'>跳到页面底部↓</a>

阅读全文↓

阅读摘要↑

I have my iPhone with me

阅读全文↓

阅读摘要↑

精简BLOG

因为感觉打开BLOG太慢，刚刚把AJAX搜索和AJAX标签删了。毕竟BLOG最重要的是内容而不是花哨的功能，牛人自牛，不用靠点缀。还是少用点JS，网页速度快了，大家心情也好一点，多点击一下鼠标多用一下滚轮累不死人。简单才是生活的真谛。

阅读全文↓

阅读摘要↑

Blogger 实用 Hack 技巧总结之三

7.让某一元素只在首页或非首页显示
通过元素的title搜索到后，按需要加入下面红色代码。
<b:widget id='HTML1' locked='false' title='Recent Articles' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> /*只在首页显示*/
<b:if cond='data:blog.homepageUrl != data:blog.url'> /*不在首页显示*/

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

8.高亮作者评论（咖啡鱼原文）
第一步，添加CSS：
.comment-body-author {
margin:0;
padding:20px 0 20px 40px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#CC3300; /*字体颜色*/
text-decoration:bold; /*字体样式，默认加粗*/
}
第二步：找到以下类似代码，全部替换：
<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>
<data:commentPostedByMsg/>
</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'>

9.具有按钮效果的链接（咖啡鱼原文）
想在博客的某一部分加上这个效果，可以搜索a:hover，在属性里增加position: relative; top: 1px; left: 1px;。如：
a:hover {
text-decoration: underline;
color: #0094F0;
position: relative; top: 1px; left: 1px;
}
如果只想单独定义某个链接，请查看原文。

10.收缩展开文章（原文）
原文已经介绍得很清楚，在这里不帖出原代码，需要注意的是，这一语句<script type='text/javascript' src='http://jrchen82.googlepages.com/hackosphere.js' />，必须粘在</head>前方。
这一语句：
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
可以改为下面的形式，增加一小图片，
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>显示全文<img border='0' src='http://jrchen82.googlepages.com/readmore.gif'/></a></p>
同理，
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'href='javascript:void(0);'>Summary only...</a></p>
可以改为：
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'href='javascript:void(0);'>显示摘要<img border='0'
src='http://jrchen82.googlepages.com/summary.gif'/></a></p>
11.添回到页首，回到帖子标题链接
找到下面的代码，并添加红色部分。如果使用了上一个HACK，可略过此步
<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id' >
把下面代码粘在<b:include data='post' name='postQuickEdit'/>之后或任何你想让它出现的地方。
<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);' title='Scroll to top of post'>回到开头↑</a>
<!-- to top of page and top of blog -->
<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>回到页首↑</a>
同样这里可以仿照上一个HACK，加入小图标。

12.显示相关文章(原文）
第一步：选中“扩展窗口小部件模板”，把下面代码放在</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>
第二步：找到以下代码：
<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>
更改为:
<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&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
第三步：保存，跳转至页面元素，添加一个HTML/Javascript元素，命名为“相关文章”，放入以下代码：
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
第四步：回到Html编辑，选中“扩展窗口小部件模板”，查找“相关文章”，把该部分加入红色代码：
<b:widget id='HTML ？' locked='false' title='相关文章' 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>
绿色部分为自定义项目。

阅读全文↓

阅读摘要↑

BLOGGER上的AJAX应用

注意添加这两个效果之后，博客打开速度有所下降，记得装酷是要付出代价的。

1.Ajax搜索
原作者GG派，我把代码删减了，只留下博客的搜索结果，算是大材小用了：），要加上其他内容请查看原文。
第一步：点击这里，输入你的博客地址，同意google条款，申请一个google AJAX API key。
第二步：COPY下面的代码，放在 ]]></b:skin>之后，</head>之前
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet'
type='text/css'/>
<style type='text/css'>
.gsc-control {
width: 95%;
}
</style>
<script src='http://www.google.com/uds/api?
file=uds.js&v=1.0&key=你申请到的KEY' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
// web search, open, alternate root
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
options.setRoot(document.getElementById("somewhere_else"));
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("你的博客名称");
blogSearch.setSiteRestriction("http://你的网址.blogspot.com");
searchControl.addSearcher(blogSearch, options);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("search_control"));
// execute an inital search
searchControl.execute(initSearch);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
第三步，切换到页面元素，弹出消息框，确定忽略，烦人的是以后到这里都会弹出这个消息框。
新建两个页面元素，放进以下代码：
下面代码放进的页面元素显示搜索框，可以改为任意你喜欢的图片，或者不显示任何图片：
<div id="search_control"><img
src="http://jrchen@82.googlepages.com/wbbar.gif"/></div>
下面代码放进的页面元素显示搜索结果，同样可以加入HTML语言：
<div id="somewhere_else"></div>
保存完成。

2.Ajax 标签
原作者Deepak，点击这里查看原文，由GG派改进。
第一步：COPY 下面代码 ，放在 ]]></b:skin>之后，</head>之前：
<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:white;border:1px solid #AAAAAA;width:180px;left:55%;text-align:center;}
* html #indicator{ /*IE6 only*/
position:absolute;
}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:128%;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;font-weight:bold;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.2em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script src='http://jrchen@82.googlepages.com/prototype.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// 用户自定义参数
// ----------------------------
var maxresults = 5;//每页打开的文章数
var navFlag = 1; //是否打开翻页功能，不打开设为0
var feedLabel = "Subscribe to";//RSS标签文字
var catLabel = "Sorted into:";//描述分类标签文字
var closeLabel = "Click to close";//关闭按钮文字，可以使用HTML语言
//]]>
</script>
<script src='http://jrchen@82.googlepages.com/ajaxla.js' type='text/javascript'/>
第二步：找到下面的代码：
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
替换为：
<b:loop values='data:post.labels' var='label'><a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>
找到标签元素的类似代码（没有添加标签元素的话先添加再修改）：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>
替换为：
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>
第三步，增加一个新的页面元素用来显示点击标签后的结果，建议放在帖子上方。
页面元素内部添加代码如下：
<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result');Element.show('Blog1');"><script type="text/javascript">document.write(closeLabel);</script></div></div>
保存完成。

阅读全文↓

阅读摘要↑

使用Google Blog Search为Blogger添加全文搜索

前些日子介绍了使用Blogger本身提供的Search功能为本站添加搜索，但是该功能只能搜索帖子标题，对全文搜索无能为力。对于BLOG内容较多，帖子标题又无法反映全部内容的，增加一个全文搜索确实必要。很多朋友都在BLOG里调用Google搜索引擎进行全文搜索，但对于BLOG来说及时性很差，往往需要几天时间才能更新。而Google Blog Search（以下简称GBS）的更新非常快，几乎是当天就可以检索到。所以这里介绍如何在Blogger里添加GBS功能进行本站全文搜索，使用Javascript实现。
1.COPY下面源代码(yourname改为你自己的名字）<script type="text/javascript">
function blogsearch () {
var wq=document.getElementsByName("wq")[0].value;
var link="http://blogsearch.google.com/blogsearch?hl=en&ie=UTF-8&q=blogurl:http://yourname.blogspot.com+"+wq;
window.open(link); }
</script>
<input id="query" name="wq" type="text"/>
<input id="b-searchbtn" value="Search" onclick="javascript:blogsearch()" type="submit"/>
2.进入控制台——模版——页面元素——添加页面元素——添加HTML/JavaScript——粘贴源代码——输入标题——保存。
3.同样如果想更改该控件格式，可以在CSS样式表中加入下面代码（已有的不用再添加）#query {
width:150px;
border:1px solid #999;
background: #fff;
}
#searchbtn {
border:1px solid #999;
background: #fff;
}
4.如果你嫌GBS更新还不够快，可以使用它的Ping服务功能，每次你更新Blog之后可以访问http://blogsearch.google.com/ping，手动提交你的BLOG，可以使你的BLOG更新更快。因为GBS更新已经非常快，自动Ping在这里就不介绍了。

阅读全文↓

阅读摘要↑

Blogger 实用 Hack 技巧总结之二

4.去除Blogger页面顶端的NavBar
进入控制台——模版——修改HTML，在CSS样式表中间加入下面代码
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
保存退出

5.在Blogger页面添加站内搜索
如果去除了NavBar，又想增加一个站内搜索，可以COPY下面源代码

<form id="searchthis" action="http://yourname.blogspot.com/search" style="display:inline;" method="get"><br/>
<input id="query" name="q" type="text"/>
<input id="b-searchbtn" value="搜索" type="submit"/><br/></form>
进入控制台——模版——页面元素——添加页面元素——添加HTML/JavaScript——粘贴源代码——输入标题——保存。 如果想更改该控件格式，可以在CSS样式表中加入下面代码
#query {
width:150px;
border:1px solid #999;
background: #fff;
}

#searchbtn {
border:1px solid #999;
background: #fff;
}
根据需要修改搜索框长度，背景色，边框等等。

6.在文章中粘贴代码
将所有的<替换成&lt;然后再发表，用这种方法不仅可以在Blogger里正常输出文件，而且COPY后不用再去替换全角，很是方便。如有必要，还可以将>替换成> 。如果要像本BLOG那样显示代码，可以在CSS样式表中加入下面代码。
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 0px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
在编写帖子时，在代码两边加上<code>和</code>

阅读全文↓

阅读摘要↑

Blogger 实用 Hack 技巧总结之一

不讨论经典模版的技巧，在修改模版前建议保存一份副本。
1.在Blogger首页显示摘要
进入控制台——模版——修改HTML——点选扩展窗口小部件模板
定位红色代码 <p><data:post.body/></p>
替换为蓝色代码 <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'>显示全文......</a>
<b:else/>
<data:post.title/>
</b:if>
</p>
</b:if>
进入控制台——设置——格式设定——文章模版中加入如下代码
<span class="fullpost"></span>
代码中“显示全文......”可以更改为任意你喜欢的文字，编写帖子时，要隐藏的内容写在<span class="fullpost">与</span>之间。
此方法只对新编写的帖子有用，如果以前的文章要以摘要方式显示，必须编辑文章，在隐藏文字两边分别加上<span class="fullpost">和</span>；另一种方法是对每篇文章截取固定像素，使首页看起来很整齐，不用编辑以前的帖子，但是如果文章开始是一个大图片，该方法只会截取一段显示，反而影响美观，在这里不介绍。

2.在Blogger右侧栏显示最新文章
进入控制台——模版——页面元素——添加页面元素——供稿——输入供稿地址http://yourname.blogspot.com/feeds/posts/default(其中yourname改为你博客的地址，以下相同）——更改标题和选项——保存。这个方法虽然简单，但是只能显示5条信息。
另一方法是登录GOOGLE READER，在左侧导航栏点击Add subscription——输入http://yourname.blogspot.com/feeds/posts/default——Add——点击上侧导航 Settings——Subscriptions——Change folders... ——New folder...——输入myblog——确定后进入Tag——点击private左边的小图标，将该文件夹公开——点击add a clip to your site——设置标题，样式，显示条目等——如果你觉得10条不够，可以把下面源代码中的myblog?n=10改为myblog?n=XX（1000条以下）——COPY源代码；
进入控制台——模版——页面元素——添加页面元素——添加HTML/JavaScript——粘贴源代码——输入标题——保存。

3.在Blogger右侧栏显示最新评论
与显示最新文章方法相同，只需要把供稿地址，也即RSS Feeds地址改为http://yourname.blogspot.com/feeds/comments/default。2和3使用GOOGLE READER的方法必须有帖子或评论才能成功。

阅读全文↓

阅读摘要↑

使用Trixie插件访问GOOGLE快照

作为GOOGLE的FANS却一直在使用BAIDU，只因GOOGLE的网页快照在国内不能用，网上一直有访问GOOGLE快照的方法，基本原理就是把快照网址里的“search?q=cache”进行断句，如改成"search?shit=&q=cache”，但是每次打开都要改一下，烦得很，像我这种懒人总希望找个一劳永逸的方法。于是想到了IE的“Trixie”进行网址自动更改，搜索了一下，已经有很多人介绍了，不灵光的也多；网上也有叫“GOOGLE快照助手”的软件，没有用过，懒人可以下来试用一下。下面提供一种方法，经测试可行。
需要工具
1.Microsoft .NET Framework 华军下载地址
2.Trixie 官方下载地址
装完上面两个软件后，粘贴下面代码到一文本文档中
// ==UserScript==
// @name Enable Google Caches
// @namespace http://jianrongchen.blogsopt.com/
// @description Enable Google caches
// @include search
// ==/UserScript==

(function()
{
var allLinks = document.links;
if (allLinks != null)
{
for (i = 0; i < allLinks.length; ++i)
{
if (allLinks [i].href.indexOf ("/search?q=cache:") > 0)
{
allLinks [i].href = allLinks [i].href.replace ("/search?q=cache:", "/search?shit&q=cache:");
}
}
}
}
)();
另存为Googlecache.user.js，保存至Trixie的Scripts文件夹，默认为“C:\Program Files\Bhelpuri\Trixie\Scripts”，打开IE——工具——Trixie Options...——Reload Scripts——点选Enable Google Caches——OK退出。
注：代码里面的search?shit&q=cache可能会过期，一段时间后不能用可以把“shit”改为任意你喜欢的字符，这是很多所谓“GOOGLE快照助手”所不具有的优点。
测试环境：Windows XP SP2；IE 6.0；.NET Framework 1.1。
也可以参考孤掌难鸣博客的另一种Trixie脚本，可以直接下载；孤掌难鸣也编写了一个IE插件，懒人可以看一下。

阅读全文↓

阅读摘要↑