標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

相信在逛網站的時候，越上方的位置、越吸睛的圖片比較能吸引到目光，因此我們很常看到輪播圖片的小工具，被擺放在網頁最上方的位置。

這不是沒有道理的，根據「F 形眼球運動軌跡」，多數訪客的行為模式就是如此。

如果想推銷網站的熱門文章，那麼在網頁上方擺放輪播圖片，會是一個增加點閱率，以及讓訪客停留時間更長的好主意。於是寫了本篇的小工具，請見後續的說明及安裝方法。

點此看範例網頁

一、設計原理

1. 吸引注意力

想要吸引注意力的話，文章使用的圖片不能品質太差，最好特別挑過，建議可利用「CC0 免費圖庫搜尋引擎」，可找到許多高畫質的圖片。


2. 文章品質

這個工具並非使用隨機文章的方式，從整個網站抽樣，原因在於，既然要吸引注意力，就得特別挑出真正「高品質」的文章，也可以是網站的熱門文章。

如果用隨機抽樣的方式，那麼很可能挑出一些不具吸引力的文章，那麼也失去使用這個工具的效果。


3. 自訂口袋名單

因此，這個小工具的設定其實有些麻煩，必須手動填入抽樣的母體資料，也就是文章標題、網址、縮圖網址等等。

雖然如此，這件事跟 SEO 很類似，下的功夫比別人足，得到的效果自然勝過競爭對手。


4. 自訂圖片尺寸

如果使用 PICASA 圖床、G+ 相簿、從 Blogger 後台上傳等管道所產生的圖片，這個工具可以產生自訂尺寸的縮圖，圖片顯示效果最佳。如果使用別的圖床(如 Flickr)，那麼只能強制圖片變形為指定的尺寸。

二、安裝程式碼

1. 擺放位置

這個小工具可以放在「HTML/JavaScript」工具，然後拖曳到你想呈現的位置，例如下圖：



除了放在導覽列下方，也可拖曳到標頭的上方，視讀者的版型配置而定。


2. 安裝程式碼

請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：

以下參數修改請參照以上程式碼行號：

E：要顯示的文章數量

F~G：設定圖片的寬度、高度(px值)

J：接下來需要詳細說明──

• 第一篇文章使用的參數為紅色數字 0，第二篇文章使用的參數為紅色數字 1 (如 K 行)，之後以此類推。
• 每篇文章需要填入 "標題", "文章網址", "圖片網址" 三種字串
• 如綠字提示，字串要放在雙引號內, 每個字串彼此間用小寫逗號 "," 分隔, 最後一個字串之後不可有逗號
• 每增加一篇文章的資料，可完整複製 J 或 K 行來修改，依序放在 J、K 行之後，以避免出錯，造成程式當掉。

三、補充說明

如果要修改版面效果，請修改 CSS 這部分的參數即可。

這個小工具的程式碼不難，就開放源碼，不特別壓縮了，會修改的讀者可自行改成想要呈現的樣式。

更多網站工具：