2015年12月6日

Blogger 百大熱門文章排行

Blogger 百大熱門文章排行

Wayne Fu 0 A+
100-Blogger 百大熱門文章排行對於第一次逛到我們部落格的陌生新訪客,沒什麼工具比得上「熱門文章」,能更快熟悉網站精華之所在。就像在首次嘗鮮的店家點餐時,如果不想踩地雷,點菜單上的 "人氣"、"推薦"、"招牌" 餐點會是安全的選擇。

Blogger 官方提供了「熱門文章」小工具,是部落格側邊欄數一數二的安裝選擇,可以吸引讀者注意力、增加停留時間。不過可惜的是,這個官方工具最多只能顯示瀏覽人數前 10 名的文章,對於累積了數百、上千篇文章的站長而言,我們巴不得能提供更多的人氣文章讓讀者挑選,對吧!

目前而言,要提供更多的熱門文章,只能選擇自製一途,例如參考「標頭 Banner 隨機輪播熱門文章」。另外 WFU BLOG 最近製作了「百大熱門文章排行」,效果還不錯,讀者可以試玩看看。

(圖片出處: pixabay.com)


一、熱門文章百大排行﹍側邊欄


參考了「Blogger 最新文章 V2」的版面配置,製作資料庫讓熱門文章可讀取 100 筆資料後,加入上下頁的導航功能:

popular-post-100-side-Blogger 百大熱門文章排行

縮圖左上角標示排名引起訪客關注,右下顯示瀏覽人數,就算不是第一頁的熱門文章,只要瀏覽數夠多的話,相信讀者還是很有興趣的。

根據安裝以來的實際觀測,裝上這個工具後,訪客平均單次造訪頁數(Pages per Visit) 的確大幅增加不少!

側邊欄效果可參考這個展示頁面:




二、熱門文章百大排行﹍網頁版


排行榜放在側邊欄時,加上縮圖拉撐了區塊高度,使得側邊欄無法一次顯示太多文章。因此 WFU 另外做了個列表式的熱門文章百大排行榜:

popular-post-100-web-page-Blogger 百大熱門文章排行

可以設定一頁顯示較多的文章數,例如 20 ~ 40 都可,同樣有上下頁切換功能。



網頁版也可以有不一樣的選擇,有的站長可能會想要展示熱門文章的大尺寸封面圖(縮圖),這也是做得到的,可參考這個展示頁面:




三、製作原理


1. 要製作百大熱門文章,首先要有儲存瀏覽數的資料庫,因此必須先製作及安裝「Blogger 單篇文章瀏覽數 V2」。

2. 如果覺得自己製作資料庫的步驟很麻煩,也可交由本站處理,請參考「部落格熱門文章排行榜」,請使用本站側邊欄的表單與我聯繫。

3. 另外,排行的依據不一定要使用 "瀏覽數",也可以用文章的 "按讚數"、或 "+1數" 來排行,就看站長喜歡哪一種了。


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

1 則留言:

張貼留言注意事項:

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

TOP