blogger 3.0:为博客文章页 添加折叠式社会书签按钮

感谢原作者PurpleMoggy。
这个hack的作用就是在你的博客文章页添加一个伸缩式菜单，以便于添加该文章页文章到各种社会书签上。
例子可以参考我的测试博客文章页。

个人不是很喜欢社会书签，我认为如果读者正使用某社会书签，没有按钮也会添加你的文章（毕竟各大社会书签网站本身就有各种方便的添加方法)。如果读者根本没有使用什么社会书签，有了按钮也不会用……

另外我说点题外话，如果大家先我翻译了某篇hack文章的话（当然如果你自己理解了并测试修正再编译更好），请留言，尊重你的劳动，我会在开头链接你的相应文章并感谢您的工作。但是如果你只是先我介绍了某个hack/扩展，而且还是大家都知道的英文专业博客上的文章，不好意思，我要忽略你的文章……没有劳动而投机取巧是得不到我的尊重的。因此我会调整下我另外一篇文章的感谢名单，取消只是率先介绍的链接。

安装方法：
第一步，首先在你的css区域，即]]<>/b:skin>上边添加以下代码：

.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: 205px;
}
.anylinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}

你可以通过修改上面的代码改变hack的样式。

第二步，把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边：
<script src='http://yggomelprup.googlepages.com/anylink.js' type='text/javascript'/>
这个脚本文件可以 点击这里下载.
你也可以使用下边的地址：http://ggpi.googlecode.com/files/anylink.js
http://ggpi.008.net/anylink.js

最后, 你只需要把下面的代码添加到你想显示这个hack的地方:
<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:void(0);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">[+] Recommend</a>
<div id="anylinkmenu1" class="anylinkcss">
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Digg</a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Reddit</a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>del.icio.us</a>
<a expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' class='snap_nopreview' target='_blank'>Furl</a>
<a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Ma.gnolia.com</a>
<a expr:href='"http://www.sphere.com/search?q=" + data:post.url' class='snap_nopreview'>Sphere</a>
<a class='snap_nopreview' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&thetitle=" + data:post.title' target='_blank'>google</a>
<a expr:href='"http://www.ifeedreaders.com/bookmark.php?theurl=" + data:post.url + "&amp;thetitle=" + data:post.title' class='snap_nopreview' target='_blank'>More...</a>
</div>
</b:if>

我个人把上面这段代码添加到了

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
正下面，效果就如我测试博客的页面效果。

阅读全文...

阅读概要...

blogger 3.0:为博客文章页 添加折叠式社会书签按钮

感谢原作者PurpleMoggy。
这个hack的作用就是在你的博客文章页添加一个伸缩式菜单，以便于添加该文章页文章到各种社会书签上。
例子可以参考我的测试博客文章页。

个人不是很喜欢社会书签，我认为如果读者正使用某社会书签，没有按钮也会添加你的文章（毕竟各大社会书签网站本身就有各种方便的添加方法)。如果读者根本没有使用什么社会书签，有了按钮也不会用……

另外我说点题外话，如果大家先我翻译了某篇hack文章的话（当然如果你自己理解了并测试修正再编译更好），请留言，尊重你的劳动，我会在开头链接你的相应文章并感谢您的工作。但是如果你只是先我介绍了某个hack/扩展，而且还是大家都知道的英文专业博客上的文章，不好意思，我要忽略你的文章……没有劳动而投机取巧是得不到我的尊重的。因此我会调整下我另外一篇文章的感谢名单，取消只是率先介绍的链接。

安装方法：
第一步，首先在你的css区域，即]]<>/b:skin>上边添加以下代码：

.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: 205px;
}
.anylinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}

你可以通过修改上面的代码改变hack的样式。

第二步，把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边：
<script src='http://yggomelprup.googlepages.com/anylink.js' type='text/javascript'/>
这个脚本文件可以 点击这里下载.
你也可以使用下边的地址：http://ggpi.googlecode.com/files/anylink.js
http://ggpi.008.net/anylink.js

最后, 你只需要把下面的代码添加到你想显示这个hack的地方:
<b:if cond='data:blog.pageType == "item"'>
<a href="javascript:void(0);" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">[+] Recommend</a>
<div id="anylinkmenu1" class="anylinkcss">
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Digg</a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Reddit</a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>del.icio.us</a>
<a expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&amp;t=" + data:post.title' class='snap_nopreview' target='_blank'>Furl</a>
<a expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' class='snap_nopreview' target='_blank'>Ma.gnolia.com</a>
<a expr:href='"http://www.sphere.com/search?q=" + data:post.url' class='snap_nopreview'>Sphere</a>
<a class='snap_nopreview' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&thetitle=" + data:post.title' target='_blank'>google</a>
<a expr:href='"http://www.ifeedreaders.com/bookmark.php?theurl=" + data:post.url + "&amp;thetitle=" + data:post.title' class='snap_nopreview' target='_blank'>More...</a>
</div>
</b:if>

我个人把上面这段代码添加到了

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
正下面，效果就如我测试博客的页面效果。

阅读全文...

阅读概要...

随笔:大家用gmail以后收到过这类英文欺诈邮件没有？

收到很多次了，决定发出来让大家也看看：

感觉国外的骗子也不比国内少啊。不过国内的人都有免疫力，不知道国外还有没有傻瓜会相信。而且这种低级的骗术在中国人眼中，简直是7、8岁小孩的智商……

除了这封邮件外，我还收到过什么阿拉伯王子的求救信，帮助他的可以得到他的遗产的10%也就是3000万美元。算是比较有趣的，让我有耐心把个鬼英文邮件读完……

恩，我没说清楚。这些邮件google都没有过滤为垃圾邮件。不过也从侧面说明自从换了gmail，极少有垃圾邮件能够发到我收件箱的。像我的雅虎和126邮箱，登录一次首先映入眼帘的就是几百封垃圾邮件在收件箱等着我删除……

阅读全文...

阅读概要...

随笔:大家用gmail以后收到过这类英文欺诈邮件没有？

收到很多次了，决定发出来让大家也看看：

感觉国外的骗子也不比国内少啊。不过国内的人都有免疫力，不知道国外还有没有傻瓜会相信。而且这种低级的骗术在中国人眼中，简直是7、8岁小孩的智商……

除了这封邮件外，我还收到过什么阿拉伯王子的求救信，帮助他的可以得到他的遗产的10%也就是3000万美元。算是比较有趣的，让我有耐心把个鬼英文邮件读完……

恩，我没说清楚。这些邮件google都没有过滤为垃圾邮件。不过也从侧面说明自从换了gmail，极少有垃圾邮件能够发到我收件箱的。像我的雅虎和126邮箱，登录一次首先映入眼帘的就是几百封垃圾邮件在收件箱等着我删除……

阅读全文...

阅读概要...

google:google交友社区orkut三周岁了

可惜这个社区始终还是巴西人占绝大多数。感觉很多地方这个交友社区只要学一下myspace就会成功得多。可惜就是打死都不学……

不过现在中国人也多起来了，大家有兴趣的还是可以去交交朋友，有点意思。

阅读全文...

阅读概要...

google:google交友社区orkut三周岁了

可惜这个社区始终还是巴西人占绝大多数。感觉很多地方这个交友社区只要学一下myspace就会成功得多。可惜就是打死都不学……

不过现在中国人也多起来了，大家有兴趣的还是可以去交交朋友，有点意思。

阅读全文...

阅读概要...

web:为什么 豆瓣网 注定是要失败的

一直不看好豆瓣，但是keso总是言毕豆瓣，所以偶尔跑去看看，但是一直也没有鼓起勇气去 注册个会员。书读得少，看到那些读书狂就怕……

昨天读了麦田，keso和谢文的新年对话，不由觉得谢文很多话很有道理，但是他们分析半天也没有分析出豆瓣为什么发展不起来。

所以我决定以一个普通人的视角来看看这个 网站有什么问题：

第一其实就是谢文说的，为什么那么长时间以来我知道豆瓣却不敢去注册？压力太大，开头说的读一本书可是一个不小的负担，我看到豆瓣第一印象就是如果我不一个星期读上一本书估计没戏了。所以干脆敬而远之。

第二豆瓣说是评书，但是你在搜索引擎上搜索书籍，读书翻到多少页能看到豆瓣？你在高端人群做就越做越高端，最后肯定要高端到月球上孤芳自赏的……

第三我今天去注册以后才发现，这个网站还不是光读书，又是评论电影，又是换东西，不晓得到底是干嘛的。就像谢文说的，感觉没有主题，刚刚注册进去，第一个链接不是要我看看什么书好看，是要我选择同城市换物，换旧书……

第四个，web2.0是否给了网站权利去挑战用户习惯？国内用户我自认还是比较喜欢改变习惯的，只要新习惯比较好，比较有效率。就像当初爱上google的搜索，从此就没有再使用sina和搜狐的分类网站导航。而我很清楚我搜索的习惯在互联网经过这么两年依然是比较新潮的，毕竟像hao123这种网站还活的好好的……所以你现在强行塞给用户一个web2.0，把网站界面换的乱七八糟不符合用户的习惯，你觉得那是简洁，我觉得那是看到头晕。你跟我们广大用户较劲，我们不上你的网站就是了……

其实这里可以引申一下大家做博客的问题，很多朋友以为放一大堆很有趣的hack/扩展，把博客界面打扮得花枝招展会很吸引人，其实是完全错误的观念。这里举个例子，夏拉非不要误会，只谈我个人感觉，成人童话世界这个博客的 内容我很喜欢，但是我不愿意上这个博客。为什么呢？虽然界面设计的很精妙，我就是觉得那个伸缩栏影响我的 视角，整体又黑乎乎的，让我感觉有些压抑，很难受的感觉。勉强看篇文章看完以后我就想赶快退出…… 不知道有没有人跟我一样的感觉哈，总之那个设计跟我浏览网站的习惯就完全是冲突的。不过个人博客就是表现个性的，所以怎么设计也是个人性格思维表现力的一种体现。

但是网站就不一样了，你设计的不符合用户习惯，用户就会主动回避你！

这里说说被评为最垃圾网站的 myspace，也许每个会一点做网页的人看了都会说这个网站设计的真是垃圾中的极品。但是有一点，myspace没有web2.0到特立独行的去改变用户习惯。尽管myspace网页设计的很垃圾，但是基本符合用户习惯，我上去以后绝对不会找不着北……

回到豆瓣上，豆瓣就给我一种找不着北的感觉，上去以后无从下手，内容太多，读书，电影，音乐，我这个庸人就是找不到融入这个社区的切入点。注意，到这里估计90%的用户都已经被自然淘汰了……你说这个网站高端不高端？

有的网站像蚂蚁社区那样，给个说明书要你看一页页画好图，真的有哪个人那么有耐心去专门看一个可上可不上的发展中的网站社区吗？你是发展到myspace的规模，我朋友在上面，我非去看不可！？不是的话，一个我凭什么上你的个网站还要顺便上堂课啊？我要喜欢上课我就去上课，上网干嘛？ 一个我很懒，是人都很懒，巴不得不用鼠标你的网站就知道我想干嘛把内容呈现在我面前。你说我这么懒的人，你指望我消费大量脑力上你网站？还不知道你网站到底怎么样呢。我一懒可能就懒得看了……

第五个，互联网要的就是发展速度，你豆瓣在那里慢慢折腾的时候，任何一家比你会炒作，比你符合用户习惯的网站一上线，你就完蛋。到时候不要喊冤说我web2.0啊，那个网站做的那么垃圾……

这里我要说一句我自认很大师级的话： 做网站不管1.0还是N点0，就是要做给弱智看，弱智看懂了会有自信心，天天来看。天才看懂了会很骄傲，心想：“这么简单，那些弱智还这个那个，我一秒钟就知道了”也很开心，天天来看。

阅读全文...

阅读概要...

web:为什么 豆瓣网 注定是要失败的

一直不看好豆瓣，但是keso总是言毕豆瓣，所以偶尔跑去看看，但是一直也没有鼓起勇气去 注册个会员。书读得少，看到那些读书狂就怕……

昨天读了麦田，keso和谢文的新年对话，不由觉得谢文很多话很有道理，但是他们分析半天也没有分析出豆瓣为什么发展不起来。

所以我决定以一个普通人的视角来看看这个 网站有什么问题：

第一其实就是谢文说的，为什么那么长时间以来我知道豆瓣却不敢去注册？压力太大，开头说的读一本书可是一个不小的负担，我看到豆瓣第一印象就是如果我不一个星期读上一本书估计没戏了。所以干脆敬而远之。

第二豆瓣说是评书，但是你在搜索引擎上搜索书籍，读书翻到多少页能看到豆瓣？你在高端人群做就越做越高端，最后肯定要高端到月球上孤芳自赏的……

第三我今天去注册以后才发现，这个网站还不是光读书，又是评论电影，又是换东西，不晓得到底是干嘛的。就像谢文说的，感觉没有主题，刚刚注册进去，第一个链接不是要我看看什么书好看，是要我选择同城市换物，换旧书……

第四个，web2.0是否给了网站权利去挑战用户习惯？国内用户我自认还是比较喜欢改变习惯的，只要新习惯比较好，比较有效率。就像当初爱上google的搜索，从此就没有再使用sina和搜狐的分类网站导航。而我很清楚我搜索的习惯在互联网经过这么两年依然是比较新潮的，毕竟像hao123这种网站还活的好好的……所以你现在强行塞给用户一个web2.0，把网站界面换的乱七八糟不符合用户的习惯，你觉得那是简洁，我觉得那是看到头晕。你跟我们广大用户较劲，我们不上你的网站就是了……

其实这里可以引申一下大家做博客的问题，很多朋友以为放一大堆很有趣的hack/扩展，把博客界面打扮得花枝招展会很吸引人，其实是完全错误的观念。这里举个例子，夏拉非不要误会，只谈我个人感觉，成人童话世界这个博客的 内容我很喜欢，但是我不愿意上这个博客。为什么呢？虽然界面设计的很精妙，我就是觉得那个伸缩栏影响我的 视角，整体又黑乎乎的，让我感觉有些压抑，很难受的感觉。勉强看篇文章看完以后我就想赶快退出…… 不知道有没有人跟我一样的感觉哈，总之那个设计跟我浏览网站的习惯就完全是冲突的。不过个人博客就是表现个性的，所以怎么设计也是个人性格思维表现力的一种体现。

但是网站就不一样了，你设计的不符合用户习惯，用户就会主动回避你！

这里说说被评为最垃圾网站的 myspace，也许每个会一点做网页的人看了都会说这个网站设计的真是垃圾中的极品。但是有一点，myspace没有web2.0到特立独行的去改变用户习惯。尽管myspace网页设计的很垃圾，但是基本符合用户习惯，我上去以后绝对不会找不着北……

回到豆瓣上，豆瓣就给我一种找不着北的感觉，上去以后无从下手，内容太多，读书，电影，音乐，我这个庸人就是找不到融入这个社区的切入点。注意，到这里估计90%的用户都已经被自然淘汰了……你说这个网站高端不高端？

有的网站像蚂蚁社区那样，给个说明书要你看一页页画好图，真的有哪个人那么有耐心去专门看一个可上可不上的发展中的网站社区吗？你是发展到myspace的规模，我朋友在上面，我非去看不可！？不是的话，一个我凭什么上你的个网站还要顺便上堂课啊？我要喜欢上课我就去上课，上网干嘛？ 一个我很懒，是人都很懒，巴不得不用鼠标你的网站就知道我想干嘛把内容呈现在我面前。你说我这么懒的人，你指望我消费大量脑力上你网站？还不知道你网站到底怎么样呢。我一懒可能就懒得看了……

第五个，互联网要的就是发展速度，你豆瓣在那里慢慢折腾的时候，任何一家比你会炒作，比你符合用户习惯的网站一上线，你就完蛋。到时候不要喊冤说我web2.0啊，那个网站做的那么垃圾……

这里我要说一句我自认很大师级的话： 做网站不管1.0还是N点0，就是要做给弱智看，弱智看懂了会有自信心，天天来看。天才看懂了会很骄傲，心想：“这么简单，那些弱智还这个那个，我一秒钟就知道了”也很开心，天天来看。

阅读全文...

阅读概要...

blogger:新的三栏博客模板（纯白色，文章模块在中间）

感谢作者Thur Broeders

样子可以查看这里。

下载1.1版xml文件点击这里。

更新：作者3.0版模板放出，点击这里下载。

阅读全文...

阅读概要...

blogger:新的三栏博客模板（纯白色，文章模块在中间）

感谢作者Thur Broeders

样子可以查看这里。

下载1.1版xml文件点击这里。

更新：作者3.0版模板放出，点击这里下载。

阅读全文...

阅读概要...

web:读麦田记载的谢文，keso谈天有感

今天一口气读完 谢文、keso、麦田新年对话，深有感触，觉得这里面最有思想最有才还是谢文。不得不让人佩服。

麦田就不说了，跟我一样，小毛孩一个。keso洪波就像谢文所说，他的博客挑出一点还说还有些道理，但是雄才大略，能够整个通盘的观察互联网这个产业的，三个人里只有谢文一个了。有点像我认识的一个人：）

那篇文章很长，所以说一口气看完还是有点累人的，这里把我觉得很有道理的条条整理出来，大家共同长长知识：

第一是共识，现在的互联网产业不健康，具体怎么个不健康法，总结就是中国特色太多，美国特色太少。什么是中国特色？一个是政府官僚体制对互联网的阻碍（看看我们的小胡主席前些天开会又要科学管理互联网了，什么东西共产党一管都是死，不知道这一管，互联网能不能撑得住……）

二个是网民整体素质不高，这个问题也要命，所谓明辨是非，中国人现在早丢到八百里外去了。现在那些根本没有脑子的网民只管成王败寇，哪管是非曲直……三个是病态社会造就病态互联网，大家都急功近利，大家都把孙子兵法运用的滚瓜烂熟，就是大家都不会自己创造一些新的东西。
大概创造，遵守规则，明辨是非这些词以后都要归结到美国特色里去了。

第二是谢文对社区，对互联网2.0的精辟阐述。我总结几点，有的是我的理解（用蓝色），有的是谢文原话。

谢文认为国内现在没有成功的web2.0企业。都是有心计的web1.0或者改名传统产业公司。

互联网行业和传统行业的最大区别：互联网行业的利润率高，成长性高。现在真正的危机其实是成长性，你看前几年中国互联网企业都是翻番，甚至翻几番；现在你一问，都是追求年增长30％，这就非常危险了。再掉，再掉，到年增长率15％，20％的时候，你就是传统产业了。

对"web2.0"的理解：我觉得1.0和2.0真正的本质――1.0是以“信息”为中心，信息的获取，整理，使用，交换，收藏，查询，它的核心是“信息”。这个是对的，因为互联网的核心是把一切都信息化了。web2.0的核心是把对象转换了，它不再是以“信息”为中心，而是以“人”为中心。当web2.0刚开始的时候，大家无法命名，先取了一个名字；我觉得现在这个词语是站住了。以“信息”为中心的互联网，经过十几，二十几年来的努力，已经有了实质性突破；而现在正在转换为人，以网站真实的人、全面的人、丰富的人为中心，重组互联网。比如keso说的，正因为人与人的关系，所以体现了人的民主性；也如麦田说的，正因为现在不仅是信息，所以需要人与人的服务。所以如果我们学术的说，就是对象变了，现在是“人”。在web1.0时代，由于所有的行为都是围绕信息的，所以没法交往，比如我在联众遇到的麦田是玩游戏的，在donews遇到的麦田是IT的等等，而现在以人为中心，在重组人。以前是有100个网站的信息，我得去找它们；而现在是100个网站的信息都在向我靠拢。以“人”为中心重组互联网，就是我认为的web2.0。

关于"you": 我的交往是那个数量级的，我也就是那个数量级的。所以一部分我，是被你们给定义的。自我描述、行为模式，交互评论，这三者加起来，就是一个完整的“人”。所以社会化搜索是搜这些的！这里面，行为模式的判定是连续变化的，非常复杂。所以我说web2.0是一个更大的概念，而社会化搜索只是其中一部分。

我认为搜索依然是关键，google整合信息的能力是web2.0必不可少的基础。

网站的大：要流量大，收入大，成长的机会大，成长的空间也要大，要能成为第一。所以在这个意义上，我认为craigslist，youtube，facebook，我认为都比myspace低一档，就是这个意思。Myspace理论上可以把上面三个网站都包括进去，但是反过来，上面三个网站不可能包含 myspace，从这个意义上来说，myspace就是大，而那些就是一个垂直的“大”。垂直的也有成功的，但这些不是我说的成功的“大”。前段时间我看了一个数据，说myspace生气了，自己也做了视频，而现在上面每天用户上传的原创视频数已经超过youtube了。这可以用一个比喻，比如北京的川菜馆，可能比四川眉山的川菜馆还多；北京的纸媒，好像比全国其他地方所有加起来的纸媒还多。这就是大型综合社区，它其中任何一个垂直方向都能做到比垂直社区大。但反过来就不是。
在某一个时段，你要有一个运营的重点；就象北京2008就是主打奥运会；但是这不妨碍你有一个大的结构。这两点是并行不悖的。我没有说要做一个全面展开没重点。

无心插柳柳成荫，第一方法往往不是最好的。你把网站结构作出来，让市场用户决定哪个方向是你的主攻方向。其实我们写博客也是一样。我当初开GG派并没有想写blogger技术，我想写的是google 互联网观察。但是当时想激咖啡鱼写快点，就写了两三篇，写了以后效果不错，现在变成一个主打的文章方向了……

web2.0的一个特点：社区的氛围还是很重要的，开始要有一个比较轻松的氛围。麦田你的蚂蚁社区就有这个问题，你不可以目标那么明显，人家还没开始生活呢，你这里就要开始商业销售了。就和当年美国挖金子一样，你特别想挖到反而不行。所以我说麦田你开始的目的性不要太强，反而能够实现。杨勃（阿北）也有这个问题。他的读书是有了，但是他 缺那种无目的的，闲适的，家的感觉。功利心太强。一上来就是想读书，已读书，等等，以书会友，这让我一上来有压力啊，自觉不自觉的，就希望说出惊人之语， 语不惊人死不休。

要让大家有“家”的感觉。人都有这样的时候，懒散散地趟在沙发上发呆，不知道干点嘛；你要先给大家这样的感觉。然后等他休息够了，他振作起来，自然知道做 这个，做那个。所以我觉得web2.0对我来说就是一个对真实生活的模仿过程。谁模仿的最接近，谁最让用户感觉是自己的家，谁就赢定了，无非是早赢晚赢的 问题。反而，你如果功利心太强，那你最多做的就是义乌小商品市场，不是真正的城市。你去义乌看看，100万人口，70万是来做生意的，所以这个城市很难做 大。但你麦田和洪波都不是北京人吧，但问你们为什么来北京，现在要你们离开北京，七八条理由你们说也说不清，但就是离不开北京了。真要是让大家离不开了， 你麦田的蚂蚁别一开始让人家填什么品牌，散开了做，这样才能做得大。所以，我也从来不怕把我这套说出去，说出去别人做也不一样，因为它是一种理念，一 种。。。

所以洪波你有的评论写的特对，到位，是我喜欢的那种类型，比如你写我的，说到点子上了，但你就是缺一点系统，展开；而麦田呢，麦田是比较系统化的，但麦田总差那么一点，有些话特对，我觉得语录级的，但就是差那么一点，没办法实现。其实web2.0难就难在这点。原来大家都是零散的，破碎的，一点点的做事，但web2.0就是越来越向真实的逻辑靠拢。

后面他们讨论的这个结构的力量就是制度的力量，我学经济社会的，所以我在这一点上很有感触。当初我99年刚刚上网的时候就主动在论坛上宣扬这么一个词：制度经济学。制度不仅有经济学的意义，而且有社会学的意义。你看现在很多中国人为什么动不动就喜欢自称某人的fans，动不动就自认家奴？很简单，满清开始到现在，国家制度上是一个奴性制度，越有奴性，越喜欢表衷心的人升迁越快，几十年还看不出影响，几百年影响就显现了，整个民族表现出了奴隶性。这一点上可以说当初日本人分析的很对，中国人已经被满清奴化了，所以杀个几百万就会臣服于日本。只不过日本人当时没有估计到当时无论中国还是日本都不过是世界大棋局上的两颗小棋子，美国人，欧洲人不可能让你日本人占领中国，否则世界力量就不平衡了。而且中国人本身虽然有奴性，但是想要生存的性在怎么样也比奴性强啊……毕竟奴性本身正是中国人为了生存而适者生存产生的。所以当时日本不杀中国人，如果反而像在河南那样发放粮食，帮助当地人，就会有大量河南人帮日本人打中国人的现象。可惜日本毕竟国家太小，没有那么多粮食发放，没有那样的实力，所以日本无论如何是不可能占领中国。

扯远了，我说的这个制度在互联网进入2.0时代的时候，互联网越来越模仿生活的时候，就越来越有互联网的经济意义。用谢文的话说，就是“相信结构的力量，相信内在的推动力！”“我们追求内聚力量。”

一个良好的三权分立的国家制度创造了美国。一个良好的公司制度则能创造一个伟大的公司，同样，一个良好的互联网社区网络的结构，能够创造出一个伟大的网站！


最后一点就是国内的互联网需要一个良性的开端，需要理解品牌信任本身会降低商业交易成本。这个价值对整个产业都是非常重要的。我这里对比一下移动公司，当初sp满天飞，到处骗钱的时候人人自危，哪个敢订阅什么业务，都是被骗着订阅的。后来移动强力监管，移动的那些sp死了吗？还不是活得好好的，反而大家敢在移动那里花钱订东西了。

我就是习惯了移动，换了联通之后，以为随便订点东西无所谓。结果差点把人气死。消财免灾吧，不想浪费精力跟他们紧纠缠。结果第二个月又扣！？老子日了，一个电话打到信产部去，前前后后扣的钱给我双倍返回来！然后还要给我登门道歉！气是消了，但是再也不敢订联通的东西了……没有那么多精力奉陪，还是怕了……

所以现在的互联网企业要懂得培养这个长期的品牌信用，就像google这样。这才是一个公司最重要的东西。

最后再次发表我的一个观点：完全不看好蚂蚁社区。麦田很多东西上有自己的看法，但是理论和实际总是有区别的。

阅读全文...

阅读概要...

web:读麦田记载的谢文，keso谈天有感

今天一口气读完 谢文、keso、麦田新年对话，深有感触，觉得这里面最有思想最有才还是谢文。不得不让人佩服。

麦田就不说了，跟我一样，小毛孩一个。keso洪波就像谢文所说，他的博客挑出一点还说还有些道理，但是雄才大略，能够整个通盘的观察互联网这个产业的，三个人里只有谢文一个了。有点像我认识的一个人：）

那篇文章很长，所以说一口气看完还是有点累人的，这里把我觉得很有道理的条条整理出来，大家共同长长知识：

第一是共识，现在的互联网产业不健康，具体怎么个不健康法，总结就是中国特色太多，美国特色太少。什么是中国特色？一个是政府官僚体制对互联网的阻碍（看看我们的小胡主席前些天开会又要科学管理互联网了，什么东西共产党一管都是死，不知道这一管，互联网能不能撑得住……）

二个是网民整体素质不高，这个问题也要命，所谓明辨是非，中国人现在早丢到八百里外去了。现在那些根本没有脑子的网民只管成王败寇，哪管是非曲直……三个是病态社会造就病态互联网，大家都急功近利，大家都把孙子兵法运用的滚瓜烂熟，就是大家都不会自己创造一些新的东西。
大概创造，遵守规则，明辨是非这些词以后都要归结到美国特色里去了。

第二是谢文对社区，对互联网2.0的精辟阐述。我总结几点，有的是我的理解（用蓝色），有的是谢文原话。

谢文认为国内现在没有成功的web2.0企业。都是有心计的web1.0或者改名传统产业公司。

互联网行业和传统行业的最大区别：互联网行业的利润率高，成长性高。现在真正的危机其实是成长性，你看前几年中国互联网企业都是翻番，甚至翻几番；现在你一问，都是追求年增长30％，这就非常危险了。再掉，再掉，到年增长率15％，20％的时候，你就是传统产业了。

对"web2.0"的理解：我觉得1.0和2.0真正的本质――1.0是以“信息”为中心，信息的获取，整理，使用，交换，收藏，查询，它的核心是“信息”。这个是对的，因为互联网的核心是把一切都信息化了。web2.0的核心是把对象转换了，它不再是以“信息”为中心，而是以“人”为中心。当web2.0刚开始的时候，大家无法命名，先取了一个名字；我觉得现在这个词语是站住了。以“信息”为中心的互联网，经过十几，二十几年来的努力，已经有了实质性突破；而现在正在转换为人，以网站真实的人、全面的人、丰富的人为中心，重组互联网。比如keso说的，正因为人与人的关系，所以体现了人的民主性；也如麦田说的，正因为现在不仅是信息，所以需要人与人的服务。所以如果我们学术的说，就是对象变了，现在是“人”。在web1.0时代，由于所有的行为都是围绕信息的，所以没法交往，比如我在联众遇到的麦田是玩游戏的，在donews遇到的麦田是IT的等等，而现在以人为中心，在重组人。以前是有100个网站的信息，我得去找它们；而现在是100个网站的信息都在向我靠拢。以“人”为中心重组互联网，就是我认为的web2.0。

关于"you": 我的交往是那个数量级的，我也就是那个数量级的。所以一部分我，是被你们给定义的。自我描述、行为模式，交互评论，这三者加起来，就是一个完整的“人”。所以社会化搜索是搜这些的！这里面，行为模式的判定是连续变化的，非常复杂。所以我说web2.0是一个更大的概念，而社会化搜索只是其中一部分。

我认为搜索依然是关键，google整合信息的能力是web2.0必不可少的基础。

网站的大：要流量大，收入大，成长的机会大，成长的空间也要大，要能成为第一。所以在这个意义上，我认为craigslist，youtube，facebook，我认为都比myspace低一档，就是这个意思。Myspace理论上可以把上面三个网站都包括进去，但是反过来，上面三个网站不可能包含 myspace，从这个意义上来说，myspace就是大，而那些就是一个垂直的“大”。垂直的也有成功的，但这些不是我说的成功的“大”。前段时间我看了一个数据，说myspace生气了，自己也做了视频，而现在上面每天用户上传的原创视频数已经超过youtube了。这可以用一个比喻，比如北京的川菜馆，可能比四川眉山的川菜馆还多；北京的纸媒，好像比全国其他地方所有加起来的纸媒还多。这就是大型综合社区，它其中任何一个垂直方向都能做到比垂直社区大。但反过来就不是。
在某一个时段，你要有一个运营的重点；就象北京2008就是主打奥运会；但是这不妨碍你有一个大的结构。这两点是并行不悖的。我没有说要做一个全面展开没重点。

无心插柳柳成荫，第一方法往往不是最好的。你把网站结构作出来，让市场用户决定哪个方向是你的主攻方向。其实我们写博客也是一样。我当初开GG派并没有想写blogger技术，我想写的是google 互联网观察。但是当时想激咖啡鱼写快点，就写了两三篇，写了以后效果不错，现在变成一个主打的文章方向了……

web2.0的一个特点：社区的氛围还是很重要的，开始要有一个比较轻松的氛围。麦田你的蚂蚁社区就有这个问题，你不可以目标那么明显，人家还没开始生活呢，你这里就要开始商业销售了。就和当年美国挖金子一样，你特别想挖到反而不行。所以我说麦田你开始的目的性不要太强，反而能够实现。杨勃（阿北）也有这个问题。他的读书是有了，但是他 缺那种无目的的，闲适的，家的感觉。功利心太强。一上来就是想读书，已读书，等等，以书会友，这让我一上来有压力啊，自觉不自觉的，就希望说出惊人之语， 语不惊人死不休。

要让大家有“家”的感觉。人都有这样的时候，懒散散地趟在沙发上发呆，不知道干点嘛；你要先给大家这样的感觉。然后等他休息够了，他振作起来，自然知道做 这个，做那个。所以我觉得web2.0对我来说就是一个对真实生活的模仿过程。谁模仿的最接近，谁最让用户感觉是自己的家，谁就赢定了，无非是早赢晚赢的 问题。反而，你如果功利心太强，那你最多做的就是义乌小商品市场，不是真正的城市。你去义乌看看，100万人口，70万是来做生意的，所以这个城市很难做 大。但你麦田和洪波都不是北京人吧，但问你们为什么来北京，现在要你们离开北京，七八条理由你们说也说不清，但就是离不开北京了。真要是让大家离不开了， 你麦田的蚂蚁别一开始让人家填什么品牌，散开了做，这样才能做得大。所以，我也从来不怕把我这套说出去，说出去别人做也不一样，因为它是一种理念，一 种。。。

所以洪波你有的评论写的特对，到位，是我喜欢的那种类型，比如你写我的，说到点子上了，但你就是缺一点系统，展开；而麦田呢，麦田是比较系统化的，但麦田总差那么一点，有些话特对，我觉得语录级的，但就是差那么一点，没办法实现。其实web2.0难就难在这点。原来大家都是零散的，破碎的，一点点的做事，但web2.0就是越来越向真实的逻辑靠拢。

后面他们讨论的这个结构的力量就是制度的力量，我学经济社会的，所以我在这一点上很有感触。当初我99年刚刚上网的时候就主动在论坛上宣扬这么一个词：制度经济学。制度不仅有经济学的意义，而且有社会学的意义。你看现在很多中国人为什么动不动就喜欢自称某人的fans，动不动就自认家奴？很简单，满清开始到现在，国家制度上是一个奴性制度，越有奴性，越喜欢表衷心的人升迁越快，几十年还看不出影响，几百年影响就显现了，整个民族表现出了奴隶性。这一点上可以说当初日本人分析的很对，中国人已经被满清奴化了，所以杀个几百万就会臣服于日本。只不过日本人当时没有估计到当时无论中国还是日本都不过是世界大棋局上的两颗小棋子，美国人，欧洲人不可能让你日本人占领中国，否则世界力量就不平衡了。而且中国人本身虽然有奴性，但是想要生存的性在怎么样也比奴性强啊……毕竟奴性本身正是中国人为了生存而适者生存产生的。所以当时日本不杀中国人，如果反而像在河南那样发放粮食，帮助当地人，就会有大量河南人帮日本人打中国人的现象。可惜日本毕竟国家太小，没有那么多粮食发放，没有那样的实力，所以日本无论如何是不可能占领中国。

扯远了，我说的这个制度在互联网进入2.0时代的时候，互联网越来越模仿生活的时候，就越来越有互联网的经济意义。用谢文的话说，就是“相信结构的力量，相信内在的推动力！”“我们追求内聚力量。”

一个良好的三权分立的国家制度创造了美国。一个良好的公司制度则能创造一个伟大的公司，同样，一个良好的互联网社区网络的结构，能够创造出一个伟大的网站！


最后一点就是国内的互联网需要一个良性的开端，需要理解品牌信任本身会降低商业交易成本。这个价值对整个产业都是非常重要的。我这里对比一下移动公司，当初sp满天飞，到处骗钱的时候人人自危，哪个敢订阅什么业务，都是被骗着订阅的。后来移动强力监管，移动的那些sp死了吗？还不是活得好好的，反而大家敢在移动那里花钱订东西了。

我就是习惯了移动，换了联通之后，以为随便订点东西无所谓。结果差点把人气死。消财免灾吧，不想浪费精力跟他们紧纠缠。结果第二个月又扣！？老子日了，一个电话打到信产部去，前前后后扣的钱给我双倍返回来！然后还要给我登门道歉！气是消了，但是再也不敢订联通的东西了……没有那么多精力奉陪，还是怕了……

所以现在的互联网企业要懂得培养这个长期的品牌信用，就像google这样。这才是一个公司最重要的东西。

最后再次发表我的一个观点：完全不看好蚂蚁社区。麦田很多东西上有自己的看法，但是理论和实际总是有区别的。

阅读全文...

阅读概要...

google:外国著名博客Google Blogoscoped的中文版谷歌治印上线

Google Blogoscoped的中文版谷歌治印上线。内容覆盖Google和技术世界，自从2003年起，每天都发表新文章分析google。

这个网站的权威性应该超过G速客，大家喜欢google的可以看看：http://google.blogoscoped.cn

阅读全文...

阅读概要...

google:外国著名博客Google Blogoscoped的中文版谷歌治印上线

Google Blogoscoped的中文版谷歌治印上线。内容覆盖Google和技术世界，自从2003年起，每天都发表新文章分析google。

这个网站的权威性应该超过G速客，大家喜欢google的可以看看：http://google.blogoscoped.cn

阅读全文...

阅读概要...

blogger 3.0:最简单的播放mp3方法

感谢原作者 ¥€$，原文网页。
这个hack/扩展的作用就是把你博客上所有的mp3链接 (<a href="my_file.mp">Link</a>) 都自动的加上一个播放按钮，按按钮就可以直接播放歌曲~~

例子 #1

例子 #2

脚本很小3k，安装很简单，推荐使用~~

安装方法：把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边即可：

<script src='http://googlepage.googlepages.com/player.js' type='text/javascript'/>

安装完成：）
不放心google pages存储空间的，可以把脚本换成：
我的google code存储空间：http://ggpi.googlecode.com/files/player.js
我的国内服务器存储空间：http://ggpi.008.net/player.js

阅读全文...

阅读概要...

blogger 3.0:最简单的播放mp3方法

感谢原作者 ¥€$，原文网页。
这个hack/扩展的作用就是把你博客上所有的mp3链接 (<a href="my_file.mp">Link</a>) 都自动的加上一个播放按钮，按按钮就可以直接播放歌曲~~

例子 #1

例子 #2

脚本很小3k，安装很简单，推荐使用~~

安装方法：把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边即可：

<script src='http://googlepage.googlepages.com/player.js' type='text/javascript'/>

安装完成：）
不放心google pages存储空间的，可以把脚本换成：
我的google code存储空间：http://ggpi.googlecode.com/files/player.js
我的国内服务器存储空间：http://ggpi.008.net/player.js

阅读全文...

阅读概要...

blogger 3.0:为博客链接 添加最详细得富文本解释跳出栏

原作者不详，我对做网页的标准词语翻译不是很清楚，所以就尽我所能通俗的讲给大家听。

就是给你博客上的链接词汇 增加一个跳出框，当鼠标移动到上面的时候，就会出现。这个跳出框跟那个我博客上本身有的预览框有点像，只不过这个是可以自己设定内容的：）

要看具体什么样，请上测试博客，那个第一篇文章，返回GG派，鼠标悬停在GG派上的样式就是了：）
整个hack/扩展 不大，脚本文件只有5k，所以基本不会影响博客速度。

安装方法： 第一步，把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边：


<script src='http://ggpi.008.net/balloontip.js' type='text/javascript'/>

第二步，把下面的css代码放进你的博客]]<>/b:skin>上边的css区域，这是调整跳出框样式的：

.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0;
visibility: hidden;
}


然后保存模板。

第三步，其实你已经把hack/扩展装好了，这一步告诉大家怎么使用这个hack，我这里给出一个基本例子的代码，大家可以先测试一下，然后举一反三：

<a href="http://ggpi.blogspot.com" rel="balloon1">GG派</a>，<a href="http://ggpi.blogspot.com" rel="balloon2">http://ggpi.blogspot.com</a>


<div id="balloon1" class="balloonstyle" style='width: 260px;'>
<a href="http://ggpi.blogspot.com/"><img style="float: right; margin-left: 5px; border:0px solid black" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiww__a5qrDcwtpB76Hb86Cy__D4Pl0WC4Zg30Vj67D07hPIB4tquZIq2StWup59CtXVgn6nT8K6BMYIuO2uDmySh-7g-IQnJkVOmzLuztfWw_eFuj8F1sJKVFZA9SZbz2OEM5wFCD2lOc/s320/2063.png"/></a>欢迎光临GG派!最新的blogger hack讲解！
</div>

<div id="balloon2" style="width: 350px; background-color: lightyellow" class="balloonstyle">
欢迎光临GG派!最新的blogger hack讲解！点击此处访问：）.
</div>


很简单吧，另外说一下，上面的 div id="balloon2"的这个代码是控制每个跳出框配对的，理论上是不允许重复的，否则就是第一个被读的代码作为默认的balloon2号跳出框，不过既然用这个hack，有时可以在帖子里注释我们的文章链接，那么这个号码文章多了，不是要朝9999以上发展！？ 当然不必这样，你只需要确定单一html页，文章页，标签页，首页之间的1、2、3、4号码不重复即可。所以可以给所有会在每个页面都出现的页面元素独立的编号，如a1、a2、a3等，而文章页帖子里的编号就用1、2、3、4、5，到99轮换一次之类，基本上应该不会出现重复了。或者b1、b2之类~~~

希望大家喜欢：）

阅读全文...

阅读概要...

blogger 3.0:为博客链接 添加最详细得富文本解释跳出栏

原作者不详，我对做网页的标准词语翻译不是很清楚，所以就尽我所能通俗的讲给大家听。

就是给你博客上的链接词汇 增加一个跳出框，当鼠标移动到上面的时候，就会出现。这个跳出框跟那个我博客上本身有的预览框有点像，只不过这个是可以自己设定内容的：）

要看具体什么样，请上测试博客，那个第一篇文章，返回GG派，鼠标悬停在GG派上的样式就是了：）
整个hack/扩展 不大，脚本文件只有5k，所以基本不会影响博客速度。

安装方法： 第一步，把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边：


<script src='http://ggpi.008.net/balloontip.js' type='text/javascript'/>

第二步，把下面的css代码放进你的博客]]<>/b:skin>上边的css区域，这是调整跳出框样式的：

.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

#arrowhead{
z-index: 99;
position:absolute;
top: -500px;
left: 0;
visibility: hidden;
}


然后保存模板。

第三步，其实你已经把hack/扩展装好了，这一步告诉大家怎么使用这个hack，我这里给出一个基本例子的代码，大家可以先测试一下，然后举一反三：

<a href="http://ggpi.blogspot.com" rel="balloon1">GG派</a>，<a href="http://ggpi.blogspot.com" rel="balloon2">http://ggpi.blogspot.com</a>


<div id="balloon1" class="balloonstyle" style='width: 260px;'>
<a href="http://ggpi.blogspot.com/"><img style="float: right; margin-left: 5px; border:0px solid black" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiww__a5qrDcwtpB76Hb86Cy__D4Pl0WC4Zg30Vj67D07hPIB4tquZIq2StWup59CtXVgn6nT8K6BMYIuO2uDmySh-7g-IQnJkVOmzLuztfWw_eFuj8F1sJKVFZA9SZbz2OEM5wFCD2lOc/s320/2063.png"/></a>欢迎光临GG派!最新的blogger hack讲解！
</div>

<div id="balloon2" style="width: 350px; background-color: lightyellow" class="balloonstyle">
欢迎光临GG派!最新的blogger hack讲解！点击此处访问：）.
</div>


很简单吧，另外说一下，上面的 div id="balloon2"的这个代码是控制每个跳出框配对的，理论上是不允许重复的，否则就是第一个被读的代码作为默认的balloon2号跳出框，不过既然用这个hack，有时可以在帖子里注释我们的文章链接，那么这个号码文章多了，不是要朝9999以上发展！？ 当然不必这样，你只需要确定单一html页，文章页，标签页，首页之间的1、2、3、4号码不重复即可。所以可以给所有会在每个页面都出现的页面元素独立的编号，如a1、a2、a3等，而文章页帖子里的编号就用1、2、3、4、5，到99轮换一次之类，基本上应该不会出现重复了。或者b1、b2之类~~~

希望大家喜欢：）

阅读全文...

阅读概要...

随笔:说点题外话

其实看了我写的那个5点你不知道我的事情的朋友都晓得我当初并没有把这个博客当回事了。

现在也是作为学习网页技术的一个跳板，顺便服务大家。当然提了服务大家，就有责任服务好，重担阿……

为什么想写这个题外话，是因为想申请告白一句话：
我很笨，而且我从没有学过做网页！

作网页这个爱好至始至终都是盲人瞎马，东抄西抄，试过来试过去，在99次失败中试出一个成功。

不过既然我这个笨蛋都能做到现在能做到的，我想大家没有谁做不到。只是大家都懒罢了。
但是我帮大家挑水，做做苦力，初衷是好的，但是因此让大家的“腿”长的太胖就不好了。“大脑”长肥肉可不是好玩的@_@

所以希望大家自己偶尔也动动脑精，自己想出来的和别人告诉你的，是不一样的~~
——以上不针对本身每天忙得要死的朋友

既然每个人都能写这些东西，为什么非要我这个笨笨写呢？第一，目前没有人系统的写，都是偶尔分享。第二，偶没有不懂装懂，相反很真诚得说明了大家都比我聪明，都能写这个事实~_~

而且很多东西靠大家来创造。我来归纳宣传：）希望国内的hack/扩展也能跟国外有一拼~~像夏拉菲的那个伸缩栏就是国外的hack博客 都还没有的东东。相信国内还会有更多天才创造出更有趣的东西~~

总之，写这个博客的过程就是我和大家一起学习网页知识的过程，希望能跟大家一路走下去，合作愉快^_^

阅读全文...

阅读概要...

随笔:说点题外话

其实看了我写的那个5点你不知道我的事情的朋友都晓得我当初并没有把这个博客当回事了。

现在也是作为学习网页技术的一个跳板，顺便服务大家。当然提了服务大家，就有责任服务好，重担阿……

为什么想写这个题外话，是因为想申请告白一句话：
我很笨，而且我从没有学过做网页！

作网页这个爱好至始至终都是盲人瞎马，东抄西抄，试过来试过去，在99次失败中试出一个成功。

不过既然我这个笨蛋都能做到现在能做到的，我想大家没有谁做不到。只是大家都懒罢了。
但是我帮大家挑水，做做苦力，初衷是好的，但是因此让大家的“腿”长的太胖就不好了。“大脑”长肥肉可不是好玩的@_@

所以希望大家自己偶尔也动动脑精，自己想出来的和别人告诉你的，是不一样的~~
——以上不针对本身每天忙得要死的朋友

既然每个人都能写这些东西，为什么非要我这个笨笨写呢？第一，目前没有人系统的写，都是偶尔分享。第二，偶没有不懂装懂，相反很真诚得说明了大家都比我聪明，都能写这个事实~_~

而且很多东西靠大家来创造。我来归纳宣传：）希望国内的hack/扩展也能跟国外有一拼~~像夏拉菲的那个伸缩栏就是国外的hack博客 都还没有的东东。相信国内还会有更多天才创造出更有趣的东西~~

总之，写这个博客的过程就是我和大家一起学习网页知识的过程，希望能跟大家一路走下去，合作愉快^_^

阅读全文...

阅读概要...

blogger 3.0:给博客添加一个能够直接跳转到页首的浮动按钮

原作者不详，就是让右下角出现一个跳转到页首的[Top]浮动文字，点击就会跳转到页首：）

要看样式请查看我的测试博客。


安装方法把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边即可。


<script src='http://ggpi.googlecode.com/files/jumptop.js' type='text/javascript'/>



阅读全文...

阅读概要...

blogger 3.0:给博客添加一个能够直接跳转到页首的浮动按钮

原作者不详，就是让右下角出现一个跳转到页首的[Top]浮动文字，点击就会跳转到页首：）

要看样式请查看我的测试博客。


安装方法把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边即可。


<script src='http://ggpi.googlecode.com/files/jumptop.js' type='text/javascript'/>



阅读全文...

阅读概要...

blogger 3.0:使你的链接像彩虹一样五颜六色

感谢原作者TAKANASHI Mizuki

安装方法：把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边即可。

<script src='http://ggpi.googlecode.com/files/rainbow.js' type='text/javascript'/>


保存，完工。非常简单：）

sz-iris同学问怎么让不是链接的文字变化色彩，要使用以下代码标记你希望变换色彩的文字：

<target onmouseover="doRainbow(this);">被标记的变换色彩地文字</onmouseout="stopRainbow();">


阅读全文...

阅读概要...

blogger 3.0:使你的链接像彩虹一样五颜六色

感谢原作者TAKANASHI Mizuki

安装方法：把下面的代码加入你的xml模板里的</head>上边，]]<>/b:skin>下边即可。

<script src='http://ggpi.googlecode.com/files/rainbow.js' type='text/javascript'/>


保存，完工。非常简单：）

sz-iris同学问怎么让不是链接的文字变化色彩，要使用以下代码标记你希望变换色彩的文字：

<target onmouseover="doRainbow(this);">被标记的变换色彩地文字</onmouseout="stopRainbow();">


阅读全文...

阅读概要...

google:似乎google PR又开始更新了

非常不幸的本博客的PageRank降到了3，而且似乎这次大部分blogspot的博客PR都调整为3了，起码跟我链接的博客基本上都更新到了3……把我的5平分了吗？555555555狂哭。

当然应该不是平分了，因为使我关注PR得那个blogspot网站PR也从5变成了3……

大概google觉得给自己的博客PR加成加的太过分了吧……毕竟网易也才6的PR~~

另外推荐一个PR查询预测网页，速度还不错。点击这里察看。

阅读全文...

阅读概要...

google:似乎google PR又开始更新了

非常不幸的本博客的PageRank降到了3，而且似乎这次大部分blogspot的博客PR都调整为3了，起码跟我链接的博客基本上都更新到了3……把我的5平分了吗？555555555狂哭。

当然应该不是平分了，因为使我关注PR得那个blogspot网站PR也从5变成了3……

大概google觉得给自己的博客PR加成加的太过分了吧……毕竟网易也才6的PR~~

另外推荐一个PR查询预测网页，速度还不错。点击这里察看。

阅读全文...

阅读概要...

blogger:昨天凌晨12点30分到今天早上4点，blogger服务器短暂瘫痪

差点忘记报道这个新闻了，昨天还截了个图留念的~~看来google的服务也不是铁桶一块，也有出问题的时候~~

点击察看blogger的官方声明。

阅读全文...

阅读概要...

blogger:昨天凌晨12点30分到今天早上4点，blogger服务器短暂瘫痪

差点忘记报道这个新闻了，昨天还截了个图留念的~~看来google的服务也不是铁桶一块，也有出问题的时候~~

点击察看blogger的官方声明。

阅读全文...

阅读概要...

blogger:Shalafi Vos的固定导航栏位置以及滑动伸缩效果

昨天看到成人童话世界的Shalafi Vos作出了一个很酷的滑动伸缩栏效果，就要他赶快分享一下。今天他果然把文章写出来了。想学习的赶快去看看吧~~

点击这里察看原文。

不过先说明，这个hack似乎只在1024*768或以上的分辨率有较好的效果。而且三个脚本文件真的很大，分别有63.3K,33K,3k，加起来将近100k了等于一个小型网站的体积了。会严重影响博客打开速度。用不用大家自己测试后决定~~

补充：那个最大的脚本和我前面的文章ajax标签使用的脚本是一样的，所以使用了那个脚本就不必使用http://jscripts.ning.com/id/1093361 这个脚本。


原文备份：
这是无意中发现的，一个很酷的效果，我在blogger-hacked看到了他把CC许可固定在浏览器的最前端，同时按on/off还会滑动，当时我就想如果把这效果用到导航栏中，不但实用，还能够节省大量空间，通过查看代码，我终于找到了方法，实际上要实现并不困难（因为最难的JS脚本老外都帮我们实现了 ;-)），而且理论上不但blogger，任何网页都可以使用这个方法。

固定导航栏
我们以#footer为例，你可以使用到任何侧边栏上，这里除了固定位置以外，还使用背景透明，修改对应的CSS样式


#footer {
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
_position:absolute;
bottom:0;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}


滑动效果

添加以下连接到你的head中


<script src='http://jscripts.ning.com/id/1093361' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093360' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093362' type='text/javascript'></script>


接下来添加开关导航栏的按钮


<div align='center' ><a onclick='new Effect.toggle("自定义ID", "blind");'><b>打开/关闭导航栏</b></a></div>


最后把你需要隐藏的部分放到下面的DIV中


<div id='自定义ID' style='display:none;'>


注意“自定义ID”必须和上面的导航栏按钮相同

几点使用经验：

1.注意作用域，举个例子，如果你在修改代码中添加了隐藏导航栏的代码，那么开关按钮也必须添加到修改代码当中，如果把开关添加到了widget是无效的。

也就是说，代码的位置必须保持一致。，要么都放到修改代码，要么都放到widget当中。

而且你还可以把代码放到不同widget中，什么意思呢？无比说你把开关添加到widget html1，然后把隐藏的添加到widght html2依然是有效果的。

2.注意用户体验，考虑到虽然很多访问者都用上了17寸以上的显示器，但不是每个人都在用液晶的，统计数据得知，80%以上的人都是使用1024*768的分辨率，我们就必须考虑到页面大小的问题，我使用的分辨率是1280*1024，我的导航栏完全打开以后占用了70％的浏览窗口，如果是1024的话，就会完全占用了105%！！，要命的是，多出的5%都移动到了浏览窗口之上，而这个导航栏是没有滚动条的。。。。也就是说这5%的内容永远都看不到，而刚好我的开关就在这5%中，1024的话，导航栏根本就关不上。

所以我的解决方法是在最底部再多增加一个开关，你也可以增加滚动条，但导航栏过高绝对不是个好的用户体验。

阅读全文...

阅读概要...

blogger:Shalafi Vos的固定导航栏位置以及滑动伸缩效果

昨天看到成人童话世界的Shalafi Vos作出了一个很酷的滑动伸缩栏效果，就要他赶快分享一下。今天他果然把文章写出来了。想学习的赶快去看看吧~~

点击这里察看原文。

不过先说明，这个hack似乎只在1024*768或以上的分辨率有较好的效果。而且三个脚本文件真的很大，分别有63.3K,33K,3k，加起来将近100k了等于一个小型网站的体积了。会严重影响博客打开速度。用不用大家自己测试后决定~~

补充：那个最大的脚本和我前面的文章ajax标签使用的脚本是一样的，所以使用了那个脚本就不必使用http://jscripts.ning.com/id/1093361 这个脚本。


原文备份：
这是无意中发现的，一个很酷的效果，我在blogger-hacked看到了他把CC许可固定在浏览器的最前端，同时按on/off还会滑动，当时我就想如果把这效果用到导航栏中，不但实用，还能够节省大量空间，通过查看代码，我终于找到了方法，实际上要实现并不困难（因为最难的JS脚本老外都帮我们实现了 ;-)），而且理论上不但blogger，任何网页都可以使用这个方法。

固定导航栏
我们以#footer为例，你可以使用到任何侧边栏上，这里除了固定位置以外，还使用背景透明，修改对应的CSS样式


#footer {
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
_position:absolute;
bottom:0;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}


滑动效果

添加以下连接到你的head中


<script src='http://jscripts.ning.com/id/1093361' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093360' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093362' type='text/javascript'></script>


接下来添加开关导航栏的按钮


<div align='center' ><a onclick='new Effect.toggle("自定义ID", "blind");'><b>打开/关闭导航栏</b></a></div>


最后把你需要隐藏的部分放到下面的DIV中


<div id='自定义ID' style='display:none;'>


注意“自定义ID”必须和上面的导航栏按钮相同

几点使用经验：

1.注意作用域，举个例子，如果你在修改代码中添加了隐藏导航栏的代码，那么开关按钮也必须添加到修改代码当中，如果把开关添加到了widget是无效的。

也就是说，代码的位置必须保持一致。，要么都放到修改代码，要么都放到widget当中。

而且你还可以把代码放到不同widget中，什么意思呢？无比说你把开关添加到widget html1，然后把隐藏的添加到widght html2依然是有效果的。

2.注意用户体验，考虑到虽然很多访问者都用上了17寸以上的显示器，但不是每个人都在用液晶的，统计数据得知，80%以上的人都是使用1024*768的分辨率，我们就必须考虑到页面大小的问题，我使用的分辨率是1280*1024，我的导航栏完全打开以后占用了70％的浏览窗口，如果是1024的话，就会完全占用了105%！！，要命的是，多出的5%都移动到了浏览窗口之上，而这个导航栏是没有滚动条的。。。。也就是说这5%的内容永远都看不到，而刚好我的开关就在这5%中，1024的话，导航栏根本就关不上。

所以我的解决方法是在最底部再多增加一个开关，你也可以增加滚动条，但导航栏过高绝对不是个好的用户体验。

阅读全文...

阅读概要...

web:网页页面长度与用户行为的一些数据

个人部分不同意这个分析结论，个人认为高度还是很重要的，当然重要性低于内容，比如一个色情网站，无论有多长，人们有需要的时候毫无疑问都会一托到底……
但是在内容相同或相似的情况下，大家是否愿意忍受特别长的拖动？我是不愿意不停的滑动鼠标滚轴得。个人觉得一般情况下，一个网站让我滑动鼠标10次左右就是极限了，如果没有特别感兴趣的内容就会开始烦躁了。当然这方面要考虑的因素很多，包括网页的总体设计，配色等等。也因此下面收集的数据我认为不足与说明问题。
不过我很同意作者认为图片非常重要的结论，毕竟快速浏览网页的时候，图片要比文字吸引眼球的多。

以色列公司 ClickTale 在 06 年底的时候发布了他们针对 120,000 次页面浏览（06 年 11 月至 12 月）数据统计分析的报告，主要分析了页面长度和用户拖动滚动条之间的关系（不包括横向滚动条，以下提到的滚动条都是指纵向滚动条）。下面是部分内容摘要：
总体数据

* 91% 的页面浏览都是有滚动条的；
* 在这 91% 中，有 76% 的页面浏览，是用户滚动页面至一定程度（但不到底）；
* 在这 91% 中，有 22% 的页面浏览，是用户从页面顶部拖动到底部。
虽然 22% 看起来不是很高，但其实因为统计的数据中大部分页面浏览是重复的（不同人，相同页面），并且在绝大多数情况下用户可以从页面顶部找到想要的信息，回头客也会根据自己需要访问固定的部分，所以 22% 这个比例是相当高的。

众所周知，新浪的页面很长，但是他巧妙的在新闻频道首页的最底部放置了“社会新闻”，其中内容主要是“男子强奸女工不成将其捅死”“男子多次在女厕外偷窥被抓”之类的新闻。如果统计的是新浪新闻频道的数据…肯定不准。

下面这个表格显示在这 120,000 次页面浏览数据中，用户往下滚动高度（ScrollReach, px）的比例：


看上去大部分人只浏览页面的 500px - 900px（一至两屏）的高度，不拖动到页面底部。但是这个结论是错误的。因为用户拖动的高度受到页面高度的限制，见下图：




页面的高度集中在 600px - 1500px，为了排除这个因素的影响，把上面两张图的数据加一下权看一下分布情况。如下图：



看到最后的那个 100%（从头拖到尾）的比例，是否有些惊讶？这就是前文中 22% 的由来。还不相信，可能你觉得这个比例仅在页面高度不高的情况下才成立。没关系，再看一张图：


上图显示的是，在页面高度为 4000px - 4100px 的情况下，用户拖动高度的比例分布。当然，不是说用户阅读完了整个页面，而是说他们扫视完了整个页面，在上图中是 23%。

是不是页面长就不好？

通过上面的数据可以看出，相当一部分用户会拖动到页面底部。那么，是不是页面越长，用户越是不愿意往下拖了（或者说有那么点小小的趋势）？不是的，我们看图说话：


上图的分布还是相当平均的。不管页面多长，并不会影响用户扫视完整个页面。

大部分用户会扫视 90% 以上的内容（页面高度）。

Above the Fold

“Above the Fold”这个词最初用在报纸上面，可以理解为重要内容。因为报纸会被折叠成一定的大小送到用户手里。那么重要的内容不允许被折叠起来，比如头版的内容。对于网页来说，存不存在重要内容分隔点呢？没有准确的值，因为这取决于用户屏幕分辨率、浏览器窗口、安装浏览器插件和 Toolbar 的情况。下图是从数据中统计出来的分布情况（我不大清楚下图数据如何得来的，有什么方法？）：



从上图中可以看出来，集中在三个地方，430px、600px 和 860px。这是当今最流行的三种分辨率下的重要内容分隔点（Fold Location）：800×600,、1024×768 和 1280×1024。基本上是把分辨率的高度减去 170px（浏览器的非内容区域）。而围绕着这三个点的还有很多其他数据，是因为用户浏览器窗口、插件等因素的影响。

注意图中最高的 600px 那个点（1024*768 的分辨率是主流），仍然不足 10%。所以我们基本上可以这么认为，网页上没有所谓的重要内容分隔点，这和报纸不一样。

总结

* 设计师可以拿着这些统计数据，告诉你的老板，不要把文字缩在一起，为了减少用户的负担，可以适当增加高度，增加文字大小或者行距，使阅读起来更舒适；
* 也不要太在意把什么内容都往第一屏上堆，注意平衡；
* 数据显示大部分用户会一直拖动到底，但是为了让用户不要那么辛苦，还是控制一下页面的高度；
* 精简文字内容，适当增加图片，用户是在“扫”网页，而不是“阅读”。这和 Jakob Nielsen 的十大网站设计错误里面的第四条一致；
* 使用一种 cut-off 式的设计，让用户主动往下拖动滚动条。
ClickTale 提供视频回放式的用户行为数据统计服务，他们的口号是 Because Every User Has A Story。目前处在 closed beta 测试阶段（我去年 8 月份的时候就提交了注册，到现在还不让我测试），近期应该会有公开测试，继续留意。

上面数据文章由吴隽辰翻译。

阅读全文...

阅读概要...

web:网页页面长度与用户行为的一些数据

个人部分不同意这个分析结论，个人认为高度还是很重要的，当然重要性低于内容，比如一个色情网站，无论有多长，人们有需要的时候毫无疑问都会一托到底……
但是在内容相同或相似的情况下，大家是否愿意忍受特别长的拖动？我是不愿意不停的滑动鼠标滚轴得。个人觉得一般情况下，一个网站让我滑动鼠标10次左右就是极限了，如果没有特别感兴趣的内容就会开始烦躁了。当然这方面要考虑的因素很多，包括网页的总体设计，配色等等。也因此下面收集的数据我认为不足与说明问题。
不过我很同意作者认为图片非常重要的结论，毕竟快速浏览网页的时候，图片要比文字吸引眼球的多。

以色列公司 ClickTale 在 06 年底的时候发布了他们针对 120,000 次页面浏览（06 年 11 月至 12 月）数据统计分析的报告，主要分析了页面长度和用户拖动滚动条之间的关系（不包括横向滚动条，以下提到的滚动条都是指纵向滚动条）。下面是部分内容摘要：
总体数据

* 91% 的页面浏览都是有滚动条的；
* 在这 91% 中，有 76% 的页面浏览，是用户滚动页面至一定程度（但不到底）；
* 在这 91% 中，有 22% 的页面浏览，是用户从页面顶部拖动到底部。
虽然 22% 看起来不是很高，但其实因为统计的数据中大部分页面浏览是重复的（不同人，相同页面），并且在绝大多数情况下用户可以从页面顶部找到想要的信息，回头客也会根据自己需要访问固定的部分，所以 22% 这个比例是相当高的。

众所周知，新浪的页面很长，但是他巧妙的在新闻频道首页的最底部放置了“社会新闻”，其中内容主要是“男子强奸女工不成将其捅死”“男子多次在女厕外偷窥被抓”之类的新闻。如果统计的是新浪新闻频道的数据…肯定不准。

下面这个表格显示在这 120,000 次页面浏览数据中，用户往下滚动高度（ScrollReach, px）的比例：


看上去大部分人只浏览页面的 500px - 900px（一至两屏）的高度，不拖动到页面底部。但是这个结论是错误的。因为用户拖动的高度受到页面高度的限制，见下图：




页面的高度集中在 600px - 1500px，为了排除这个因素的影响，把上面两张图的数据加一下权看一下分布情况。如下图：



看到最后的那个 100%（从头拖到尾）的比例，是否有些惊讶？这就是前文中 22% 的由来。还不相信，可能你觉得这个比例仅在页面高度不高的情况下才成立。没关系，再看一张图：


上图显示的是，在页面高度为 4000px - 4100px 的情况下，用户拖动高度的比例分布。当然，不是说用户阅读完了整个页面，而是说他们扫视完了整个页面，在上图中是 23%。

是不是页面长就不好？

通过上面的数据可以看出，相当一部分用户会拖动到页面底部。那么，是不是页面越长，用户越是不愿意往下拖了（或者说有那么点小小的趋势）？不是的，我们看图说话：


上图的分布还是相当平均的。不管页面多长，并不会影响用户扫视完整个页面。

大部分用户会扫视 90% 以上的内容（页面高度）。

Above the Fold

“Above the Fold”这个词最初用在报纸上面，可以理解为重要内容。因为报纸会被折叠成一定的大小送到用户手里。那么重要的内容不允许被折叠起来，比如头版的内容。对于网页来说，存不存在重要内容分隔点呢？没有准确的值，因为这取决于用户屏幕分辨率、浏览器窗口、安装浏览器插件和 Toolbar 的情况。下图是从数据中统计出来的分布情况（我不大清楚下图数据如何得来的，有什么方法？）：



从上图中可以看出来，集中在三个地方，430px、600px 和 860px。这是当今最流行的三种分辨率下的重要内容分隔点（Fold Location）：800×600,、1024×768 和 1280×1024。基本上是把分辨率的高度减去 170px（浏览器的非内容区域）。而围绕着这三个点的还有很多其他数据，是因为用户浏览器窗口、插件等因素的影响。

注意图中最高的 600px 那个点（1024*768 的分辨率是主流），仍然不足 10%。所以我们基本上可以这么认为，网页上没有所谓的重要内容分隔点，这和报纸不一样。

总结

* 设计师可以拿着这些统计数据，告诉你的老板，不要把文字缩在一起，为了减少用户的负担，可以适当增加高度，增加文字大小或者行距，使阅读起来更舒适；
* 也不要太在意把什么内容都往第一屏上堆，注意平衡；
* 数据显示大部分用户会一直拖动到底，但是为了让用户不要那么辛苦，还是控制一下页面的高度；
* 精简文字内容，适当增加图片，用户是在“扫”网页，而不是“阅读”。这和 Jakob Nielsen 的十大网站设计错误里面的第四条一致；
* 使用一种 cut-off 式的设计，让用户主动往下拖动滚动条。
ClickTale 提供视频回放式的用户行为数据统计服务，他们的口号是 Because Every User Has A Story。目前处在 closed beta 测试阶段（我去年 8 月份的时候就提交了注册，到现在还不让我测试），近期应该会有公开测试，继续留意。

上面数据文章由吴隽辰翻译。

阅读全文...

阅读概要...

google:google自定义主页改版

有意思，今天一开google自定义主页就发现改版了，现在每篇文章前面都有个+号，可以直接点击打开阅读这篇文章的RSS，而不必到原文章处阅读。看来自定义主页某些方面越来越替代google reader了~~方便多了~~。

如图：

阅读全文...

阅读概要...

google:google自定义主页改版

有意思，今天一开google自定义主页就发现改版了，现在每篇文章前面都有个+号，可以直接点击打开阅读这篇文章的RSS，而不必到原文章处阅读。看来自定义主页某些方面越来越替代google reader了~~方便多了~~。

如图：

阅读全文...

阅读概要...

公告:病毒扩散了！你所不知道GG的5件事！

恩，恩，今天没什么想写的，就接下毛毛虫的红包发新的红包吧~~

关于GG我，你不知道地5件事情：

1. 最初没有想写这个博客，是某人等咖啡鱼更新等的不耐烦，去博之道发现需要邀请才能看，气愤不已情况下，决定自己开个博客写！
2. 开了博客以后依然不是很想写，主要是想激咖啡鱼写快点，我好用，所以制造点竞争气氛。结果一竞争就停不下，觉得有点意思。但是最后把咖啡鱼累坏了，不写了，事与愿违……
3. 咖啡鱼停笔之后也受打击，不是很想写了。不过似乎已经走出此阶段，反正我总是要看那些东西要试验那些hack的，而且有这么多人的鼓励，写起来也很开心。所以决定当笔记也好，顺便也算学习了网络知识……
4. 一开始我是玩google pages的，当时觉得googlepages好有意思，免费网页，疯狂的做。然后发现了tiddlywiki 这个一个html档案能放很多东西的网页格式，然后拼命研究，一个星期就做出来当时华人圈子里最好的tiddlywiki网页（跟国外人比也数一数二了！嘿嘿），大家可以看看我当时做的网页：http://roswellcn.googlepages.com
5. blogspot改版以后最初我没有当回事，后来看到alex.w的http://oyee.blogspot.com 博客，又通过他发现咖啡鱼的博客，突然意识到我做的google pages是多么愚蠢的东西！原来一个简单的博客已经可以实现那一堆tiddlywiki 可以做到的事情，速度还很快！于是决定改做blogspot，放弃tiddlywiki网页!

恩，要接我红包的人是……还有几个人没有写红包阿？
表面印象 IwfWcf's Blog FableTown 8个圈圈

阅读全文...

阅读概要...

公告:病毒扩散了！你所不知道GG的5件事！

恩，恩，今天没什么想写的，就接下毛毛虫的红包发新的红包吧~~

关于GG我，你不知道地5件事情：

1. 最初没有想写这个博客，是某人等咖啡鱼更新等的不耐烦，去博之道发现需要邀请才能看，气愤不已情况下，决定自己开个博客写！
2. 开了博客以后依然不是很想写，主要是想激咖啡鱼写快点，我好用，所以制造点竞争气氛。结果一竞争就停不下，觉得有点意思。但是最后把咖啡鱼累坏了，不写了，事与愿违……
3. 咖啡鱼停笔之后也受打击，不是很想写了。不过似乎已经走出此阶段，反正我总是要看那些东西要试验那些hack的，而且有这么多人的鼓励，写起来也很开心。所以决定当笔记也好，顺便也算学习了网络知识……
4. 一开始我是玩google pages的，当时觉得googlepages好有意思，免费网页，疯狂的做。然后发现了tiddlywiki 这个一个html档案能放很多东西的网页格式，然后拼命研究，一个星期就做出来当时华人圈子里最好的tiddlywiki网页（跟国外人比也数一数二了！嘿嘿），大家可以看看我当时做的网页：http://roswellcn.googlepages.com
5. blogspot改版以后最初我没有当回事，后来看到alex.w的http://oyee.blogspot.com 博客，又通过他发现咖啡鱼的博客，突然意识到我做的google pages是多么愚蠢的东西！原来一个简单的博客已经可以实现那一堆tiddlywiki 可以做到的事情，速度还很快！于是决定改做blogspot，放弃tiddlywiki网页!

恩，要接我红包的人是……还有几个人没有写红包阿？
表面印象 IwfWcf's Blog FableTown 8个圈圈

阅读全文...

阅读概要...

blogger 3.0:添加Bcastr3.0 flash通用图片播放器

感谢原作者ruochi，此flash扩展效果如下：


官方解说是：可以用于各种新闻系统或者blog系统

* 可以读取xml设置播放列表,自定义xml地址
* 可以将图片地址直接写网页中直接,不需要xml
* 自动适应图片大小
* 循环播放，自定义自动播放时间
* 不限制图片数量
* 自定义尺寸,自动适应任何比例，图片不变形
* 自定义图片题目（可选）
* 浏览过程中下载
* 自定义图片连接（可选）
* 自定界面色彩放案

3.0新增特点：

* 图片自动抗锯齿，效果更佳
* 3种文字位置设定
* 4种图片过渡效果，过渡更自然，
* 可定义是否显示按钮，更适合做广告条
* 可定义是否在心窗后中打开连接
* 自定义尺寸,自动适应任何比例，图片不变形
* 自定义图片题目（可选）
* 浏览过程中下载
* 自定义图片连接（可选）
* 自定界面色彩放案

原作者的三种方法似乎只有xml的方法可以运用于blogger而不出错。这里就讲解xml的方法：
要给博客添加的代码如下：只需要添加到任意html/js 页面元素 里即可。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="200" wmode="transparent">
<param value="http://gggpie.googlepages.com/bcastr3.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="bcastr_xml_url=http://gggpie.googlepages.com/bcastr.xml&bcastr_config=0xffffff|2|0x0066ff|60|0xffffff|0x0066ff|0x000033|2|2|1|_blank" name="FlashVars"/><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" width="200" src="http://gggpie.googlepages.com/bcastr3.swf" flashvars="bcastr_xml_url=http://gggpie.googlepages.com/bcastr.xml&bcastr_config=0xffffff|2|0x0066ff|60|0xffffff|0x0066ff|0x000033|2|2|1|_blank" height="200" type="application/x-shockwave-flash" wmode="transparent"></embed></object>


http://gggpie.googlepages.com/bcastr.xml 链接改成你存储xml文件的网站链接，如google pages。
http://gggpie.googlepages.com/bcastr3.swf 这个swf文件你也可以下载并存储到你自己的网站。
width="100" 100可以改成你想要的宽度。
height="200" 200改成你想要的高度。

上面代码的高级设置方法如下：
修改这行代码：
&=&bcastr_config=0xffffff|2|0x0066ff|60|0xffffff|0x0066ff|0x000033|2|2|1|_blank"

默认参数字符串 0xffffff:文字颜色|2:文字位置|0xff66CC:文字背景颜色|70:文字背景透明度|0xffffff:按键文字颜色 |0x0099ff:按键默认颜色|0x000000:按键当前颜色|7:自动播放时间(秒)|2:图片过渡效果|1:是否显示按钮|_blank:打开窗口

颜色都以0x开始16进制数字表示

文字颜色：题目文字的颜色
文字位置：0表示题目文字在顶端，1表示文字在底部，2表示文字在顶端
文字背景透明度：0-100值，0表示全部透明
按键文字颜色：按键数字颜色
按键默认颜色：按键默认的颜色
按键当前颜色：当前图片按键颜色
自动播放时间：单位是秒
图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡
是否显示按钮：0，表示隐藏按键部分，更适合做广告挑轮换
打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开

xml文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<bcaster>
<item item_url="http://gggpie.googlepages.com/Maradona.jpg" link="http://www.google.com" itemtitle="马拉多纳受邀解说世界杯" />
<item item_url="http://gggpie.googlepages.com/gymnasium.jpg" itemtitle="慕尼黑球场" />
<item item_url="http://gggpie.googlepages.com/zd.jpg" link="http://www.google.com" itemtitle="法国国家队队员齐达内" />
<item item_url="http://gggpie.googlepages.com/poster.jpg" link="http://www.google.com" />
<item item_url="http://gggpie.googlepages.com/adidas.jpg" itemtitle="团队之星·柏林" />
</bcaster>

xml内容：
item_url="pic/Maradona.jpg"——图片地址
link="http://www.google.com" ——图片点击后 不填写就不可点击连接
itemtitle="马拉多纳受邀解说世界杯" ——图片题目

注意xml文件要以utf-8格式保存，建议直接下载http://gggpie.googlepages.com/bcastr.xml文件修改。
注意似乎所有相关文件都要保存在你自己的单一google pages或存储空间下，否则似乎调用会出错。

点击这里下载源文件。

阅读全文...

阅读概要...

blogger 3.0:添加Bcastr3.0 flash通用图片播放器

感谢原作者ruochi，此flash扩展效果如下：


官方解说是：可以用于各种新闻系统或者blog系统

* 可以读取xml设置播放列表,自定义xml地址
* 可以将图片地址直接写网页中直接,不需要xml
* 自动适应图片大小
* 循环播放，自定义自动播放时间
* 不限制图片数量
* 自定义尺寸,自动适应任何比例，图片不变形
* 自定义图片题目（可选）
* 浏览过程中下载
* 自定义图片连接（可选）
* 自定界面色彩放案

3.0新增特点：

* 图片自动抗锯齿，效果更佳
* 3种文字位置设定
* 4种图片过渡效果，过渡更自然，
* 可定义是否显示按钮，更适合做广告条
* 可定义是否在心窗后中打开连接
* 自定义尺寸,自动适应任何比例，图片不变形
* 自定义图片题目（可选）
* 浏览过程中下载
* 自定义图片连接（可选）
* 自定界面色彩放案

原作者的三种方法似乎只有xml的方法可以运用于blogger而不出错。这里就讲解xml的方法：
要给博客添加的代码如下：只需要添加到任意html/js 页面元素 里即可。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="200" wmode="transparent">
<param value="http://gggpie.googlepages.com/bcastr3.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="bcastr_xml_url=http://gggpie.googlepages.com/bcastr.xml&bcastr_config=0xffffff|2|0x0066ff|60|0xffffff|0x0066ff|0x000033|2|2|1|_blank" name="FlashVars"/><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" width="200" src="http://gggpie.googlepages.com/bcastr3.swf" flashvars="bcastr_xml_url=http://gggpie.googlepages.com/bcastr.xml&bcastr_config=0xffffff|2|0x0066ff|60|0xffffff|0x0066ff|0x000033|2|2|1|_blank" height="200" type="application/x-shockwave-flash" wmode="transparent"></embed></object>


http://gggpie.googlepages.com/bcastr.xml 链接改成你存储xml文件的网站链接，如google pages。
http://gggpie.googlepages.com/bcastr3.swf 这个swf文件你也可以下载并存储到你自己的网站。
width="100" 100可以改成你想要的宽度。
height="200" 200改成你想要的高度。

上面代码的高级设置方法如下：
修改这行代码：
&=&bcastr_config=0xffffff|2|0x0066ff|60|0xffffff|0x0066ff|0x000033|2|2|1|_blank"

默认参数字符串 0xffffff:文字颜色|2:文字位置|0xff66CC:文字背景颜色|70:文字背景透明度|0xffffff:按键文字颜色 |0x0099ff:按键默认颜色|0x000000:按键当前颜色|7:自动播放时间(秒)|2:图片过渡效果|1:是否显示按钮|_blank:打开窗口

颜色都以0x开始16进制数字表示

文字颜色：题目文字的颜色
文字位置：0表示题目文字在顶端，1表示文字在底部，2表示文字在顶端
文字背景透明度：0-100值，0表示全部透明
按键文字颜色：按键数字颜色
按键默认颜色：按键默认的颜色
按键当前颜色：当前图片按键颜色
自动播放时间：单位是秒
图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡
是否显示按钮：0，表示隐藏按键部分，更适合做广告挑轮换
打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开

xml文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<bcaster>
<item item_url="http://gggpie.googlepages.com/Maradona.jpg" link="http://www.google.com" itemtitle="马拉多纳受邀解说世界杯" />
<item item_url="http://gggpie.googlepages.com/gymnasium.jpg" itemtitle="慕尼黑球场" />
<item item_url="http://gggpie.googlepages.com/zd.jpg" link="http://www.google.com" itemtitle="法国国家队队员齐达内" />
<item item_url="http://gggpie.googlepages.com/poster.jpg" link="http://www.google.com" />
<item item_url="http://gggpie.googlepages.com/adidas.jpg" itemtitle="团队之星·柏林" />
</bcaster>

xml内容：
item_url="pic/Maradona.jpg"——图片地址
link="http://www.google.com" ——图片点击后 不填写就不可点击连接
itemtitle="马拉多纳受邀解说世界杯" ——图片题目

注意xml文件要以utf-8格式保存，建议直接下载http://gggpie.googlepages.com/bcastr.xml文件修改。
注意似乎所有相关文件都要保存在你自己的单一google pages或存储空间下，否则似乎调用会出错。

点击这里下载源文件。

阅读全文...

阅读概要...

blogger 3.0:能够变换颜色的css 引用区修饰

应●毛毛虫●的要求发这个方法:) 这个名字还真不好打，只有到毛毛虫博客复制这个“●”……

作用: 就是好看了，像这样：好看

安装方法:第一步，修改你的css区域，即]]<>/b:skin>上方。增加以下代码：


CODE {
border-bottom: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
display:block;
padding: 10px 10px;
padding-top: 20px;
margin: 10px 0 0 10px;
background:#F5F5F5;
font-family:"Courier New", Courier, mono;
-moz-border-radius: 15px;
}
CODE:hover {
background-color:#F7FEDC;
}


第二步，在你要显示这个引用区修饰的位置放在<code>和</code>中间即可。
如:

<code>好看</code>


阅读全文...

阅读概要...

blogger 3.0:能够变换颜色的css 引用区修饰

应●毛毛虫●的要求发这个方法:) 这个名字还真不好打，只有到毛毛虫博客复制这个“●”……

作用: 就是好看了，像这样：好看

安装方法:第一步，修改你的css区域，即]]<>/b:skin>上方。增加以下代码：


CODE {
border-bottom: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
display:block;
padding: 10px 10px;
padding-top: 20px;
margin: 10px 0 0 10px;
background:#F5F5F5;
font-family:"Courier New", Courier, mono;
-moz-border-radius: 15px;
}
CODE:hover {
background-color:#F7FEDC;
}


第二步，在你要显示这个引用区修饰的位置放在<code>和</code>中间即可。
如:

<code>好看</code>


阅读全文...

阅读概要...

google:中文google软件包的推介即将上线

中文google adsense已经把google相片软件 pisca的推介给撤销了，似乎整合一堆google软件的google pack/软件包的推介即将上线。
软件包里都含有哪些软件？看看这里的香港版软件包界面：这个界面也可以选择各国语言，似乎中文的还没有出现：
http://pack.google.com/intl/zh-tw/pack_installer.html?hl=zh-tw&gl=hk

里面还有诺顿杀毒，有点意思，可惜是2005版的，还能杀什么毒阿……

阅读全文...

阅读概要...

google:中文google软件包的推介即将上线

中文google adsense已经把google相片软件 pisca的推介给撤销了，似乎整合一堆google软件的google pack/软件包的推介即将上线。
软件包里都含有哪些软件？看看这里的香港版软件包界面：这个界面也可以选择各国语言，似乎中文的还没有出现：
http://pack.google.com/intl/zh-tw/pack_installer.html?hl=zh-tw&gl=hk

里面还有诺顿杀毒，有点意思，可惜是2005版的，还能杀什么毒阿……

阅读全文...

阅读概要...

google ad:用黑板报的形式放google广告

做成以后效果图如下：

468*60的代码为：

<div style="width:468px;
height:60px;
background-image: url(http://ggpi.googlecode.com/files/black%20broad%20p.gif);
padding: 10px;">放置你的完整google广告468*60的代码。</div>

728*90的代码为:

<div style="width:728px;
height:90px;
background-image: url(http://ggpi.googlecode.com/files/black%20broad%20p756.124.gif);
padding: 15px;">防置你的完整google广告728*90的代码。</div>


你也可以自己保存背景：
468*60的背景 728*90的背景

阅读全文...

阅读概要...

google ad:用黑板报的形式放google广告

做成以后效果图如下：

468*60的代码为：

<div style="width:468px;
height:60px;
background-image: url(http://ggpi.googlecode.com/files/black%20broad%20p.gif);
padding: 10px;">放置你的完整google广告468*60的代码。</div>

728*90的代码为:

<div style="width:728px;
height:90px;
background-image: url(http://ggpi.googlecode.com/files/black%20broad%20p756.124.gif);
padding: 15px;">防置你的完整google广告728*90的代码。</div>


你也可以自己保存背景：
468*60的背景 728*90的背景

阅读全文...

阅读概要...

blogger 3.0:为博客 添加能够切换的按钮

首先感谢原作者 Martial B
英文原文点击这里。

作用: 此hack/扩展 能够让你添加一个能够上下切换来切换去的菜单，说不太清楚，大家看我测试博客的例子。

安装方法:第一步首先在你的xml模板里的</head>上边，]]<>/b:skin>下边，放上以下代码：


<script src='http://ggpi.googlecode.com/files/swichmenu.js' type='text/javascript'/>
<style type='text/css'>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

第二步，在页面元素项目那边添加一个 html/js页面元素，放上以下代码:

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">修改我成你要的按钮名称</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>

<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="http://www.freewarejava.com">Freewarejava</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
- <a href="http://www.google.com">Google.com</a>
</span>

<img src="about.gif" onclick="SwitchMenu('sub5')"><br>
<span class="submenu" id="sub5">
- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
</span>

</div>


第三步，把你第二步的代码修改成你要显示的按钮和链接，还可以通过修改第一步的CSS的代码改变按钮样式，然后就完成了：）

阅读全文...

阅读概要...

blogger 3.0:为博客 添加能够切换的按钮

首先感谢原作者 Martial B
英文原文点击这里。

作用: 此hack/扩展 能够让你添加一个能够上下切换来切换去的菜单，说不太清楚，大家看我测试博客的例子。

安装方法:第一步首先在你的xml模板里的</head>上边，]]<>/b:skin>下边，放上以下代码：


<script src='http://ggpi.googlecode.com/files/swichmenu.js' type='text/javascript'/>
<style type='text/css'>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

第二步，在页面元素项目那边添加一个 html/js页面元素，放上以下代码:

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">修改我成你要的按钮名称</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>

<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="http://www.freewarejava.com">Freewarejava</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
- <a href="http://www.google.com">Google.com</a>
</span>

<img src="about.gif" onclick="SwitchMenu('sub5')"><br>
<span class="submenu" id="sub5">
- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
</span>

</div>


第三步，把你第二步的代码修改成你要显示的按钮和链接，还可以通过修改第一步的CSS的代码改变按钮样式，然后就完成了：）

阅读全文...

阅读概要...

web:你的Sogou Rank是多少？

google page rank我们这些博客是不用怎么想了。不过你知道搜狗也有个Sogou Rank吗？

似乎是根据你的网页反向链接数来确定你的rank值得，官方说法是：

什么是网页评级（Sogou Rank）？

网页评级（Sogou Rank）是搜狗衡量网页重要性的指标，不仅考察了网页之间链接

关系，同时考察了链接质量、链接之间的相关性等特性，是机器根据Sogou Rank算

法自动计算出来的，值从0至100不等。网页评级越高，该网页在搜索中越容易被检

索到。

我的GG派是22，
http://www.sxuzone.com/blog 是13，
色彩斑斓是33，
8个圈圈的google八卦博客是34,
bloooooooogger.blogspot.com有60~~汗。

不过搜狗得数据

如何提升网页评级？

为了提高您的页面的评级，您需要努力提升页面品质，让更多同领域的高评级站点

来链接您的页面。同时您需要慎用您的对外链接，尤其是对低质量站点的链接（如

果链接到垃圾站点，将极有可能降低您的网页评级）。

阅读全文...

阅读概要...

web:你的Sogou Rank是多少？

google page rank我们这些博客是不用怎么想了。不过你知道搜狗也有个Sogou Rank吗？

似乎是根据你的网页反向链接数来确定你的rank值得，官方说法是：

什么是网页评级（Sogou Rank）？

网页评级（Sogou Rank）是搜狗衡量网页重要性的指标，不仅考察了网页之间链接

关系，同时考察了链接质量、链接之间的相关性等特性，是机器根据Sogou Rank算

法自动计算出来的，值从0至100不等。网页评级越高，该网页在搜索中越容易被检

索到。

我的GG派是22，
http://www.sxuzone.com/blog 是13，
色彩斑斓是33，
8个圈圈的google八卦博客是34,
bloooooooogger.blogspot.com有60~~汗。

不过搜狗得数据

如何提升网页评级？

为了提高您的页面的评级，您需要努力提升页面品质，让更多同领域的高评级站点

来链接您的页面。同时您需要慎用您的对外链接，尤其是对低质量站点的链接（如

果链接到垃圾站点，将极有可能降低您的网页评级）。

阅读全文...

阅读概要...

wiki:一个专业维基百科搜索引擎上线了

网址是：http://www.wikiseek.com/

似乎不能搜索中文，英文的搜索会出现标签云（如图），有点意思。

可惜大陆的维基依然被封……

阅读全文...

阅读概要...

wiki:一个专业维基百科搜索引擎上线了

网址是：http://www.wikiseek.com/

似乎不能搜索中文，英文的搜索会出现标签云（如图），有点意思。

可惜大陆的维基依然被封……

阅读全文...

阅读概要...

google ad:发现一个google广告的现象

这几个月看到8个圈圈的博客就生气，为什么他的广告都是图片的，我的广告放流量多大的博客都要么文字，要么公益，很少看到漂亮的图片或者flash露下脸的。

今天才搞明白，原来468*60的图片广告超级多，768*90的图片广告次多。我以前设置的什么250*250，120乘以多少都很少有图片或者flash广告。

而且关键字似乎google也比较挑剔，目前观察似乎IT类的博客能够匹配的广告比较多。而且IT类的普遍比较漂亮……其他的相对差远了。

所以也想要漂亮的图片广告的话，把博客多写点IT类别的文章，然后把广告设置468*60吧……

另外想从google广告这里赚钱的就不要想了，我朋友的博客日IP4000，浏览量2万多，日收入0.8美元左右，这几天似乎还偶尔掉到4毛钱……我们这种日IP100左右的，可以攒一年买根棒棒糖哈。

阅读全文...

阅读概要...

google ad:发现一个google广告的现象

这几个月看到8个圈圈的博客就生气，为什么他的广告都是图片的，我的广告放流量多大的博客都要么文字，要么公益，很少看到漂亮的图片或者flash露下脸的。

今天才搞明白，原来468*60的图片广告超级多，768*90的图片广告次多。我以前设置的什么250*250，120乘以多少都很少有图片或者flash广告。

而且关键字似乎google也比较挑剔，目前观察似乎IT类的博客能够匹配的广告比较多。而且IT类的普遍比较漂亮……其他的相对差远了。

所以也想要漂亮的图片广告的话，把博客多写点IT类别的文章，然后把广告设置468*60吧……

另外想从google广告这里赚钱的就不要想了，我朋友的博客日IP4000，浏览量2万多，日收入0.8美元左右，这几天似乎还偶尔掉到4毛钱……我们这种日IP100左右的，可以攒一年买根棒棒糖哈。

阅读全文...

阅读概要...

google:几乎可以肯定，google pages恢复了

似乎今天15号修好了某条光缆，所以GFW服务器也切换回原来的服务器了……

而原来的服务器google pages是没有被封锁的，所以好消息是，googlepages完全恢复了：）


大家一起庆祝哈~~~不过偶是不敢再把脚本丢到google pages上面了……不然下次……

阅读全文...

阅读概要...

google:几乎可以肯定，google pages恢复了

似乎今天15号修好了某条光缆，所以GFW服务器也切换回原来的服务器了……

而原来的服务器google pages是没有被封锁的，所以好消息是，googlepages完全恢复了：）


大家一起庆祝哈~~~不过偶是不敢再把脚本丢到google pages上面了……不然下次……

阅读全文...

阅读概要...

blogger 3.0:超酷的ajax标签显示(已修正在IE下支持中文标签名）

已经修正在IE下支持中文，感谢中国平江非官方门户站点的作者进行的修正。如果你非常喜欢这种形式的标签，现在终于可以正式使用了。

上次跟原作者Deepak讨论，目前Deepak正在做更好的ajax标签功能，估计还要一个星期。
这个标签的脚本太大有50K，个人不推荐。目前还有同样位印度人的Aditya制作的无需prototype.js脚本的ajax标签，速度更快，没有bug，欢迎使用。

首先感谢作者Deepak。
这个hack /扩展 的作用就是当你点击一个标签，就会显示这个标签下的你自己设定文章数的标题和摘要。
原理就是你点击标签以后，通过js脚本读取了你的标签rss摘要，然后显示在你的博客上。
要看例子请看我的测试博客，点击这里。

安装方法：

1。在你的xml模板里的</head>上方，]]<>/b:skin>下边，放上以下脚本程序：

<script src='http://www.sxuzone.com/gg/prototype.js' type='text/javascript'/>

2。紧接着刚才的脚本程序，放上以下代码：

<!-- Begin AJAX Categories -->
<style type='text/css'>
/* SEARCH/CATEGORY STYLES
----------------------------------------------- */
#indicator {
position: absolute;
z-index: 10000;
padding: 15px 0;
top: 22em;
background-color: #FFFFFF;
border: 1px solid #AAAAAA;
width: 176px;
left: 50%;
margin-left: -88px;
text-align: center;
}

#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:1em;
  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;
  border:1px solid #F5F5F5;
  margin-top:10px;
  cursor:pointer;
} 
</style>
<script type='text/javascript'>
//<![CDATA[
var gCat;
function getCat(cat) {
   var url= '/feeds/posts/summary/-/' + cat + '?max-results=10&alt=json';
   var pars = '';
   gCat = cat;
   
   new Ajax.Request(
       url,
       {
          method: 'get',
          parameters: pars,
          onLoading: function(){Element.show('indicator')},
          onSuccess: showCat,
          onFailure: showFail
       });
}

function showCat(output){
   Element.hide('indicator');
   Element.show('search-result');
   $('search-result').innerHTML="";
   var main = string2JSON(output.responseText);
   var xtitle, xcat, xcontent;
   
   var meta = document.createElement('div');
   meta.className="search-result-meta";
   
   var link = document.createElement('a');
   link.href="/feeds/posts/summary/-/"+gCat;
   link.innerHTML = "<img src=\"http://i15.photobucket.com/albums/a355/deepakr/feed-icon.gif\" title=\"Subscribe to this category\" /> 订阅此标签RSS " + gCat;
   meta.appendChild(link);
   
   $('search-result').appendChild(meta);
   
   for (i=0; main.feed.entry[i]; i++) {
      xentry = main.feed.entry[i];
      catdisplay = "<div class=\"search-cat\"><span style=\"color:silver;\"> 标签:<\/span> ";
      for (var j=0;xentry.category[j];j++) {
      catdisplay = catdisplay + xentry.category[j].term;
         if(j<xentry.category.length-1)
            catdisplay = catdisplay + " , ";
      }
      xtitle=xentry.title.$t;
      xcontent=xentry.summary.$t;
      xlink=xentry.link[0].href;
      $('search-result').innerHTML = $('search-result').innerHTML + "<h3 class=\"search-title\"><a href=" + xlink + ">" + xtitle + "<\/a><\/h3>";
      $('search-result').innerHTML = $('search-result').innerHTML +  xcontent + "...";
      $('search-result').innerHTML = $('search-result').innerHTML + catdisplay + "<\/div>";
   }
   $('search-result').innerHTML = $('search-result').innerHTML + "<div class=\"search-close\" onclick=\"javascript:Element.hide('search-result')\">关闭<\/div>";
   $('search-result').style.display="block";
}

function string2JSON(str){
   var n;
   //We have to do exception handling here because eval might not work in all cases
   try {
      eval("n="+str);
   }
   catch (e) {
      n= null;
   }
   return n;
}

function showFail(){
   Element.hide('indicator');
   $('search-result').innerHTML="Sorry! The page cannot be loaded.";
   $('search-result').style.display="block"
}

//--------把中文字符转换成Utf8编码------------------------//
function EncodeUtf8(xstr){
var retS = "";
var s = xstr;
var slist=s.split("");
for(var i = 0; i < slist.length; i ++)
{
ustr=escape(slist[i]);
if(ustr.substring(0,2) == "%u"){
retS+=Hex2Utf8(Str2Hex(ustr.substring(2,6)));

}
else retS+=slist[i];
}
return retS;

}
function EncodeUtf(s1)
{
var s = escape(s1);
var sa = s.split("%");
var retV ="";
if(sa[0] != "")
{
retV = sa[0];
}
for(var i = 1; i < sa.length; i ++)
{
if(sa[i].substring(0,1) == "u")
{
retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));

}
else retV += "%" + sa[i];
}

return retV;
}
function Str2Hex(s)
{
var c = "";
var n;
var ss = "0123456789ABCDEF";
var digS = "";
for(var i = 0; i < s.length; i ++)
{
c = s.charAt(i);
n = ss.indexOf(c);
digS += Dec2Dig(eval(n));

}
//return value;
return digS;
}
function Dec2Dig(n1)
{
var s = "";
var n2 = 0;
for(var i = 0; i < 4; i++)
{
n2 = Math.pow(2,3 - i);
if(n1 >= n2)
{
s += '1';
n1 = n1 - n2;
}
else
s += '0';

}
return s;

}
function Dig2Dec(s)
{
var retV = 0;
if(s.length == 4)
{
for(var i = 0; i < 4; i ++)
{
retV += eval(s.charAt(i)) * Math.pow(2, 3 - i);
}
return retV;
}
return -1;
}
function Hex2Utf8(s)
{
var retS = "";
var tempS = "";
var ss = "";
if(s.length == 16)
{
tempS = "1110" + s.substring(0, 4);
tempS += "10" + s.substring(4, 10);
tempS += "10" + s.substring(10,16);
var sss = "0123456789ABCDEF";
for(var i = 0; i < 3; i ++)
{
retS += "%";
ss = tempS.substring(i * 8, (eval(i)+1)*8);



retS += sss.charAt(Dig2Dec(ss.substring(0,4)));
retS += sss.charAt(Dig2Dec(ss.substring(4,8)));
}
return retS;
}
return "";
}
//]]>
</script>
<!-- End AJAX Categories -->


注意上面代码很多地方可以自定义，如：
max-results=5 这里的5是定义显示5条标签文章，你可以改成任何数字，只不过太大一不美观，二会增加读取时间。

CSS部分的几个自定义要点：
#indicator 是定义读取条的样式.

#search-result 是定义出现结果的方框样式.

.search-result-meta 是最上方的rss订阅的长条样式.

.search-title 标题样式.

.search-cat 是其他部分的种类样式.

.search-close 是最低下的关闭按钮的样式.

3。切换到模板页面元素项目，添加一个标签页面元素和一个html/js 页面元素，并且在html/js的页面元素内添加如下代码：

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://ggpi.008.net/indicator.gif"/> 读取中/Loading...
</div>
<div id="search-result" style="display:none"></div>

4。切换回模板，修改html项目，打开 扩展窗口小部件模板 ，然后找到你刚刚添加的标签页面元素的代码：

<b:widget id='Label1' locked='false' title='标签' 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>


把上面的红色部分替换成下面这段代码：

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

保存，完工了~~~很简单吧~~~

最后感谢一下一笑已经风云过为大家提供脚本存放空间，感谢大家长期以来的支持。

更新:Shalafi Vos 给出了显示标签文章的同时隐藏原来的文章，关闭后又会恢复的方法。

阅读全文...

阅读概要...