聊聊部落格若加入文章聚合平台，重複內容對網站 SEO 會有什麼影響
幾個月前聽說有個免費部落格搬家的服務「XXX」，基於探究原理的興趣研究一下他的機制，從官方的聲明來看滿吸引人的，雖然會產生重複內容，但創辦人過去有豐富的 SEO 操作經驗及技巧，長期而言宣稱可以提升 SEO，獨立網站也可加入合作，一時之間很好奇他的技術，也曾考慮是否要加入。 ...
繼續閱讀全文免開瀏覽器播放 Youtube 訂閱頻道+清單，還能自動記憶結束時間﹍foobar2000 (Windows)
通常我在眼睛需要休息時，會播放訂閱的 Youtube 頻道來 "聽"，一邊利用零碎時間，一邊可以吸收特定的知識、資訊等等。 而且為了發揮更多時間效益，我還會把 Youtube 影片的速度調整為 1.5 ~ 2 倍，在同樣的時間下可以消化更多影片。 不過...
繼續閱讀全文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 或想辦法變通...
繼續閱讀全文
