Clik here to view.
用 Line 傳未讀訊息給自己，成為待辦事項﹍不用擔心已讀訊息忘了處理
在某種程度上，Line 的未讀訊息就等於是收件匣的未讀郵件，都會是潛在的待辦事項。對我而言，現在客戶 Line 的未讀訊息，成為待辦事項的比例已經遠高於郵件。原因大概是這樣：使用郵件溝通不如 Line 方便，還要另外打開郵件軟體、文體需要比較正式等等Line 的通知比較即時，郵件會有時間差、或是要另外裝外掛才能比較快收到通知也因此簡短的溝通，我都會要求客戶用...
View ArticleClik here to view.
有些事還是要花了錢才有效果﹍SEO 流量也是
在這篇「是否痞客邦、WordPress 的 SEO 比 Blogger 好，有這樣的事嗎？」留言 #4 有讀者提出 SEO 相關問題，並且希望瞭解 SEO 搜尋排名的依據，因為該讀者認為某個競爭對手的網站資歷、內容都不如他，卻被 Google 排名在前。為了找出影響排名的因素，這位讀者很認真分析各種線索。我相信會有這樣想法的站長一定不少，也就是把經營重心放在 SEO...
View ArticleClik here to view.
Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得
長久以來使用「Font Awesome」真的非常方便，網頁製作各種小圖示時不用再煩惱，只要到「Font Awesome 圖示速查表」翻一翻多能找到需要的圖案。不過幫客戶處理需求時，最常遇到找不到「Line」的圖案，只好建議先用相近的「Whatsapp」擋著用。沒辦法，Line 在全世界的知名度不夠，主要是東亞地區的國家風行，不能怪 Font Awesome 不收錄。最近發現客戶的 Font...
View ArticleClik here to view.
製作會上下彈跳的按鈕，吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧
最近接到一個需求，案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意，指定這個按鈕必須上下不斷彈跳。這樣的設計的確不錯，因為製作網頁的最終目的，就是讓訪客下定決心並且行動，無論目標是讓訪客購買產品、按讚、或留言聯繫等等，這個行為總稱「行動呼籲」，也就是 Call To Action(CTA)。讓訪客行動的 CTA...
View ArticleClik here to view.
Clik here to view.
Blogger 在網站管理員(Google Console)看到 Index Coverage 問題不用擔心
只要是 Blogger 站長，進入「網站管理員」(Google Console) 應該都會看過這個警告訊息：由於文字描述太過恐怖，大部分站長看到 "排名降低" 這樣的字眼肯定會嚇到，但實際上根本不是那樣子，我也不清楚 Google 為何不針對自家產品 Blogger 調整一下說明。因為這個狀況接到非常多客戶或讀者的詢問，那麼就用一篇文章整理一下事件發生的原因。一、Robot.txt 設定1....
View ArticleClik here to view.
輕鬆讓 Blogger 搜尋結果出現麵包屑(breadcrumbs)導航﹍使用結構化資料 JSON-LD
相信有關注 SEO 的站長都知道什麼是麵包屑(breadcrumbs)，如不清楚的話可參考「麵包屑導航之於SEO的重要性」、「面向搜索引擎优化 之 面包屑导航」。簡單說這功能就像童話故事，小男孩為了認路而留下的麵包屑，具有協助導覽網站的效果，可讓訪客快速知道該篇文章處於網站中什麼位置，就像下圖的 Google...
View ArticleClik here to view.
網頁資料存成 CSV 需要解決的問題整理﹍亂碼 + JS 技巧 + Bootstrap 表格
最近客戶需要在網頁上顯示大量的會員資料後，製作一個「匯出」按鈕，將表格所有資料匯出存成 CSV 檔，再用 EXCEL 之類的試算表軟體開啟。整個流程要用的的技術其實沒有太高深，但是陷阱卻是很多，因此整理成一篇備存。(圖片出處: pexels.com)一、需要解決的難題1. JS 如何儲存 CSV一開始需要瞭解如何將資料存成 CSV 檔，概念可參考這個討論串「How to export...
View ArticleClik here to view.
取得教育信箱(EDU EMAIL)的管道及使用心得
網路上有不少服務或資源，會提供學生身份、或教育單位的教職員優惠，也就是所謂的「教育版」。而判斷能否使用教育版的身份識別，會看電子郵件是否為 EDU 網域。會找到這篇的讀者，想必已經知道 EDU 教育信箱的用途，也知道有什麼軟體、或服務可省下的費用，這部分的內容就先略過。其實在台灣，如果非學生、教職員的身份，一樣有辦法可以獲得 EDU 教育信箱。多數大學生畢業後，學校提供的 EDU...
View ArticleClik here to view.
三國志11__五奇戰記(4)__起源
將近十年前留下「經典戰記三部曲」後，五奇兄弟就歸隱山林。由於「孫伍兵法」已廣為流傳，不求名利的五奇自覺心願已了。近期在 PTT KEOI 版發現有佈告「311 三分歸晉...
View ArticleClik here to view.
如何使用 CDN 免費網頁字型﹍簡單快速沒有侵權麻煩
有遇過幾次客戶要求網站使用特定的字型，看起來這樣的要求似乎不是太困難，然而實際上，客戶多半對「網頁字型」沒什麼概念，以為 Windows...
View ArticleClik here to view.
三國志11__五奇戰記(4)__(下) 固守宛城大作戰
「上集」五奇經過縝密的策劃與算計，加上大量的兵推反覆驗證，終於成功拿下宛城。但從殘留的兵力來看，只能算是慘勝。而形勢更加嚴峻的是，在沒獲得更多將領的情況下，必須以更少的人手與兵力防守宛城。一、宛城防守策略1. 防守城東如上圖建好 7 火球 + 1 箭樓，可防堵大部分的狀況。不過等到宛右下方的經濟區有建設，且上圖位置有騎兵(或精銳兵種)時，其移動力可越過火球，走到下方森林攻擊經濟區。不過只要派 1...
View ArticleClik here to view.
經營何種類型的網站，可以靠 Adsense 廣告點擊收入維持生計？
前陣子接到一個架站需求，雖然客製功能很多，但客戶開出的預算比起一般水平高出不少。其實跟客戶也不算不認識，所以跟他聊聊架站的目的，其中幾點他提到：希望以興趣養活自己，因此我有設定Adsense同時不希望廣告造成訪客困擾，這其中的平衡需要你幫忙調整因為我自己也不太喜歡廣告XD...
View ArticleClik here to view.
Blogger 諮詢聯繫填寫表單 SOP
本站常會接到許多 Blogger 相關的提問、合作案件、或是詢價，無論是簡單的問題，或是大型的專案，只要提供的資訊不足，就不容易進行回覆，需要花費多次往來溝通的時間。因此若有需要向本站洽詢之前，麻煩按照本文流程提供必要資訊。(圖片出處: picjumbo.com)一、初步資訊分類經由以下問題，可協助釐清您的需求分類，以及是否需要填寫表單：是否需要協助架站？是 → 請參考「BLOGGER...
View ArticleClik here to view.
用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webview)的方法
前陣子的一個專案，客戶反應很多使用者用手機操作時，網頁會有錯誤導致無法註冊。但我手機實測的結果又沒有發生任何問題，於是請客戶提供使用者的操作環境，例如 Android 或 iOS 系統，瀏覽器版本等等。結果都不是這些原因，最後才發現是因為使用者在 Line 上面開啟網站連結所引起。當 Line 點擊連結時，並不會呼叫手機的預設瀏覽器(例如 Chrome、Safari...
View ArticleClik here to view.
Blogger 恢復網址後綴(.com)，可能導致 Google 網站管理員索引大幅下降(search console)
前陣子客戶使用網站管理員(search console)時遇上問題，他表示：把Blogger與Search console串聯，目的是為了看到瀏覽者是搜尋什麼關鍵字而找到我。但串聯成功後，我在Search console的搜尋分析裡面，卻遲遲看不到任何關鍵字的數據一開始的直覺是，也許網站管理員提交的時間不夠長，所以需要時間來累積數據。不過到了 search console...
View ArticleClik here to view.
防止網頁圖片被下載的密技
最近接到一個需求，由於案主網站的圖文常被中國網站、或農場網站盜取，所以希望能夠讓網頁上的圖片，不要那麼容易被下載。當然我也跟案主說了，任何方法都不可能阻止圖片被取得，最簡單的按一下 Print Screen...
View ArticleClik here to view.
讓圖片有放大鏡效果的 jQuery 外掛, 支援手機版﹍mlens
最近接到的需求是，希望滑鼠經過圖片時，能像使用放大鏡一樣，掃過的區域有放大的效果。類似的功能還滿常見的，例如購物網站，需要展示產品的頁面，由於網頁的空間、寬度有限，圖片很難呈現局部細節。為了降低消費者的疑慮，有必要用放大鏡功能，讓小圖來呈現大圖的細部效果。另外客戶也希望行動版有同樣效果，也就是網頁版的滑鼠 hover 效果，在行動版上需要支援 touch(碰觸) 效果。本篇要介紹的 jQuery...
View ArticleClik here to view.
釐清 Blogger「網站架設 / 客製功能 / 諮詢服務」的費用行情﹍無預算專區
看到 FB 網友貼的「沒預算方案」，雖然是嘲諷的意味居多，但不可否認的，「無預算」族群的比例很高，本站也遇過非常多案例。網站架設或相關事務是高度客製化的產品，就像房屋裝潢、手工家具一樣，無法經工廠機器大量生產，費用只能看客戶要做到什麼程度而定，與客戶的預算有高度相關。當購買「客製產品 /...
View ArticleClik here to view.