2009年3月28日星期六

展开/收缩Blogger的侧边栏栏目

这个方法和[在Blogger中创建下拉形式的“标签/分类栏”]提供的方法都是为了减少侧边栏的长度,以确保页面的美观。方法来自色彩斑斓

演示:请看链接网页的侧边栏。

方法——

1.控制台-布局-修改HTML,备份模板

2.查找:
]]></b:skin>
在其方添加如下代码:
.commenthidden {display:none}
.commentshown {display:inline}


3.查找:
</head>
在其方添加如下代码:
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>


4.保存模板。

以后想要添加能展开收缩的侧边栏,只要在布局中“增加小工具”,添加一个“HTML/JavaScript”,然后在想添加的代码之加上以下代码
引用
<a aiotitle="click to expand" href="javascript:togglecomments('自定义ID')">标题</a><br />
<div class="commenthidden" id="自定义ID"></div>
即可。

注:
红色的“自定义ID”可以是任何英文和数字的组合,但不能和Blogger默认ID重复。
蓝色的“标题”可以换成自己想要的ID。


比如演示中的小工具就添加了以下代码(友情链接栏):
<a aiotitle="点击展开" href="javascript:togglecomments('myfriendlistss')">展开/收缩...+/-</a><br/><br/>
<div id="myfriendlistss" class="commenthidden">
<a target="_blank" href="http://lukexzt.blogspot.com/" title="返回Luke瞎折腾">Luke瞎折腾</a><br/>
<a target="_blank" href="http://google.com" title="Google搜索">Google搜索</a><br/>
</div>


大家可以根据需要做相应的改动



-------------------------------------------------------------------------------------
以上图片和文字均为原创,转载请注明转自Luke瞎折腾


收藏本文
收藏到

0 评论:

发表评论