Friday, August 21, 2009

[Blogger] 有縮圖的關連(隨機)文章 / Related Post with Thumbnail

自從上次最新回應壞掉,我用訂閱 http://www.yourblog.com/feeds/comments/summary 去代替後,就一直想找找看有沒有比較好用的最新回應,不過最近很忙,難得今天早點下班,所以就趁機找了一下,結果要找的沒找到,在Blogger Buster翻到一個看起來不錯用的東西,叫作有縮圖的相關文章,簡單來說就是相關文章除了標題之外還幫你附縮圖,這個功能是用Link Within這個站的plugin去做的,方式很簡單,所以與大家分享一下。


首先,先連到Link Within這個站,你會看到右邊有個淡紫色的方塊。

Linkwithin
從上到下分別要填的是

Email : 填你的電子信箱
Blog Link: http://填你的部落格網址
Platform : 選你的blog平台,建議都選Other
Width : 選擇要顯示幾則,從1~5,越多越寬
口My blog has light text on a dark background
如果你的blog是深色底的話,這邊打勾
然後就可以點Get Widget!取得語法了。


取得的語法會長的像這個樣子
<script>
var linkwithin_site_id = 這邊自己改;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>
紅色那邊改成LinkWithin給你的編號。

然後把這串語法貼進blogger的範本,只要貼在<body>跟</body>的中間就可以生效了。不知道怎麼貼的話可以從[版面配置]->[修改 HTML]裡面去找地方貼(我通常都把javascript貼在head裡,阿真的不知道貼哪邊在留言問吧XD),或是用[版面配置]->[網頁元素]->[新增小工具]去新增一個[HTML/JavaScript]貼在裡面也可。


不過這樣子貼的話,瀏覽文章列表時,每篇文章的後面還是都會長出有縮圖的關連文章列表,於是我小小做了一下修改,改成只有點進文章後,才會顯示關連文章,語法如下。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = 這邊自己改;
(function () {
var elem = document.createElement(&#39;script&#39;);
elem.type = &#39;text/javascript&#39;;
elem.src = &#39;http://www.linkwithin.com/widget.js?rand=&#39; + Math.random();
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(elem);
})();
</script>
</b:if>


測試後感覺還不錯,於是我就把這功能新增到我的blog上了,可是雖然Link Within說是關連文章,可是我一點都感覺不出來,所以當做隨機文章就好XD,目前看起來他只會抓有圖的文章,所以沒有圖的文章是不會被拉出來顯示的。


**UPDATE**
Link Within後來有更新了,新拿到的語法會是這樣,基本上做法還是一樣的
<script>
var linkwithin_site_id = 這邊自己改;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>

而如同我之前的做法,只要在Link Within所給的語法,前後加上下面黃色的語法,然後放到<head>跟</head>的中間就可以了。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = 這邊自己改;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
</b:if>

如果有問題再問吧XD

49 comments:

  1. 謝謝你的提供,這個資訊很實用。
    小工具也很漂亮呢!
    我覺得圖片的點閱率會高於只有標題的點閱率呢!

    ReplyDelete
  2. 有喜歡就好,我也是看別人分享才知道的 :)

    ReplyDelete
  3. 請問可以引用您本篇的的語法嗎?謝謝~

    ReplyDelete
  4. 沒問題啊,貼出來本來就是要跟大家分享的

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. XDDDD
    非常感謝您寫出這篇文章,我之前放錯了所以留言來問,仔細多次閱讀過您的文以後……現在搞定囉!
    所以把之前的發問刪了^ ^"

    ReplyDelete
  7. 我都還沒回你就刪了XDDD,不過有搞定就好啦 :)

    ReplyDelete
  8. 感謝~ 看了你這篇文章我改好了,就是點進文章裡才會看得到。 謝啦!! ^^

    ReplyDelete
  9. 我使用您提供的這個方法,
    但是失敗了耶ˊˋ
    如果只用原本linkwithin提的的語法的話是可以出現,
    但因為在閱讀全文之前就會出現.
    我覺得很不美觀,
    所以想用您這個方法.
    但套用會卻只有在文章最下面出現linkwithin的字樣,
    並沒有出現可以選擇的圖片,
    請問這是怎麼回事呢><
    請幫忙解惑呀...
    還是要等一下它才會出現呢?

    ReplyDelete
  10. to Mie
    基本上就是把linkwithin的script那段
    用我給的那段的第一行跟最後一行
    理論上這樣子能顯示的話就會顯示出來啦
    麻煩你試試看,有問題請再跟我說
    不然請你留你的blog我看看也可以
    感謝

    ReplyDelete
  11. 還是不行耶...~"~
    如果是用Link Within自己自動做的網頁小工具去改的話,
    會變成就算沒有點進去也看的到其他的隨機文章,
    若是用您的方法自己架設小工具去套用就會變成
    [只有在點進文章的時候會在最下面看見Link Within的字樣,但是沒有圖片可以連結]
    抱歉麻煩您再幫我看一下ˊˋ
    網址:http://mie850527.blogspot.com/

    ReplyDelete
  12. 喔喔喔~
    我剛才試著把它直接貼到html裡面,
    一開始還不行,
    但多弄幾次就突然可以了(?)
    感謝您的幫忙喔~

    ReplyDelete
  13. 耶....我正在看你的網誌說XD
    話說我發現現在Link Within給的語法跟我寫這篇文章不一樣了
    我再找時間試一下新的語法怎麼放會比較好
    不好意思應該是內容太舊的關係讓你搞混了

    ReplyDelete
  14. 你好,請問有辦法移除官方的右下方連結嗎??

    ReplyDelete
  15. 理論上是可以的,可是你都用他提供的功能了,為什麼不讓他掛個連結呢 ?

    ReplyDelete
  16. 請問一下
    我用了上面的語法後就跑不出LinkWithin 了
    不管是用網頁元素中的新增小工具或是直接修改HTML
    都沒有用
    我得到的語法跟站長的不太一樣
    能不能提供現在的語法的解決方法

    謝謝

    ReplyDelete
  17. to Lsy : 我有增加說明了,請你試試看,如果有問題請再提出,感謝!!

    ReplyDelete
  18. 不好意思....我沒成功耶!!!我把LinkWithin的HTML/JavaScript改成你的...結果首頁還是有出現耶!!!

    ReplyDelete
  19. BiApp can you post your blog or website address ?
    Let me try to find out the problem.
    sorry dunno why i can't type chinese now :(

    ReplyDelete
  20. http://biapptw.blogspot.com/
    這是我的網址!!!不知道為什麼改了還是沒成功...首頁還是有圖示連結!!!謝謝您!!

    ReplyDelete
  21. 你試試看貼到<head></head>中看看,如果不行請再跟我說

    ReplyDelete
  22. 是在哪呢???我有試著貼了!!但沒成功...不知道我貼錯還是....我的好長一串...不知道有沒有貼正確!!!

    ReplyDelete
  23. 你把整段語法搬到</head>這個標籤之前看看

    ReplyDelete
  24. 還是不行...真的不知道哪裡出了問題....
    可以貼與法給您幫我看看嗎???謝謝您

    ReplyDelete
  25. 可以啊,你看看要不要寄給我 doomdied (at) gmail (dot) com

    ReplyDelete
  26. 謝謝您!!我用GMAIL寄給您囉!!您收收到....真是麻煩您了!!

    ReplyDelete
  27. 您好~想請問一下,我的每篇文章下方,LinkWithin所列出的相關文章只呈現剛註冊那時候的6~7篇文章,新的與舊文章都抓出不來......這是怎麼回事?? 經過爬文後也有人遇到跟我同樣的問題~ 請幫個忙~ 感激不盡~

    相同人的遭遇..如下
    http://wen730716.pixnet.net/blog/post/30444212

    我的部落格
    http://blog.yam.com/art2010

    ReplyDelete
  28. 請問,我的部落格裝了這個外掛之後
    沒有圖片的文章,LinkWithin都會預設去抓我的某張部落格貼紙~(一張叫禁虐的)
    不知道有方法可以改嗎?
    我的部落格網址:http://coffeebug.pixnet.net/blog
    謝謝

    ReplyDelete
  29. 給樓上兩位,這個LinkWithin能做的調整真的很少
    所以基本上只有兩個辦法能解決,一個事順其自然,一個是寫信給他XD
    不好意思幫不上忙 :(

    ReplyDelete
  30. 這一篇分享解決了我的問題~
    非常謝謝你!

    ReplyDelete
  31. 不好意思,請問一下
    有沒有辦法讓它顯示在留言的上方,就是說能不能讓facebook的讚顯示在它上面 ?

    (可能要請您到我的網站看一下,才了解我在說什麼,謝謝 !
    網址 : http://twer40.blogspot.com/

    ReplyDelete
  32. to 彥志 :
    我看了一下,應該就只是擺放位置的問題吧,你把你的facebook like button搬個位置應該就好了。

    ReplyDelete
  33. 不好意思 我試了還是不行耶
    首頁一樣有貼出來,還請有空的時候幫忙看一下
    接下來要連續出門幾天 可能沒辦法及時回應 請多包涵

    http://nikolu313.blogspot.com/

    ReplyDelete
  34. 如果搞不定的話,現在Linkwithin有對blogger平台做了方便的安裝功能,到這邊 http://www.linkwithin.com/learn 打你的資料,然後按Get Widget,下面就會教你怎麼弄了。

    ReplyDelete
  35. 不好意思順便問一下,我想把FB的讚也加進來,不過GOOGLE找的到的教學都裝不進去,顯示語法不對,能不能順便請教一下。

    ReplyDelete
  36. Get Widget 我有用過, 沒辦法ADD 囧 看來只好讓他在首頁也顯示了。我查了一下 這語法應該是沒問題才對...

    ReplyDelete
  37. FB的話,可以參考這篇
    http://www.died.tw/2010/09/facebook-social-plugins-like-button.html
    linkwithin的話,看起來你是要做成在文章內才會有,我有用黃色字標起來的語法要注意。

    ReplyDelete
  38. 不好意思,我用你的語法後按存檔結尾的:if會不見
    雖然我有用/head>夾住,但還是出不來,
    用原版可以,
    但首頁會出現,
    我的blog:http://blog.yam.com/gg2352001 ,
    請幫我看看

    ReplyDelete
  39. 的語法是blogger用的,你是yam的blog應該不行
    可以試著把黃色那段拿掉,應該就有效果了

    ReplyDelete
  40. 非常感謝你的分享,這是我找到目前為此最好用又最好懂得一個,真是太感謝你啦!

    ReplyDelete
  41. 不好意思…我想問….我已將語法貼上…
    但沒有反應..沒show圖出來~!><
    不知會否知道是什麼問題??

    http://4everkeepfit.blogspot.com/

    ReplyDelete
  42. 我想有可能是你的文章還太少,過段時間,文章多點再看看吧

    ReplyDelete
  43. 哈哈..其實我都係記錄下我的無聊野...但見咁樣幾得意..試下..多謝你呀~!!!

    ReplyDelete
  44. This comment has been removed by the author.

    ReplyDelete
  45. 我遇到的問題是只要選擇顯示5個文章,就沒有辦法圖文一起顯示,而且我每篇文章都是一樣相關文章,怎麽囘事啊?http://rubyoxy.blogspot.com/

    ReplyDelete
  46. to 張郁汝 :
    你可以試著用 Link Within 的plugin , 在選擇部落格類別是blogger後,它會有個教學跟你說怎麼加。

    ReplyDelete