一行代码给你的Blog添加下雪效果

前段时间冷空气突袭的时候,据说郊区密云的雪积得挺厚,但北京城内除了飘了一点小雪粒,毫无动静。应该是气温过高所致,我在慈云寺桥附近拍下的照片可以很好的解释这一点。

不过最近WordPress.com倒是提供了一种让你在Blog下雪的方法(原作者是Scott Schiller),只需要将这行代码加在你Blog的任何位置即可,不需要额外的负担:不用自己维护图片和JavaScript文件(WP.com会帮你出带宽费用,哈哈~)

注意:如果你的Blog不支持JavaScript,则无法使用这一效果,抱歉。

引用代码如下:

http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js

如果希望拥有像我的Blog这样的效果,即让雪停留在某一固定高度,例如我现在将雪停留在导航栏上,只需要引用我修改后的js即可。为了不影响加载速度,放到</body>前面即可。

所有TES主题用户都可以直接使用这个代码:

var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));

其它主题用户,如果希望改变雪落下的位置,可以使用这个代码:

var customizedHeight = 0;
var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));

同时,你可以根据你的页面导航情况自己定义customizedHeight的值,单位为像素,代表雪停留的位置与页面头部的距离。如果设为0,则落下的雪花会停留在页面最底部。

给页面加上Loading效果最简单实用的办法

虽然现在的GMail已经看不到这个效果,但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中:

其实我的方法非常简单,也可以说没什么技术含量,甚至还不支持IE6,但据我长期的观察,确实非常实用的。Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。

最近,又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下:

首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,比如loading:

<body>
  
正在加载

你可以直接放到页面的<body>标签后面,亦可以用script.write输出(如果你有SEO洁癖的话)

然后,在你的样式表中,对这个loading设定一个简单的样式:

#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}

接下来,在你<body>标签闭合之前,将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记:

  document.write('#loading{display:none}');
</body>

如果你有jQuery之类的JavaScript库,就更方便了,例如jQuery可以使用:

  $('#loading').hide()
</body>

这样,当页面完全加载完毕之后,loading就隐掉了。

对于WordPress博客,如果你对页面代码没有太苛刻的洁癖,我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端,你的“Loading”会飞快地出现,用户会觉得你的服务器响应非常迅速。然而,如果你从各种不同的域名下先加载几百kb的JavaScript库,估计用户在你的“Loading”出现之前就已经关闭页面了。

最后,希望这个老土的技巧能帮到你:)

原创WordPress主题TES 1.5发布

【通知 – 11月15日更新】

这次更新更改了中文版TES在IE下评论可能出现空白区域的bug,并且取消了BTC插件的依赖(目前只需要安装这款主题就可以了,您不需要再安装任何其他插件,当然,如果您激活了BTC插件,请将它去掉并删除)赶紧去下载地址下载最新的发布版吧:)

这么做的好处主要是为了让TES更加独立(不依赖其他插件),为大家日后的更新提供便利。

【简介】

TES是一款WordPress皮肤,以突出优雅内容呈现改善阅读、评论、互动体验为初衷而设计。最新版为1.5,发布于2008年10月13日。下载地址Intro in English)。

TES不兼容严格的W3C XHTML标准(未来会考虑)、TES不适合用于构建以SEO为主要需求的站点。

TES官方站点:中文 | English

【使用说明】

点击进入上述的下载地址之后,将tes-cn-release.zip这个文件放到/wp-content/themes/目录下直接解压;再将briansthreadedcomments.zip放到/wp-content/plugins/下直接解压。进入管理界面,激活这款“Brian’s Threaded Comments for TES”插件:这是一个TES必备的插件,它可以让你的评论系统支持针对性回复,提高评论系统的互动性。之后,激活这款主题即可。

【特色】

结合我一年多在Google Analytics上观察到的用户行为分析,以及读者、圈内朋友们的热心帮助,TES发展到了1.5版。现简单说一下TES的一些基本特色:

  1. 引入导航栏
    一直一来我都把更多的精力放在了评论系统的改进和JavaScript代码的精简,对于导航栏我并没有给予足够的重视。直到9月开始用Analytics进行用户行为的详细调研时,才发现导航的重要性。通过我自己Blog的统计数据证明,使用导航栏提高了30%的平均PV
     
  2. 增加“正在加载”(loading)效果
    这个效果之前仅用在我自己的博客。经过在Analytics的统计分析,发现将笨重的jQuery库移动到这个loading效果之后能极大地降低用户弹出率,改善博客的“页面平均停留时间”。于是在1.5版,也为TES皮肤引入了这个功能
     
  3. 改善配色和背景图片
    感谢HelloWiki同学的帮助。以“侧边栏标题”和“评论模块标题”为例,截图如下:
     
  4. 支持Gravatar和Widget两款插件
    Gravatar和Widget作为WordPress官方推崇的插件,在改进博客体验方面有着极其重要的作用。TES对这两样功能都良好支持。

【未来发展】

TES未来的重点仍然在评论系统的改造,目前在我自己的博客上有一个简单的AJAX评论提交演示和滑动效果。但由于WordPress2.7会引入嵌套式评论,因此会放在下一个版本(TES 2.0)发布。同时也会将我对WordPress PageNavi的样式修改整合进来。

相对地,TES更适合于那些评论量大、忠实读者群丰富的博客。也欢迎有相应需求的非盈利博客加入到TES这个项目中来。我会选择2到3个高质量博客无偿提供优化,因为这样我也能从更多的渠道得到用户体验、用户行为的反馈,来进一步完善细节。

在Automattic的项目中,我意识到团队协作的重大意义。如果有WordPress爱好者愿意加入TES的开发,我十分欢迎。目前TES也已经hosting在Google Code,支持SVN:)

【问题求助】

如果有任何问题,请及时联络我:

【发布历史】

以下为TES发布历史存档(未整理)

1.41发布 – 2008年7月25日

修正了多处Bug,增加了Gravatar支持。

1.3发布 – 2008年6月14日

到这个地址下载中文版、英文版和一条必备的评论插件。详细的更新内容我稍后公布。目前,中文版在SVN的trunk中已经基本完成了翻译,可以在刚才那个地址的trunk中找到。非常抱歉,没有时间发布好的zip包。此外,需要安装那个BTC的评论插件才可以,注意,有一些用户安装之后出现问题,一定要在设置面板中设置一下这个插件才可以。(自己找一找不是很困难)

1.2发布 – 2008年6月12日

 

WordPress的讨论组、QQ群,甚至网志年会上,都有朋友问到我何时才能发布中文版的TES主题;同时,我也看到越来越多的朋友在使用这款主题,甚至有一些来自中东、南美的国家的朋友在使用,这让我兴奋之余,颇感惊奇。

请放心,我是一个非常讨厌食言的人。我会在将来发布这款TES,但也请原谅我的确无法保证发布时间。我能保证的并非三下五除二搞顶一个版本然后拼命的推广,这样做也许会骤然显得很有人气,但久而久之,一些“将就应付”的问题就会逐渐暴露,到时候肯定会给广大用户带来麻烦。

至于具体原因,仍然是DOM和CSS,由于我自己的DOM和CSS经过多次反复修改,肯定是不合适发布的,因为一个非常混乱的代码你拿到之后是完全无法维护的。现在下面发布的这个版本是纯英文的,主要是为了IfGoGo.com计划,我精简了几乎所有的代码。而中文版,我为了能升级到2.3,会改出全新的发布版,拥有良好的DOM和CSS,并附上自定义修改手册(这也是我和其他主题相比的优势)。

补充一下,TES是完全免费的,这个发行版下面有加三个非盈利网站(我的blog、IfGoGo英文Blog和AS3技术Blog)的链接,希望您支持这三个网站。谢谢:)恩,请相信以上的承诺,只要我还活着。

1.0发布 – 2007年9月

The Enhancing Spring,这个名字其实只是随便想到的。只是比较喜欢“Enhance”一词,没有任何意义。而Spring,则是因为我在春天制作这个“皮肤”。当然,很遗憾,到秋天才发布出来。因为从春至秋,我就几乎没有闲过。这半年来,领教了央视的严谨和湖南卫视的高节奏,我想对公司来说也是非常好的历练。

其特点是:

  1. 支持Widgets (对于WordPress2.2之后的版本尤为重要)
  2. 自适应双栏布局 (不同的分辨率都能优雅地显示)
  3. 等高布局
  4. 搜索引擎友好
  5. 轻量简洁