Clik here to view.
WFU BLOG 外連 JS 變更及操作說明
這是一篇公告文章，本站提供的各種 Blogger Hack 及 工具，若包含了 JS 檔外連，原本存放在 Google Drive，但為了因應「Google Drive 檔案外連功能將於 2016 年 8 月關閉」，必須提前變更 JS 外連。曾安裝本站工具的讀者，若發現 Google Drive 外連失效、小工具無法運作時，請到相關文章重新安裝程式碼，並參考本篇的說明。(圖片出處:...
View ArticleClik here to view.
最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包
「Owl Carousel」可說是使用率最高的圖片輪播外掛，許多免費、付費下載的網頁模版或部落格範本，都是內建這個輪播效果。主要原因可能是行動裝置普及後，「Owl Carousel」不但可顯示自適應(RWD)版面，還支援手指觸摸操作的效果，可輕易地在手機直接用手勢滑動輪播圖片，效果十分強大。過去曾介紹「Camera」這個 jQuery 輪播外掛，其功能強大的地方在於各種過場特效，而跟「Owl...
View ArticleClik here to view.
矛與盾之爭, 破解「鎖右鍵+防複製」的 Chrome 外掛, 以及「保護著作權」的方法
網路的本質是資訊共享，知識的流通可以讓有需要、能應用的使用者創造出更大的價值。如果在網路搜尋到一篇實用的文章，卻發現無法複製文字內容，那麼資訊不方便再利用或再創造，其實是很可惜的。過去曾使用過一些破解網頁「鎖右鍵、防止選取、關閉拖曳功能...」等等的(書籤)工具，主要的原理就是解除上述功能的 JS 語法。雖然在有些網頁是有效的，不過由於語法日新月異，某些網頁採用了新的 JS...
View ArticleClik here to view.
CSS 製作各種 Ajax 載入動畫集錦
什麼是 Ajax 載入動畫呢？網頁跟後端請求資料，在等待的空檔，通常會先顯示 GIF 動畫，避免訪客等得不耐煩。這個過場動畫的英文名稱，就叫做 Ajax Loader。由於 CSS 已經能處理細緻的動畫效果，那麼如果是簡單的過場動畫，就能用 CSS 來實現，不一定要讀取 GIF 檔，可以減少 HTTP 的請求。本篇整理了多個實用的 CSS...
View ArticleClik here to view.
Blogger 官方留言板的優點及妙用﹍加強 SEO 搜尋排名
看到不少站長將 Blogger 官方留言板關閉，改用 G+ 或 Disqus 等其他第三方留言板，原因不外乎原生留言板功能比較陽春。其實這麼一來，可是白白損失一部份從搜尋引擎而來的流量。或許你還不知道官方留言板與 SEO 之間的關連性，沒關係看完本篇之後，就會瞭解 Blogger 原生留言板的優點。同時過去認為官方留言板的缺點，大部分也都是能找到解決方法的。(圖片出處:...
View ArticleClik here to view.
Blogger 只要做到這幾件事, 就能輕鬆加強 SEO 搜尋排名
之前因為讀者對於 "搜尋排名"的提問，整理了一篇「Google 搜尋不到自己的文章嗎？搜尋結果不如預期狀況整理」，以 FAQ 的形式回答了常見的疑難雜症。不過有些讀者因為從其他平台轉換到 Blogger，對於操作還沒那麼熟悉，因此本篇以懶人包的方式呈現，列出 Step by Step 該進行的步驟。即使是剛接觸 Blogger 的新手，照表操課後也能明確知道，Blogger 要加強 SEO...
View ArticleClik here to view.
Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp
原本我認為 Chrome 最好用的滑鼠滾輪外掛是「Mouse Stroke」，不過這個套件之前被 Chrome 商店下架，只能用安裝 .crx 檔的方式執行。而自從 Chrome 某次改版之後，只允許安裝在商店上架的套件，所有 .crx 檔的外掛都失效，因此只能從 Chrome 商店找 "滑鼠手勢"套件將就使用。說實在，大部分套件的 "滾輪換頁"功能都不好用，沒有一個比得上舊版 Opera...
View ArticleClik here to view.
Blogger 隨機文章 V2 + 輪播效果
前陣子介紹完最熱門的 jQuery 輪播外掛「Owl Carousel」，聯想到部落格文章結束處，經常會配置的 "推薦文章"工具，例如「相關文章」，如果搭配輪播功能的話，應該會有不錯的效果。要進行輪播之前，得先隨機抽出足夠的樣本數，而 "相關文章"的樣本母體來自於相同標籤的文章，數量有時會不夠，因此本篇選擇將輪播功能，搭配同樣適合放在文末的「隨機文章」，這樣子抽樣母體比較大(整個網站的文章數)。同時...
View ArticleClik here to view.
Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得
"浮動廣告"是 Adsense「明文禁止」的行為，原因是這樣的行為，屬於「操控廣告的放送和顯示以吸引不必要的注意」，會有比較大的機率吸引訪客點擊廣告，等於用不正當的手段增加收益，WFU 也曾在「部落格浮動浮動廣告」→「四、錯誤示範」提醒讀者這件事。不過比較意外的是，去年 Adsense...
View ArticleClik here to view.
Blogger 搬家匯入文章的各種疑難雜症整理
前陣子處理從痞客邦搬家到 Blogger 的案子時，在 "搬圖床到 PICASA"、 "轉移對應文章的網址"等問題都有辦法解決，反而是「匯入文章」這部分有些地方很棘手，不一定都有解決方案。其實 Blogger 匯入文章的狀況還真不少，有人曾在「Blogger 中文論壇」提問，WFU 過去經手的案例也有一些。那麼就趁這次的機會整理一下，以 FAQ 的形式呈現，將來有新的狀況也會持續補充。(圖片出處:...
View ArticleClik here to view.
網頁使用程式碼高亮的最佳作法及推薦外掛
提供程式碼分享的網站，為了讓版面視覺效果美觀，通常會安裝「程式碼高亮」這樣的外掛。而帶來的影響是，網站的外掛裝越多也會影響網頁載入時間，尤其是沒有展示程式碼的文章頁面，也必須執行這個沒有必要載入的「程式碼高亮」外掛。如果能夠需要展示程式碼時，才執行「程式碼高亮」外掛，相信會是比較合理的作法。本篇將會介紹各種「讓程式碼高亮」的最佳作法，同時也推薦一些不錯的外掛程式及線上服務。(圖片出處:...
View ArticleClik here to view.
Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包
「多層樹狀標籤」是本站最熱門的 Blogger 工具，不過安裝、使用有問題而留言提問的數量，也是最多的。原因可能是安裝方式比較複雜，沒那麼容易一次成功。這次 V2...
View ArticleClik here to view.
Blogger 樹狀標籤 V2.1﹍切換標題模式
「Blogger 樹狀標籤 V2.0」是安裝懶人包，適合新手安裝。本篇 V2.1 版加入了「切換標題模式」的功能，安裝上要多幾個步驟，建議使用 Blogger 一段時間以後再嘗試安裝。以下先簡單介紹 V2.1 版的功能，想要直接安裝跳到「二、準備動作」。(圖片出處: pixabay.com)一、功能介紹V2.1 版的效果大致如下：1. 基本功能V2.x 版的修正功能及新增功能，在「Blogger...
View ArticleClik here to view.
讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)
這篇 "Blogger 論壇貼文"詢問要怎麼樣才能「觀看文章時，內文不會顯示側邊欄」？意思就是希望調整部落格的版面，將側邊欄隱藏起來，那麼文章區塊就能延伸到最大的寬度。的確很多站長都喜歡這種清爽的版面設計，友站「小說界的李洛克」就是這樣的風格，而 WFU BLOG 的分站「三國志...
View ArticleClik here to view.
Google 表單自訂 CSS 版面樣式教學
最近接到一個需求，想要將原本內嵌到網頁的 Google 表單(問卷)，改成可以符合現有網站風格的 CSS 版面樣式。仔細想了想，這個需求的確有其道理存在：1. 雖然官方提供了不少樣式可以替換，但總是無法自訂所有細節，不一定與我們網站的風格有搭。2. IFRAME 內嵌的效果，總是會看到外框、或不搭的背景，也有可能出現捲軸。基於以上理由，便來研究一下如何自訂 Google Form 表單的 CSS...
View ArticleClik here to view.
讓 Google 表單(試算表) 定時寄出 PDF 報表
在這篇「讓 Google 表單(試算表)能自動寄信」，我們利用一段簡單的語法，就能讓填表者立即收到 Email 通知(例如訂購商品的項目)，用來保存填表記錄。如果是商業用途的話，Email 的純文字填表記錄，可能不足以展現專業度。那麼本篇就來介紹，如何將表單的填寫內容，美化之後轉成 PDF 檔的格式，成為 Email 附檔寄給填表者。一、Google 表單外掛有個現成的外掛「Form...
View ArticleClik here to view.
讓手機版網頁 Youtube 影片能自動調整寬高尺寸
最近接到一個需求，在手機上的 Youtube 內嵌 Iframe 影片會超出版面，希望能解決這個異常現象。會發生這個狀況，主要是 Youtube 提供的內嵌程式碼，預設尺寸大致為 560px 寬、315px 高，這樣的數值在網頁版是 ok 的，但手機的話寬度就不夠了。由於一個網站的文章數可能有上百、數千篇，要一篇篇改不太可能，只能寫 JS 來一次處理。安裝本篇的程式碼後，會針對手機版的...
View ArticleClik here to view.
迅速搜尋 Evernote 記事標題的技巧﹍自製各種快速鍵
隨著使用 Evernote 的時間越久，累積的記事數量相當可觀時，搜尋結果容易出現許多雜訊，得花不少時間過濾，才能找到真正需要的那則記事。如果平常為記事命名標題時，有放入適當的關鍵字，那麼日後只需要針對 "記事標題"搜尋，就能得到比較精確的結果。根據官網文件「如何使用 Evernote 的進階搜尋語法」，過濾出標題的方法是在 evernote 搜尋框輸入...
View ArticleClik here to view.
使用 Google 表單(自訂樣式) 取代 Blogger 聯絡表單
Blogger 官方提供的「聯絡表單」工具很方便，可以輕易地放在網站上任何位置來充當留言板，訪客不需要登入帳號即可留言。從使用以來，在收到的訊息之中，發現某些狀況不斷重演，例如訪客的留言不知道是針對那個主題、發問沒留下網址等等，這些現象也沒什麼好的解決方法，原因在於制式的「聯絡表單」無法自行增加問題選項、或附上提醒文字。如果使用「Google...
View ArticleClik here to view.
更換第四台業者心得﹍雖然「北都」給的優惠很多，但最後我下決定的因素是這個...
最近第四台的繳費通知寄來了，剛好也收到台北市跨區業者「北都」的傳單，打著 "一年 3500"的優惠價(不是上面那張圖的 4200, 上面是官網截圖)，跟原本第四台業者一年將近 6000...
View Article