Loading...Please wait...
【Blogger】Expandable posts with Peekaboo view
2007-03-05 by tacojohn
這個功能是我會來用Blogger的一大"助燃物"
很久以前就知道Blogger了，也很喜歡它的版面設計，可是它的Post文章並沒有辦法將abstract跟content分開
而是整篇文章一次秀出，這對較長的文章而言會造成版面的負擔
直到看到這個功能，才有了解決方案
這個功能是利用Java Script達成，不像其他網站的"繼續閱讀"功能是換頁顯示完整的文章，它是在同一個頁面將content的部份折疊起來，當你點"繼續閱讀"時它直接延展開，不用再重新讀取，方便又快速!!閱讀完畢時，又可折回去，不占版面空間，相當的方便 ^_^
實作方法如下：
Step1: 將這行加到<head>裡 <script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Step2: 找到下面這段，並加入紅色的部份<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
Step3: 同樣，再找到下面這段，並再加入紅色的部份<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>
※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的綠色部份的兩個文字標籤...
Step4: 基本上這樣就完成了! 最後，使用方式為，貼文時將欲折疊的部份用下面的TAG包住即可<span id="fullpost"> 想要折疊的部份 </span>※參考來源：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?
．Kaie's Blog-[Blog] Expandable posts with Peekaboo view (blogger beta)
喂～
沒說清楚～
要修改這些程式碼要點選『展開小裝置範本』
否則會找不到那些程式碼～
害我找超久～～