2009年10月28日 星期三

最新文章小工具以縮圖表示(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

9 則留言:

  1. 目前blogger官方的網頁元素裡,不是已經有這個功能了嗎?只是CSS很醜,不知有沒有辦法改善?

    回覆刪除
  2. 你是指網誌清單吧,可是他一次只能有1篇,而這個工具可以設定1篇以上,網誌清單較適合用來做聯播,顯示你追蹤的部落格最新文章。

    回覆刪除
  3. 我指的是新增小工具裡精選的部分,有一個recent posts advanced,它的功能簡介如下:

    Show the recent posts with thumbnails and summaries.You can display the posts from any blogger blog.

    綸太郎可以參考看看...^^

    回覆刪除
  4. 這個也不錯用,謝謝你的資訊。

    回覆刪除
  5. 很喜歡大大的教學~
    想邀請大大加入我的 wave,
    不知道大大方便提供你的 gmail 嗎?

    回覆刪除
  6. 可是我沒有wave帳號,沒辦法加入,謝謝你。

    回覆刪除
  7. 最近我自己開發了一個,如果圖床用的是flickr還會自動去抓flickr的方型縮圖,而且有加入動態換頁機制,個人覺得比上述版本來的好用。

    有興趣的朋友可以參考小弟這篇教學:
    Blogger 最新文章 AJAX縮圖版

    回覆刪除
  8. Blogger後台的Recent Posts已經損壞不能使用,還是版主提供的設定最好用。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能