Clik here to view.
Clik here to view.
讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開
去年 Blogger 官方推出的 RWD 範本，側邊欄工具的設計我覺得有一點比較沒彈性，全部預設都是關閉的狀態，所以使用「樹狀標籤 V2」的讀者曾反應，希望小工具的內容預設為開啟的狀態。當時解決的方法是在程式碼單獨處理，但這個作法無法套用到每個小工具，因此本篇提供比較好的作法。(圖片出處: pixabay.com)一、側邊欄小工具點擊 Blogger 官方 RWD...
View ArticleClik here to view.
部落格是否要加入內容付費平台的考量
「內容付費平台」是指像 Medium、SOSreader這類的部落格平台，提供讀者付費、打賞的機制，讓站長可以藉寫文獲得收益，網站不用另外放廣告，版面比較清爽。幾個月前在 FB 收到 SOSreader 傳來的訊息，算是想介紹這個平台，這是部分訊息：我想她應該對 WFU BLOG 不太熟，才會想遊說我用 Blogger...
View ArticleClik here to view.
為網站安裝 Facebook 即時通(messenger)外掛﹍顧客洽談機器人
我們常常會在某些網站的右下角，看到 FB 即時通的圖示，點開後就能直接留言。這個功能很熱門，英文名稱為 Customer Chat Plugin(客戶聊天機器人)，很多人都提問過要如何安裝，本篇就來整理非常簡單的安裝流程。點此看範例網頁一、FB...
View ArticleClik here to view.
Google 試算表製作可執行 Apps Script 指令碼的(圖片)按鈕
最近接到一個需求，想要每次都指定不同的 Blogger 文章，做出指定格式的內容，並存成 XML 檔。比較簡單的製作方式，是利用 Google 試算表，將指定的條件輸入儲存格後，寫 Google Apps Script 來撈資料執行。而每次執行 Google Apps Script 時，需要幾個步驟才能從試算表切換到 Apps Script...
View ArticleClik here to view.
使用北都兩年後解約感想﹍第四台各種替代方案整理
去年「首次跟北都續約」時，使出渾身解數才讓他們按照當初的約定「一年 3500」收費。但我心理早有準備，去年的文章也提過了，今年續約的時間一到，八成照樣不會按照當初推銷時的約定。原本預期大概是收到 4200 (或再多一點的金額) 這樣的帳單，沒想到──北都也真夠狠，竟然是半年繳 2650，也就是一年...
View ArticleClik here to view.
部落格是否需要為了中國大陸市場而搬到自架站？
過去在協助 Blogger 架站時，有時談得差不多了，案主忽然想到什麼，最後來個回馬槍：「那 Blogger 在大陸看得到嗎？」這個問題實在太難回答了，說 Yes / 說 No...
View ArticleClik here to view.
三國志 11 高難度開局 (1)﹍攻略 SOP
之前 Steam 特價買了 San11，原本只是放著當紀念品，後來手癢拿個 5 星劇本試試，打算玩玩開局就收起來，結果覺得 5 星劇本用堵路的方式雖然可以開局，但幾乎沒辦法有進展。旁邊的大魔王曹操雖然攻不進來，但本身也不容易打出去，就這麼一直耗著很浪費時間。以往大多只玩開局，這次想要來個有效玩到終局的流程，結果遇上不小的阻礙，讓我不禁開始思考三國志 11 的本質究竟是什麼，這個遊戲有沒有 SOP...
View ArticleClik here to view.
專業程式設計師的生存之道﹍讀後心得摘要
這陣子借了一本給工程師看的書，但是內容跟程式碼無關，所以讀起來不傷腦、很輕鬆。其實這本書比較像在談心法，更多的是作者提醒工程師要如何在職場上存活下去、如何工作地更有效率。我認為在實用性上，這本書反而比任何寫程式的書還來的重要，因為就算程式寫得再厲害，很多工程師的通病都是爆肝、把自己搞得累死，不然就是在職場上不曉得如何與上級、下屬對話，不瞭解客戶的真正意圖而瞎忙。不只工程師該讀，這本書的心法其實所有使...
View ArticleClik here to view.
Blogger 側邊欄隱藏開關工具
喜歡版面簡潔的部落格站長，有不少會想使用單欄式版面，也就是沒有側邊欄的設計。然而側邊欄捨棄其實也是有點可惜，這個區塊的空間若好好運用，除了可以帶給讀者不少便利性，還可撥一部份空間擺放廣告獲得收益。如果網站花一些心思設計的話，我想最佳解會是讓有需求的使用者各取所需，不想看到側邊欄的訪客可選擇關閉，需要側邊欄的時候又能立即展開這個區塊。本篇提供一個簡單的 Blogger...
View ArticleClik here to view.
SEO 資訊與假新聞的危害﹍如何辨別 SEO 文章真偽
最近「假新聞」事件導致外交官殞落，台灣當局總算開始正視假新聞造成的國安危害。比起先進國家早立專法反制，台灣步調雖慢但總比沒有好。電視媒體帶頭散佈未經查證的消息、甚至製造假新聞早已司空見慣，不過對於能辨別真偽、有心查證的民眾而言，要瞭解真相不乏驗證的管道。例如各路人馬匯集的 PTT...
View ArticleClik here to view.
Blogger 側邊欄分頁工具﹍相容官方小工具
以前曾寫過多個「Blogger 側邊欄自製分頁(Tab)小工具」，而共通點是某些官方小工具無法使用，例如 "熱門文章"、"網誌存檔"、"網誌統計資料"等等。因為這些官方工具的原理，是使用 Ajax 技術延遲取得資料，導致分頁工具無法及時複製官方工具的 HTML 碼，所以過去只能請讀者裝分頁工具時，不要使用這些官方小工具。最近接到的需求，案主的側邊欄分頁工具，要能使用官方工具...
View ArticleClik here to view.
如何為 FB 粉絲團新增「服務內容」，讓顧客一眼就知道賣哪些產品
前幾年 Facebook 粉絲頁的選單頁籤中，推出一個「服務內容」的項目，可以讓公司、店家列出產品項目、或提供的服務。但不方便的地方是，只有粉絲團設定了「公司」、「店家」等特定類別，頁籤才有「服務內容」這個選項。以本站為例，類別為「個人部落格」就無法使用。不過最近測試時發現，似乎 FB...
View ArticleClik here to view.
如何查詢自己網站的 SEO 熱門關鍵字 + 應用技巧﹍Google 網站管理員 Search Console
最近在臉友 許哲維的貼文得知，使用 Google 搜尋自己網站的熱門關鍵字，有可能會出現一個新的區塊，顯示 SEO 相關資訊，例如點擊數、平均搜尋排名等數據，就像下圖這樣：這個功能還滿有趣的，不禁研究了一下，只是似乎不是所有人都看得到。本篇整理一下心得，並提供查詢自己網站熱門關鍵字的方法，就算搜尋引擎沒有看到這個區塊也沒關係。(圖片出處: pexels.com)一、Google 測試中的 SEO...
View ArticleClik here to view.
網頁插入表格不再麻煩﹍線上產生器 + 可匯入 CSV 檔(Tables Generator)
前陣子剛好多位讀者、客戶都詢問這件事：如何在文章中插入表格，且能正常顯示，版面不異常？如果對 HTML 語法不熟悉的話，網頁要插入表格的確沒那麼容易。過去曾寫過「Blogger 插入表格的最佳流程 + 自適應寬度」，文章內容不短，但是瞭解原理、操作熟悉後，經由 Google 試算表或 Evernote...
View ArticleClik here to view.
偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧
最近這個案例比較特殊，幫客戶改付費範本次數一多，某些比較貴的範本，作者為了不想讓別人看懂程式碼，雖然 JS 沒有使用混淆 (obfuscate)，但是壓縮、重組得不成人形，導致完全無法去閱讀解析這些 JS 程式碼。很多動態生成的區塊，最終只能等 DOM 完整成形後，再來寫 JS 動態修改 DOM 指定區塊，調整為客製的需求效果。但有時麻煩的是，動態產生的 DOM 新增元素，用 JS...
View ArticleClik here to view.
解決 Chrome 下 Javascript 中文排序問題
最近客戶反應，網頁上的中文排列順序，變得跟以前不太一樣，例如：原本會按 "上午"、"下午"、"晚上"排序，現在變成 "上午"、"晚上"、"下午"原本會按 "一"、"二"、"三"排序，現在變成 "二"、"三"、"一"這件事的確離奇，不過讀者需要先瞭解的是，Javascript 能處理的中文排序，原本就跟我們的預期不太一樣，原理可參考「javascript 中文排序問題」，因此我也曾在「Blogger...
View ArticleClik here to view.
Blogger 架設電商購物車網站前，需要先考量這些問題
接到的 Blogger 商業架站需求中，有一小部分希望能購物後進行結帳，也就是需要購物車系統。由於 Blogger 是純前端的平台，就算能實現購物車功能，整個購物流程、機制、商品銷售及售後管理，一定比不上自架站的購物車系統。那麼想要在 Blogger 架設購物車功能的站長，為了避免認知與現實差距過大，在進行架站之前建議先閱讀本篇內容，瞭解以下這幾點：Blogger...
View ArticleClik here to view.
如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解
最近接到需求要在網頁呈現「五顆星評等」的效果，就像搜尋結果常會看到的星級評等：或 Google 商家的評分星等：從上面的示意圖可發現，以 5 分為滿分的情況下，4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法)，也不是 5 星(四捨五入法)，而是忠實地呈現 4.5 星。這要如何做到呢，是否除了一顆星以外，還要額外準備半顆星的圖案呢？經研究的結果，只要使用簡單的 CSS...
View ArticleClik here to view.
解決浮動導覽列遮住錨點位置的問題﹍CSS 技巧
網站使用「浮動導覽列」可提供友善的閱讀體驗，讓導覽列隨時保持在網頁最上方，訪客失焦時能重新找到方向。不過這個設計後來發現有個隱藏的缺點，當網站使用了錨點後，訪客點擊錨點時，螢幕捲到的位置看起來怪怪的。本站為了解決此現象，過去曾調高錨點的位置(放置隱藏的錨點)，或是使用 JS...
View Article