最新文章小工具以縮圖表示(Posts with Thumbnails )

之前有介紹一個網站，Wowzio，可以用縮圖表示最新文章的元件Widget，但目前這個網站要寫信去申請邀請函才能使用他們的元件，不然我還蠻喜歡他的設計的，目前找到一款也是類似的功能，跟大家介紹。

不過要使用這個元件，後台設定有一項是要開放的，就是開放全文輸出的Rss Feed，
後台→設定→網站提供→網誌文章資訊提供，要設定完整，才能產生作用，如果設定簡短縮圖沒法跑出來，會顯示一張預設的圖，如下圖這樣。


我想看到這一點應該很多格主就放棄了，譬如我就是，不過如果你原先就是全文輸出你的Rss，就沒差了。(文章下方有提供不用全文輸出Rss，也可以顯示縮圖的最新文章，慢慢看下去唄。)

如何設定呢?

進入後台→版面配置→網頁元素→新增小工具→新增HTML/JavaScript ，然後輸入下列程式碼即可。
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://你的網址.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

裡頭的css設計大概如下，
http://i43.tinypic.com/orpg0m.jpg
是文章沒有圖案時，預定出現的圖片。


boxwidth = 298;
你的邊欄寬度

borderColor = "#ffffff";
背景顏色

thumbwidth = 40;
thumbheight = 40;
縮圖的寬和高

summaryColor = "#666";
摘要文字的顏色

numposts = 5;
要秀出幾篇最新文章

home_page = "http://你的網址.blogspot.com/";
你的部落格網址

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
這個js檔，網址
http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js
作者建議將它下載後，放到你自己的空間使用。

另外程式碼裡的背景顏色或是文字顏色，有時跟你的sidebar css設定有關，所以顯示不一定是你所設定的顏色，這是要注意的，譬如我的連結為什麼會變成綠色的，因為我的版面css有設定
#sidebar strong, #sidebar b {
color: #8BCB2F;
}
如果文字是粗體的就以綠色顯示，如果你有同樣問題的朋友，可以找找看自己的模板是否有這樣的設計。

如果有開放全文輸出Rss的朋友，也可以嘗試看看這個附有圖片的最新文章小工具，我想也是不錯用的，速度也很快。

2009.10.29更新，感謝網友flower佛心提供的資訊，Blogger後台也有提供的小工具，不是在基本系列，而是在精選系列區，
網頁元素→新增小工具→按下"精選"，會出現"Recent Posts"，有兩個，第二個才是有縮圖的最新文章小工具，這個就沒有限定要設定全文輸出的Rss了，設定也彈性些，不過沒法自己修改成自己想要的顏色或是文字大小，還有在IE7底下無法呈現，不知是我的瀏覽器的問題或是程式本身的bug，大家可以參考一下。

參考來源：
Recent Posts with Thumbnails Widget for Blogger