2015年6月9日

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

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 這部分的參數即可。

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


更多網站工具:

6 則留言:

  1. 感謝!怎麼可以做到像您的首頁那樣可以左右翻動(您的有左右2個箭頭)。我的只能放進去4個圖片,放到第五張圖片,就直接牌子下面一行了,沒辦法做到左右翻動。請指教,謝謝!
    http://ourfashland.blogspot.hk/

    回覆刪除
    回覆
    1. sorry,打錯字。
      就直接牌子下面一行了---》就直接排在下面一行了

      刪除
    2. 我的輪播圖片版本,左邊是版權宣告 logo 喔,你確定要安裝這個版本?

      刪除
  2. http://themeforest.net/item/setiva-responsive-magazine-blogger-template/full_screen_preview/9943134

    直的擺在側邊欄位,像這樣子輪播的效果也不錯吧?

    回覆刪除
    回覆
    1. 這個輪播的效果很棒,也許將來可以寫類似的工具,借用一下這個效果 ^^

      刪除
  3. 作者已經移除這則留言。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。