2013年1月28日

讓Blogger能顯示「單篇文章瀏覽數」__(二)安裝程式碼


(Pic from: psdgraphics.com,freevectorgraphics.org)
2015.3.27 公告:由於 Google 試算表全面強制升級,本篇的程式碼已經無效,請前往新版安裝網頁「Blogger 單篇文章瀏覽數 V2」。


三、安裝程式碼

以下的程式碼可放在文章區塊中、任何想顯示文章瀏覽數的位置。不過對於不熟 Blogger 範本內容的讀者,可能會是個大難題。如果不清楚想擺什麼位置,建議先看一下「四、擺放位置」,再回來安裝程式碼。以下為安裝步驟──

1. 到 Blogger 後台打開範本文件 → 編輯 HTML → 在 </head> 之前插入以下程式碼:

<script src="http://wayne-fu.googlecode.com/files/oocharts-min.js"></script>
如果怕這個 js 檔連結以後消失了,可參考「Google Code 簡易使用教學」將 js 檔放在自己的 Google Code 空間。

2013年1月27日

讓Blogger能顯示「單篇文章瀏覽數」__(一)準備動作


(Pic from: psdgraphics.com,freevectorgraphics.org)
「單篇文章計數器」對大部分部落格而言,是個幾乎都會內建的功能。訪客從文章的瀏覽數,可以方便地辨識出哪些是比較熱門的文章,這是個重要的參考指標,相信也能增加新訪客留在網站的機率。可惜的是 Blogger 只在後台提供「單篇文章瀏覽數」,於網頁上並無法顯示此數據。

如果要裝「單篇文章計數器」這樣的外掛,網路上的選擇很多;只不過很久以前曾裝過「MyHotPost」這個國產計數器,稍微資深一點的部落客應該會知道,結果我才裝一陣子這個服務就掛了,當然所有的數據也都沒了。自此,非官方的外掛程式都很難得到我的信任,除非這個外掛伺服器有辦法跟 Google 的壽命並駕齊驅。

對於此功能,我想到的方法是從「Google Analytics」(本文以下簡稱 GA) 撈單篇文章數據,當然,Blogger 得先安裝 GA 才行。另外,由於 GA 數據不等於 Blogger 數據,建議先看「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」來給自己打預防針,以面看到兩者差異時衝擊太大!

以下按例先說明原理,想直接安裝此功能請跳「二、準備動作」。

2013.7.27 公告

本篇的程式使用了第三方的服務 OOcharts,由於從 2013/7/22 起已改為收費服務,此功能對免費使用者將無法再生效,請立即改用「Blogger 單篇文章瀏覽數__更新版

2013年1月21日

Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因


(Pic from: freevectorgraphics.org)
會寫這篇文章是因為最近幫部落格裝了「單篇文章瀏覽數」的功能,放在每篇文章的右上角以及文末資訊區。其數據是從 Google Analytics 撈的,結果跟 Blogger 後台文章瀏覽數一比對之下差點沒暈倒,真的是差很大!

如果要發佈這個功能的話,必定得面對大家的諸多疑問,那麼自己還是先搞清楚的好。偏偏 Google 半天沒有專門解釋這件事的中文參考網頁,只好自己整理一下相關外文網站及官網資料,好成為將來發佈此功能時的參考網頁了。

2013年1月13日

Javascript 設計模式(筆記)__(3) DOM

很抱歉前一篇第四章「函式」的後半部內容,由於間隔了一段時間,儲存資料不小心被覆蓋掉了,而先前借的書早已歸還,只好有頭無尾了...另外中間的幾個章節,目前還想不出可以應用的地方,因此全部跳過。

第八章:DOM 和瀏覽器的模式

1. 關注點分離

網頁三個主要關注點為內容(HTML)、樣式(CSS)、行為(Javascript),保持三者盡可能地分離,能兼顧各種瀏覽器版本、平台的執行結果。

◎ 測試方法:

A. 將 CSS 關閉,看網頁內容是否還能顯示(HTML 不要使用內嵌 style 屬性)。
B. 將 Javascritp 關閉,看網頁內容是否還能顯示(HTML 不要使用內嵌 事件處理,例如 onclick)。

◎ 優點:減少維護的時間,出問題時知道去哪裡查,若是 Javascript 出錯,就不需查看 HTML 或 CSS。

2013年1月9日

Google Code 簡易使用教學__部落格外連 js 檔的好選擇

我想部落格使用外掛或是外連 js 檔時,最讓人無法安心的就是外部伺服器不穩定、 js 檔失效(或失連)了。外部伺服器是我們無法控制的,而外連 js 檔若是能改放到自己的網頁空間,那就能放心不少。

2013.6.19 公告

由於最近 Google Code 宣布中止對新使用者的服務,建議使用替代方案 Google Drive,請按此瞭解 Google Drive 的操作:「取代 Google Code 外連 js 檔的選擇__Google Drive

2013年1月4日

[教學]Blogger文章分類﹍多層樹狀標籤(更新版)


(Pic from: I Loathe Multi Level Marketing)
2016.5.23 公告:目前已有新版本,請改用「Blogger 樹狀標籤 V2.0﹍安裝懶人包」、「Blogger 樹狀標籤 V2.1﹍切換標題模式

時隔半年,閱讀過一些「Javascript 的書」之後,回頭看當初樹狀標籤的程式碼算是很不成熟,加上「舊版本第一篇」留言 #24 iampisece 詢問相關問題,決定來修改「5多層樹狀標籤」的程式碼。沒意外的話這一篇應該是最終版本了,因為所有的功能可整合在一起安裝,過去所有發現的大小問題在這新版本也都能解決。

若是第一次安裝樹狀標籤可直接跳「二、功能介紹、準備動作」;若曾安裝過舊版樹狀標籤,可從「一、更新摘要」看起。

2013年1月1日

2013 BLOG 更新紀要索引