不少讀者都詢問過「相關文章 V2 (含縮圖功能)」能否裝在手機版，實際上如果真的這麼做的話，一定馬上就破版，因為行動裝置有著各種不一樣的螢幕寬度，加上直立、橫躺的操作，各種專為行動版而設計的工具一定要符合 RWD 才行。除此之外，V2 的版面也不適合做成 RWD，如果要將「相關文章 + 縮圖」放在行動裝置，也許擺設上需要 "左半部縮圖、右半部文章標題" 這樣的配置。
因此這個為行動版設計的「相關文章 V4」，就是採取這樣的版面。如果你的行動版網站，不想只放純文字的相關文章，那麼可以考慮 V4 這個版本。
<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>
(圖片出處: pexels.com)
一、相關文章特點
1. V4 介紹
如果沒用過本站相關文章工具的讀者，以下簡單介紹一下 V4 的特點：
- 自動從該篇文章的標籤，隨機挑選指定篇數的文章來顯示
- 可自訂縮圖尺寸
- 可自訂版面 CSS
- 需要使用 PICASA 圖床(從 Blogger 上傳)才能正常處理縮圖
下面是行動版的模擬效果圖：
2. 其他適合行動裝置的版本
以下的相關文章版本，沒有縮圖，以純文字顯示：
- Blogger 延伸閱讀
- 相關文章 V3：可手動設定，顯示多個標籤的文章。
二、準備動作
請到後台「範本」→「編輯 HTML」，游標點進範本區塊，再搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 相關文章 V4 */
.rltPost4_caption {
margin: 15px 0;
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.rltPost4_post {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-bottom: 10px;
}
.rltPost4_title {
padding-left: 10px;
font-size: 14px;
font-weight: bold;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 20px;
height: 60px;
}
</style>第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
其餘的部分，如果對 CSS 熟悉可自行修改參數。
三、安裝程式碼
接著請搜尋
以下參數修改請參照以上程式碼行號：
F：顯示相關文章的數量(例如設為 5 代表最多顯示 5 篇，若該篇文章的標籤，沒有足夠的相關文章，則不一定能顯示到 5 篇)
G：設定縮圖的寬度
H：設定縮圖的高度
I：相關文章工具的標題文字
J：文章沒有縮圖時的替代圖片，可改為自訂圖片網址(只限 PICASA 圖片)。
K：如果希望這個小工具出現在留言區塊之前的話，那麼不必變動此參數；如果是非官方範本、或想擺放在自訂位置，請更改本行參數──
- 如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#related-post"。
- 如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".related-post"。
四、聯絡表單
加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：
五、常見 FAQ
日後若有常見問題，會持續補充在此。
Q1: "相關文章推薦" 的大標題有時候會顯示不出來，有時候可以，不知道可能是哪裡有問題呢?
Ans: 可能該篇文章的標籤沒有其他文章，就無法產生相關文章。
Q2: 我昨天換了圖源（為了增加專頁的瀏覽量）之後，「相關文章」都抓不到圖片，只能顯示預設圖片，不知道為什麼？
Ans: 抓不到圖片表示部落格 feed 抓不到縮圖資料，可能性有很多種，圖床不對、格式不對、隱私權設定不對...。要讓 Blogger 抓到縮圖，最簡單的方法是文章裡第一張圖片，從後台編輯文章的畫面上傳，就絕對抓得到了。
Q3: 我某些文章可以顯示相關文章、某些文章不行？
Ans: 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+,之外，注意到你的標籤使用了 "#"，也請不要使用這個字元，相關文章就能正常顯示了。
更多實用工具：