【特别增加：如何滚动显示twitter！
参考Sivan这篇优化Twitter在博客中的显示，下载他博客首页源代码中的blogger.js文件，也就是格式化显示的js文件；
参考他的twitterAPI输出地址(使用了lerosua提供的代理)：http://li2z.cn/t/statuses/user_timeline/SunSivan.json?callback=twitterCallback2&count=3 (sunsivan换成你的twitterID，count后为显示条数。)
然后同理如上引用jquery库和两个js，在滚动代码那里将#wudishow改为#twitter_update_list；
html代码部分写为<ul id="twitter_update_list"><li class="loading">Loading...</li></ul>
——就OK啦！】

digureply.jpg

*细心的同学可能还发现我修改的digu_output.js文件中有一段“嘀咕小闹钟”的jquery嵌入代码，就是我首页显示的那个可爱水滴状flash时钟。它本来是嘀咕网站后台的提示精灵，搬到自己的博客上不仅美观而且实用，有人回复你的嘀咕时它会变成@一闪一闪的，罩上一个透明gif图片还可以加上通往自己嘀咕微博首页的链接~ ;) 具体挂件方法如下：

首先在digu_output.js中看到这段代码：

  1. $('
    '+a.str+"
    "    ).appendTo("#note")}

它的意思是将flash时钟放在class为clockbox的容器内，再附着在id为note的元素中。那么flash时钟的显示位置就看你在css中对clockbox的设定了。
先在模版中需要显示flash时钟的地方写上如下html：

  1. <div id="note"><div class="masker"><a href="http://digu.com/jwalk" title="郑在嘀咕..."><img src="http://www.yzmb.me/usr/themes/jwalk/images/blank.gif" width="45" height="45" border="0" alt=""/></a></div></div>

blank.gif是一张覆盖在flash上的透明gif图片，用于给flash时钟加上链接。因为在上面那段jquery代码里指定了flash时钟附着在id为note的元素中，所以这里写好<div id="note">就不用管了，flash会自动出现在这个标签里。
css中对应设置下flash时钟的位置：

  1. /* 设定.clockbox也就是flash时钟在页面中的位置 */
  2. .clockbox {
  3. height:45px;
  4. left:-18px;
  5. top:-26px;
  6. width:45px;
  7. position:absolute;
  8. z-index:1;
  9. }
  10.  
  11. /* 设定了.masker也就是透明gif图片在页面中的位置 */
  12. .masker {height:45px;
  13. left:-18px;
  14. top:-26px;
  15. width:45px;
  16. cursor:pointer;
  17. z-index:10;
  18. position:absolute;
  19. }

这样保证透明gif图片层和flash层位置一样，但覆盖在flash之上，就可以实现给flash时钟加上链接了！

有了动态显示微博小挂件，你的博客是不是显得更加与时俱进、亲切活泼了呢？
在下一弹中羽中将继续介绍更多美观又实用的挂件小高招！:)

12

(Last modified: 2011-06-06 11:58)