展开/收缩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瞎折腾！

收藏本文