讓首頁文章可開啟/摺疊 for Blogger

新建立的Blogger建議使用[BLOGGER]繼續閱讀懶人加強版 最新版本

update：2008-0724 程式碼更新
update：2007-0715 程式碼更新
update：2007-0119　刪除多餘代碼造成的錯誤

把首頁文章改為可以摺疊，就是開啟摺疊文章時不用重讀頁面，也再可以摺疊起來，感謝Ramani 提供程式修改方法，接下來就講解一下如何改範本

第一步：
當然就是進入控制主頁 > 版面配置 > 修改 HTML > 把 展開小裝置範本 打勾

然後要先把範本備份起來

update：2008-0724
第二步：在修改範本裡找到 </head> 把以下橘色代碼加到前面。

<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>

第三步：找到以下的代碼段落，接著把紅色部份的代碼插入，而綠色的代碼可以改為自己想要的中文字，最後儲存範本。(有些範本會沒有uncustomized-post-template，正常情況)

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
 expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' 
expr:onclick='"javascript:showFull
(\"post-" + data:post.id + "\");"'>
Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' 
expr:onclick='"javascript:hideFull
(\"post-" + data:post.id + "\");"'>
Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

第四步：
到設定 > 格式 裡把下面藍色的代碼放到最下面的文章範本裡，到這裡就全部完成，當新增文章時，自己調整要顯示文章的部份，如果文章比較短，可以在新增文章時把下面這2行刪掉，就會直接顯示全文 。
<span id="fullpost">
</span>

顯示文章的部份
<span id="fullpost">
隱藏文章的部份
</span>