公告版位

舊版相關文章」的安裝方式稍微麻煩、複雜一些,如果對 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> 這個字串,找到後在此字串的前一行,插入以下程式碼:

全文已移往WFU BLOG 主站,請點:「Blogger 相關文章 V2__安裝懶人包

創作者介紹

WFU BLOG

Wayne Fu 發表在 痞客邦 PIXNET 留言(68) 人氣()


留言列表 (68)

發表留言
  • 面壁王澳西諾
  • 看到發更新版立刻更新了! 這版本更棒了^^ 謝謝你啊!!
  • Wayne Fu
  • <4517970841166169370>(以上內容請勿刪除,從括號之後開始留言)參觀了一下你的安裝畫面,結果看到某篇文章,當沒有任何相關文章時,版面會有點走樣...@@"
    趕緊改一下 code,現在正常了 :)
  • Patricia
  • 我換成這版的了,但反而圖片有些出不來耶。之前上一版的都出得來。是哪裡出了問題嗎?我照片一直都放在picasa
  • Wayne Fu
  • <8079066116235490685>(以上內容請勿刪除,從括號之後開始留言)看了一下,原來你的圖片有些已經是 https 協定, 所以我的置換網址字串部份沒寫好,已經修正這個 bug、並更新了 js 檔,因此請刪除你 google drive 的 js 檔,並重新上傳即可~
  • 摩塔
  • 謝謝分享^^
  • Wayne Fu
  • <2929615936107656519>(以上內容請勿刪除,從括號之後開始留言):)
  • Patricia
  • <8281071252990675472>(以上內容請勿刪除,從括號之後開始留言)謝謝,非常成功,比linkwithin還好用!
  • Wayne Fu
  • <8985965662449757324>(以上內容請勿刪除,從括號之後開始留言)不客氣~也謝謝你的狀況回報! :)
  • Julius Zhan
  • 還是會有問題
    Youtube 縮圖跟上一版一樣不會與照片縮圖格式統一

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

    第二個問題是
    案程式碼去改範本原作者標籤還是看不到 @_@a
    右上角沒有 Related Posts 2
  • Wayne Fu
  • <5162844655712387782>(以上內容請勿刪除,從括號之後開始留言)請給我一篇縮圖是 youtube 的文章網址,因為我按了很多次「更多相關文章」,也看不出哪篇是 youtube...@@"

    第二個問題不算問題,有興趣再私訊討論囉~
  • 張新偉
  • 真的很棒!
  • Julius Zhan
  • <5525830130056852630>(以上內容請勿刪除,從括號之後開始留言)
    直接做一個 debug 連結好了
    00:相關文章頁面
    http://juliuszh.blogspot.com/2014/05/test-00.html
    01 ~ 03:都只放 Youtube
    04:只放圖片

    所以第二個問題是原本程式碼裡就沒有囉?
  • Wayne Fu
  • <9113133688387703560>(以上內容請勿刪除,從括號之後開始留言)1. 我看了含 youtube 文章的 feed,原來那些縮圖並非放在 picasa,所以無法裁切圖片 → 所以我改了一下 CSS,讓 youtube 縮圖能置中,至少版面比較好看~

    2. 謝謝 julius 的測試頁面,我發現了一個大 bug(就是你描述的有時能抓到縮圖,有時抓不到)→ 已修正程式碼,現在應該正常了~
  • Julius Zhan
  • <6222878574888085641>(以上內容請勿刪除,從括號之後開始留言)
    辛苦了,感謝 <(_ _)>
  • Patricia
  • Wayne大,謝謝你特地到blog來通知,更新了,謝謝熱心分享。
  • Joseph Chang
  • 版主您好
    非常感謝提供這個功能,我已經成功安裝了。只是有個小問題,就是"相關文章推薦"的大標題有時候會顯示不出來,有時候可以,不知道可能是哪裡有問題呢?
  • Wayne Fu
  • <1676223946972060656>(以上內容請勿刪除,從括號之後開始留言)有兩種可能:1.該篇文章的標籤沒有其他文章,就無法產生相關文章。
    2. 可能是留言 #7 我回覆的狀況,有時能抓到有時抓不到 → 已經更新了程式碼 R 行的 js 檔內容,如果曾自行上傳的自己的 google drive,請更新自己的 js 檔即可。
  • Wayne Fu
  • <2835724622534515443>(以上內容請勿刪除,從括號之後開始留言)因為你用的不是官方樣板,大概用 chrome 的開發人員工具看了一下,整個 .post-footer .post-footer-line-1 .post-footer-line-2 .post-footer-line-3 都被拿去做特殊的效果,我也不清楚要怎麼處理才能不影響這個模板的效果,只能建議你改別的位置放了~(可用「<a href="http://www.wfublog.com/2012/10/chrome-developer-tool.html" rel="nofollow">chrome 的開發人員工具</a>」找你想放的位置)
  • lingirl roam
  • Mr.WFU您好!
    使用您的懶人包,不見的相關文章又出來了!!非常謝謝!!
    不知是否還可請問,在自己的blogger裏頭,原本的廣告位置是在相關文章的下方,可是使用這個程式碼後,廣告一直維持在相關文章的上方,怎麼樣才能恢復原來廣告在下方呢?@@謝謝了!(我的相關文章是設定在點入繼續閱讀的個別文章末的位置)。
  • Wayne Fu
  • <1820604343937224139>(以上內容請勿刪除,從括號之後開始留言)你好~
    1. 我看你的相關文章是在廣告上方沒錯啊~也許你已經解決了;如還有狀況的話,請再提供出問題的網址囉!

    2. 你提到 "不見的相關文章又出來了",那麼將來相關文章還是有可能消失喔!原因請看程式碼 R 行的說明,將 js 檔放在自己的 google drive 空間比較保險 ^^
  • Andy.com
  • Wayne Fu大, 在拜讀了您相關的文章後, 真的是受益良多!!

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

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

    因為我的部落格主要是提供資訊分享, 不知道這部分是否有適用的語法或CSS!?
  • Wayne Fu
  • <4795214154072696169>(以上內容請勿刪除,從括號之後開始留言)有些模板有提供這樣的功能,不過我很少逛模板網站,你可能要自己google一下、或是逛逛國外模板網站了。不然就是到「<a href="https://plus.google.com/communities/103807083735607134704" rel="nofollow">Blogger中文社群</a>」問問看,有沒有人看過這樣的模板~
  • Andy.com
  • 感謝FU大的回答, 不過我並非要整個模板, 而是上述網址導覽列下方的動態文章那個區塊, 那文章的內容目前四篇都是WWDC 2014的文章, 想了解的單純是那個功能不知道是否能夠在Blogger上達成^^
  • Lee Bruce
  • <613219393482822365>(以上內容請勿刪除,從括號之後開始留言)

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

    我還是先改了,可是圖片還是跑掉的說...
  • Lee Bruce
  • <613219393482822365>(以上內容請勿刪除,以下引言請自行刪減) [quote]看了一下第一張圖,原來你的"無縮圖的替代圖片"的網址長這樣:https://lh6.googleusercontent.com/-Fl0nYrOVF_s/UjK6m_-b_AI/AAAAAAAAGVc...[/quote]

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

    我自己改的話好像會動到 logo , wfu 大看能不能幫忙稍做一下修改,讓下面的第一格不會跑去跟標題文字同寬... 麻煩大大了
  • Wayne Fu
  • <8618482990596767739>(以上內容請勿刪除,從括號之後開始留言)我看到你設定的區塊是 <span class="rltPost2"/> 這會造成區塊的屬性是行內(inline),或許這是造成異常的原因。

    一般設定區塊是用 div, 所以你改成 <div class="rltPost2"/> 試試看~
  • Wayne Fu
  • <5409883868682756288>(以上內容請勿刪除,從括號之後開始留言)[quote]那個功能不知道是否能夠在Blogger上達成[/quote]
    只要看得到的功能,Blogger都能寫出來, 問題是有沒有人寫出來分享 ^^

    我知道你要的不是模板,不過目前你能做的,就是我上面提的那幾個步驟,看看能否找到有人分享了~
  • Lee Bruce
  • <5841293068890827701>(以上內容請勿刪除,從括號之後開始留言)

    真的有用!!!原來是這個的問題
  • Wayne Fu
  • <7398097881307321492>(以上內容請勿刪除,從括號之後開始留言)我也是用猜的,解決了就好~
    BTW,看到你設定了 5 篇文章,可是第五篇會超過邊界喔!所以寬度還需要再細調一下~
  • Lee Bruce
  • <445536283356802433>(以上內容請勿刪除,從括號之後開始留言)

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

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

    只要自己使用的平台沒有剛好那個寬度,超出的部分都會跑出去。可能要配合自適應面板來決定每格的寬度或者是顯示幾篇文章甚至完全不顯示... 頭痛...
  • lingirl roam
  • Dear Mr.WFU
    請原諒我當天犯了不可原諒的手糾結!!我是想要廣告置放在相關文章的上方,打錯字序了!原諒我呀~~!~~實在不好意思!!可否再請您垂憐望一望…網址是http://liongirlroam.blogspot.tw/2013/05/blog-post.html#more
  • Wayne Fu
  • <2778048488338215921>(以上內容請勿刪除,從括號之後開始留言)你可以在範本中搜尋 <div class='comments' id='comments'> 在這行的前一行,插入 <div id="rltPost2"/>

    然後程式碼 L 行的參數改成 "#rltPost2" 這樣就可以了
  • Wayne Fu
  • <1944447089226775694>(以上內容請勿刪除,從括號之後開始留言)了解了,原來是自適應版面。我測試後發現,根據不同的螢幕寬度,你的主要區塊寬度會變動,例如正常狀況下寬度是 600+,但螢幕寬度改變後,主要區塊寬度可能變成 500+,導致第五張圖無法全部顯示。

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

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

    另外的解決方式,查查看你的自適應版面的 CSS 設定,主要區塊的寬度最小會是多少 px,用來回推縮圖的寬度應該設成多少、設幾張縮圖,這樣就沒問題了~
  • Lee Bruce
  • <4055489589587405296>(以上內容請勿刪除,從括號之後開始留言)

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

    感覺連結網址裡的那種方法是最棒的
  • lingirl roam
  • Dear Mr.FU:
    謝謝您!廣告置放在相關文章的上方了!!但發現為什麼“相關文章推薦“的大標題不會顯示呢?另外,本網址的右邊標題列原本是有深咖啡顏色的背景,在預覽時都可以看見,但檢視網誌時,只剩下看不清楚的淡粉色標題字,為什麼會這樣呢?
  • Wayne Fu
  • <2678331321605960691>(以上內容請勿刪除,從括號之後開始留言)如果要用本篇這個小工具的話,也許設成 120px 寬、顯示 4 篇文章,是最保險的~不然只好去 google 哪裡有那種從上排到下的相關文章了...
  • Wayne Fu
  • <5817863726264826620>(以上內容請勿刪除,從括號之後開始留言)你提的兩件事我都看得到喔~「相關文章推薦」標題看得到,右邊標題列我看也是深咖啡顏色的背景!
  • 創意小七
  • 有個問題
    就是標題如果有括號例如
    (XXXXXXXXXX)
    不會斷行,會整個括號包含內容塞成一行
    Linkwithin跟無覓卻沒這問題
    這要怎麼修改
  • Wayne Fu
  • <3769189506549039883>(以上內容請勿刪除,從括號之後開始留言)可以在標題區塊自行加 CSS 語法來強制斷行,例如 word-break: break-all;
  • Wayne Fu
  • <5422572058979477821>(以上內容請勿刪除,從括號之後開始留言)你設定的標頭是「你可能有興趣的文章」嗎?我有看到喔,然後那篇文章我看到有四篇相關文章~
  • Lee Bruce
  • <5235117260387994901>(以上內容請勿刪除,從括號之後開始留言)

    見鬼了 昨天看消失 今天看又出現 QQ
  • Wayne Fu
  • <8539963252612739379>(以上內容請勿刪除,從括號之後開始留言)呵呵~瀏覽器偶爾也是會出錯的
  • Ching Hung - HOT PoT
  • Fu 大,我昨天換了圖源(為了增加專頁的瀏覽量)之後,「相關文章」都抓不到圖片,只能顯示預設圖片,不知道為什麼?有解嗎?
  • Wayne Fu
  • <8682980094396974572>(以上內容請勿刪除,從括號之後開始留言)抓不到圖片表示部落格 feed 抓不到縮圖資料,可能性有很多種,圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖,最簡單的方法是文章裡第一張圖片,從後台編輯文章的畫面上傳,就絕對抓得到了。
  • 綿奏
  • 想請問一下 雖然成功了
    可是過了沒多久相關文章會不定時消失
    還要重新才裝一次才會顯示
    有這樣的問題嗎@@?
  • Wayne Fu
  • <773178311777292482>(以上內容請勿刪除,從括號之後開始留言)請留下出問題的頁面網址,才能看是什麼問題.
  • Wayne Fu
  • <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 檔,然後將此檔連結置換為可訪問的服務器,理論上應該就可以了。
  • Susu
  • 請問一下只能顯示單行嗎? 假如一行可以顯示4個,我用8個的話會跑到裡面去,不會排成4*2的樣子。
  • 上月美智
  • 想問一下,如果想使用V2的相關文章但又不會使用到縮圖的話,有沒有辦法修改呢?雖然這點V1可以做到,但在其他點上我很喜歡V2 ORZ。
  • Wayne Fu
  • <5083571932335983883>(以上內容請勿刪除,從括號之後開始留言)我都忘了 V1 能不能做到你說的功能,不過沒了縮圖,這工具好像也沒什麼意義,不如直接用最早的 Abin 版本就好。

    或許你可以裝「系列文」功能,在本站找找吧~
  • 上月美智
  • <7255958773672806933>(以上內容請勿刪除,從括號之後開始留言)

    我記錯了,是系列文章才對XD!不過系列文章我個人不算太喜歡就是了,最後還是使用了相關文章的V2版本。因為這個實在太美了,即使沒封面圖也得XD!(最多更改一下無縮圖那個位置罷了w)
  • Wayne Fu
  • <5939998517377667471>(以上內容請勿刪除,從括號之後開始留言)兩個程式的用途不同,如果知道怎麼使用「系列文」的話,他的功效遠大於「相關文章」~ ^^
  • 楊梓燁
  • 為什麼我使用了分流,還是無法看到相關文章。
  • Wayne Fu
  • <2116608881296457099>(以上內容請勿刪除,從括號之後開始留言)沒有你的相關網址,我也無從得知是什麼情形。如果能先仔細看「<a href="http://www.wfublog.com/2014/08/where-ask-blogger-question-skill.html" rel="nofollow">提問注意事項</a>」,就不會像現在經過四個來回了,還無法開始解決問題囉~
  • 楊梓燁
  • 不好意思。因為我的BLOGGER需要在私密中改版,所以要先給你發出邀請才能讓你看到?不如我們在EMAIL裡進行對談,我也想知道如果要找你設計網頁,大約要多少錢。
  • Wayne Fu
  • <3931768467416522841>(以上內容請勿刪除,從括號之後開始留言)香港朋友企業號前陣子告知,大陸從 (六三+六五)/2 之前就已經封鎖 google 相關伺服器至今,而這個相關文章不但用的是 Blogger 上傳的 PICASA 圖片,而且網址還換成 https,不曉得是否因為如此,更是被大陸封鎖~

    BTW,看了你裝的相關文章,其原理是抓同標籤的最新六篇文章。
  • 沈欣融
  • 除了 &<>@!+,#

    加入 / 的標籤也不行喔
  • Wayne Fu
  • <4965797551658121314>(以上內容請勿刪除,從括號之後開始留言)謝謝補充,"/" 在網址有特殊作用,的確也不能使用這個符號。
找更多相關文章與討論