Go to comments ↓ 2009年12月24日 - Home » Blog

简单为博客增加圣诞气氛

明天就是圣诞节了，刚好有事要出门，再此先向朋友们说声：圣诞快乐！

我们这边是农村，自从毕业后就没什么圣诞活动了。so，下午花了点时间折腾下wp，为博客添加了点圣诞气氛。

一番修改之后，自我感觉良好。维持个一周左右就还原。明年还可以拿出来用，嘿嘿。

方法都很简单，大部分在朋友们的博客收集来的，特此推荐。

给你的朋友们戴上圣诞帽

亲爱的朋友们，没什么礼物可以送给你们，那么请让我为你们戴上圣诞帽。

正确来说是给评论者头像戴上圣诞帽，示例：

圣诞帽

技术粗糙，样式有点囧，别见怪哈

实现方式很简单，我采用的是修改头像显示的Css，增加背景图片的方法。

先找一个靠谱的圣诞帽图片素材，处理很理想的大小和角度，放到主题目录中。
以inove为例，编辑style.css，将.comment .pic 和.comment .avatar修改为以下样式:

.comment .pic {
 background:url(img/hat.gif) no-repeat center;
 padding-top:48px;
 padding-right:14px;
 margin-top:10px;
}
.comment .avatar {
 width:32px;
 height:32px;
}

其中的img/hat.gif就是帽子图片的路径。
需要圣诞帽素材的朋友，可以看水水的这篇：《圣诞帽透明png素材下载》。

嵌套的头像需要另外修改，由于我这里的效果不太好，就不弄了。

为你的博客添加下雪效果

只需要将这段js加到你的主题中，就可以让你的博客雪花飞舞。

 <script src="http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js"
 type="text/javascript"></script>

本方法来自awflasher，原作者是Scott Schiller。

当然，还有插件的方法实现。
小T同学介绍的let it snow，作者同样是Scott Schiller。跟上面那段代码差不多，可以设置雪花数量，速度，是否停靠浏览器，是否跟随鼠标移动。

注意：下雪效果会增加浏览者cpu占用，特别是ie浏览器。

圣诞雪人：wp-christmas

柳城同学的作品wp-christmas，可以在博客上显示圣诞雪人Flash，可选飘雪效果，这个雪花比起上面的要大些。

同样有代码实现方式：

 <div id="MagicFace" Style="POSITION:absolute;Z-INDEX:99;visibility:hidden;"><script language="JavaScript" src="http://liucheng.name/wp-content/plugins/wp-christmas/wp-christmas.js"></script></div>