相信在逛網站的時候，越上方的位置、越吸睛的圖片比較能吸引到目光，因此我們很常看到輪播圖片的小工具，被擺放在網頁最上方的位置。這不是沒有道理的，根據「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 這部分的參數即可。
這個小工具的程式碼不難，就開放源碼，不特別壓縮了，會修改的讀者可自行改成想要呈現的樣式。而不熟悉程式碼、想自訂功能的讀者，則請參考「客製諮詢」的內容。
更多網站工具：