2009年8月31日 星期一

用縮圖顯示相關文章的功能(Thumbnails for Blogger)


最近看到很多部落格都有使用LinkWithin工具來顯示相關文章,不過綸太郎介紹的只適用Google Blogger的部落格,其實比較起來好像也沒什麼差異,只是blogger可以設定超過5篇以上的聯播,還有顏色、文字大小等可以自訂,自由度相較下會稍微高些。

文章參考於:
Related Posts with Thumbnails for Blogger~ Blogger Widgets

先決條件,你的圖片是在後台文章編輯上傳的圖檔,如果你是利用其他的圖庫,例如Flickr、photobucket或是經由url上傳等,這工具是無效的。


進入後台→版面配置→修改HTML,勾選展開小裝置範本,
然後找到
</head>
在上方加上以上語法
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

以上是相關文章的CSS外觀區設定,然後再找到
<div class='post-footer-line post-footer-line-1'>
然後將以下語法加在後面即可,
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


大概出現的位置如下圖,


其中
var maxresults=5;
你可以自行修改你要展示的相關文章篇數,我有試過最高可以展示到6篇,通常是你一篇文章有2個標籤分類,可能就能抓到,但有時你設6篇,他展示的只有3篇,我想應該是這個工具的判斷相關性的程度吧。

var relatedpoststitle="Related Posts";
另外英文標題的Related Posts,你也可改成你要的名稱,例如:同類型的文章,或許您也感興趣...等等

還有可以修改的就是圖片的標題名稱顏色及滑鼠划過的背景顏色,例如,這在最上方的
#related-posts h2{
標題部份,這是顯示Related Posts字型的大小、顏色

#related-posts a{
color:red;
也可以將文章標題的文字改成紅色或是其他顏色

#related-posts a:hover {
background-color:#d4eaf2;
背景顏色,本來是#d4eaf2;淺藍的,我改成紫藍色



#related-posts a{
border : 1px solid #666;
}
另外我在每篇縮圖文章加上邊框,border : 1px solid #666; 讓縮圖區有邊框,這都是可以自行修改的地方。


因為這個Hacks多了CSS區,所以你可以修改成你要的樣子,再加上html區你也可以加在你想加的地方,不一定要在文章末,在文章前亦可,只要你懂得整個版面的配置,這個工具也是相當的自由。

如果單篇文章沒有圖片,他就會顯示這張圖


而原先有裝Abin's Tech Note的加入相關文章功能 (Related Post),這是文字型的列表,先試驗幾天再拿掉,有興趣的朋友可以裝看看。

另外關於顯示欄位的寬度與高度,目前我是沒法修改,這是要告訴大家的。

Note:如果語法上出現錯誤,請至原網站Copy語法,因為有朋友反應無法安裝成功,目前找不出原因,綸太郎自己安裝這篇文章上的語法是沒有問題。

2009.11.13更新,
目前這項功能,已拆除,因為覺淂頁尾放太多東西,很雜,正在尋找更好的配置方法。

49 則留言:

  1. 很實用的好功能, 感謝分享!!

    回覆刪除
  2. 在修改CSS外觀那邊,我將語法放入後,出現不能存檔的狀態~

    請修正下列錯誤,再重新提交您的範本。
    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The reference to entity "callback" must end with the ';' delimiter.

    有點不清楚哪邊有問題耶~

    回覆刪除
  3. 你再重裝下方的程式碼,應該可以了,可能是編碼的關係。

    回覆刪除
  4. 還是不行耶~ @@"難道無緣?
    一開始還OK,但是div class='post-footer-line post-footer-line-1'這段後面的語法放上去就會跳錯誤~

    回覆刪除
  5. 我已再試2個部落格都成功,如果你的還是不行,文章最上方有原始作者的程式碼,你再試看看,如果再不行,真的就是和你的模板不和。

    回覆刪除
  6. 另外我發現你的圖片好像不是從文章編輯裡載入的,應該不適用這工具,你可以試按看LinkWithin或是Abin's的相關文章工具。

    回覆刪除
  7. 是的,我不是用它的程式上傳,但是因為我也是放在google的相本,所以想試試看~@@"

    回覆刪除
  8. 與大大報告~
    測試完成,使用原文的語法就OK,而且發現只要圖片來源是google相本,就會顯示。

    回覆刪除
  9. 成功了!跟樓上"暗夜咆嘯"一樣要從原文的語法.
    ^^

    回覆刪除
  10. 這網頁也跟論太郎介紹的很像
    http://www.linkwithin.com/learn

    回覆刪除
  11. 請問為什麼我有某個(3)標籤一直無法顯示相關文章,剛修改完HTML後馬上點那個標籤的文章會成功顯示,但點第二次後就都不見了,或是新發那個標籤的文章,也會成功顯示,但典第二次後又不見了,但另外一個標籤(2)就都沒這個問題,點幾次都能成功顯示

    回覆刪除
  12. 應該是抓資料的問題,這是原作者設計的程式,我想只是時間差的問題吧,我點都很正常,你可以試著從原作者的網頁安裝程式碼,看會不會比較好些。

    回覆刪除
  13. 謝謝,我用另一台電腦也是顯示正常,後來發現把原先的電腦清除Cookie就ok了。

    回覆刪除
  14. 您好,這功能真是漂亮,我超喜歡..但因為我blog並不是白底,想請問要從什麼地方更改白底背景色為其他顏色?....先謝謝你詳盡的教學..

    回覆刪除
  15. 例如要改黑色將#related-posts {
    增加一個
    background: #000;
    如果是黑色底,相對文字用黑的就會看不到,所以要將
    有color:black;的地方
    改成color:white;
    就是修改上方Css程式碼的部份,你可以慢慢改就知道,改到哪裡了。

    回覆刪除
  16. 抱歉我的語法太弱,加了背景語法後,中間變色了,但周圍仍然會有白框..我之前參考您這篇"新增Plurk、Twitter及Facebook推文按鈕"..也有一樣的情形,3個推文鈕一樣是中間改顏色,周圍仍有白框..呵,應該是我無意間改了什麼設定...傷腦筋..

    回覆刪除
  17. .post img {
    margin: 5px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #E9D9C3;
    這裡就是你的設定,圖片背景底是白色,有框線,你可以自行修改看看

    回覆刪除
  18. 哈哈,綸大,這個 widget,我用原本網站的功能安裝之後(Blogger 使用者自動安裝),結果只能出現在首頁,而且圖形相關只出現後面兩個,前兩著竟然只是文字連結 ... Orz。

    而且較舊文章,也會出現文字連結捏 ... 好怪啊~!!

    回覆刪除
  19. 你是說用LinkWithin嗎?我自己是沒用過,不太清楚,我看內頁也有,只是慢些出現,可能有些功能你沒有勾選到吧。

    回覆刪除
  20. 你好,我加完語法後有出現,但是在文章最上方,而不是文章最下面,請問是哪裡有問題。

    回覆刪除
  21. 請提供您的網址,因為V-buzzing這個部落格沒有看到您有安裝這部份,沒法判斷,另外安裝在哪個位置,您可以自行安排,我文章裡是以我的模板為主,找到適合你模板的位置插入語法即可。

    回覆刪除
  22. 太郎兄,你可以替王子看看吗?

    王子安装了一段时间。。正常运作。。。可是,刚才去安装其他的hack 时。。。他就无效了。。。

    王子已经重新安装过。。。不知为何,还是不再呈现了。。。。


    麻烦您。。王子搞了老半天。。


    谢谢

    回覆刪除
  23. 你自己有將程式碼改過吧,我看到有用分類的相關文章,外匯、投資理財等,他原先的設計不是如此的,你可以到原網站,抓他的程式碼,重新安裝看看。

    回覆刪除
  24. 太郎兄,王子没改过。。
    王子有用两个“相关文章“ 的hacks,一个是您介绍的。。另一个是例表方式的。。

    王子尝试安装了。。也将原作者的安装过了。。还是不能。。是不是王子放错地方了?

    回覆刪除
  25. 我裝的可以正常呈現,語法放在<data:post.body/>之後,你應該是縮圖的那部份有問題。

    回覆刪除
  26. 其實這兩個顯示的文章,我觀察過大同小異,都是最新發表的相關文章,所以裝一個就夠了。

    回覆刪除
  27. 原来 “都是最新發表的相關文章”。。。
    本来可以的。。王子就是以为他不断显示部分的文章罢了。。原来是自己没什么文章。。自己加了一个例表方式的“相关文章”。。。之后这个hacks 就不见效了。。。现在还是那样。。其实不肯定是不是自己看不到罢了。。。

    回覆刪除
  28. To王子,不是你沒什麼文章,我300多篇,他還是抓最新的5篇,我裝了這兩個,兩個都會正常顯示,你的縮圖那個不顯示,我不知道原因,只是兩個出現的文章都大同小異,所以才會說裝一個就好了。

    回覆刪除
  29. 因為預設是讀取最新的 6篇...
    除了本身之外就顯示其他最新的 5篇.
    更改.....
    =related_results_labels_thumbs&max-results=6"

    上面的 6..............就 ok了

    回覆刪除
  30. 謝謝你,不論設成多少,100或1000,還是顯示最新的相關文章,沒法顯示更早的文章。

    回覆刪除
  31. 下面是我現在看到的相關文章內容:

    1. 將繼續閱讀(Readmore)更改位置或外觀
    2. 修改嵌入式留言欄的寬度
    3. 懶人法‧利用草稿文章來存模板系統圖片
    4. 加強blogger作者留言和一般留言的區分
    5. 追蹤者(Followers)功能大躍進

    回覆刪除
  32. 我的也是這樣,他好像有個區間限制。

    回覆刪除
  33. 有用有推,謝謝綸太郎!

    回覆刪除
  34. 很高興你又回來寫文了,新版面很有氣質。

    回覆刪除
  35. 綸太郎 大大
    沒顯示出來 是不是跟您的模板不一樣的關係
    不行的話 真的好可惜阿 真的無緣...

    問題2
    他是用 標籤 分類相關文章的嗎?

    回覆刪除
  36. 目前我是用linkWithin這個工具,應該跟模板沒有關係,他是用標籤分類相關文章,因為測試過後都只顯示最近的,所以目前我不用這個Hacks了。

    回覆刪除
  37. 很實用的功能, 謝謝分享!!

    回覆刪除
  38. 很有用喔,我之前只是用人手一個一個連結連到文章上作為相關文章,謝謝你的教學!

    回覆刪除
  39. 綸太郎,我又回來了。

    我的網站跟你做了上面的方法,但結果還是顯示不了出來,相信可能是我改了template 有關。

    那麼之後我裝了linkwithin 之後,再跟這個網站http://www.ajibanda.com/2011/10/remove-linkwithin-on-bloggers-home-page.html

    移除在首頁,現在不只首頁不見,連內文亦不見了,你知道是那裏出錯嗎?
    謝謝。

    回覆刪除
  40. 忘記tick 以電子郵件傳送後續意見。

    回覆刪除
  41. 這個是舊版的Hacks,新版可能不適用,至於你的問題,我也不清楚問題出在哪。

    回覆刪除
    回覆
    1. 请问那个相关文章的标题能够删除掉的吗?

      要删除哪段代码才能让那相关文章的标题消失?

      刪除
    2. 上面語法 Related Posts,這兩個英文單字刪除即可。

      刪除
  42. 所以請問一下 新版的BLOOGER相關文章需要如何使用呢?
    好像已經無法使用上面這樣的方法了!!感謝

    回覆刪除
    回覆
    1. 你可以利用Linkwithin工具 http://www.linkwithin.com/learn

      刪除
    2. 謝謝綸太郎相當實用 感謝!!!

      刪除
    3. 不好意思可以再請問一下,如何調整讓他只在點入文章時出現相關文章,
      因為目前在網頁在入網誌主畫面時,每一篇文章的下方都會出現相關文章。

      還有另外一個問題 如何消除右下方"linkwithin"的超連結與字體。
      相當感謝

      刪除
    4. 將語法用<b:if cond='data:blog.pageType == &quot;item&quot;'>
      linkwith的語法
      </b:if>
      包起來
      不要連結的話,這個我不會。

      刪除

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