Clik here to view.
統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)
上一篇「GA 事件追蹤器」的免費版功能比較少，本篇的版本可以做到這些事：排除 Blogger 站長自己的點擊對小工具進行分類，例如區分為導覽列、側邊欄、頁尾等等監測動態 JS 產生的小工具連結指定要監測的小工具排除不要監測的小工具關於這個工具的運作原理、使用方式，建議先參照上一篇的內容有個基本的瞭解，並請注意本篇為「會員加值文章」，需先儲值點數才能看到隱藏內容。(圖片出處:...
View ArticleClik here to view.
利用科學數據，決定網頁是否安裝特定外掛，優化網站配置﹍實作範例
過去我們網站擺放的各種外掛、小工具，一開始是如何決定的呢？是因為個人喜好，還是因為別的網站有裝，還是猜測訪客應該需要？如果不確定為何而裝，那麼想必站長們都知道，外掛裝越多，網頁載入速度越慢，那麼究竟哪些外掛該移除呢？還有，我們會在網站各處擺放各種想推廣的文章連結，你知道哪些有人點、哪些沒人點，哪些該換別的連結以獲得更好的成效呢？以上所有的事，其實可以不依靠第六感，直接收集實實在在的數據，從報表就能輕...
View ArticleClik here to view.
讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)
之前寫過一篇「讓網頁表格能自動排序﹍TableSorter 安裝懶人包 」，只要安裝這個外掛就能達到排序的效果，看起來非常方便。但最近接到的需求除了要讓表格排序，還得讓案主知道怎麼做出表格來，這下就麻煩了，因為很多站長其實不熟悉 HTML 碼，自然也不知道表格 Table 的正規 HTML 格式會是什麼樣子。所以我之前也寫了一篇「網頁插入表格不再麻煩﹍線上產生器 + 可匯入 CSV...
View ArticleClik here to view.
使用 Gmail API 寄信的簡易管道及障礙排除﹍Google Apps Script 實作範例
最近研究 Gmail API 才發現，處理郵件是一件非常麻煩的事，操作 Gmail API 可說是我目前為止，所有經手過的 API 之中最難搞的一個。如果可接受比較簡化的功能、不一定要使用 Gmail API 的話，那麼 Google Apps Script(以下簡稱 GAS) 提供了一個 GmailApp 服務，可以用最無腦的方式寄送 Gmail 郵件，不過缺點是一天最多 100 封郵件。而操作...
View ArticleClik here to view.
CSS 撰寫技巧及規範﹍維護心得整理
前端開發 CSS 寫久了之後，發現幾個麻煩的地方：命名字串想破頭，要避免重複，又得能正確理解日後維護修改時，要找到正確的區塊位置得花不少時間壓縮過的 CSS 碼無法閱讀、不易維護，好閱讀的 CSS 碼太冗長因此決定研究一套方便維護 CSS 碼的作法，本篇心得比較適合 Blogger 平台參考。(圖片出處: pixabay.com)一、CSS 命名1. 有意義的英文單字對於非開發人員而言，CSS...
View ArticleClik here to view.
協助自架站、WP 搬家到 Blogger 流程紀錄
前陣子接到幾個需求，部落格想要從自架站、WordPress 搬到 Blogger，找上本站尋求協助。嚴格來說這比較不尋常，因為我在「Blogger 是否搬家到 Wordpress 的比較」曾提到，部落格成長週期有三階段：免費部落格平台 → Blogger → 自架站。那麼從自架站搬到 Blogger，等於反轉了部落格的發展曲線。那麼為何最近多個自架站紛紛逆向搬回...
View ArticleClik here to view.
Blogger 可以在行動裝置發佈文章+上傳圖片的 APP 整理
Blogger 社團這則「討論串」詢問 "是否有什麼app可以編輯好圖文然後上傳"，原本認為這是很困難的事，因為年初 Google 宣布「Picasa 關閉上傳圖片的 API」，導致現在 Blogger 發文軟體已經沒有用處了，例如知名的 Open Live Writer (簡稱 OLW)，而我也寫了這篇「Blogger 無法使用 OLW 後，寫文章有什麼替代方案？」。不過實際拿了幾個...
View ArticleClik here to view.
前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳，有效節省儲存空間﹍實作範例
以前處理過一個客製系統，有多處需要註冊會員上傳圖片：會員頭像證件留底設施環境介紹照片由於使用者各種年齡層都有，不是每個人都網路世代，懂得先壓縮 JPG 檔再上傳，那麼上傳的圖片檔案可能會超出工程師想像。大部分中高齡使用者可能直接從手機選了圖片就上傳，也不會知道這張圖片到底多大。現在手機鏡頭越來越高級，照出來的圖片預設原始尺寸也越來越大，一張圖好幾 MB 是常態，超過 5MB...
View ArticleClik here to view.
使用 Gmail API 讓郵件插入圖片及 HTML﹍Google Apps Script 障礙排除 + 實作範例
上一篇說明完「使用 Gmail API 寄信簡易管道」流程，接著要實作利用 Gmail API 在郵件中插入圖片。其實處理純文字郵件就已經挺複雜麻煩了，然而跟本篇相比，還算是小巫見大巫。啃了大量的郵件通訊格式資訊後，結果發現就算是使用完全正確的格式，Gmail API 也不見得就能相容，測試過程相當痛苦。不過最終總算找出一個可行的作法，請見本篇心得整理。(圖片出處:...
View ArticleClik here to view.
jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大
在網頁上展示相簿圖片可以有幾種作法，最常見的是使用輪播效果，過去介紹過幾個知名的 jQuery 外掛(使用 CDN)：最熱門 jQuery 圖片輪播外掛 Owl Carousel過場效果華麗的 jQuery 圖片輪播外掛 Camera優雅又八面玲瓏的 jQuery 燈箱外掛 Fancybox輪播在畫面上的視覺效果，能同時展示的數量有限，如果希望一次展示 10...
View ArticleClik here to view.
Google Cloud Platform 架設 WordPress 心得整理﹍HTTPS + FTP + 永遠免費方案
最近處理客戶需求得使用 WP 作業一段時間，想到「Google Cloud Platform 雲端平台」(以下簡稱 GCP) 提供了一年免費測試的服務，剛好可以來研究看看。而且如果測試網站流量不大，那麼 GCP 還有「一律免費」方案，符合條件時也是有可能架設的 WP 網站一直都不用收費。一、各種架站方式比較基本上 GCP 提供使用者第一年 USD 300 (平均一個月 USD...
View ArticleClik here to view.
讓 RWD 表格能自動排序
過去為網頁表格的處理寫了不少文章，例如「自適應 RWD 表格」、「讓網頁表格自動排序」。後來發現，效果比較好的 RWD 表格，因為手機的表格形式跟網頁已經完全不一樣，那麼在行動版將無法做到自動排序。有次無意間在手機看到 NBA 的統計數據表格，算是比較傳統的 RWD 表格形式，才想到這樣的 RWD...
View ArticleClik here to view.
Clik here to view.
使用 Google Apps Script 爬網頁資料，解析 HTML 及操作 DOM 的技巧
前陣子接到的需求，要使用爬蟲程式撈特定網站資料回來，那麼利用 Google 試算表是不錯的選擇，除了每個儲存格的容量最多有 50000 個字元，還可用 Google Apps Script(以下簡稱 GAS) 執行爬蟲程式、處理各種細節。不過撈完網頁內仍後，如何解析 HTML 架構、操作頁面上的 HTML 元素都有不少難題要解決，因此本篇記錄一下 GAS 的操作心得與技巧。(圖片出處:...
View ArticleClik here to view.
從任意網站(痞客邦、WP)無痛搬家到 Blogger，不影響 SEO 搜尋排名
之前這篇讀者提問「Blogger 網址買了很後悔，可以再搬到新網址嗎？」，當時想到的解決辦法是把文章搬到新的 Blogger 網址，然後舊的 Blogger 做搬家畫面導向新網站，花幾個月的時間慢慢移轉 SEO。後來熟悉「Google Cloud Platform 架設 WordPress」的技術後，這件事可以有比較簡單的作法，利用 WP 進行 301 轉址，那麼新舊網站的 SEO...
View ArticleClik here to view.
Adsense 申請 + 廣告無法顯示的各種疑難雜症整理
最近一兩年詢問如何申請 Adsense 的案例越來越多，跟以往相較之下可說是門檻提升不少，這代表 Google 透露出這樣的訊息：Adsense 申請資格已經不像 5~10 年前那麼容易投放(買)廣告的業主增加速度，遠不及想要擺放廣告的網站增加速度供給小於需求的情況下，Adsense...
View ArticleClik here to view.
讓 Google Photo 實現各種相簿畫廊或輪播效果
Google 相簿由於官方的用意並非設計來當作圖床，那麼想要自行製作各種 Google Photo 工具相當不容易，例如在網頁上展示各種畫廊圖片排版效果、或是利用 Google Photo 來輪播等等。主要是官方不提供任何輕易取得圖片外連的方法，如同這篇「Google 關閉 Picasa API」提到關於 Goolge Photo API：每次以不同 access token...
View ArticleClik here to view.
常用程式碼片段的管理技巧及使用工具
協助前端架站久了之後，有許多常見的小工具會用到，代表需要安裝的程式碼中，有一部份是重複性高的，例如：FB 讚、分享按鈕各種社群分享按鈕FB 留言板等等能重複使用的程式碼自然較有價值，即使是不能 100% 套用，但只要修改一部份就能用在新的情境，也是可節省大量時間，這些程式碼都值得用一套規則保存及管理。只有 10...
View ArticleClik here to view.
部落格文章修改發佈日期對 SEO 的影響
最近一位客戶的 SEO 流量掉很多，在協助尋找原因的過程中，詢問是否曾經為了 SEO 而做過哪些動作。因為有不少站長可能從網路接觸一些 SEO...
View ArticleClik here to view.
各大免費素材、圖示、插畫、向量圖庫整理
過去製作的「CC0 免費圖庫搜尋引擎」可搜尋高畫質圖片，適合用於部落格、書籍、海報等各種需要完整圖片的場合，例如大部分本站文章開頭使用的封面圖。對於設計用途而言，會比較需要以下這些類別的圖片：透明去背圖ICON...
View Article