2014年3月1日 星期六

Blogger 文章列表 RWD 版﹍(3) 依日期排列+讚統計 [加值文章]

Blogger 文章列表 RWD 版﹍(3) 依日期排列+讚統計 [加值文章]

Wayne Fu 0 A+
2015.5.27 更新:本次更新的程式碼內容,主要是為了配合行動裝置的需求,改為自適應(RWD)版面,並稍微精簡程式碼。由於原有的架構沒有改變,因此並未修改版本號碼,直接在原文章網址做更正,有需要的讀者請直接更新程式碼。


「文章列表極速版」系列的優點可參考這篇「文章列表依日期排列」→「一、文章列表極速版的特點」,而這篇增加的「讚」統計數據,可以為文章列表加分不少,同時也提供了讀者挑選文章的指標,導覽效果比基本款好一些。

以下先簡單介紹一下特色,想直接安裝請跳「二、安裝程式碼」。



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


一、「讚」統計功能特點


1. 顯示速度極快:兩年前寫過「文章列表+"讚"統計」的舊版本,不過當時技術不夠,顯示讚按鈕的速度較慢。

2. 三種統計數據:Facebook 的 "讚" 統計數據,官方從過去以來經過多次修正,現在的資料庫其實分別有三種數據:
  • 統計
  • 分享數統計
  • 留言數統計

而本系列的文章列表,將一律使用三種數據的總和,意思就是說,若文章列表顯示了 20 個 "讚",其實是代表 "讚" + "分享" + "留言" 三種數據的加總。

3. 可自訂爆表數量:沿用舊版本的設計,使用者能夠自訂 "爆表數量",若設定了 "99",則代表超過 99 個讚以後,一律顯示為 "" 這樣的字串(或自訂字串)。



二、安裝程式碼


請新開一篇文章 → 複製以下程式碼後存檔:


以下修改請參照程式碼行號的說明──

A:可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery。若已經安裝過,可刪除本行。

G:一次載入的文章數,基本上預設值 50 已經速度很快了。

H:讚統計爆表數量,預設值 99 代表超過這個數字後會顯示 "爆"。

I:讚爆表時顯示的字串。

J:按鈕文字的設定,例如改成 "Load More"。

K:按鈕文字的設定,例如改成 "Load All"。

L:文章開合的效果,預設值 "fadeToggle" 為「淡入淡出」的效果;若改為 "slideToggle" 則有「滑動開合」的效果。

M:"讚" 的圖示網址,可使用自訂的圖示網址。如果使用不同尺寸的圖片,可能需要修改 CSS 以符合版面美觀。

N:月份的字串設定,可改為中文或自訂字串。

P:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。



三、修改 CSS


如果要自行修改 CSS 的話,每個區塊都有註釋可參考。例如發現 "讚" 或統計數字被擠到下一行(或使用了自訂的 "讚" 圖示),可能需要改兩個地方:
  • /* 文章標題 */ 這個區間,修改 width 的數值。
  • /* 讚區塊 */ 這個區間,修改 width 的數值。

現在可以將文章發佈,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客較佳的導覽效果。

如果尚未看過前言提供的效果連結,請按下面的按鈕:




四、RWD 效果


2015.5.27 新增內容──

行動版的效果,模擬 iPhone4 直立的畫面如下:

blogger-toc-date-like-count-mobile


模擬 iPhone6 橫躺的畫面如下,由於寬度足夠,效果跟網頁版一致:

blogger-toc-date-like-count-web



五、聯絡表單


加值文章關閉留言板功能,使用上有任何問題請用下面的表單與我聯繫:




文章列表極速版各版本:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP