Clik here to view.
Clik here to view.
讓 Blogger 首頁每篇文章都能顯示日期
最近接到一個需求，希望Blogger 首頁每篇文章都能顯示日期，因為同一天發佈的文章只會顯示第一篇的日期。官方會這麼設計也不能說不合理，從範本程式碼可看出，同一天發佈的所有文章，會集中在同一個區塊(有人說文章會擠在一起，就是這樣的現象)。既然多篇文章放在同一個區塊，那麼重複顯示日期顯然是多餘的。不過這麼設計，官方可能沒想到的是，Blogger...
View ArticleClik here to view.
用電子書閱讀器 Onyx (Kepler pro) 看 PTT + RSS 使用心得
為了減少眼睛看背光螢幕的時間，曾買了 Kindle DX 及「Kindle 8 E-ink 電子書閱讀器」。但用久了之後覺得還是沒有平板來的方便，因為 Kindle 是封閉系統，網路資訊要同步到 Kindle 來閱讀很麻煩，只能遷就 Kindle 提供的 App 或想辦法變通，可參考「稍後閱讀，各種推送到 Kindle 的技巧整理」。同時，我獲得資訊的重要管道「PTT + RSS」，要把文章移轉到...
View ArticleClik here to view.
本站可以發通知訊息給讀者了！歡迎訂閱推播服務，比 RSS、Email 方便
這是一篇公告文章，原本使用 RSS 或 Email 訂閱本站的讀者，現在有更快的方式接收本站訊息。沒訂閱本站、或習慣用 FB 追蹤本站的朋友，也不妨嘗試一下這個新的網頁技術，以下會簡單介紹這個推播服務、及訂閱流程。(圖片出處:...
View ArticleClik here to view.
使用 CSS 語法就能讓 Blogger 自動產生留言編號
趁著網站改版，決定好好檢視所有程式碼，能優化的地方就處理，例如去除不必要的 javascript、或找替代方案，因為「優化網站效能該注意哪些事?」有提過，影響網頁載入速度最重要的第二大因素，就是 JS。之前曾寫過「Blogger 串聯式留言__留言編號」，是利用 JS 處理。這次則研究一下能否用 CSS 處理，結果發現可行，那麼以下紀錄我的作法。點此看範例網頁(圖片出處:...
View ArticleClik here to view.
讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin
最近需要架設 RWD 一頁式網站，結果在「自適應文字大小」這件事卡關，為何會如此呢？處理部落格型態的網站時，大部分直接套用現成的 RWD「付費範本」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內，調整字體大小的問題不大。而一頁式網站，可以算是開放式空間，文字會出現在哪裡不一定，視案主或設計師提供的設計圖而定。這樣子的 RWD...
View ArticleClik here to view.
加快你的網頁載入速度實作﹍善用 Google Analytics 報表
之前寫過一篇「PageSpeed 網站速度檢測心得」，請讀者別太在意 PageSpeed 的分數，因為先天的限制，Blogger 有些項目是無法處理的。不過那篇文章大概是說服力不佳，有不少讀者看完後，依然向 WFU 表達對於分數過低的憂慮，也許是我沒有提供 Step by Step...
View ArticleClik here to view.
Adsense 回應式(RWD)廣告雖然版面美觀，可惜收益少很多
最近將網站改為 RWD 版型後，因為文章區塊在不同裝置的寬度都不一樣，無法再使用以前的廣告尺寸，因此藉機會把部分廣告單元改成自適應廣告。使用回應式的廣告，並搭配 CSS 設定後，可以讓廣告完全跟區塊寬度吻合，版面看起來美觀多了。而用了幾天後，查看 Adsense 報表發現數據滿令人吒舌的。雖然天數少只是小樣本，不能視為長期都是如此。不過我還是決定研究一下，是否 RWD...
View ArticleClik here to view.
讓 Blogger 網站可以向訂閱者發佈通知﹍OneSignal 網頁推播訊息外掛
也許你曾逛過某些網站，瀏覽器會自動彈出這樣的訊息：如果按「允許」的話，那麼日後這個網站有新文章，或是有公告訊息，瀏覽器就會傳送訊息給你。這是 HTML5 的網頁推播技術，在 RSS、Email 訂閱式微的今天，對於站長們是很便利的一項福音，讀者只要打開瀏覽器，就能收到網站第一手發佈的訊息，不必藉助 RSS、Email 等媒介，沒有時間落差，讀者也不需要學習 RSS...
View ArticleClik here to view.
安裝這個 Chrome 外掛就能分析網站數據、優化版面配置，但很多數字你必須知道如何正確解讀﹍Page Analytics
Page Analytics 是一個知名的 Chrome 外掛，它會從 Google Analytics(以下簡稱 GA) 讀取你的網站數據，直接在網頁上顯示各處連結的點擊成效。根據這些數據，就能很方便地評估網站的版面配置是否需要優化。很久以前安裝過這個外掛，但當時覺得不是很好用，之後會說明原因。最近網站換了 RWD 版型，很多地方也採用新的設計，為了評估成效，於是想到了 Page...
View ArticleClik here to view.
讓 Blogger 留言注意事項能隨留言框移動，訪客才能真正看到
這大概是寫部落格長久以來，覺得很無奈、沒辦法解決的一件事了。為了讓訪客留言時完整描述狀況、不重複犯錯、或避免詢問同樣問題，我們可能會制訂一些注意事項。其實大部分還是讀者會仔細閱讀規定再留言，但有些讀者不一定會看到規定、或是常常目光直接相中留言框就留言，導致站長們需要常常回覆一樣的話。會有這情形，Blogger...
View ArticleClik here to view.
WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗
最近一兩年協助架站多是以 RWD 為主，但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版，我想原因大概是這樣：不喜歡直接用別人做好的現成範本，因為會有太多自己想改的地方。但 RWD 是大工程，自己改要花很多時間。本站是「Blogger 調校資料庫」，所以有不少工具，在某種程度上算是 "展示" > "實質" 用途雖然早就想改用...
View ArticleClik here to view.
Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用
多年前曾寫過「Blogger 側邊欄簡易分頁功能」系列文章，當時做的 Tab 分頁樣式比較簡單，沒有使用任何外掛，效果算是堪用。從當年的版面樣式也可看到歲月的痕跡，頁簽形狀用 CSS 刻得很辛苦，還有瀏覽器相容度問題。現在網頁技術太進步，有各種處理 CSS 版面的框架(framework)，例如最知名的...
View ArticleClik here to view.
Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理
jQuery 這套框架(framework)的誕生，是為了讓工程師寫更少的 Javascript、做更多事。同樣的，Bootstrap 的誕生，可以讓前端工程師處理版面 CSS 時節省許多時間，能專注在更重要的主題上。Bootstrap 把網頁設計常用的元件，例如按鈕、表單、表格等等，都打包成一組組的 class 名稱，直接呼叫就能產生不錯的樣式、版面。但我們很難記住所有的 class...
View ArticleClik here to view.
Blogger 刪了你的網站並告知是 Spam 垃圾網站怎麼辦？是否自架站會比較安全？
前陣子有讀者傳來訊息，表示知名的軟體下載網站「阿榮福利味」一度被 Blogger 刪除，詢問我的意見：看起來是滿嚴重的事件，且阿榮也是我從小看著長大的網站，因此進 FB 瞭解一下是什麼狀況。簡單說，是阿榮的分站被判定為垃圾網站(spam)，且直接刪除未事先通知。如果是站長們自己遇到，第一次一定很沮喪，那麼究竟為何會這樣呢？Blogger 網站被無預警刪除，WFU...
View ArticleClik here to view.
線上查詢 FB G+ Twitter 社群分享按鈕數據 + 立即檢視 FB G+ 留言板內容
前陣子因為網站改用「RWD 範本」，同時在精簡 JS 外掛的前提下，移除了 FB 讚、+1 按鈕，而且 FB 及 G+ 留言板也都不使用了。現在偶爾想要知道某篇文章的社群分享按鈕累積數據，或是那篇的 FB、G+ 讀者留言內容，就會比較麻煩一些。於是就做了本篇的線上工具，可以立即查詢任何網址的社群分享按鈕狀態(FB G+ Twitter)，也能顯示該篇文章所有的 FB G+ 留言訊息。(圖片出處:...
View ArticleClik here to view.
分享到 Line 會遇到的問題整理﹍縮圖+影片+網址
有多位讀者、客戶都曾反應，分享文章到 Line 的效果不如預期，例如無法顯示縮圖、或者圖不是他要的等等。那麼本篇就整理一下各種網址、影片分享到 Line 時，可能會遇到的問題有哪些，以 FAQ 形式的方式呈現。(圖片出處: picsee)一、為何 Line 無法顯示縮圖？1. 以前的 Line根據我的使用經驗，以前 Line 為了節省伺服器運作成本，應該是直接用 FB 的 API...
View ArticleClik here to view.
製作網頁表單時，如何讓複雜的配置也能完美對齊﹍Grid 網格系統
如果熟悉「Bootstrap」這套 CSS 框架，那麼製作網頁表單不是什麼難事，查閱一下適合表單使用的 class 名稱，就能快速做出美觀、有一定水準的表單。最近處理一個大型專案，需要製作許多複雜的表單，結果碰上了難題。什麼程度稱為 "複雜" 呢？可以想像一下填寫履歷表，或是進銷存系統(ERP)的表格，這類表單跟網頁上常看到的表單結構差很多，若使用 Bootstrap...
View ArticleClik here to view.
前端開發神器 Emmet 快速上手教學整理﹍Sublime Text
網頁製作久了就會發現，手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題，「Bootstrap」可以縮短網頁版面設計的時間，那麼 HTML/CSS 的輸入，有沒有快速便利的工具呢？「Emmet」(前身為 Zen Coding)就是為此而開發的工具，只要有一點點 CSS...
View ArticleClik here to view.
Bootstrap 簡易版面製作範例﹍網格+面板+表單輸入+按鈕
Bootstrap 的使用說明內容不少，份量足以出一本書，不過把工具書從頭看到尾的方式用來學習，效果不見得比較好。如同「一圖勝過千言萬語」，從範例中來學習、吸收 Bootstrap，效率會來得更快，印象也比較深刻。本篇提供一個簡單的小範例，可以熟悉以下這些功能的用法：網格面板表單輸入按鈕Well(圖片出處: negativespace.co)一、原始架構及方針1. Layout...
View Article