把首頁文章改為可以摺疊，就是開啟摺疊文章時不用重讀頁面，也再可以摺疊起來
第一步：
當然就是進入控制主頁 > 版面配置 > 修改 HTML > 把 展開小裝置範本 打勾
然後要先把範本備份起來
第二步：在修改範本裡找到 </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 < 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 < 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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (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'>
<div align='right'>
<p>
<a expr:onclick='"javascript:showFull (\"post-" + data:post.id + "\");"' href='javascript:void(0);'>
繼續閱讀...<strong><span style='font-size:180%;'>☜</span></strong></a></p></div>
</span>
<span id='hidelink' style='display:none'>
<div align='right'>
<p>
<a expr:onclick='"javascript:hideFull (\"post-" + data:post.id + "\");"' href='javascript:void(0);'>
恢復摘要...<strong><span style='font-size:180%;'>☜</span></strong></a></p></div>
</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>
2009-08-11
讓首頁文章可開啟/摺疊
2009-08-10
增加文章留言回應的編號
參考網站：Abin's Tech Note
首先定義這個回應編號計數器的宣告和計算。登入管理介面，切到版面配置、修改 HTML 樣板原始碼（要展開小程式範本），在程式碼 <head>區段內（</b:skin> 標籤後、</head> 標籤前），塞入以下 Javascript 程式：<script type='text/javascript'>
//<![CDATA[
<!-- Function used for generating the index number for each post: ShowCommentIndex() -->
var CommentIndex = 0, CommentPostID = '';
function ShowCommentIndex(PostID) {
if (CommentPostID != PostID) {
CommentIndex = 0;
CommentPostID = PostID;
}
document.write(++CommentIndex);
}
//]]>
</script>
接下來決定在留言內，要顯示回應編號的位置。基本上只要放在產生所有留言的迴圈「後面」就行了，那一行是：<b:loop values='data:post.comments' var='comment'>
舉例，我把留言編號放在該篇留言的最後面 (comment-footer 區段裡、留言的時間後面，如同上面的例圖一樣)，顯示編號的程式碼放的位置和內容如下：<dd class='comment-footer'>
<span class='comment-timestamp'>
@ <a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
<!-- Fixed for display comment index -->
| <data:commentLabel/> #
<script type='text/javascript'>
ShowCommentIndex('<data:post.id/>');
</script>
</dd>
其實新加的關鍵是上面的倒數第六行到倒數第二行，如果編號想顯示在別的地方，請自行變更那五行的位置就行了（想改字型大小、顏色或靠哪一邊，請自己定義那一段的 CSS 樣式）。
在文章裡顯示程式碼的語法
參考文章：不思議惑星 Magical Star Blogger
步驟一：
複製以下CSS程式碼, 貼在CSS樣式裡
我個人是貼在body {...} 的後一行code {
display: block; /* 指定元素顯示的形式 與區塊元素相同:block */
overflow:auto; /* 超出顯示範圍處理 全部顯示:visible 隱藏:hidden 捲軸:scroll 瀏覽器自動選擇:auto */
font-family: Arial,Courier New; /* 文字字型 */
font-size: 10pt; /* 字型大小 */
line-height: 15px; /* 文字段落行高 */
padding: 10px 10px 10px 21px; /* 內距綜合設定 依序為上右下左 */
margin: 5px 40px 5px 40px ; /* 邊界綜合設定 依序為上右下左 */
border: 1px dashed #ccc; /* 框線綜合設定 依序為粗細 線類 顏色 */
background: #f0f0f0 url(http://i228.photobucket.com/albums/ee42/lifemirror/Blogger/Code_BG.gif) left top repeat-y; /*背景設定 依序為 背景色碼 背景圖URL*/
}code.ref {
display: block; /* fixes a strange ie margin bug */
overflow:hidden;
background: url(http://i228.photobucket.com/albums/ee42/lifemirror/Blogger/Code_BG.gif) left top no-repeat;
border: 1px dotted #a88;
font-size: 13px;
font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS';
line-height: 1.6em;
}
步驟二：
至blogger設定＞範本＞html＞找到code＞覆蓋
如此一來, CSS樣式設定宣告完成....
步驟三：現在進行的是文章中要貼上的程式碼, 請先將此程式碼code做修改....•< 用 ＆ｌｔ； 更換
•> 用 ＆ｇｔ； 更換
•& 用 ＆ａｍｐ；更換
步驟四：
改完後, 將程式碼開頭輸入＜code＞和＜code class="ref"＞在結尾補上＜/code＞成為以下的模樣, 完成後即可儲存文章<code>語法內容放置處</code><code class="ref">引用文字的部份</code>
延伸閱讀：快速替代特殊字元的方法
1.開啟Notepad或Word或Dreamweaver
2.使用編輯＞取代＞確定, 即將整批替換
3.線上替換工具, 可自動產生CODE
