【代码】在日志中加入readmore内容+评论折叠效果(10.8...
2009-05-09 19:06:44 来自: Norli(不霍莲会死星人…)
| 标题：【代码】在日志中加入readmore内容+评论折叠效果(10.8更新) | ||
第一次来这里。看了代码中的「read more展开代码」后,觉得不完善,于是自己重新研究了一下…
这个方法我是在新模板中用的。
经测试在旧模板系统中,各步骤相同。预览:http://norli.blogbus
10月8日新增评论框折叠效果的代码,预览仍旧是上面的地址。
更新列表:
>6.19.2009
P.S.换了个模板之后不知是哪里出了问题,在预览地址中该效果是没有问题的!但是在单独页面却出现跳转问题…改日换模板后修正。
>6.26.2009
问题解决了!请使用了代码2的亲们修改!(详见下面)
>8.11.2009
解决无法多次使用的问题。
>10.8.2009
增加了评论框折叠效果的代码。
------------
ReadMore效果。(新旧模板皆可)
参考了http://www.douban.co
进行了修改及完善后,新旧模板系统都可以用了。
并且支持Close效果。
在head(旧模板为Header)中添加以下代码:
<SCRIPT type=text/javascript>
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
if(shutAble) return;
targetObj.style.display="none";
if(openTip && shutTip){
sourceObj.innerHTML = shutTip;
}
} else {
targetObj.style.display="block";
if(openTip && shutTip){
sourceObj.innerHTML = openTip;
}
}
}
</SCRIPT>
在写日志的时候,只要切换到HTML编辑模式,在要加入readmore的地方插入以下代码(6.26修正版):
<p><a onclick="openShutManager(this,'box',false,'Close','Open')" href="###">Open</a></p>
<p id="box" style="DISPLAY: none">这里是内容。</p>
以上代码中的内容根据情况自行修改就可以了。
「open」是打开前的标题(有两处),「Close」是打开后的标题(一处)。可以修改…经测试无误。
6.26对出现的问题进行修正:原日志代码中,「href="http://yourname.blog
如果需要多次使用这个效果,请自行修改「box」后的数字序号(有两处)。比方说第二次用的时候可以改成「box1」…一定要改哦!不然会无法正常显示的!
------------
评论框折叠效果。(旧模板)
根据小破的提示,研究了一下JUNKO的这个模板(http://www.douban.co
首先在旧模板Log页的<head>与</head>之间加入如下代码:
<SCRIPT type=text/javascript>
<!-- Begin
var subs_array = new Array("sub1");// Put the id's of your hidden divs in this array
function displaySubs(the_sub){
if (document.getElementById(the_sub).style.display==""){
document.getElementById(the_sub).style.display = "none";return
}
for (i=0;i<subs_array.length;i++){
var my_sub = document.getElementById(subs_array[i]);
my_sub.style.display = "none";
}
document.getElementById(the_sub).style.display = "";
}
// End -->
</SCRIPT>
(我一般是加在<!-- ~ header ~ -->前面的)
然后将原模板中的评论代码(也是在Log页中,因为每个模板都不同所以只能请各位自己去找了…就是含有<!-- ~ cmts ~ -->和<!-- ~ commentform ~ -->的这一系列代码)替换为:
<DIV id=f><A class=headings onfocus=if(this.blur)this.blur() onclick="displaySubs('sub1')" href="javascript:void(0)" ;><P align=left>点击打开评论</A></DIV> <DIV id=sub1 style="DISPLAY: none"><div id=l1><ul class=author>
<div id="comments">
<!-- ~ cmts ~ --></div>
<div id="box">
<!-- ~ commentform ~ -->
</div>
</div><!-- #comments -->
</div><!-- #content -->
</ul> </div></DIV>
「点击打开评论」那几个字可以自己改,换成图片什么的都无所谓…
自己Blog实测无BUG,欢迎各位再次试用…
> 我来回应
这个小组的好朋友也喜欢去 · · · · · ·
- 逼兔 (1653)
- ♣ junko's 不正经的小... (2490)
- 万恶的blogbus模板 (1902)
- 博客大巴豆瓣小组 (6347)
- Blogbus模板代码与特效技... (2989)
- 小ｍ巴士 (158)
最新话题:
【模板】2枚 圣诞福利~ (rena.♥)
【模板】移植 - 小清新 (线线)
【模版】向阳素描 (Bruin)
【模板】白板儿~ (夢)
【模板】无期限赠送需要留言板人-恶兔留言板，可换背... (twoz)
【活动】純白大板 | 兩套（800宽） (寺沃)
【模板分享】 圣诞快乐 (活动进行时) (9吉)
【提问】紧急求救啊~~ (小白)