換個城市呼吸: 在Blogger中加入繼續閱讀功能且保留第一張圖片/照片的縮圖

Blogger是一個非常好用的部落格空間，然而仍有許多不足的地方..在網路上有許多幫Blogger設計出的[繼續閱讀]碼，如我個人認為最完整的繼續閱讀懶人加強版、阿土伯程式大觀園、、等。之前我是用繼續閱讀懶人加強版，然而總覺得有些單調..美美的圖在縮文之下也一起縮掉了。找了好久，總算找到會將文章中的第一張圖縮圖之後，放在左上角，而且縮文程式超快!不會整篇網頁load之後才執行縮文。(如下圖)

這個編碼的原始作者是一個越南人(Anhvo)，有人它翻譯成英文(請參考)，以下我將網頁稍微翻譯成中文，供對這種[繼續閱讀]形式有興趣的網友參考:
1.在修改code之前，記得要[下載完整備份]
2.進入blogger中的[版面配置]-->[修改HTML]-->勾選[展開小裝置範本]
3.按Ctrl+F找到<data:post.body/>，用以下的編碼直接覆蓋過去:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt; Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

4.把下面的編碼插在<head> .... </head>

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>

附註:紅字的部份是可以自行修改的
summary_noimg:當文章沒有圖片時，設定要從第幾個字開始斷掉(預設430個字)
summary_img:當文章有圖片時，設定要從第幾個字開始斷掉(預設340個字)
img_thumb_height:縮圖的高度(pixel)(預設100pixel)
img_thumb_width:縮圖的高度(pixel)(預設120pixel)

**當你的第一張圖片是直式時，圖片會有點怪怪的(預設是橫式的)

換個城市呼吸

2009年5月2日

在Blogger中加入繼續閱讀功能且保留第一張圖片/照片的縮圖

沒有留言: