Picasa 圖床的獨家應用：製作 RWD 自適應圖片，讓手機自動載入小圖，加快網頁讀取速度
過去曾在「 加快 Blogger 行動版圖片載入速度的密技 」告訴讀者，Blogger 使用的圖片只要從後台上傳，也就是使用 Picasa 圖床，行動版就會自動改為載入小尺寸的圖片。 因為有這樣的獨家功能，Picasa 只要上傳一張圖片，就會產生手機版尺寸的圖片，我一直認為 ...
繼續閱讀全文jQuery 日期時間範圍選擇器 Date Range Picker (Bootstrap 外掛)
過去網頁表單要輸入日期不容易，往往得另外裝個外掛，例如基於 jQuery 的套件 datepicker。 而現在的瀏覽器使用 HTML5 已成為標準，Input 標籤內建就有簡易的選擇日期功能，只要加入屬性 type="date" 就可使用，不必另裝外掛...
繼續閱讀全文Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕
Bootstrap 的使用說明內容不少，份量足以出一本書，不過工具書用從頭看到尾的方式來學習，效果不見得比較好。 如同「一圖勝過千言萬語」，從範例中來學習、吸收 Bootstrap，效率會來得更快，印象也比較深刻。 本篇提供一個簡單的小範例，可以熟悉以下這些功能的用法： ...
繼續閱讀全文前端開發神器 Emmet 快速上手教學整理，減少 HTML / CSS 輸入的麻煩﹍Sublime Text
網頁製作久了就會發現，手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題，「 Bootstrap 」可以縮短網頁版面設計的時間，那麼 HTML/CSS 的輸入，有沒有快速便利的工具呢？ 「 Emmet 」(...
繼續閱讀全文製作網頁表單時，如何讓複雜的配置也能完美對齊﹍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...
繼續閱讀全文本站可以發通知訊息給讀者了！歡迎訂閱推播服務，比 RSS、Email 方便
這是一篇公告文章，原本使用 RSS 或 Email 訂閱本站的讀者，現在有更快的方式接收本站訊息。 沒訂閱本站、或習慣用 FB 追蹤本站的朋友，也不妨嘗試一下這個新的網頁技術，以下會簡單介紹這個推播服務、及訂閱流程。 (圖片出處: onesignal.com )
繼續閱讀全文用電子書閱讀器 Onyx (Kepler pro) 看 PTT + RSS 使用心得
為了減少眼睛看背光螢幕的時間，曾買了 Kindle DX 及「 Kindle 8 E-ink 電子書閱讀器 」。但用久了之後覺得還是沒有平板來的方便，因為 Kindle 是封閉系統，網路資訊要同步到 Kindle 來閱讀很麻煩，只能遷就 Kindle 提供的 App 或想辦法變通...
繼續閱讀全文讓 Blogger 首頁每篇文章都能顯示日期
2024.2.1 公告: 現在已經有更方便的作法，請參考「 Blogger 日期格式化詳解 」→「二、首頁每篇文章都顯示日期(新版)」 最近接到一個需求，希望Blogger 首頁每篇文章都能顯示日期，因為同一天發佈的文章只會顯示第一篇的日期。 官方會這麼設計也不能說不合...
繼續閱讀全文國外網站用外幣刷卡購物，要哪種信用卡、如何處理，匯率+手續費才能最划算？
因為常常需要幫忙購買國外的「 Blogger 付費範本 」，以及上淘寶購買各種產品，付費的主要管道就是刷信用卡了。 刷卡雖然很方便，但其實 隱含的費用我們往往不了解，從信用卡帳單明細也無法看出所以然，就算被坑了可能也感覺不到痛 ，這正是國外網站刷卡購物的可怕之處！ 最近決...
繼續閱讀全文Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具
最近進行 WFU BLOG 改版，需要在新版型上切出一些欄位，來安裝小工具。如果使用官方範本，那麼這是很簡單的事，後台就有各種的欄位樣式可以選擇，看要將區塊切成 2 等分或 3 等分都行。 如果熟悉 CSS 的話，自己切版也很容易，而缺點就是切出來的區塊無法安裝小工具，只能將...
繼續閱讀全文WordPress 防駭 + 建立安全防護心得紀錄
上一篇處理完「 WP 被駭後, 移除各種被植入的外掛及惡意程式 」，並且備份完乾淨的檔案之後，接下來本篇要建立安全的防駭機制及環境。 (圖片出處: pixabay.com )
繼續閱讀全文WordPress 被駭之後，收拾殘局全紀錄
之前朋友的 WP 網站被駭客入侵，雖然主機商有回溯到當日清晨的服務，但只要太晚發現異狀，例如隔天才發現，那麼回溯功能依然只能還原為異常的狀態，意思就是有問題要當天發現才有用。 由於朋友的網站一開始沒什麼安全防護的概念(而且前任工程師跑了)，也沒什麼乾淨的備份檔案可以還原，要收...
繼續閱讀全文讓 Android 裝置快速切換飛航模式，可省電及維護身體健康
幾個月前買了 CP 值很高的 Zenfone 後，速度很流暢，操作上一些內建的 ASUS APP 也很方便，使用者體驗還滿不錯的。由於 CPU 規格不錯，電力也掉得很快，明明半夜什麼事都沒做，但一覺醒來電池用量卻令人咋舌。 於是開始研究如何半夜讓手機自動進入飛航模式，結果一查...
繼續閱讀全文我如何寫一篇 Blogger 文章的流程﹍易於調整版面 CSS + 不會遺失內容
這篇文章並不是教讀者寫作的技巧，例如用什麼工具收集點子、如何用心智圖建立文章架構、怎麼快速完成一篇文章的秘訣等等。由於以上技巧並不算專家，還是避免獻醜比較好。 這篇主要是著重在軟體操作的層面，因為幾乎每個月都需要回覆跟文章版面、CSS 修改的相關問題，例如文章字太小、顏色想改...
繼續閱讀全文Emoji 表情符號輸入小幫手 (書籤工具)
前陣子有讀者留言時使用 Unicode 表情符號，覺得效果還不錯，語意看起來活潑許多，因此決定動手做個表情符號的輸入工具。 其實這類的留言輔助工具，在網路上已經可以找到一些，而寫部落格的初期，也曾思考過是否安裝這類的外掛。但這畢竟算是使用率較低的工具，如果為了花俏的功能而拖慢...
繼續閱讀全文CC0 免費圖庫搜尋引擎﹍2017 版
「 CC0 免費圖庫搜尋引擎 」今年 2017 改版，可說是吸收過去使用經驗後，建構了一個完整的搜索圖片流程。依照不同需求、藉著這個網頁，就能利用各大 CC0 圖庫，找出需要的高畫質圖片。 同時 這次也改善了，以往搜尋結果會參雜廣告圖片(shutterstock)的狀況 。而...
繼續閱讀全文Emoji 表情符號輸入小幫手 (網頁版)
這個「表情符號輸入工具」可以快速找到各種需要的 Unicode 表情圖案，方便留言、寫文章或是即時通使用。 所有圖案都是特別篩選過，可以在各種平台正常顯示。同時操作很簡單，後面會有詳細介紹。
繼續閱讀全文讓 Blogger 只顯示特定數量的標籤
協助架站時遇過幾個案例，為了版面美觀的緣故，案主不希望顯示所有的標籤。 仔細想想也是滿合理的，在首頁或標籤頁面，若某些文章設定了十多個標籤，全部顯示出來的確太過雜亂。那麼可以考慮只顯示 1 個或 2 個標籤就好，進入文章頁面時，再顯示全部的標籤。 不過這件事並沒有想像中簡...
繼續閱讀全文FB 粉絲團快速互助增加按讚數攻略﹍避免經營初期的尷尬
其實本站不太在意各種數據的累積，因為主要流量由搜尋引擎而來，代表有問題、有需求的訪客才會找上本站。而且這裡是我的筆記資料庫，主要是分享給有相同需求的人參考。 只不過最近製作分站「 CC0 免費圖庫搜尋引擎 」的 Facebook 粉絲團，發現一件事滿尷尬的，因為 WFU BL...
繼續閱讀全文網站首頁如果被分享到 FB，看到縮圖效果不佳要如何設計版面？
前幾天意外收到 FB 通知，得知本站首頁被分享到 Facebook，原來是之前協助痞客邦搬家及架站的案主，在她的粉絲團推薦我的網站及服務。 網站被分享到 FB 自然是很高興，但連過去畫面一打開，我的心瞬間涼了一半──首頁縮圖的效果實在有夠掉漆！ 為了顧及分享到 FB 的效...
繼續閱讀全文Blogger 使用 Flickr 當圖床，可能違規被停權 + 圖片消失的所有案例整理
最近看到這篇「 Flickr容易被忽略的使用規則，小心你的帳號違規被停權 」，想到前陣子有些從痞客邦搬到 Blogger 的站長，尋求本站協助搬家事宜時，發現有不少都是使用 Flickr 當圖床，而不是原有的痞客邦相簿。 其實不只搬家過來的新朋友，我知道很多 Blogger ...
繼續閱讀全文為何需要關閉 Chrome 自動更新功能？各種擾民狀況一次整理
最近打開 Chrome 後，發現奇怪，怎麼變成英文版了！不但書籤都消失了，而且進入設定畫面後，直接顯示英文介面~~當下第一個念頭是，該不會被入侵了吧？ 想想最近沒逛奇怪的網站，最有可能的原因八成是 Chrome 又改版了吧？檢查了一下版本，果然變成了 V.57。 因為過去...
繼續閱讀全文Blogger 新版 RWD 範本，對 SEO 有哪些加分之處？
前陣子介紹了「 Blogger 推出的全新自適應 RWD 官方範本 」，有讀者提問新版型 SEO 的相關問題，這表示 Blogger 對 SEO 做了哪些加強，也是大家關注的事情。 那麼本篇就來整理一下，這個 RWD 範本對 SEO 下了什麼功夫、有什麼特別之處。 (圖片...
繼續閱讀全文部落格網站在那個階段，需要開始加強 SEO？
常有讀者詢問 SEO 的問題，或是討論比較舊的 SEO 觀念，不過我寫的近 20 篇 SEO 相關文章，卻有半數以上在宣導「不要在意 SEO」這件事，為什麼呢？ 雖然 WFU 不是 SEO 專家，不過我知道的概念是： 不用錢能得到的 SEO 知識，多半不會是關鍵性的要素 ...
繼續閱讀全文用 Google 文件與客戶協作，處理待辦事項流程心得
以往一向用 Line 與客戶溝通，及處理各種架站或網頁相關需求的待辦事項，主要的好處是： 這是最多人使用的即時通 截圖方便，對溝通很重要(一圖勝過千言萬語) 不過每個階段要面對的瓶頸不太一樣，現在開始覺得 Line 不敷使用，當同時進行的案件量一多，查詢分散各處的對話資...
繼續閱讀全文Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置
前幾天 Blogger 官方發佈了公告「 Share your unique style with new Blogger themes 」，從現在起後台可以套用的佈景主題，多了 4 個大分類，共 20 款新版型可選擇。 雖然款式很多，不過版面設計的邏輯都差不多，也可看成官方...
繼續閱讀全文Blogger 自訂網址使用 HTTPS 是一條不歸路，請考慮周全
2018.2.21 公告： 日前 Blogger 官方已經支援自訂網址升級 HTTPS，請參考「 Blogger 官方免費幫自訂網址升級 HTTPS！ 設定處理流程注意事項整理 」。 在本站這個工具「 Blogger 樹狀標籤 V2 」有讀者於留言 #18 表示，點擊版權連結...
繼續閱讀全文會員系統公告：加值會員及本站客戶的專屬好康
這是一篇公告，本站會員系統新增一項功能，只優惠 VIP 級別的會員。 如果等級是「加值會員」，不必任何點數即可看到某些隱藏的「加值文章」內容。 (圖片出處: pixabay.com )
繼續閱讀全文免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧
最近需要幫客戶裝某個特殊的輪播外掛，由於是付費程式，不會有 CDN 外連，那麼必須自己有網路空間才能安裝。而且最重要的是，這個 空間必須能支援資料夾(目錄)路徑 ，然而 現在已經沒什麼免空可做到這件事了 ！ 由於網站流量不大，不太可能要求客人每年為了幾個 JS/CSS 檔，花...
繼續閱讀全文快速學會部落格文章下標題的技巧﹍找回右腦自然學習能力
對於部落格類型的網站，如果是為了提升搜尋排名，我認為把時間或資源投注在各種 SEO 技巧，或是研究 SEO 新技術，這樣的投資報酬率，可能遠遠不及 專注於文章內容的提升，以及加強文章下標的能力 。 「內容為王」這是大家都知道的，但持續產出優質內容並不容易，也需要長時間不斷吸收...
繼續閱讀全文覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)
過去一年以來，搜尋時如果出現的是痞客邦網站，開始成為一種不舒服的瀏覽體驗，因為一段時間後，所有痞客邦網頁都會自動彈出蓋版廣告。 其實我不反對廣告，我也認為網路運行的機制需要有廣告，才足以支撐這個能夠免費運作的架構，否則查資料、使用圖片等等，都只能上付費網站了。 但比較不能...
繼續閱讀全文如何從 Blogger 範本網站挑到理想的版型，且不會出錯
把 Blogger 基本功能都摸熟之後，許多站長可能會將注意力轉向模版的改造，把自己的家裝潢地跟別人不一樣，甚至有的站長會固定每 1~2 年就換一次版型。 不過挑選範本的確是一件很吃力又傷神的工作，要從那麼多個範本網站、數以百計的模版中，挑出完全符合需求、而且要看得順眼的標的...
繼續閱讀全文用 Google Apps Script 操作試算表 (3)延遲寫入資料庫 + 使用族群
過去在相關的系列文曾多次說明，Google 試算表適合當成小型資料庫來使用，不建議當成真正的資料庫來運作，也就是不能拿來作為規模比較大的商業使用，為什麼呢？ 試算表是免費的服務，在運作上、效能上自然比不上獨立運行的主機。而且 Google 提供的某些 API 也有每日配額的限...
繼續閱讀全文Blogger 付費範本網站整理 + 建議事項
之前曾寫了一篇「 使用 Blogger 免費範本，可能需要面對的問題有哪些？ 」，提醒有意找 WFU 架站的讀者，避免套用免費版型後再來發案，因為對雙方而言，等於都抱著不定時炸彈。 所以近期有些案主，會向我詢問哪裡可以買 Blogger 付費範本。為了節省尋找版型的時間，本篇...
繼續閱讀全文護眼神器富士通反射屏﹍讓 Windows 作業環境最佳化
上一篇「 富士通反射屏購買及安裝心得 」雖然已經可以讓螢幕開始使用，不過後續需要調校的事項還很多，想要讓眼睛看得舒服的話，無論是作業系統、使用的各種軟體，都需要進行微調。 需要微調的主要原因為，這是一款黑白螢幕，文字看起來最舒服的情境，是採用 "白底黑字"...
繼續閱讀全文
