吉野貓

　　『繼續閱讀』是blogger一個很方便的功能，使用繼續閱讀標籤可以讓文章在首頁時顯示標籤前面的主要部份，將標籤後的文章省略，讓讀者快速閱讀部落格的重點部份。

　　而目前 Blogger使用上在首頁會有限制文章的總量控管 - Blogger 的限制，使用 Blogger的『繼續閱讀』功能更可以精簡在首頁顯示的文章，減少首頁顯示的流量負載。




　　使用 blogger的『繼續閱讀』很簡單，如果習慣在『撰寫』模式下編輯，只要在文章欲截斷的地方點選工具列中的圖示，如上圖箭頭指向的按鈕即可。




　　如果習慣在『HTML』模式下編輯，只要在欲斷句的地方插入語法如下，

<!--more-->

，就可以在首頁中顯示精簡過後的文章了。

　　假使使用的模板並不支援本文介紹的繼續閱讀功能，有可能原本的『範本』已經被更動過，首先先找到程式碼如下，

<data:post.body/>

，然後在其後方加入以下語法，

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>


當然所使用的範本中的HTML編碼有可能因需求而有所改變，以上語法可以視範本內容而有所修改。

　　那如果想對『繼續閱讀』的外觀做修改的話，可以在範本中新增／修改以下CSS語法，

.jump-link {
float: left;
font-size: 12pt;
margin: 0;
padding: 2px 10px 2px 10px;
border: 1px solid #333333;
background: #eee;
}

float - 靠左(left) or右(right)
font-size - 文字大小
margin - 邊界留白
padding - 文字留白
border - 邊框
background - 背景顏色


　　把『繼續閱讀』or 『read more』成功改變成自己想要的樣式之後，其實blogger css 語法也滿好玩的..。

部落格｜如何修改 Blogger 繼續閱讀 HTML 範本 　
【部落格】Blogger『繼續閱讀』(read more) CSS 樣式修改教學