2014年5月18日

[小工具]Blogger 相關文章 V2__安裝懶人包

A+
舊版相關文章」的安裝方式稍微麻煩、複雜一些,如果對 Blogger 範本的操作不太熟的讀者,可能就無法安裝成功。因此,這個新版本改成安裝懶人包的方式,算是一個步驟就能完成安裝,相信不會再有安裝失敗的情形發生。

另外,WFU BLOG 的工具更新不一定會有版本號,但這個相關文章使用了 V2 的版本號,代表有重大變革,因此稍後會有詳細介紹。

有了這些新的功能,此版本可說是 Blogger 平台功能最強的「相關文章」工具,其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例;而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。







以上範例網頁顯示的是裁切成正方形的 90x90 (px) 縮圖效果。



一、V2 版的特色及提醒


1. 抽樣方式進化

舊版抽樣的母體,為每個標籤近期的 N 篇文章(可自訂);新版的抽樣母體不必再額外設定,會從每個標籤的所有文章來抽樣 → 這代表年代再久遠的文章都有機會現身。

順帶一提,LinkWithin 雖掛名 "相關文章" 工具,其實抽樣的文章多半不相關,若掛名 "隨機文章" 比較恰當。


2. 任意尺寸縮圖進化

舊版任意尺寸縮圖的技術比較不成熟,選擇保持原圖比例時,當寬度固定後,每張縮圖的高度會不一致;新版的任意尺寸縮圖,不但原圖比例能保持,也能裁切成任意尺寸的縮圖,讓版面保持一致、美觀


3. 圖片可在大陸顯示

根據「讓大陸讀者看到 Picasa 圖片」的原理,縮圖的通訊協定一律轉換為大陸可讀取的 https


4. 更多相關文章功能

新版的此功能,版面改的比較簡潔、直覺;按下「更多相關文章」按鈕,便會重新篩選出一組新的相關文章。


5. CSS 可自訂

新版所有區塊的 CSS 全部開放自訂。


另外,有兩點注意事項需要先瞭解一下:



二、安裝程式碼


安裝過舊版相關文章的話,請先將舊版程式碼完整移除。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. CSS 樣式

請到後台「範本」→「編輯 HTML」,搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/* 相關文章2 */
.rltPost2_bar { /* 標題欄 */
}
.rltPost2_caption { /* 標題文字 */
font-size: 16px;
font-weight: bold;
line-height: 20px;
}
.rltPost2_allPost { /* 相關文章區塊 */
display: table-row;
}
.rltPost2_post { /* 個別文章區塊 */
padding: 5px;
display: table-cell;
}
.rltPost2_post:hover {
background: #ecf5ff;
text-decoration: none;
}
.rltPost2_post:hover .rltPost2_picFrame {
border: 1px solid transparent;
}
.rltPost2_picFrame{ /* 圖片外框 */
padding: 2px;
border: 1px solid #ddd;
}
.rltPost2_pic { /* 圖片 */
border-radius: 5px;
}
.rltPost2_title { /* 文章標題 */
font-size: 13px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rltPost2_more { /* 更多文章按鈕 */
vertical-align: middle;
display: table-cell;
font-size: 60px;
}
.rltPost2_more:hover {
background: #ecf5ff;
}
</style>



2. 主程式碼

接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


請跳到下個段落看如何修改參數。



三、修改參數


如果想要自訂參數的話,請對照程式碼行號──

E:顯示相關文章的數量(例如設為 4 代表最多顯示 4 篇,若該篇文章的標籤,沒有足夠的相關文章,則不一定能顯示到 4 篇)

F:設定縮圖的寬度

G:設定縮圖的高度

H:建議不要變更預設值,"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形,那麼參數改為 "N" 的話,代表縮圖強制從原圖變形為指定的尺寸。

I:相關文章工具的標題文字

J:可自訂 "更多相關文章" 按鈕的字元或圖示,也可使用 http 開頭的圖片網址。

K:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。

2014.7.11 更新:以下限制全部刪除,更新程式碼後,目前已不需要限制圖片網址的格式 → 請特別注意紅字部份的參數,在圖檔名稱之前的參數 "s????"(或其他各種英文混合數字的參數),請務必改成 "s72-c"。不清楚原理的話,可參考「PICASA 圖示製作技巧」→「一、PICASA 圖片規則」。

舉個簡單的例子,最常看到的 PICASA 圖片網址型態為 http://.../s1600/wfu.jpg → 請改為 http://.../s72-c/wfu.jpg

L:如果希望這個小工具出現在留言區塊之前的話,那麼不必變動此參數;如果是非官方範本、或想擺放在自訂位置,請更改本行參數──
  • 如果要填入區塊的 id,請填入 "#" + id 名稱,例如 "#related-post"。
  • 如果要填入區塊的 class,請填入 "." + class 名稱,例如 ".related-post"。

R:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。


預設參數將顯示裁切成 120x80 (px) 的長方形縮圖,類似本文留言區塊上方的相關文章效果(或是下圖)。




想看正方形縮圖效果可前往範例網頁:




四、修改 CSS / 設定文章標題高度


如果想要自訂 CSS 的話,請對照 CSS 區塊的綠字提示,即可找到對應的區塊來修改參數。

特別提出一點,/* 文章標題 */ 這個區塊設計了特別的參數 -webkit-line-clamp: 3,如果是 Chrome 家族的瀏覽器,文章標題預設最多顯示三行,超過會顯示 "...",可以用來控制文章標題的高度,讓版面美觀。



五、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: "相關文章推薦" 的大標題有時候會顯示不出來,有時候可以,不知道可能是哪裡有問題呢?

Ans: 有兩種可能:
  • 該篇文章的標籤沒有其他文章,就無法產生相關文章。
  • 可能是留言 #7 我回覆的狀況,縮圖有時能抓到有時抓不到 → 這是原始版本的 bug,已經更新了程式碼 R 行的 js 檔內容,如果曾自行上傳 js 檔到自己的 google drive,請更新自己的 js 檔即可。

Q2: 安裝以後出現第一格跑掉的情況(縮圖尺寸變得很寬),調了很久找不出問題所在,求救...

Ans: 看了一下第一張圖,原來你的"無縮圖的替代圖片"的網址長這樣:https://lh6.googleusercontent.com/-Fl0nYrOVF_s/UjK6m_-b_AI/AAAAAAAAGVc/sl7gYi5Cw88/s300-no/no_img.gif → 請參考程式碼 K 行的說明,將 "s300-no" 的字串改為 "s72-c" 即可~


Q3: 我昨天換了圖源(為了增加專頁的瀏覽量)之後,「相關文章」都抓不到圖片,只能顯示預設圖片,不知道為什麼?

Ans: 抓不到圖片表示部落格 feed 抓不到縮圖資料,可能性有很多種,圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖,最簡單的方法是文章裡第一張圖片,從後台編輯文章的畫面上傳,就絕對抓得到了。

另外感謝留言 #45 Julius Zhan 回報,目前從 PICASA 網路相簿進入後,取得的圖片網址格式全面改為 sxxx-Icxx 這樣的格式,此格式將無法改變參數來調整尺寸,會讓這個工具的縮圖功能失效,因此請避免從 PICASA 網路相簿取得圖片網址。

P.S. 同樣的一張圖片,G+ 相片取得的網址格式仍然正常,因此 G+ 相片的圖片網址可用在本工具。


Q4: 我某些文章可以顯示相關文章、某些文章不行?

Ans: 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+, 之外,注意到你的標籤使用了 "#",也請不要使用這個字元,相關文章就能正常顯示了。


Q5: 安裝了以後,無法顯示「相關文章」?

Ans: 有兩種可能:
  • 請參考「一、V2 版的特色及提醒」→「第1點」來瞭解這個工具的原理,文章尚未設定標籤、或是該文章的標籤都沒有其他文章的話,將無法產生相關文章。
  • 請參考「二、安裝程式碼」→「2. 主程式碼」→「注意事項」,將程式碼 R 行的 js 檔進行分流,否則 js 會因流量限制可能無法執行。


Q6: 能否在文章頁面才顯示「相關文章」,其他頁面不要出現?

Ans: 請在「二、安裝程式碼」→「2. 主程式碼」這部分的程式碼,使用頁面判斷式即可,最前面加入這行:

<b:if cond='data:blog.pageType == "item"'>
最後面加入這行:

</b:if>


更多實用工具:

103 則留言:

  1. 看到發更新版立刻更新了! 這版本更棒了^^ 謝謝你啊!!

    回覆刪除
  2. <4517970841166169370>(以上內容請勿刪除,從括號之後開始留言)參觀了一下你的安裝畫面,結果看到某篇文章,當沒有任何相關文章時,版面會有點走樣...@@"
    趕緊改一下 code,現在正常了 :)

    回覆刪除
  3. 我換成這版的了,但反而圖片有些出不來耶。之前上一版的都出得來。是哪裡出了問題嗎?我照片一直都放在picasa

    回覆刪除
  4. <8079066116235490685>(以上內容請勿刪除,從括號之後開始留言)看了一下,原來你的圖片有些已經是 https 協定, 所以我的置換網址字串部份沒寫好,已經修正這個 bug、並更新了 js 檔,因此請刪除你 google drive 的 js 檔,並重新上傳即可~

    回覆刪除
  5. <2929615936107656519>(以上內容請勿刪除,從括號之後開始留言):)

    回覆刪除
  6. <8281071252990675472>(以上內容請勿刪除,從括號之後開始留言)謝謝,非常成功,比linkwithin還好用!

    回覆刪除
  7. <8985965662449757324>(以上內容請勿刪除,從括號之後開始留言)不客氣~也謝謝你的狀況回報! :)

    回覆刪除
  8. 還是會有問題
    Youtube 縮圖跟上一版一樣不會與照片縮圖格式統一

    第一個問題就 Youtube
    http://juliuszh.blogspot.com/2014/05/14k.html
    找這篇比較短
    要在這個分類下重排文章組合會有幾篇只有放 Youtube 沒放照片的文章
    只要是 Youtube 的縮圖都會跟照片縮圖格式不同

    第二個問題是
    案程式碼去改範本原作者標籤還是看不到 @_@a
    右上角沒有 Related Posts 2

    回覆刪除
  9. <5162844655712387782>(以上內容請勿刪除,從括號之後開始留言)請給我一篇縮圖是 youtube 的文章網址,因為我按了很多次「更多相關文章」,也看不出哪篇是 youtube...@@"

    第二個問題不算問題,有興趣再私訊討論囉~

    回覆刪除
  10. <5525830130056852630>(以上內容請勿刪除,從括號之後開始留言)
    直接做一個 debug 連結好了
    00:相關文章頁面
    http://juliuszh.blogspot.com/2014/05/test-00.html
    01 ~ 03:都只放 Youtube
    04:只放圖片

    所以第二個問題是原本程式碼裡就沒有囉?

    回覆刪除
  11. <9113133688387703560>(以上內容請勿刪除,從括號之後開始留言)1. 我看了含 youtube 文章的 feed,原來那些縮圖並非放在 picasa,所以無法裁切圖片 → 所以我改了一下 CSS,讓 youtube 縮圖能置中,至少版面比較好看~

    2. 謝謝 julius 的測試頁面,我發現了一個大 bug(就是你描述的有時能抓到縮圖,有時抓不到)→ 已修正程式碼,現在應該正常了~

    回覆刪除
  12. <6222878574888085641>(以上內容請勿刪除,從括號之後開始留言)
    辛苦了,感謝 <(_ _)>

    回覆刪除
  13. Wayne大,謝謝你特地到blog來通知,更新了,謝謝熱心分享。

    回覆刪除
  14. 版主您好
    非常感謝提供這個功能,我已經成功安裝了。只是有個小問題,就是"相關文章推薦"的大標題有時候會顯示不出來,有時候可以,不知道可能是哪裡有問題呢?

    回覆刪除
  15. <1676223946972060656>(以上內容請勿刪除,從括號之後開始留言)有兩種可能:1.該篇文章的標籤沒有其他文章,就無法產生相關文章。
    2. 可能是留言 #7 我回覆的狀況,有時能抓到有時抓不到 → 已經更新了程式碼 R 行的 js 檔內容,如果曾自行上傳的自己的 google drive,請更新自己的 js 檔即可。

    回覆刪除
  16. http://lonloninn.blogspot.tw/2014/05/blog-post.html

    我安裝一下以後沒出現,可以幫我找一下問題所在嗎? Orz

    要樣板檔的話我可以傳給大大

    回覆刪除
  17. <2835724622534515443>(以上內容請勿刪除,從括號之後開始留言)因為你用的不是官方樣板,大概用 chrome 的開發人員工具看了一下,整個 .post-footer .post-footer-line-1 .post-footer-line-2 .post-footer-line-3 都被拿去做特殊的效果,我也不清楚要怎麼處理才能不影響這個模板的效果,只能建議你改別的位置放了~(可用「chrome 的開發人員工具」找你想放的位置)

    回覆刪除
  18. Mr.WFU您好!
    使用您的懶人包,不見的相關文章又出來了!!非常謝謝!!
    不知是否還可請問,在自己的blogger裏頭,原本的廣告位置是在相關文章的下方,可是使用這個程式碼後,廣告一直維持在相關文章的上方,怎麼樣才能恢復原來廣告在下方呢?@@謝謝了!(我的相關文章是設定在點入繼續閱讀的個別文章末的位置)。

    回覆刪除
  19. <1820604343937224139>(以上內容請勿刪除,從括號之後開始留言)你好~
    1. 我看你的相關文章是在廣告上方沒錯啊~也許你已經解決了;如還有狀況的話,請再提供出問題的網址囉!

    2. 你提到 "不見的相關文章又出來了",那麼將來相關文章還是有可能消失喔!原因請看程式碼 R 行的說明,將 js 檔放在自己的 google drive 空間比較保險 ^^

    回覆刪除
  20. 大大,我自己做了一塊區域來放相關文章,安裝以後出現第一格跑掉的情況

    http://lonloninn.blogspot.tw/2014/05/blog-post.html

    調了很久找不出問題所在,求救...

    回覆刪除
  21. Wayne Fu大, 在拜讀了您相關的文章後, 真的是受益良多!!

    我想請教的是, 以Blogger來說有辦法指定文章顯示於首頁做動態文章嗎!?

    例如T客邦首頁的→http://www.techbang.com/←導覽列下方四篇文章, 在幾秒後會自己跳至下一篇並顯示文章縮圖與段落文字。

    因為我的部落格主要是提供資訊分享, 不知道這部分是否有適用的語法或CSS!?

    回覆刪除
  22. <4795214154072696169>(以上內容請勿刪除,從括號之後開始留言)有些模板有提供這樣的功能,不過我很少逛模板網站,你可能要自己google一下、或是逛逛國外模板網站了。不然就是到「Blogger中文社群」問問看,有沒有人看過這樣的模板~

    回覆刪除
  23. 感謝FU大的回答, 不過我並非要整個模板, 而是上述網址導覽列下方的動態文章那個區塊, 那文章的內容目前四篇都是WWDC 2014的文章, 想了解的單純是那個功能不知道是否能夠在Blogger上達成^^

    回覆刪除
  24. <7256490936035382515>(以上內容請勿刪除,從括號之後開始留言)看了一下第一張圖,原來你的"無縮圖的替代圖片"的網址長這樣:https://lh6.googleusercontent.com/-Fl0nYrOVF_s/UjK6m_-b_AI/AAAAAAAAGVc/sl7gYi5Cw88/s300-no/no_img.gif → 請參考程式碼 K 行,將 "s300-no" 的字串改為 "s72-c" 即可~

    回覆刪除
  25. <613219393482822365>(以上內容請勿刪除,從括號之後開始留言)

    似乎不是那個的問題耶,其他有圖片的文章出現在第一格的話也是跑掉的。

    我還是先改了,可是圖片還是跑掉的說...

    回覆刪除
  26. <613219393482822365>(以上內容請勿刪除,以下引言請自行刪減) [quote]看了一下第一張圖,原來你的"無縮圖的替代圖片"的網址長這樣:https://lh6.googleusercontent.com/-Fl0nYrOVF_s/UjK6m_-b_AI/AAAAAAAAGVc...[/quote]

    我發現原因了,因為我看了一下,那個第一格的顯示寬度是 413 ,是因為他會跑上去跟上面 標題文字 對齊。

    我自己改的話好像會動到 logo , wfu 大看能不能幫忙稍做一下修改,讓下面的第一格不會跑去跟標題文字同寬... 麻煩大大了

    回覆刪除
  27. <8618482990596767739>(以上內容請勿刪除,從括號之後開始留言)我看到你設定的區塊是 <span class="rltPost2"/> 這會造成區塊的屬性是行內(inline),或許這是造成異常的原因。

    一般設定區塊是用 div, 所以你改成 <div class="rltPost2"/> 試試看~

    回覆刪除
  28. <5409883868682756288>(以上內容請勿刪除,從括號之後開始留言)[quote]那個功能不知道是否能夠在Blogger上達成[/quote]
    只要看得到的功能,Blogger都能寫出來, 問題是有沒有人寫出來分享 ^^

    我知道你要的不是模板,不過目前你能做的,就是我上面提的那幾個步驟,看看能否找到有人分享了~

    回覆刪除
  29. <5841293068890827701>(以上內容請勿刪除,從括號之後開始留言)

    真的有用!!!原來是這個的問題

    回覆刪除
  30. <7398097881307321492>(以上內容請勿刪除,從括號之後開始留言)我也是用猜的,解決了就好~
    BTW,看到你設定了 5 篇文章,可是第五篇會超過邊界喔!所以寬度還需要再細調一下~

    回覆刪除
  31. <445536283356802433>(以上內容請勿刪除,從括號之後開始留言)

    咦,我自己看是剛剛好耶...

    我剛想說直接改短一點或改成4篇之類的,我又想到我用的是自適應版面,自己手動改寬度不管怎麼改都會不適合。

    只要自己使用的平台沒有剛好那個寬度,超出的部分都會跑出去。可能要配合自適應面板來決定每格的寬度或者是顯示幾篇文章甚至完全不顯示... 頭痛...

    回覆刪除
  32. Dear Mr.WFU
    請原諒我當天犯了不可原諒的手糾結!!我是想要廣告置放在相關文章的上方,打錯字序了!原諒我呀~~!~~實在不好意思!!可否再請您垂憐望一望…網址是http://liongirlroam.blogspot.tw/2013/05/blog-post.html#more

    回覆刪除
  33. <2778048488338215921>(以上內容請勿刪除,從括號之後開始留言)你可以在範本中搜尋 <div class='comments' id='comments'> 在這行的前一行,插入 <div id="rltPost2"/>

    然後程式碼 L 行的參數改成 "#rltPost2" 這樣就可以了

    回覆刪除
  34. <1944447089226775694>(以上內容請勿刪除,從括號之後開始留言)了解了,原來是自適應版面。我測試後發現,根據不同的螢幕寬度,你的主要區塊寬度會變動,例如正常狀況下寬度是 600+,但螢幕寬度改變後,主要區塊寬度可能變成 500+,導致第五張圖無法全部顯示。

    原本在想「相關文章」有沒有辦法做成自適應版,但是縮圖的寬度必須事先設定好,所以無論如何匯出問題。除非縮圖的寬度也必須浮動調整 → 但這也可能引發其他問題...

    我在想,也許自適應版面,只能用 http://konedreamhouse.blogspot.tw/2014/05/blog-post_31.html 類似這樣的相關文章吧?

    另外的解決方式,查查看你的自適應版面的 CSS 設定,主要區塊的寬度最小會是多少 px,用來回推縮圖的寬度應該設成多少、設幾張縮圖,這樣就沒問題了~

    回覆刪除
  35. <4055489589587405296>(以上內容請勿刪除,從括號之後開始留言)

    這兩個方法都不錯,可是就是不會寫語法才讓人困擾,不知道要怎寫成配合寬度來變動有幾格要多寬...

    感覺連結網址裡的那種方法是最棒的

    回覆刪除
  36. Dear Mr.FU:
    謝謝您!廣告置放在相關文章的上方了!!但發現為什麼“相關文章推薦“的大標題不會顯示呢?另外,本網址的右邊標題列原本是有深咖啡顏色的背景,在預覽時都可以看見,但檢視網誌時,只剩下看不清楚的淡粉色標題字,為什麼會這樣呢?

    回覆刪除
  37. <2678331321605960691>(以上內容請勿刪除,從括號之後開始留言)如果要用本篇這個小工具的話,也許設成 120px 寬、顯示 4 篇文章,是最保險的~不然只好去 google 哪裡有那種從上排到下的相關文章了...

    回覆刪除
  38. <5817863726264826620>(以上內容請勿刪除,從括號之後開始留言)你提的兩件事我都看得到喔~「相關文章推薦」標題看得到,右邊標題列我看也是深咖啡顏色的背景!

    回覆刪除
  39. 有個問題
    就是標題如果有括號例如
    (XXXXXXXXXX)
    不會斷行,會整個括號包含內容塞成一行
    Linkwithin跟無覓卻沒這問題
    這要怎麼修改

    回覆刪除
  40. <3769189506549039883>(以上內容請勿刪除,從括號之後開始留言)可以在標題區塊自行加 CSS 語法來強制斷行,例如 word-break: break-all;

    回覆刪除
  41. 剛剛發現一個奇妙的 bug

    只有在這篇文章的時候
    相關文章的標頭不會出現

    http://lonloninn.blogspot.tw/2014/05/blog-post.html

    回覆刪除
  42. <5422572058979477821>(以上內容請勿刪除,從括號之後開始留言)你設定的標頭是「你可能有興趣的文章」嗎?我有看到喔,然後那篇文章我看到有四篇相關文章~

    回覆刪除
  43. <5235117260387994901>(以上內容請勿刪除,從括號之後開始留言)

    見鬼了 昨天看消失 今天看又出現 QQ

    回覆刪除
  44. <8539963252612739379>(以上內容請勿刪除,從括號之後開始留言)呵呵~瀏覽器偶爾也是會出錯的

    回覆刪除
  45. Fu 大,我昨天換了圖源(為了增加專頁的瀏覽量)之後,「相關文章」都抓不到圖片,只能顯示預設圖片,不知道為什麼?有解嗎?

    回覆刪除
  46. <8682980094396974572>(以上內容請勿刪除,從括號之後開始留言)抓不到圖片表示部落格 feed 抓不到縮圖資料,可能性有很多種,圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖,最簡單的方法是文章裡第一張圖片,從後台編輯文章的畫面上傳,就絕對抓得到了。

    回覆刪除
  47. 想請問一下 雖然成功了
    可是過了沒多久相關文章會不定時消失
    還要重新才裝一次才會顯示
    有這樣的問題嗎@@?

    回覆刪除
  48. <773178311777292482>(以上內容請勿刪除,從括號之後開始留言)請留下出問題的頁面網址,才能看是什麼問題.

    回覆刪除
  49. 下載這個 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js 并放在中國可直接訪問的服務器上,即使是綁定域名的 Blogger 站點上整個<div id="rltPost2"/>均不顯示,而直到掛上 VPN 代理。

    回覆刪除
  50. <7124985091630618297>(以上內容請勿刪除,從括號之後開始留言)真是不好的消息... related-post-2-140516-min.js 這個檔案呼叫了 jquery 檔,網址為 http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js → 難道這代表 googleapis.com 這個網域也會被擋..><

    看來 blogger 要成功被大陸地區訪問真是困難重重,Bin 請試試在 related-post-2-140516-min.js 裡面搜尋這個 jquery 檔,然後將此檔連結置換為可訪問的服務器,理論上應該就可以了。

    回覆刪除
  51. 請問一下只能顯示單行嗎? 假如一行可以顯示4個,我用8個的話會跑到裡面去,不會排成4*2的樣子。

    回覆刪除
  52. <6010325198591287452>(以上內容請勿刪除,從括號之後開始留言)可以使用舊版程式碼,或改循
    客製功能」管道。

    回覆刪除
  53. 想問一下,如果想使用V2的相關文章但又不會使用到縮圖的話,有沒有辦法修改呢?雖然這點V1可以做到,但在其他點上我很喜歡V2 ORZ。

    回覆刪除
  54. <5083571932335983883>(以上內容請勿刪除,從括號之後開始留言)我都忘了 V1 能不能做到你說的功能,不過沒了縮圖,這工具好像也沒什麼意義,不如直接用最早的 Abin 版本就好。

    或許你可以裝「系列文」功能,在本站找找吧~

    回覆刪除
  55. <7255958773672806933>(以上內容請勿刪除,從括號之後開始留言)

    我記錯了,是系列文章才對XD!不過系列文章我個人不算太喜歡就是了,最後還是使用了相關文章的V2版本。因為這個實在太美了,即使沒封面圖也得XD!(最多更改一下無縮圖那個位置罷了w)

    回覆刪除
  56. <5939998517377667471>(以上內容請勿刪除,從括號之後開始留言)兩個程式的用途不同,如果知道怎麼使用「系列文」的話,他的功效遠大於「相關文章」~ ^^

    回覆刪除
  57. 為什麼我使用了分流,還是無法看到相關文章。

    回覆刪除
  58. <4964300786756987974>(以上內容請勿刪除,從括號之後開始留言)麻煩請先閱讀「提問注意事項」,附上相關資訊~

    回覆刪除
  59. 不好意思,這是我用了你的方法,先下載JS檔,再把檔存到自己的GOOGLE主機:https://googledrive.com/host/0Bw7tKdVBnZ2ta25Gc0E3R2dsMEU/related-post-2-140516-min.js

    但BLOG裡只出現「相關文章推薦 :」這個字眼,下面沒有任何圖片。

    回覆刪除
  60. <2116608881296457099>(以上內容請勿刪除,從括號之後開始留言)沒有你的相關網址,我也無從得知是什麼情形。如果能先仔細看「提問注意事項」,就不會像現在經過四個來回了,還無法開始解決問題囉~

    回覆刪除
  61. 不好意思。因為我的BLOGGER需要在私密中改版,所以要先給你發出邀請才能讓你看到?不如我們在EMAIL裡進行對談,我也想知道如果要找你設計網頁,大約要多少錢。

    回覆刪除
  62. <5585004830206851433>(以上內容請勿刪除,從括號之後開始留言)好的,請參考導覽列上的連結「私人諮詢 客製功能」,從聯絡表單與我聯繫即可。

    回覆刪除
  63. <2671990532524086563>(以上內容請勿刪除,從括號之後開始留言)

    呃,已經將 http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js 替換為 http://ajax.useso.com/ajax/libs/jquery/1.8.2/jquery.min.js 還是不能直接顯示,開了 vpn 才正常顯示。目前使用 http://ypmb.blogspot.com/2014/02/add-attractive-stylish-related-post.html 提到的方法

    回覆刪除
  64. <3931768467416522841>(以上內容請勿刪除,從括號之後開始留言)香港朋友企業號前陣子告知,大陸從 (六三+六五)/2 之前就已經封鎖 google 相關伺服器至今,而這個相關文章不但用的是 Blogger 上傳的 PICASA 圖片,而且網址還換成 https,不曉得是否因為如此,更是被大陸封鎖~

    BTW,看了你裝的相關文章,其原理是抓同標籤的最新六篇文章。

    回覆刪除
  65. 除了 &<>@!+,#

    加入 / 的標籤也不行喔

    回覆刪除
  66. <4965797551658121314>(以上內容請勿刪除,從括號之後開始留言)謝謝補充,"/" 在網址有特殊作用,的確也不能使用這個符號。

    回覆刪除
  67. 敢懈樓主提供這麼好的工具,也不再怕萬一原本使用網站收了就又得重弄
    不過我的BLOG點各月的「網誌存檔」(我改標題為「各月網誌彙整」)時候
    相關文章就會直接在頁面顯示....這點感覺很不美觀
    在標籤或搜尋狀況下都沒問題,就唯獨網誌存檔點下去會這樣
    不知道有沒有甚麼好方法能解決?

    回覆刪除
  68. <6537769998554286292>(以上內容請勿刪除,從括號之後開始留言)你好,原來有這樣的情形,要解決也不難,使用判斷式就行了,可參考「Blogger 頁面判斷語法範例說明」http://www.wfublog.com/2013/12/blogger-pagetype-example.html → 「四、在文章頁面才顯示的小工具」,在主程式碼的前後使用判斷式,限制這個工具只在文章頁面出現即可。

    回覆刪除
  69. <7511039253580171637>(以上內容請勿刪除,從括號之後開始留言)感謝回應,修改之後已修正這個問題

    回覆刪除
  70. 目前相關文章只會出現在網頁版,手機版則無法呈現,這有解嗎?

    回覆刪除
  71. <3945042137302898343>(以上內容請勿刪除,從括號之後開始留言)官方行動版範本任何工具都無法安裝的,只有使用自訂行動版,才能安裝外掛。

    如果要自訂行動版,可參考本站標籤「行動版」的相關文章,近期我也會發佈一系列行動版實作的心得。

    回覆刪除
  72. 我想要更改的超連結屬性,我想要直接連過去,不需要另外開一個新分頁。
    這個部分要從哪裡去修改?

    回覆刪除
  73. <4985601041224828134>(以上內容請勿刪除,從括號之後開始留言)這個免費版無法修改你提到的另開視窗功能

    回覆刪除
  74. <5973009250536587792>(以上內容請勿刪除,從括號之後開始留言)
    所以要「付費」是嗎? 請開價吧~~

    回覆刪除
  75. <1256537262962328539>(以上內容請勿刪除,從括號之後開始留言)之前提供過諮詢頁面的連結了,請用諮詢頁面的聯絡表單聯繫。

    回覆刪除
  76. 不好意思請問一下最近在程式上有在做什麼 debug 之類的嗎?
    這個月的文章縮圖全都跑不出來了 Orz

    在這裡發現的
    http://fdaert.blogspot.com/
    需要請您看一下問題出在哪了
    確定不是單一本網誌會發生這樣情形

    回覆刪除
  77. <103068202970455051>(以上內容請勿刪除,從括號之後開始留言)的確部分圖片無法顯示,但不清楚你的圖片是否有開放權限,因為無法顯示的圖片,都是修改 picasa 網址參數、來改變尺寸後,才無法顯示的,請檢查一下這些圖片是如何產生的?

    回覆刪除
  78. <1237075628559609755>(以上內容請勿刪除,從括號之後開始留言)
    權限問題應該是可以排除掉
    同一本相簿之前的圖片同樣做法都能顯示縮圖
    這次發生的問題很詭異
    有一個現象是
    預設一個看不到的圖片時
    一般來說前面的圖片抓不到的話會顯示預設圖片的縮圖
    而我這次的現象是這張圖片放在其他張最後面不會顯示
    但把預設圖片它那段碼放在文章最前面則可以顯示

    至於圖放上 picasa 相簿的方式全都是透過 picasa 程式上傳的照片
    基本上也不太可能是這個原因所造成的
    沒有產生縮圖的文章都是和以前會產生縮圖的文章一樣的做法
    我也不知道是怎麼造成這種問題
    只能回報一下狀況現象給您參考而已了

    感謝幫忙看問題 <(_ _)>

    回覆刪除
  79. <8491712093603503584>(以上內容請勿刪除,從括號之後開始留言)原本大概看一下有問題的圖片,網址參數好像是 "s600-ic64" 類似這樣(我不確定),因為你已經修正圖片,網址參數成為 "s600" 這確定是沒問題的圖片。

    至於為何是類似 "s600-ic64" 這樣的格式,原本猜測是權限的關係,既然確定不是的話,那就不知是何種情況下產生這種網址,只好請以後複製圖片網址時,注意什麼情境會產生這種格式的網址,然後避免這樣的情境了。

    因為這種情況出現的比例不高,暫時不會針對特殊情況修改程式了。

    回覆刪除
  80. <6752600291864054945>(以上內容請勿刪除,從括號之後開始留言)

    圖片大小後面加上 -ICXX
    好像是七月後 Picasa 改變圖片網址而產生的
    今天上傳的新照片全都有那幾個字串
    您指的是可能圖片權限的問題
    方才我特地看相簿裡四種不同權限的設定
    全部都有那些字串
    看樣子是 Picasa 有改了些什麼東西產生複製網址的方式會無法顯示縮圖
    可能還需要請您多注意一下
    我確定的是同樣做法在六月時還正常
    問題都發生在七月以後的文章才會這樣

    回覆刪除
  81. <6904894116869638056>(以上內容請勿刪除,從括號之後開始留言)感謝回報此狀況,測試了一下,進去 PICASA 後看了圖片網址,已經全面改為您提到的 sxxx-Icxx 格式 → 而這圖片網址將無法變更任何參數

    另外也測試了 G+ 相片,同樣的一張圖片,從 G+ 相片取得的圖片連結,跟 PICASA 網路相簿取得的連結是不同的,而 G+ 相片的連結可以更改參數。

    以上狀況會補充到「五、常見 FAQ」→ Q3

    回覆刪除
  82. 你好,請問可以幫我看一下我的blog的問題嗎?
    我把css和HTML都加進去了,可是沒有看到相關文章的出現?
    http://xgodgame.blogspot.tw/2015/08/blog-post_8.html

    回覆刪除
  83. <2885177665271597034>(以上內容請勿刪除,從括號之後開始留言)請參照「五、常見 FAQ」→ Q5 進行檢測

    回覆刪除
  84. 安裝了wfublog的相關文章
    出現了一個問題
    首頁雖然沒有點進文章內頁就不會顯示相關文章
    但是當點進網誌存檔的其中一個月份
    當月的所有文章下面都有一個相關文章
    但相關文章全部都會顯示同一樣的
    例如:http://anmaxop.blogspot.com/2011_09_01_archive.html

    想請問wfu大神
    這個問題是不是不能解決的?

    回覆刪除
  85. 想請問怎麼改去http://3.bp.blogspot.com/-H1dvz4lvMsE/U3WJZ4ifUeI/AAAAAAAAJcw/795pW5ukMRM/s72-c/wfublog-noimage-square.jpg
    這個讀取不了圖片時顯示這個圖片?
    能不能改成其他?
    不想顯示其他網站的地址

    回覆刪除
  86. <4812071980108234160>(以上內容請勿刪除,從括號之後開始留言)關於讓「相關文章」只在文章頁面顯示,我補充到「五、常見 FAQ」→ Q6,請按步驟進行即可。

    至於更改預設縮圖網址,修改參數那裡有詳細的說明了喔~

    回覆刪除
  87. 謝謝wfublog站長的幫忙
    雖然還是花了一個晚上的時間才看懂
    但最後還是弄好了
    真的感覺你呀

    回覆刪除
  88. Wayne Fu 大請問:我想把更多相關文章按鈕從右邊改到左邊 改JS檔就好了嗎!?

    回覆刪除
  89. <7405472741994013597>(以上內容請勿刪除,從括號之後開始留言)如果你知道怎麼改當然可以改js檔內容囉

    回覆刪除
  90. <1433651081103522181>(以上內容請勿刪除,從括號之後開始留言) 知道了.謝謝Wayne Fu大

    回覆刪除
  91. 您好,我看文章中「R:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。」然後點
    「WFU BLOG 外連 JS 變更及操作說明超連結,
    可是他跟我說交通中斷~我要去哪裡找這篇文章呢?(有搜尋到一篇類似的但是也沒看到是要下載哪一個JS ,所以有點搞不清楚) 麻煩請看看,謝謝

    回覆刪除
  92. <8068028043043142951>(以上內容請勿刪除,從括號之後開始留言)Hi hsuan,

    感謝您的回報,已修復連結。是的,「WFU BLOG 外連 JS 變更及操作說明超連結」就是你搜尋看到的第一篇。

    下載 R 行綠色字串、上傳到自己空間、並取得連結,這個流程很長,請耐心看完說明文章,沒有進行過這個流程的話,只看一次多半不會成功,多看幾次,相信你可以做到的。

    樹狀標籤 V2.1 的留言 #1 有分享他的安裝心得,可參考:http://www.wfublog.com/2016/05/blogger-tree-label-v2-title-mode.html?showComment=1464273321056#c7120871087112054282

    回覆刪除
  93. Fu 大,這個小工具很棒,我用了很久,謝謝!

    想請問:
    1) 如何點擊文章後不要開分頁/視窗?
    2) 如何隱藏 caption 的部份?

    謝謝!

    回覆刪除
  94. <7494062254714507260>(以上內容請勿刪除,從括號之後開始留言)不客氣~

    "隱藏 caption" → 讓 I 行的字串空白即可,留下兩個雙引號 ""

    "點擊文章後不要開分頁" → 這個版本看起來沒得改啊~~也許下個版本再考慮吧,或者你可以先裝「隨機文章 V2」

    其實開分頁也沒什麼不好,可以參考 http://www.wfublog.com/2014/09/html-a-tag-hyperlink-skill.html → 第一個大標題,習慣了就好 :)

    回覆刪除
  95. <4018526709695093274>(以上內容請勿刪除,從括號之後開始留言)成功啦,THX(我本來用刪去法結果沒成功 XD)

    回覆刪除
  96. ...我試過好多次都失敗..我是新手 程式碼複製貼上 JS有上傳到dropbox 都沒有顯示ㄟ0.0

    回覆刪除
    回覆
    1. 請附上失敗的文章網址喔,才能看是什麼狀況~

      刪除
  97. 請問安裝好之後,有時thumbnail會顯示,有時不會顯示。有時只顯示一則,有時全部不顯示。
    這是什麼問題。

    文章內所有文章內的第一張圖,都是jpg,已上傳到自己部落格內了。

    截圖:
    http://i.imgur.com/gP1Pmq6.jpg

    回覆刪除
    回覆
    1. 「五、常見 FAQ」都看完了嗎

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。