喔嗚！之前有用過這功能，不過後來又把他砍掉啦~因為覺得並不是那麼的美觀而且實用。不過這幾天發現，其實有些文章全部顯示就又有點長，所以就還是來去Google一下！
以前用的是『繼續閱讀懶人加強版』，就是在頁面上會顯示三種模式的選擇，而且他還有很多附加的功能，像是網路書籤、隱藏上方工具列之類的功能，但是這些我都不需要阿~我只要可以繼續閱讀就好啦！淘汰XD
也有找到另一個『Chagg's 嘴砲日記』寫的方法，只有繼續閱讀的功能，OK~過關。但是他的繼續閱讀點下去，就會跳到單獨的頁面，頗麻煩@@ 所以也是慘遭淘汰的命運啦！(挑的勒XD)
最後好不容易找到 Abin's Tech Note 裡的『首頁長篇文章的收合』方法，賓果！實在是太讚啦！可以直接在頁面上伸縮，而且還附上CSS裝飾，讚啦！就是他啦！
步驟很簡單，先到【版面配置】【編輯範本】【編輯HTML】（要記得勾選"展開小裝置範本")，然後在前面CSS的部份，隨意找地方把下面這段程式碼貼上去。要小心註解的部份！我就被註解害的慘慘慘勒...別把CSS貼到註解裏面阿！害我搞了一個晚上@@
/* 繼續閱讀字樣的外觀 */
span.showDetail {
float: right;
border: 1px solid #333;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
span.hideDetail {
display: none;
float: right;
border: 1px solid #333;
font-size: 8pt;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
當然，上面這兩個都可以自己修改。
再來找到範本中 </head> 標籤，然後把下面 javascript 貼到 </head> 標籤的前面(隨意哪裡都可以，只要是在他前面)：
<!-- User defined inline javascript -->
<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) {
var spans = document.getElementById(id).getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
spans[i].style.display = 'inline';
if (spans[i].id == 'showDetail')
spans[i].style.display = 'none';
}
}
function hideDetail(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')
spans[i].style.display = 'none';
if (spans[i].id == 'showDetail')
spans[i].style.display = 'inline';
}
post.scrollIntoView(true);
}
function checkDetail(id, link) {
var spans = document.getElementById(id).getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == 'detail') {
spans[i].style.display = 'none';
document.write('<span id=showDetail class=showDetail>');
document.write('<a onclick=javascript:showDetail(\"'+id+'\"); href=javascript:void(0);>完整閱讀[＋]</a>');
document.write('</span>');
document.write('<span id=hideDetail class=hideDetail>');
document.write('<a onclick=javascript:hideDetail(\"'+id+'\"); href=javascript:void(0);>文章收合[－]</a>');
document.write('</span>');}
else {
if (spans[i].id == 'fullpost') {
spans[i].style.display = 'none';
document.write('<span id=showDetail class=showDetail>');
document.write('<a href=\"'+link+'\">閱讀全文...</a>');
document.write('</span>');
}}}}
紅色字體的地方就是到時候會顯示在頁面上的字，可以自己改囉！
最後一步，找到下面這一行的程式：
<div class='post-header-line-1'/>
在他後面找一下跟下面這段『類似』的程式碼，不同的範本程式碼有些許出入，不過大同小異。
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
然後把它改成像下面一樣的程式碼(紅色字體部份為修改的部份)
<div class='post-body' expr:id='"post-" + data:post.id'> <!-- Add show detail check -->
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#detail, #fullpost {display:none;}</style>
<p><data:post.body/></p>
<script type='text/javascript'>
checkDetail("post-" + "<data:post.id/>", "<data:post.url/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
按存檔就大功告成啦！
要使用的時候，就把文章想要收起來的部份放在<span id="detail"></span>裏面，也就是像下面這樣：
顯示在首頁上的文字
<span id="detail">
要被收起來的內容寫在這
</span>
或者是可以用<span id="fullpost"></span>，如果用這方法的話，那點下繼續閱讀的時候，就會跳到單獨的頁面去。
還有個小密技，就是把<span id="detail"></span>加到【設定】【格式】最下面的【文章預設格式】裏面，這樣就不用每次都要在打一次程式碼囉！
想看更詳細的介紹就到點點參考資料囉！
參考資料：
。讓首頁文章可開啟/摺疊 for Blogger Beta
。首頁長篇文章的收合
國際標準書號 ISBN
