Blogger / Blogspot Beta 標題伸縮功能

感謝Hackosphere的介紹﹐讓我的Beta 網頁也有標題伸縮功能﹐請參考按+/-就可以展開或縮回。在類別及存檔部份可以使用﹐首頁尚不適用。

修改須在你的程式中加入一些小程式﹐所以記得先備份你的Html code了（要勾選Extend Widget)。

修改詳細步驟如下：



1. 找到</head>,在之前貼一段碼
以下開始--
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
結束
</head>

2.先找一段碼<b:if cond='data:post.dateHeader'>,再把以下改成下面的方式
有一行要刪掉﹐再改成紅色字部份。然後再新增上半部紅色的碼


<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>

</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>

<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>

</b:includable>


<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>

<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><data:post.title/></a><br/><br/>

<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>

</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

</b:loop>
</div>


就這有子﹐改完選擇列別就可以看到效果了。但不一定像我的在上面的選擇把﹐那功能另外再說。

:Blogger_beta