(分享)(教學)在Blogger中加入文章「收合/展開」

大王今天將攝影日記的css做了個調整，但卻忘了先將javascript copy下來，所以「文章收合/展開」功能就不能用了。回頭查了一下自己整理的教學文章(分享)(教學)如何將Blogger beta的文章「收合/展開」？才發現之前並沒有把做法記錄在自己的blog裡，而是推薦大家跳轉到色彩斑斕的blog，不過今天看那個Blog已經不在了說，之前整理的內容也就沒用了，只好自己來寫一篇囉。

Step1.登入Blogger，將Html範本下載下來

「控制主頁->版面配置->修改Html->勾選展開小裝置範本」
把Html code先備份下來，以免等會改壞了><"

Step2.在剛才下載的Html code中找到</head>，將下面的程式碼加在</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>

Step3.在Htmle code將紅色的段落加進去

<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 + "\");"'>
繼續閱讀...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' 
expr:onclick='"javascript:hideFull
(\"post-" + data:post.id + "\");"'>
文章收合...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

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

Step4.新增文章加入文章收合

再來可以把下面的語法加在「文章範本」中，末來在寫新文章時如不做收合功能時可將「綠色」路份刪除。

<span id="fullpost">

</span>


顯示文章的部份


<span id="fullpost">

隱藏文章的部份


</span>