blogger中實現「繼續閱讀」功能


blogger預設的文章功能是「整篇顯現」,如果說你的首頁設定有10篇文章~

那麼,你的首頁顯現出來的就是有10篇完整的文章,整個版面就會拉的很長~

我們可以用一些方法讓它只顯示「文章標題」,其他的內文隱藏起來,等按一下「繼續閱讀」的按紐才顯現完整文章內文,如下圖:



底下的方法是在 Xavier's nOte看到的,有興趣的網友可以直接到該站去看,這裡只是為我的部落格建構之路做一個記錄:


步驟1 請先備份好模板

步驟2 管理後台 > 版面配置 > 修改html > 展開小裝置範本打勾

步驟3 搜尋<data:post.body/> 並且用下面的程式碼取代 <data:post.body/>


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'/>
<script type='text/javascript'>
var blogID = &quot;<strong>2977027413120105432</strong>&quot;;
function retriveSummaryPost<data:post.id/>(json){document.getElementById(&quot;summary<data:post.id/>&quot;).innerHTML
= json.entry.summary.$t + &quot;...&quot;}


function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement(&quot;script&quot;);
script.src = &quot;http://www.blogger.com/feeds/&quot;+blogID+&quot;/posts/summary/&quot;+POSTID+&quot;?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>&quot;;
script.type = &quot;text/javascript&quot;; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>(&quot;<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>(繼續閱讀read more...)</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post_body'><data:post.body/></div>
</b:if>


上面的數字2977027413120105432請換成自己的blog id
你的blog id:在版面設置的網址列後面就會帶出你的blog id,



步驟4 儲存 > 大功告成

0 意見:

張貼留言


1.本部落格不含"nofollow",多留言幫自己多加分喔!
2.沒有blogger帳號者選擇【名稱/網址】一樣可以留言^^y
3.匿名攻訐、不相干之廣告適用於無條件刪去法,望請海涵:)
4.您可以使用一些 HTML 標記,如:粗體, 斜體, 描述文字
5.勿違反公序良俗XD

注意:只有此網誌的成員可以留言。