『繼續閱讀』是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 繼續閱讀 (read more) 修改樣式教學  
部落格|如何修改 Blogger 繼續閱讀 HTML 範本  

, , ,

Yoshinocat 發表在 痞客邦 PIXNET 留言(0) 人氣()