2015年6月1日 星期一

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

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

Wayne Fu 0 A+
banner-random-popular-post相信在逛網站的時候,越上方的位置、越吸睛的圖片比較能吸引到目光,因此我們很常看到輪播圖片的小工具,被擺放在網頁最上方的位置。

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

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



一、設計原理


1. 吸引注意力

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


2. 文章品質

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

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


3. 自訂口袋名單

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

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


4. 自訂圖片尺寸

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



二、安裝程式碼


1. 擺放位置

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

random-popular-post

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


2. 安裝程式碼

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


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

E:要顯示的文章數量

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

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



三、補充說明


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

這個小工具的程式碼不難,就開放源碼,不特別壓縮了,會修改的讀者可自行改成想要呈現的樣式。而不熟悉程式碼、想自訂功能的讀者,則請參考「客製諮詢」的內容。


更多網站工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP