2007年2月8日星期四

blogger 3.0:随意折叠任何侧边栏

感谢台湾朋友benjamin分享的方法。

作用就是可以折叠任何侧边栏,例子可以参考我博客右边的订阅GG派,点击展开,二次点击关闭。

安装方法:首先切换至模版,修改HTML项目,在 扩展窗口小部件模板 前打勾。

然后找到你想要折叠的侧边栏。
这里以我右边的侧边栏 “订阅GG派”为例:

<b:widget id='HTML12' locked='false' title='订阅GG派' type='HTML'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = 'RSSyutufhfe6';
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '"); tmp.style.display = (tmp.style.display == &quot;none") ? "block" : "none"; return false;">');
//]]>
</script>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><img src='http://gggpie.googlepages.com/rss_button.png'/><data:title/></h2>
</b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


以上代码的深红色字母RSSyutufhfe6可以是任意不重复的英文字母。也是唯一你要自己改的地方。

然后蓝颜色的代码是直接照抄,分别在绿色代码 <b:includable id='main'>下加第一块代码。

在<div class='widget-content'>的上面和下面各加一块上面的蓝色对应代码。

最后在<b:include name='quickedit'/>的上面再加上相应蓝色代码就成功。

注意上面的紫色代码<img src='http://gggpie.googlepages.com/rss_button.png'/>的位置,是我在侧边栏题目前加的图片。你可以改成自己想显示的图片或删除~~

最上面的代码直接复制可能有问题,这里把能直接复制的代码贴在下面:
第一块代码:
<b:includable id='main'>下:

<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = 'RSSyutufhfe6';
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>

第二块代码:
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

<b:includable id='main'>上面第二块,下面第三块:
第三块代码:
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

如果想默认状态为打开,点击关闭的话,可以将上面第三块代码的style="display:none;"移除即可。

第四块代码:
<b:include name='quickedit'/>上面:

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>


4 评论:

sz-iris 说...

十分感谢哦!非常好用的东西!谢谢啊!
这样Blog的版面可以简洁不少啊!

小龙 说...

谢谢!初用BLOGGER,从你这儿学到不少,也拿走不少:)

匿名 说...

那要在一个widget添加两个可随意折叠的板块,代码怎么变动?

凍仁翔 说...

謝謝您的分享,凍仁可以成功的褶疊自己的 widget 了.. ^^

Jonny`s Ubuntu Note

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆