製作網頁表單時，如何讓複雜的配置也能完美對齊﹍Grid 網格系統
如果熟悉「 Bootstrap 」這套 CSS 框架，那麼製作網頁表單不是什麼難事，查閱一下適合表單使用的 class 名稱，就能快速做出美觀、有一定水準的表單。 最近處理一個大型專案，需要製作許多複雜的表單，結果碰上了難題。什麼程度稱為 "複雜" 呢？可...
繼續閱讀全文分享到 Line 會遇到的問題整理﹍縮圖+影片+網址
有多位讀者、客戶都曾反應，分享文章到 Line 的效果不如預期，例如無法顯示縮圖、或者圖不是他要的等等。 那麼本篇就整理一下各種網址、影片分享到 Line 時，可能會遇到的問題有哪些，以 FAQ 形式的方式呈現。 (圖片出處: picsee )
繼續閱讀全文線上查詢 FB G+ Twitter 社群分享按鈕數據 + 立即檢視 FB G+ 留言板內容
前陣子因為網站改用「 RWD 範本 」，同時在精簡 JS 外掛的前提下，移除了 FB 讚、+1 按鈕，而且 FB 及 G+ 留言板也都不使用了。 現在偶爾想要知道某篇文章的社群分享按鈕累積數據，或是那篇的 FB、G+ 讀者留言內容，就會比較麻煩一些。 於是就做了本篇的線上...
繼續閱讀全文Blogger 刪了你的網站並告知是 Spam 垃圾網站怎麼辦？是否自架站會比較安全？
前陣子有讀者傳來訊息，表示知名的軟體下載網站「阿榮福利味」一度被 Blogger 刪除，詢問我的意見： 看起來是滿嚴重的事件，且阿榮也是我從小看著長大的網站，因此進 FB 瞭解一下是什麼狀況。 簡單說，是阿榮的分站被判定為垃圾網站(spam)，且直接刪除未事先通知。如...
繼續閱讀全文Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理
jQuery 這套框架(framework)的誕生，是為了讓工程師寫更少的 Javascript、做更多事。同樣的，Bootstrap 的誕生，可以讓前端工程師處理版面 CSS 時節省許多時間，能專注在更重要的主題上。 Bootstrap 把網頁設計常用的元件，例如按鈕、表單...
繼續閱讀全文Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用
多年前曾寫過「 Blogger 側邊欄簡易分頁功能 」系列文章，當時做的 Tab 分頁樣式比較簡單，沒有使用任何外掛，效果算是堪用。 從當年的版面樣式也可看到歲月的痕跡，頁簽形狀用 CSS 刻得很辛苦，還有瀏覽器相容度問題。現在網頁技術太進步，有各種處理 CSS 版面的框架(...
繼續閱讀全文WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗
最近一兩年協助架站多是以 RWD 為主，但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版，我想原因大概是這樣： 不喜歡直接用別人做好的現成範本，因為會有太多自己想改的地方。 但 RWD 是大工程，自己改要花很多時間。 本站是「Blogger 調校資料庫」，所...
繼續閱讀全文讓 Blogger 留言注意事項能隨留言框移動，訪客才能真正看到
這大概是寫部落格長久以來，覺得很無奈、沒辦法解決的一件事了。為了讓訪客留言時完整描述狀況、不重複犯錯、或避免詢問同樣問題，我們可能會制訂一些注意事項。 其實大部分還是讀者會仔細閱讀規定再留言，但有些讀者不一定會看到規定、或是常常目光直接相中留言框就留言，導致站長們需要常常回覆...
繼續閱讀全文安裝這個 Chrome 外掛就能分析網站數據、優化版面配置，但很多數字你必須知道如何正確解讀﹍Page Analytics
Page Analytics 是一個知名的 Chrome 外掛，它會從 Google Analytics(以下簡稱 GA) 讀取你的網站數據，直接在網頁上顯示各處連結的點擊成效。根據這些數據，就能很方便地評估網站的版面配置是否需要優化。 很久以前安裝過這個外掛，但當時覺得不是...
繼續閱讀全文讓 Blogger 網站可以向訂閱者發佈通知﹍OneSignal 網頁推播訊息外掛
也許你曾逛過某些網站，瀏覽器會自動彈出這樣的訊息： 如果按「允許」的話，那麼日後這個網站有新文章，或是有公告訊息，瀏覽器就會傳送訊息給你。 這是 HTML5 的網頁推播技術，在 RSS、Email 訂閱式微的今天，對於站長們是很便利的一項福音，讀者只要打開瀏覽器，就能...
繼續閱讀全文Adsense 回應式(RWD)廣告雖然版面美觀，可惜收益少很多
最近將網站改為 RWD 版型後，因為文章區塊在不同裝置的寬度都不一樣，無法再使用以前的廣告尺寸，因此藉機會把部分廣告單元改成自適應廣告。 使用回應式的廣告，並搭配 CSS 設定後，可以讓廣告完全跟區塊寬度吻合，版面看起來美觀多了。 而用了幾天後，查看 Adsense 報表...
繼續閱讀全文加快你的網頁載入速度實作﹍善用 Google Analytics 報表
之前寫過一篇「 PageSpeed 網站速度檢測心得 」，請讀者別太在意 PageSpeed 的分數，因為先天的限制，Blogger 有些項目是無法處理的。 不過那篇文章大概是說服力不佳，有不少讀者看完後，依然向 WFU 表達對於分數過低的憂慮，也許是我沒有提供 Step b...
繼續閱讀全文讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin
最近需要架設 RWD 一頁式網站，結果在「自適應文字大小」這件事卡關，為何會如此呢？ 處理部落格型態的網站時，大部分直接套用現成的 RWD「 付費範本 」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內，調整字體大小的問題不大。 而一頁式網站，可以算是開放式空間...
繼續閱讀全文使用 CSS 語法就能讓 Blogger 自動產生留言編號
趁著網站改版，決定好好檢視所有程式碼，能優化的地方就處理，例如去除不必要的 javascript、或找替代方案，因為「 優化網站效能該注意哪些事? 」有提過，影響網頁載入速度最重要的第二大因素，就是 JS。 之前曾寫過「 Blogger 串聯式留言__留言編號 」，是利用 J...
繼續閱讀全文
