v 最新文章小工具以縮圖表示(Posts with Thumbnails ) >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...