藏經閣

一切有為法,如夢幻泡影,如露亦如電,應作如是觀。

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篇限制的問題了。

如何在Blogger新增隨機文章

Blogger Hack - How to add a Random Post Gadget in Blogger)

 


27 意見

  1. 財經 blogger 玩樂分享  

    好用的技術

  2. ★ 你好,我是劉星星。  

    謝謝你啊!

  3. Loca  

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

  4. 真佛宗華德同修會  

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

  5. 十月。初心  

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

  6. flower  

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

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

  7. 版主  

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

  8. flower  

    版主,你好,

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

    謝謝!

    花想集

  9. 版主  

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

  10. flower  

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

  11. csie-tw.blogspot.com  

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

  12. flower  

    謝謝,成功了。

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

  13. flower  

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

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

  14. csie-tw.blogspot.com  

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

  15. Dream Talker  

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

  16. 版主  

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

  17. flower  

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

  18. csie-tw.blogspot.com  

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

  19. flower  

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

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

  20. csie-tw.blogspot.com  

    To flower
    完工啦!

  21. flower  

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

  22. 月的拉拉拉  

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

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

    謝謝: )

  23. csie-tw.blogspot.com  

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

  24. 月的拉拉拉  

    驚~! 這麼快就回覆了XD

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

  25. Bin Ye  

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

  26. 裏悠倏  

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

  27. Tam Eric  

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

張貼留言