
另外,WFU BLOG 的工具更新不一定會有版本號,但這個相關文章使用了 V2 的版本號,代表有重大變革,因此稍後會有詳細介紹。
有了這些新的功能,此版本可說是 Blogger 平台功能最強的「相關文章」工具,其勝過 LinkWithin 的理由可參考「舊版相關文章」→ 文章開頭的說明及舉例;而不建議安裝第三方工具的原因及影響請參考「為何部落格最好避免第三方外掛」。
(圖片出處: pexels.com)

以上範例網頁顯示的是裁切成正方形的 90x90 (px) 縮圖效果。
一、V2 版的特色及提醒
1. 抽樣方式進化
舊版抽樣的母體,為每個標籤近期的 N 篇文章(可自訂);新版的抽樣母體不必再額外設定,會從每個標籤的所有文章來抽樣 → 這代表年代再久遠的文章都有機會現身。
順帶一提,LinkWithin 雖掛名 "相關文章" 工具,其實抽樣的文章多半不相關,若掛名 "隨機文章" 比較恰當。
2. 任意尺寸縮圖進化
舊版任意尺寸縮圖的技術比較不成熟,選擇保持原圖比例時,當寬度固定後,每張縮圖的高度會不一致;新版的任意尺寸縮圖,不但原圖比例能保持,也能裁切成任意尺寸的縮圖,讓版面保持一致、美觀。
3. 圖片可在大陸顯示
根據「讓大陸讀者看到 Picasa 圖片」的原理,縮圖的通訊協定一律轉換為大陸可讀取的 https。
4. 更多相關文章功能
新版的此功能,版面改的比較簡潔、直覺;按下「更多相關文章」按鈕,便會重新篩選出一組新的相關文章。
5. CSS 可自訂
新版所有區塊的 CSS 全部開放自訂。
另外,有兩點注意事項需要先瞭解一下:
- Blogger 的縮圖功能,需要使用 PICASA 圖床(G+ 相簿)才能自動產生,因此使用其他圖床的話,這個小工具很可能無法正常顯示縮圖。無論如何,PICASA 與 Blogger 都是 Google 產品,建議參考這篇「使用 PICASA 的三大好處」,儘早改用 PICASA。
- 請參考這篇「Google Drive(js檔)疑似流量有限速? 檔案自行分流教學」,自行置換本文程式碼的 js 連結。
二、安裝程式碼
安裝過舊版相關文章的話,請先將舊版程式碼完整移除。
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
1. CSS 樣式
請到後台「範本」→「編輯 HTML」,搜尋
<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. 主程式碼
接著請搜尋
請跳到下個段落看如何修改參數。
三、修改參數
如果想要自訂參數的話,請對照程式碼行號──
E:顯示相關文章的數量(例如設為 4 代表最多顯示 4 篇,若該篇文章的標籤,沒有足夠的相關文章,則不一定能顯示到 4 篇)
F:設定縮圖的寬度
G:設定縮圖的高度
H:建議不要變更預設值,"Y" 代表縮圖會從原圖適當地裁切成指定的尺寸。如非想要讓縮圖變形,那麼參數改為 "N" 的話,代表縮圖強制從原圖變形為指定的尺寸。
I:相關文章工具的標題文字
J:可自訂 "更多相關文章" 按鈕的字元或圖示,也可使用 http 開頭的圖片網址。
K:文章沒有縮圖時的替代圖片,可改為自訂圖片網址(只限 PICASA 圖片)。
2014.7.11 更新:以下限制全部刪除,更新程式碼後,目前已不需要限制圖片網址的格式 →
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>
Q7: 網站升級為 HTTPS 後小工具失效?
Ans: 請在範本
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
更多實用工具:
看到發更新版立刻更新了! 這版本更棒了^^ 謝謝你啊!!
回覆刪除<4517970841166169370>(以上內容請勿刪除,從括號之後開始留言)參觀了一下你的安裝畫面,結果看到某篇文章,當沒有任何相關文章時,版面會有點走樣...@@"
回覆刪除趕緊改一下 code,現在正常了 :)
我換成這版的了,但反而圖片有些出不來耶。之前上一版的都出得來。是哪裡出了問題嗎?我照片一直都放在picasa
回覆刪除<8079066116235490685>(以上內容請勿刪除,從括號之後開始留言)看了一下,原來你的圖片有些已經是 https 協定, 所以我的置換網址字串部份沒寫好,已經修正這個 bug、並更新了 js 檔,因此請刪除你 google drive 的 js 檔,並重新上傳即可~
回覆刪除謝謝分享^^
回覆刪除<2929615936107656519>(以上內容請勿刪除,從括號之後開始留言):)
回覆刪除<8281071252990675472>(以上內容請勿刪除,從括號之後開始留言)謝謝,非常成功,比linkwithin還好用!
回覆刪除<8985965662449757324>(以上內容請勿刪除,從括號之後開始留言)不客氣~也謝謝你的狀況回報! :)
回覆刪除還是會有問題
回覆刪除Youtube 縮圖跟上一版一樣不會與照片縮圖格式統一
第一個問題就 Youtube
http://juliuszh.blogspot.com/2014/05/14k.html
找這篇比較短
要在這個分類下重排文章組合會有幾篇只有放 Youtube 沒放照片的文章
只要是 Youtube 的縮圖都會跟照片縮圖格式不同
第二個問題是
案程式碼去改範本原作者標籤還是看不到 @_@a
右上角沒有 Related Posts 2
<5162844655712387782>(以上內容請勿刪除,從括號之後開始留言)請給我一篇縮圖是 youtube 的文章網址,因為我按了很多次「更多相關文章」,也看不出哪篇是 youtube...@@"
回覆刪除第二個問題不算問題,有興趣再私訊討論囉~
真的很棒!
回覆刪除<5525830130056852630>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除直接做一個 debug 連結好了
00:相關文章頁面
http://juliuszh.blogspot.com/2014/05/test-00.html
01 ~ 03:都只放 Youtube
04:只放圖片
所以第二個問題是原本程式碼裡就沒有囉?
<9113133688387703560>(以上內容請勿刪除,從括號之後開始留言)1. 我看了含 youtube 文章的 feed,原來那些縮圖並非放在 picasa,所以無法裁切圖片 → 所以我改了一下 CSS,讓 youtube 縮圖能置中,至少版面比較好看~
回覆刪除2. 謝謝 julius 的測試頁面,我發現了一個大 bug(就是你描述的有時能抓到縮圖,有時抓不到)→ 已修正程式碼,現在應該正常了~
<6222878574888085641>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除辛苦了,感謝 <(_ _)>
Wayne大,謝謝你特地到blog來通知,更新了,謝謝熱心分享。
回覆刪除版主您好
回覆刪除非常感謝提供這個功能,我已經成功安裝了。只是有個小問題,就是"相關文章推薦"的大標題有時候會顯示不出來,有時候可以,不知道可能是哪裡有問題呢?
<1676223946972060656>(以上內容請勿刪除,從括號之後開始留言)有兩種可能:1.該篇文章的標籤沒有其他文章,就無法產生相關文章。
回覆刪除2. 可能是留言 #7 我回覆的狀況,有時能抓到有時抓不到 → 已經更新了程式碼 R 行的 js 檔內容,如果曾自行上傳的自己的 google drive,請更新自己的 js 檔即可。
http://lonloninn.blogspot.tw/2014/05/blog-post.html
回覆刪除我安裝一下以後沒出現,可以幫我找一下問題所在嗎? Orz
要樣板檔的話我可以傳給大大
<2835724622534515443>(以上內容請勿刪除,從括號之後開始留言)因為你用的不是官方樣板,大概用 chrome 的開發人員工具看了一下,整個 .post-footer .post-footer-line-1 .post-footer-line-2 .post-footer-line-3 都被拿去做特殊的效果,我也不清楚要怎麼處理才能不影響這個模板的效果,只能建議你改別的位置放了~(可用「chrome 的開發人員工具」找你想放的位置)
回覆刪除Mr.WFU您好!
回覆刪除使用您的懶人包,不見的相關文章又出來了!!非常謝謝!!
不知是否還可請問,在自己的blogger裏頭,原本的廣告位置是在相關文章的下方,可是使用這個程式碼後,廣告一直維持在相關文章的上方,怎麼樣才能恢復原來廣告在下方呢?@@謝謝了!(我的相關文章是設定在點入繼續閱讀的個別文章末的位置)。
<1820604343937224139>(以上內容請勿刪除,從括號之後開始留言)你好~
回覆刪除1. 我看你的相關文章是在廣告上方沒錯啊~也許你已經解決了;如還有狀況的話,請再提供出問題的網址囉!
2. 你提到 "不見的相關文章又出來了",那麼將來相關文章還是有可能消失喔!原因請看程式碼 R 行的說明,將 js 檔放在自己的 google drive 空間比較保險 ^^
大大,我自己做了一塊區域來放相關文章,安裝以後出現第一格跑掉的情況
回覆刪除http://lonloninn.blogspot.tw/2014/05/blog-post.html
調了很久找不出問題所在,求救...
Wayne Fu大, 在拜讀了您相關的文章後, 真的是受益良多!!
回覆刪除我想請教的是, 以Blogger來說有辦法指定文章顯示於首頁做動態文章嗎!?
例如T客邦首頁的→http://www.techbang.com/←導覽列下方四篇文章, 在幾秒後會自己跳至下一篇並顯示文章縮圖與段落文字。
因為我的部落格主要是提供資訊分享, 不知道這部分是否有適用的語法或CSS!?
<4795214154072696169>(以上內容請勿刪除,從括號之後開始留言)有些模板有提供這樣的功能,不過我很少逛模板網站,你可能要自己google一下、或是逛逛國外模板網站了。不然就是到「Blogger中文社群」問問看,有沒有人看過這樣的模板~
回覆刪除感謝FU大的回答, 不過我並非要整個模板, 而是上述網址導覽列下方的動態文章那個區塊, 那文章的內容目前四篇都是WWDC 2014的文章, 想了解的單純是那個功能不知道是否能夠在Blogger上達成^^
回覆刪除<7256490936035382515>(以上內容請勿刪除,從括號之後開始留言)看了一下第一張圖,原來你的"無縮圖的替代圖片"的網址長這樣:https://lh6.googleusercontent.com/-Fl0nYrOVF_s/UjK6m_-b_AI/AAAAAAAAGVc/sl7gYi5Cw88/s300-no/no_img.gif → 請參考程式碼 K 行,將 "s300-no" 的字串改為 "s72-c" 即可~
回覆刪除<613219393482822365>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除似乎不是那個的問題耶,其他有圖片的文章出現在第一格的話也是跑掉的。
我還是先改了,可是圖片還是跑掉的說...
<613219393482822365>(以上內容請勿刪除,以下引言請自行刪減) [quote]看了一下第一張圖,原來你的"無縮圖的替代圖片"的網址長這樣:https://lh6.googleusercontent.com/-Fl0nYrOVF_s/UjK6m_-b_AI/AAAAAAAAGVc...[/quote]
回覆刪除我發現原因了,因為我看了一下,那個第一格的顯示寬度是 413 ,是因為他會跑上去跟上面 標題文字 對齊。
我自己改的話好像會動到 logo , wfu 大看能不能幫忙稍做一下修改,讓下面的第一格不會跑去跟標題文字同寬... 麻煩大大了
<8618482990596767739>(以上內容請勿刪除,從括號之後開始留言)我看到你設定的區塊是 <span class="rltPost2"/> 這會造成區塊的屬性是行內(inline),或許這是造成異常的原因。
回覆刪除一般設定區塊是用 div, 所以你改成 <div class="rltPost2"/> 試試看~
<5409883868682756288>(以上內容請勿刪除,從括號之後開始留言)[quote]那個功能不知道是否能夠在Blogger上達成[/quote]
回覆刪除只要看得到的功能,Blogger都能寫出來, 問題是有沒有人寫出來分享 ^^
我知道你要的不是模板,不過目前你能做的,就是我上面提的那幾個步驟,看看能否找到有人分享了~
<5841293068890827701>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除真的有用!!!原來是這個的問題
<7398097881307321492>(以上內容請勿刪除,從括號之後開始留言)我也是用猜的,解決了就好~
回覆刪除BTW,看到你設定了 5 篇文章,可是第五篇會超過邊界喔!所以寬度還需要再細調一下~
<445536283356802433>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除咦,我自己看是剛剛好耶...
我剛想說直接改短一點或改成4篇之類的,我又想到我用的是自適應版面,自己手動改寬度不管怎麼改都會不適合。
只要自己使用的平台沒有剛好那個寬度,超出的部分都會跑出去。可能要配合自適應面板來決定每格的寬度或者是顯示幾篇文章甚至完全不顯示... 頭痛...
Dear Mr.WFU
回覆刪除請原諒我當天犯了不可原諒的手糾結!!我是想要廣告置放在相關文章的上方,打錯字序了!原諒我呀~~!~~實在不好意思!!可否再請您垂憐望一望…網址是http://liongirlroam.blogspot.tw/2013/05/blog-post.html#more
<2778048488338215921>(以上內容請勿刪除,從括號之後開始留言)你可以在範本中搜尋 <div class='comments' id='comments'> 在這行的前一行,插入 <div id="rltPost2"/>
回覆刪除然後程式碼 L 行的參數改成 "#rltPost2" 這樣就可以了
<1944447089226775694>(以上內容請勿刪除,從括號之後開始留言)了解了,原來是自適應版面。我測試後發現,根據不同的螢幕寬度,你的主要區塊寬度會變動,例如正常狀況下寬度是 600+,但螢幕寬度改變後,主要區塊寬度可能變成 500+,導致第五張圖無法全部顯示。
回覆刪除原本在想「相關文章」有沒有辦法做成自適應版,但是縮圖的寬度必須事先設定好,所以無論如何匯出問題。除非縮圖的寬度也必須浮動調整 → 但這也可能引發其他問題...
我在想,也許自適應版面,只能用 http://konedreamhouse.blogspot.tw/2014/05/blog-post_31.html 類似這樣的相關文章吧?
另外的解決方式,查查看你的自適應版面的 CSS 設定,主要區塊的寬度最小會是多少 px,用來回推縮圖的寬度應該設成多少、設幾張縮圖,這樣就沒問題了~
<4055489589587405296>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除這兩個方法都不錯,可是就是不會寫語法才讓人困擾,不知道要怎寫成配合寬度來變動有幾格要多寬...
感覺連結網址裡的那種方法是最棒的
Dear Mr.FU:
回覆刪除謝謝您!廣告置放在相關文章的上方了!!但發現為什麼“相關文章推薦“的大標題不會顯示呢?另外,本網址的右邊標題列原本是有深咖啡顏色的背景,在預覽時都可以看見,但檢視網誌時,只剩下看不清楚的淡粉色標題字,為什麼會這樣呢?
<2678331321605960691>(以上內容請勿刪除,從括號之後開始留言)如果要用本篇這個小工具的話,也許設成 120px 寬、顯示 4 篇文章,是最保險的~不然只好去 google 哪裡有那種從上排到下的相關文章了...
回覆刪除<5817863726264826620>(以上內容請勿刪除,從括號之後開始留言)你提的兩件事我都看得到喔~「相關文章推薦」標題看得到,右邊標題列我看也是深咖啡顏色的背景!
回覆刪除有個問題
回覆刪除就是標題如果有括號例如
(XXXXXXXXXX)
不會斷行,會整個括號包含內容塞成一行
Linkwithin跟無覓卻沒這問題
這要怎麼修改
<3769189506549039883>(以上內容請勿刪除,從括號之後開始留言)可以在標題區塊自行加 CSS 語法來強制斷行,例如 word-break: break-all;
回覆刪除剛剛發現一個奇妙的 bug
回覆刪除只有在這篇文章的時候
相關文章的標頭不會出現
http://lonloninn.blogspot.tw/2014/05/blog-post.html
<5422572058979477821>(以上內容請勿刪除,從括號之後開始留言)你設定的標頭是「你可能有興趣的文章」嗎?我有看到喔,然後那篇文章我看到有四篇相關文章~
回覆刪除<5235117260387994901>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除見鬼了 昨天看消失 今天看又出現 QQ
<8539963252612739379>(以上內容請勿刪除,從括號之後開始留言)呵呵~瀏覽器偶爾也是會出錯的
回覆刪除Fu 大,我昨天換了圖源(為了增加專頁的瀏覽量)之後,「相關文章」都抓不到圖片,只能顯示預設圖片,不知道為什麼?有解嗎?
回覆刪除<8682980094396974572>(以上內容請勿刪除,從括號之後開始留言)抓不到圖片表示部落格 feed 抓不到縮圖資料,可能性有很多種,圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖,最簡單的方法是文章裡第一張圖片,從後台編輯文章的畫面上傳,就絕對抓得到了。
回覆刪除想請問一下 雖然成功了
回覆刪除可是過了沒多久相關文章會不定時消失
還要重新才裝一次才會顯示
有這樣的問題嗎@@?
<773178311777292482>(以上內容請勿刪除,從括號之後開始留言)請留下出問題的頁面網址,才能看是什麼問題.
回覆刪除下載這個 https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/related-post-2-140516-min.js 并放在中國可直接訪問的服務器上,即使是綁定域名的 Blogger 站點上整個<div id="rltPost2"/>均不顯示,而直到掛上 VPN 代理。
回覆刪除<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 檔,然後將此檔連結置換為可訪問的服務器,理論上應該就可以了。
請問一下只能顯示單行嗎? 假如一行可以顯示4個,我用8個的話會跑到裡面去,不會排成4*2的樣子。
回覆刪除<6010325198591287452>(以上內容請勿刪除,從括號之後開始留言)可以使用舊版程式碼,或改循
回覆刪除「客製功能」管道。
想問一下,如果想使用V2的相關文章但又不會使用到縮圖的話,有沒有辦法修改呢?雖然這點V1可以做到,但在其他點上我很喜歡V2 ORZ。
回覆刪除<5083571932335983883>(以上內容請勿刪除,從括號之後開始留言)我都忘了 V1 能不能做到你說的功能,不過沒了縮圖,這工具好像也沒什麼意義,不如直接用最早的 Abin 版本就好。
回覆刪除或許你可以裝「系列文」功能,在本站找找吧~
<7255958773672806933>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我記錯了,是系列文章才對XD!不過系列文章我個人不算太喜歡就是了,最後還是使用了相關文章的V2版本。因為這個實在太美了,即使沒封面圖也得XD!(最多更改一下無縮圖那個位置罷了w)
<5939998517377667471>(以上內容請勿刪除,從括號之後開始留言)兩個程式的用途不同,如果知道怎麼使用「系列文」的話,他的功效遠大於「相關文章」~ ^^
回覆刪除為什麼我使用了分流,還是無法看到相關文章。
回覆刪除<4964300786756987974>(以上內容請勿刪除,從括號之後開始留言)麻煩請先閱讀「提問注意事項」,附上相關資訊~
回覆刪除不好意思,這是我用了你的方法,先下載JS檔,再把檔存到自己的GOOGLE主機:https://googledrive.com/host/0Bw7tKdVBnZ2ta25Gc0E3R2dsMEU/related-post-2-140516-min.js
回覆刪除但BLOG裡只出現「相關文章推薦 :」這個字眼,下面沒有任何圖片。
<2116608881296457099>(以上內容請勿刪除,從括號之後開始留言)沒有你的相關網址,我也無從得知是什麼情形。如果能先仔細看「提問注意事項」,就不會像現在經過四個來回了,還無法開始解決問題囉~
回覆刪除不好意思。因為我的BLOGGER需要在私密中改版,所以要先給你發出邀請才能讓你看到?不如我們在EMAIL裡進行對談,我也想知道如果要找你設計網頁,大約要多少錢。
回覆刪除<5585004830206851433>(以上內容請勿刪除,從括號之後開始留言)好的,請參考導覽列上的連結「私人諮詢 客製功能」,從聯絡表單與我聯繫即可。
回覆刪除<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 提到的方法
<3931768467416522841>(以上內容請勿刪除,從括號之後開始留言)香港朋友企業號前陣子告知,大陸從 (六三+六五)/2 之前就已經封鎖 google 相關伺服器至今,而這個相關文章不但用的是 Blogger 上傳的 PICASA 圖片,而且網址還換成 https,不曉得是否因為如此,更是被大陸封鎖~
回覆刪除BTW,看了你裝的相關文章,其原理是抓同標籤的最新六篇文章。
除了 &<>@!+,#
回覆刪除加入 / 的標籤也不行喔
<4965797551658121314>(以上內容請勿刪除,從括號之後開始留言)謝謝補充,"/" 在網址有特殊作用,的確也不能使用這個符號。
回覆刪除敢懈樓主提供這麼好的工具,也不再怕萬一原本使用網站收了就又得重弄
回覆刪除不過我的BLOG點各月的「網誌存檔」(我改標題為「各月網誌彙整」)時候
相關文章就會直接在頁面顯示....這點感覺很不美觀
在標籤或搜尋狀況下都沒問題,就唯獨網誌存檔點下去會這樣
不知道有沒有甚麼好方法能解決?
<6537769998554286292>(以上內容請勿刪除,從括號之後開始留言)你好,原來有這樣的情形,要解決也不難,使用判斷式就行了,可參考「Blogger 頁面判斷語法範例說明」http://www.wfublog.com/2013/12/blogger-pagetype-example.html → 「四、在文章頁面才顯示的小工具」,在主程式碼的前後使用判斷式,限制這個工具只在文章頁面出現即可。
回覆刪除<7511039253580171637>(以上內容請勿刪除,從括號之後開始留言)感謝回應,修改之後已修正這個問題
回覆刪除目前相關文章只會出現在網頁版,手機版則無法呈現,這有解嗎?
回覆刪除<3945042137302898343>(以上內容請勿刪除,從括號之後開始留言)官方行動版範本任何工具都無法安裝的,只有使用自訂行動版,才能安裝外掛。
回覆刪除如果要自訂行動版,可參考本站標籤「行動版」的相關文章,近期我也會發佈一系列行動版實作的心得。
我想要更改的超連結屬性,我想要直接連過去,不需要另外開一個新分頁。
回覆刪除這個部分要從哪裡去修改?
<4985601041224828134>(以上內容請勿刪除,從括號之後開始留言)這個免費版無法修改你提到的另開視窗功能
回覆刪除<5973009250536587792>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除所以要「付費」是嗎? 請開價吧~~
<1256537262962328539>(以上內容請勿刪除,從括號之後開始留言)之前提供過諮詢頁面的連結了,請用諮詢頁面的聯絡表單聯繫。
回覆刪除成功了,感謝!
回覆刪除不好意思請問一下最近在程式上有在做什麼 debug 之類的嗎?
回覆刪除這個月的文章縮圖全都跑不出來了 Orz
在這裡發現的
http://fdaert.blogspot.com/
需要請您看一下問題出在哪了
確定不是單一本網誌會發生這樣情形
<103068202970455051>(以上內容請勿刪除,從括號之後開始留言)的確部分圖片無法顯示,但不清楚你的圖片是否有開放權限,因為無法顯示的圖片,都是修改 picasa 網址參數、來改變尺寸後,才無法顯示的,請檢查一下這些圖片是如何產生的?
回覆刪除<1237075628559609755>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除權限問題應該是可以排除掉
同一本相簿之前的圖片同樣做法都能顯示縮圖
這次發生的問題很詭異
有一個現象是
預設一個看不到的圖片時
一般來說前面的圖片抓不到的話會顯示預設圖片的縮圖
而我這次的現象是這張圖片放在其他張最後面不會顯示
但把預設圖片它那段碼放在文章最前面則可以顯示
至於圖放上 picasa 相簿的方式全都是透過 picasa 程式上傳的照片
基本上也不太可能是這個原因所造成的
沒有產生縮圖的文章都是和以前會產生縮圖的文章一樣的做法
我也不知道是怎麼造成這種問題
只能回報一下狀況現象給您參考而已了
感謝幫忙看問題 <(_ _)>
<8491712093603503584>(以上內容請勿刪除,從括號之後開始留言)原本大概看一下有問題的圖片,網址參數好像是 "s600-ic64" 類似這樣(我不確定),因為你已經修正圖片,網址參數成為 "s600" 這確定是沒問題的圖片。
回覆刪除至於為何是類似 "s600-ic64" 這樣的格式,原本猜測是權限的關係,既然確定不是的話,那就不知是何種情況下產生這種網址,只好請以後複製圖片網址時,注意什麼情境會產生這種格式的網址,然後避免這樣的情境了。
因為這種情況出現的比例不高,暫時不會針對特殊情況修改程式了。
<6752600291864054945>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除圖片大小後面加上 -ICXX
好像是七月後 Picasa 改變圖片網址而產生的
今天上傳的新照片全都有那幾個字串
您指的是可能圖片權限的問題
方才我特地看相簿裡四種不同權限的設定
全部都有那些字串
看樣子是 Picasa 有改了些什麼東西產生複製網址的方式會無法顯示縮圖
可能還需要請您多注意一下
我確定的是同樣做法在六月時還正常
問題都發生在七月以後的文章才會這樣
<6904894116869638056>(以上內容請勿刪除,從括號之後開始留言)感謝回報此狀況,測試了一下,進去 PICASA 後看了圖片網址,已經全面改為您提到的 sxxx-Icxx 格式 → 而這圖片網址將無法變更任何參數
回覆刪除另外也測試了 G+ 相片,同樣的一張圖片,從 G+ 相片取得的圖片連結,跟 PICASA 網路相簿取得的連結是不同的,而 G+ 相片的連結可以更改參數。
以上狀況會補充到「五、常見 FAQ」→ Q3
你好,請問可以幫我看一下我的blog的問題嗎?
回覆刪除我把css和HTML都加進去了,可是沒有看到相關文章的出現?
http://xgodgame.blogspot.tw/2015/08/blog-post_8.html
<2885177665271597034>(以上內容請勿刪除,從括號之後開始留言)請參照「五、常見 FAQ」→ Q5 進行檢測
回覆刪除謝謝,我再試試看
回覆刪除安裝了wfublog的相關文章
回覆刪除出現了一個問題
首頁雖然沒有點進文章內頁就不會顯示相關文章
但是當點進網誌存檔的其中一個月份
當月的所有文章下面都有一個相關文章
但相關文章全部都會顯示同一樣的
例如:http://anmaxop.blogspot.com/2011_09_01_archive.html
想請問wfu大神
這個問題是不是不能解決的?
想請問怎麼改去http://3.bp.blogspot.com/-H1dvz4lvMsE/U3WJZ4ifUeI/AAAAAAAAJcw/795pW5ukMRM/s72-c/wfublog-noimage-square.jpg
回覆刪除這個讀取不了圖片時顯示這個圖片?
能不能改成其他?
不想顯示其他網站的地址
<4812071980108234160>(以上內容請勿刪除,從括號之後開始留言)關於讓「相關文章」只在文章頁面顯示,我補充到「五、常見 FAQ」→ Q6,請按步驟進行即可。
回覆刪除至於更改預設縮圖網址,修改參數那裡有詳細的說明了喔~
謝謝wfublog站長的幫忙
回覆刪除雖然還是花了一個晚上的時間才看懂
但最後還是弄好了
真的感覺你呀
Wayne Fu 大請問:我想把更多相關文章按鈕從右邊改到左邊 改JS檔就好了嗎!?
回覆刪除<7405472741994013597>(以上內容請勿刪除,從括號之後開始留言)如果你知道怎麼改當然可以改js檔內容囉
回覆刪除<1433651081103522181>(以上內容請勿刪除,從括號之後開始留言) 知道了.謝謝Wayne Fu大
回覆刪除您好,我看文章中「R:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。」然後點
回覆刪除「WFU BLOG 外連 JS 變更及操作說明超連結,
可是他跟我說交通中斷~我要去哪裡找這篇文章呢?(有搜尋到一篇類似的但是也沒看到是要下載哪一個JS ,所以有點搞不清楚) 麻煩請看看,謝謝
<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
Fu 大,這個小工具很棒,我用了很久,謝謝!
回覆刪除想請問:
1) 如何點擊文章後不要開分頁/視窗?
2) 如何隱藏 caption 的部份?
謝謝!
<7494062254714507260>(以上內容請勿刪除,從括號之後開始留言)不客氣~
回覆刪除"隱藏 caption" → 讓 I 行的字串空白即可,留下兩個雙引號 ""
"點擊文章後不要開分頁" → 這個版本看起來沒得改啊~~也許下個版本再考慮吧,或者你可以先裝「隨機文章 V2」
其實開分頁也沒什麼不好,可以參考 http://www.wfublog.com/2014/09/html-a-tag-hyperlink-skill.html → 第一個大標題,習慣了就好 :)
<4018526709695093274>(以上內容請勿刪除,從括號之後開始留言)成功啦,THX(我本來用刪去法結果沒成功 XD)
回覆刪除...我試過好多次都失敗..我是新手 程式碼複製貼上 JS有上傳到dropbox 都沒有顯示ㄟ0.0
回覆刪除請附上失敗的文章網址喔,才能看是什麼狀況~
刪除請問安裝好之後,有時thumbnail會顯示,有時不會顯示。有時只顯示一則,有時全部不顯示。
回覆刪除這是什麼問題。
文章內所有文章內的第一張圖,都是jpg,已上傳到自己部落格內了。
截圖:
http://i.imgur.com/gP1Pmq6.jpg
「五、常見 FAQ」都看完了嗎
刪除你好,以前曾經使用過你的工具
回覆刪除那時還是google drive可以外連的時候,最近才發現統統都不見了
照文章內容改過程式碼後不知為何還是沒出現,js也丟到dropbox確認可正常讀取了
可以請你幫我看看那兒設定有問題嗎?謝謝
http://xgodgame.blogspot.tw/2016/02/13_11.html
你好,看了你提供的網址,dropbox 外連的 js 檔是用 wyboard,不是相關文章的 js 喔~
刪除OK了,感謝
刪除使用http://開頭的網址可以正常顯示相關文章,改為https://則無法顯示,請問這是正常現象嗎?
回覆刪除如果有這樣的現象,請留下出問題的網址,我來看看是什麼狀況~
刪除例如: (前者可顯示,後者不行)
刪除http://simple-decor.blogspot.com/2018/07/IKEA-MINDE-Mirror.html
https://simple-decor.blogspot.com/2018/07/IKEA-MINDE-Mirror.html
看了你的網頁,此現象與本篇的工具無關,請參考「Blogger 官方免費幫自訂網址升級 HTTPS! 設定處理流程注意事項整理」:https://www.wfublog.com/2018/02/blogger-custom-domain-official-https-upgrade.html
刪除你需要檢查範本中所有連結的程式碼,都需符合 https 協定。
剛剛先確認了範本中除了html標籤保留http://外,其餘都改為https://,文章內連結也檢查過後,還是有問題;後來進入Console頁面查看,將related-post-2-140516-min.js這份檔案內http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js也改為https後就解決了,感謝您撥冗查看與協助~
刪除謝謝您的提醒~~
刪除您好,我盡量按照所有說明照著做了,但相關文章都出不來,可以幫我看看是什麼問題嗎?謝謝
回覆刪除http://crazycowcow.blogspot.com/2018/02/2017-norway.html
你好 我看到你裝了隨機文章 沒看到相關文章的 code
刪除如果要使用相關文章的話 請保留出問題的狀態 我再來看是什麼問題
您好,我把相關文章語法放回去了,昨天兩種都有試,隨機文章出得來就先留著,再請您有空時幫我看看,謝謝
刪除看了你的網頁程式報錯的地方,看起來是範本的架構不一樣,雖然你用的是官方範本,但似乎範本內容有改過,所以相關文章程式無法相容。如果你另開一個非 RWD 的官方範本,我相信可以正常執行的。
刪除您好,我好像找到問題了,但不知道如何解決。我看到報錯的地方在於div class="post-body entry-content" id="post-body-1463776815570344288 <-這是正確的,會有這一串ID。但我的只有:div class="post-body entry-content,不知為何我的"id="post-body-"不在了 @@
刪除您好,我把id弄出來了,加上label的#號去除,就能看到相關文章了,感謝您的幫忙 @@
刪除可以從乾淨的範本比對,看看該處正常應該是什麼 code,複製到你目前的範本即可。
刪除您好,我已經解決了,感謝您的幫忙 @@
刪除👍👍
刪除您好,我已經嘗試一步步做了,也自行確認您提供的自我檢測方法,但相關文章還是無法出現。可否請您幫我看看。謝謝。
回覆刪除https://draft.blogger.com/blogger.g?blogID=4574346923574503869#templatehtml
請附上出問題的網址連結喔,這個是 blogger 後台連結
刪除好的,謝謝你。https://evateng.blogspot.com/
刪除看了你的安裝程式碼,js 外連弄錯了:
刪除https://dl.getdropbox.com/s/onjwko9k45lz1wg/WYboard-emotion-min-150919.js?dl=1
1. 這個是 wyboard 的程式碼,不是本篇的喔
2. 網址有參數 ?dl=1 → 這是下載的連結,不是外連的連結喔,使用我的 dropbox 外連產生器時,要選擇「Dropbox 外連」那一個
您好,謝謝您的指點,我改成這個了 https://dl.getdropbox.com/s/onjwko9k45lz1wg/WYboard-emotion-min-150919.js ,也另開視窗確認這個連結可以開啟,但在後台置換連結後效果還是無法顯示。(連結變更後也在blog上新發一篇文章test了)可否再請您幫我看看。謝謝您。
刪除上面回答的第 1 點你沒有處理喔,js 的內容不是本篇的程式碼,請參考 R 行的說明,將 js 內容換成 R 行的連結內容 https://drive.google.com/file/d/0BykclfTTti-0cUdLeXFLWi03cjA/view
刪除您好,
回覆刪除最近發現這個小工具又失效了,能否幫忙看看是哪邊出了問題呢,謝謝。
https://simple-decor.blogspot.com/2019/07/how-to-replace-a-LED-recessed-light.html
您既然已經第二次提問了,請想辦法記得以前的安裝步驟,把 js 放到 dropbox 取得外連
刪除原來如此,因為文章裡寫說Google Drive外連功能2016年就關閉了,但是我2018年都還正常使用,以為不用換;剛剛改用Dropbox確實就可以了,感謝提醒。
刪除可是另外又發現一個問題,近期發布的文章,使用相關文章小工具都抓不到縮圖。我一直以來都是用Google相簿作圖床,難道前陣子又有什麼改變嗎?
譬如以下這個網址就抓不到縮圖:https://simple-decor.blogspot.com/2021/02/Drain-Leaking-under-Laundry-Sink-repair.html
這個就可以:https://simple-decor.blogspot.com/2020/01/electrical-socket-and-light-switch-replacement-2.html
請問您知道可能原因嗎?
可參考這則社團「常見FAQ」公告:https://www.facebook.com/groups/blogger.skill/permalink/600247980583114/ →
刪除為何新版後台上傳圖片後會變小、無法正確抓到文章縮圖:https://bit.ly/3dAKsQS
原來都是Blogger惹的禍,這要逐篇修改也太累了…
刪除