2011/03/17

如何在Blogger新增隨機文章

For English Reader: How to Add a Random Post Gadget in Blogger

有時候想讓舊文章出來透透氣,以免永遠不見天日。找了網路上許多工具,但都有2個很大的缺點:1. 速度慢,使部落格效能低落。 2. 只抓得到部份文章(部落格文章總數超過500篇以上就抓不到)。

因此,為了改進這2個缺點,我抓取Google官方提供部落格文章清單功能,在配合最新的非同步傳輸技術,使得文章在載入的時候,不會讓整個部落格卡住,讓你載入速度超快,避免因為一個小工具降低整體效能。而且,經過一些程式技巧,就算您的文章總數超過500篇,一樣可以抓得到。並且,可讓使用者點擊https://lh4.googleusercontent.com/-HTmwWoE-gPI/TgXEh3aHJBI/AAAAAAAACwc/zYVFCKsc0as/RefreshButton.png的時候,更新隨機文章,增加互動性。

效果如下:

 image

 

使用方法:

1. 先到後台管理頁面。版面配置->網驗元素。

csie-tw.blogspot.com

2. 新增小工具

csie-tw.blogspot.com (1)

3. 新增一個HTML/JavaScript Gadget

csie-tw.blogspot.com (2)

4. 填上標題,和程式碼

  csie-tw.blogspot.com (3)

程式碼如下:

<script type="text/javascript" src="http://sites.google.com/site/csietw123/randomPost.js"></script>
<script type="text/javascript">
numofpost=3;
borderSize=0;
buttomLineSize=1;
refresh_period=-1;
RandomPost();
</script>

numofpost為一次顯示文章篇數,這裡是設定為3篇。

borderSize邊框寬度,如果設為0的話,那就是沒有邊框。

buttomLineSize為每個標題下方的底線寬度,如果設為0的話,那就是沒有底線。

refresh_period自動重新整理的週期,單位為秒數;如果不想自動重新整理,則設為-1

各參數設定效果如下:

 image

 image

numofpost=3;
borderSize=0;
buttomLineSize=0;

numofpost=3;
borderSize=2;
buttomLineSize=0;

image 

image

numofpost=3;
borderSize=0;
buttomLineSize=1;

numofpost=3;
borderSize=2;
buttomLineSize=1;

此程式已在Firefox 3.6、Firefox 4.0、Firefox 5.0、IE 6、IE 7、IE 8、Chrome 5、Opera 10測試過相容性,皆沒有問題,歡迎使用。

技術層面(無興趣可跳過)

我原本是使用stuffablog提供的服務,可是發現它不夠隨機,總是出現部分的隨機文章,不是把整個部落格文章都隨機輸出。這是因為它使用搜尋引擎的引索資料擷取下來的資訊,但是如果沒有被引索的頁面就無法顯示在隨機文章中。

網路上提供的第二個辦法是使用blogger本身提供的feeds來作為隨機清單,由bloggodown的作者實做出來,程式碼可以在這裡下載。使用這個方法時,一開始都很順利,但是使用一段時卻發現,早期的文章沒有被加入隨機清單裡,後來查詢到google的說明是:feeds的max-results參數最大只可以列出500篇。所以bloggodown提供的程式碼只能使用最新的500文章當作隨機清單。

以上2個方法是網路上提供的,但都有一些問題,因此我就自己寫,方法如同bloggodown,但是我會使用index參數設定起始位置,再用max-results當做要顯示的篇數,再透過分析JSON物件擷取之間的文章當作隨機清單,這樣就沒有500篇限制的問題了。

27 則留言:

財經 blogger 玩樂分享 提到...

好用的技術

★ 你好,我是劉星星。 提到...

謝謝你啊!

Loca 提到...

非常棒的分享,感謝版主的分享解決我長久渴望的需求...再講下去怕會有礙此版善良風氣...開玩笑的...不過這是我目前看過最簡便的Blogger 隨機文章建置方式...效果快速一極棒...感恩阿

真佛宗華德同修會 提到...

謝謝你的分享~
終于找到好的random post代碼。

十月。初心 提到...

謝謝分享~
真是簡潔又實用的好方法~

flower 提到...

你好!我試了好幾個語法,只有這個語法在任何瀏覽器下都正常顯示,而且與lightbox的語法不會相衝,很好用!感謝!

有個小小問題想請問,
我在隨機文章的標題之間,想要加上分隔線,不知要怎加上?因為全版的顯示都有分隔線,突然有一欄沒有,看起來怪怪的...^^

版主 提到...

Dear flower,
我不太曉得你要的效果長怎樣,
可否提供sample給我參考?

flower 提到...

版主,你好,

我想要的效果就像我blog裡的Recent Posts跟Recent Comments一樣,有虛線區隔開。您有空可以上我那兒看一下。

謝謝!

花想集

版主 提到...

To flower,
我這幾天會在修改一下程式。

flower 提到...

好的,謝謝你。...^^

csie-tw.blogspot.com 提到...

To flower,
程式和教學都已修改好了,麻煩試試看囉。歡迎您將2個blog都使用本程式。

flower 提到...

謝謝,成功了。

不過好像不能直接只加上那條語法,得重新下載。

flower 提到...

咦,好奇怪,我剛剛找好久,找不到回覆的地方。...

請問版主,你有寫”最新回覆”的語法嗎?我找了一下好像沒看到。因為目前使用的“最新回覆”的語法,無法顯示文章標題,有點兒不方便,所以想來您這兒挖挖寶。...^^

csie-tw.blogspot.com 提到...

To flower,
這幾天比較忙,可能要等下週末我在寫寫囉~

Dream Talker 提到...

您好,雖然沒有使用您的程式.
但是連結此篇文章,請勿介意.
多謝.:)

版主 提到...

To Dream Talker,
只要著名出處,歡迎轉貼^^

flower 提到...

不知為什麼,這兩天隨機文章會出不來。出來了,buttomLineSize的語法好像失效,間隔線不見了。

csie-tw.blogspot.com 提到...

Dear flower,
最近google在改版,前天凌晨我做了修正,buttomLineSize好像忘記測試了,這幾天晚上如果沒有加班我會加進趕工的,抱歉啦

flower 提到...

別說抱歉啦,那我就很不好意思了...^^

只是跟你報告一聲,有空再改就好,沒關係的!

csie-tw.blogspot.com 提到...

To flower
完工啦!

flower 提到...

謝謝!謝謝!看到了!
還加了一個reload的功能,太好了!...^^

月的拉拉拉 提到...

你好,請問加了虛線後要如何減少上下行距?

有辦法不讓標題全顯示出來嗎? ex只要顯示前面幾個字元就好..

謝謝: )

csie-tw.blogspot.com 提到...

To 月的拉拉拉,
目前程式不能設定行拒,這部分我會納入考量,有空我會修改程式。
標題的部分,如果不全部顯是出來,這樣看起來不會怪怪的嗎?

月的拉拉拉 提到...

驚~! 這麼快就回覆了XD

因為我的側邊欄空間不大,然後網誌標題有些很長,導致標題會變兩行。

Bin Ye 提到...

行距可否調整?打攪並謝謝你的回覆。

裏悠倏 提到...

我的裝好以後一直loading都沒有顯示文章出來欸?
請問這個要怎麼解決??

Tam Eric 提到...

謝謝寶貴的分享! 非常感恩..!

4種PDF轉Word的免費方法(pdf to word, pdf to doc, pdf2word, pdf2doc)

本文將介紹4種 將PDF轉Word檔 的方法,分別分析其效能、方便性、精確性等指標。 1. nitropdf提供的線上 Convert PDF to Word (DOC) 這是一個 線上免費PDF轉Word檔 的服務,網址: http://www.pdftoword.com...