zblog改造单页面微博,利用嘀咕秀JS整合

信玩微博的人一定听说过嘀咕吧,嘀咕相对于新浪微博等门户微博而言,最大的一个优点就是js代码可以进行DIY独立成页,一般人看不出这微博是来自嘀咕(http://guandongfa.com/blog/digushow)。 这里以WordPress博客为例进行阐述说明。 我们都知道,如果仅仅调用嘀咕的代码,并不足以完美展示嘀咕微博,而且让人看了有一种不舒服的感觉,但是如果合理运用DIV+CSS功能,那这显示效果就完全不一样了。具体步骤如下: 第一步,新建一个页面,在HTML模式下输入以下代码: <div id=”wudiShow”>正在加载</div> <script src=”http://www.digushow.com/js/digushow.js” type=”text/javascript”></script> <script type=”text/javascript”>wudiShow.setUrl(“http://www.digu.com/”);wudiShow.setSiteName(“嘀咕”);</script> <script src=”http://www.digushow.com/api/wudishow.jsp?callback=callback&username=fabrother&count=20&isBack=false“ type=”text/javascript”></script> 其中红色标记处fabrother修改为你嘀咕用户名,20修改为网页展示嘀咕的条数,false表示不显示回复,如要显示,则改为TRUE就可以了。 第二步,在主题包的CSS代码的最末位加入以下代码: #wudiShow{list-style:none;padding-bottom:2em;font-size:120%;} #wudiShow_List{padding:1em;} #wudiShow_List li{list-style-type:none;padding:5px 0;border-bottom:1px dashed #ccc;} #wudiShow_List li:hover{background:#E7E7E7;} #wudiShow_List li a{text-decoration:none; color:#999;} #wudiShow_List li a:hover{color:#F63;} .wudiShow_time{background:url(http://p13.freep.cn/p.aspx?u=v20_p13_p_1001080328416726_0.png) no-repeat;padding:0 0 0 19px;font-size:80%;} a.wudiShow_time:hover{font-size:120%;} #wudiShow_Header, #wudiShow_More, .dt_foot{display:none} 保存后就可以了,你就可以在你新添加的页面中看到效果了。比如说我的嘀咕秀秀就是这样的:http://guandongfa.com/blog/digushow