Clik here to view.
[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)
(Pic from: keytothecity.co.uk)之前做過兩個「回到頂端」按鈕的版本，分別是「Go Top 按鈕符合使用者體驗的友善設計」、「Go Top 按鈕放在浮動導覽列」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。以下為修改的筆記，如果熟悉 CSS / jQuery 的話，可以改為符合自己風格的效果。一、特效展示這個版本的特點主要有以下幾個：1....
View ArticleClik here to view.
iPhone 製作 mp3 鈴聲﹍絕對成功的方法
(Pic from: pixabay.com)習慣 Windows 系統後，對於蘋果系統有很大的不適應性，例如簡單就能播放的 mp3 鈴聲，在蘋果設備要播放或製作都不是那麼容易。最簡單的方法是藉由 iTools 這個軟體，就能輕鬆幫 iPhone 製作 mp3 鈴聲，而以前也是用這個軟體來進行，不過現在對於大陸軟體較有疑慮，因此捨棄了這個方案，可參考「iPhone...
View ArticleClik here to view.
Blogger 單篇文章瀏覽數 V2﹍(1) 取得 Google Analytics 數據
(Pic from: freevectorgraphics.org)最近發現計數器呈現停滯狀態，進了 Google 試算表才發現，原來官方已經強制升級為新版試算表，因此舊版試算表抓取 Google Analytics(簡稱 GA) 的功能跟語法已經失效，導致計數功能無法執行，請見這個「Google 試算表升級公告網頁」。若你安裝的舊版「Blogger...
View ArticleClik here to view.
Blogger 單篇文章瀏覽數 V2﹍(2) 新版本特點及安裝程式碼
(Pic from: freevectorgraphics.org)既然改了版，V2 程式碼順便改善舊版的某些功能。舊版要在一個頁面、多個位置擺放計數器不太方便，新版的優點為，一篇頁面要在多少個位置擺放計數器都沒有限制，程式彼此間不會打架。因此裝了 V2 後，如果你熟悉程式碼，只要發揮想像力，可以自己想辦法擴充到其他 Blogger...
View ArticleClik here to view.
行動裝置瀏覽器(Android / iOS)的好選擇﹍Opera 各版本評價及心得(Browser / Mobile / Mini)
(Pic from: maczapp.com)兩年前買的「初代 Nexus 7」平版，貧乏的 1G 記憶體在歷經升級 Android 5.1 後、加上越來越肥大的 Chrome 瀏覽器，才開三、四個網頁便老是呈現痴呆狀態，Chrome 果真不愧「記憶體怪獸」的稱號。為了讓 Nexus 7 繼續服役，移除 Chrome 乃不得不然，最後比較令人放心的替代方案找上了 Opera，跟當初「桌面版...
View ArticleClik here to view.
可商業用途及修改的高畫質免費 CC0 圖庫整理
經營部落格或網站，為了尋找、使用合適的圖片，得花上不少時間與心思，畢竟圖片是吸引注意力及增加訪客停留時間的重要因素。過去一向使用 Google 來搜尋圖片，因為這是樣本資料庫最大，且最省時省力的方式。但其實這麼做有風險，因為我們沒有足夠的時間來找出每張圖片、每個網站的使用條款，並仔細研讀。雖然 WFU 一向把 Credit 歸於原作者(標示出處)，然而萬一某張圖片的條款了註明「不可修改」，那麼...
View ArticleClik here to view.
高畫質免費圖庫搜尋引擎(CC0)
為了方便從網路搜尋，及使用合法、無爭議的免費圖片，製作了一個「CC0 免費圖庫搜尋引擎」，可以一次同時搜尋所有 CC0(放棄著作權) 免費圖庫。有了這個搜尋引擎，可不必再單獨進入個別圖庫網站，來做個別搜尋的動作，這也代表製作網站使用的圖片，可節省不少流程與時間。使用說明及介紹請見後述內容，想要立即體驗這個搜尋引擎，請按下面這個按鈕前往。如常常需要搜尋可商業用途、可修改、不用標示出處的免費 CC0...
View ArticleClik here to view.
分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
最近剛好有幾位讀者都詢問到 FB 分享文章時，會遇上的各種狀況，例如標題、摘要敘述無法正常顯示，或是想要自訂縮圖等等。這些問題牽涉的層面不太簡單，需要瞭解的知識不少，例如 FB 自己制訂的 Open Graph...
View ArticleClik here to view.
加快 Blogger 行動版圖片載入速度的密技
要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「優化網站效能該注意哪些事? (1)最關鍵的考量因素」。行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦法提升 jpg 圖片的壓縮比例，盡量加快行動裝置上圖片的載入速度。前陣子在打理 Blogger...
View ArticleClik here to view.
防止 Adsense 自動轉址, 造成你的訪客流失
在網站放 Adsense 廣告後，很怕自己不小心點到，因為網頁上有不少動態載入的區塊時，有時你明明點的是 A 位置，但由於時間差，突然會出現 B 區塊而誤點。萬一點到自己網站的廣告，就得提心吊膽是否會被停權。前幾個月偶爾會出現，進入 WFU BLOG 後，忘了自己下意識做過哪些動作，突然間跳出不相干的網頁，便會驚覺是不是誤點了 Adsense 廣告！那陣子就得常常查詢 Adsense...
View ArticleClik here to view.
Blogger 圖片語法轉換器﹍改變行動版圖片尺寸
從這篇「加快 Blogger 行動版圖片載入速度」我們瞭解到，Blogger 有辦法讓行動版的圖片改用小尺寸，進而讓網頁載入速度非常有感地提升，只要符合這兩個要件：1. 使用 PICASA 圖床2. 為每張圖片設定寬度手動設定圖片寬度的方法，請參考該篇文章的操作說明，但這個流程是不方便的，無法批次處理。WFU 製作這個「Blogger...
View ArticleClik here to view.
自製簡易 Blogger 即時留言版
原本 WFU BLOG 側邊欄有個「Wyboard 留言版」，因為比較花俏、耗資源，所以用「分頁功能」隱藏起來，當讀者需要留言、點擊分頁時才動態載入。後來想想，隱藏在分頁的功能，八成讀者都不太會發現，留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋，開始尋找有沒有不耗資源的簡易型留言版。最後發現了 Blogger...
View ArticleClik here to view.
Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告
Blogger 的行動版網頁，呈現方式可以有三種選擇：1. 自適應網頁 (RWD)2. 官方行動版3. 自訂行動版該使用哪一種，可根據你的網站屬性，參考「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」→「四、你適合哪一種選項？」來抉擇。最近 WFU BLOG 完成了「自訂行動版」的大工程，不過為何排除了 "官方行動版" 與 "RWD" 呢？考量的因素大致有這些：RWD...
View ArticleClik here to view.
讓 Blogger 樹狀標籤只顯示真實標籤名稱
「多層樹狀標籤」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文開頭的示意圖。+Alisha艾莉莎...
View ArticleClik here to view.
Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾
接續上一篇「自訂行動版的實作」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。由於第一篇的前言比較長，沒機會介紹系列文示意圖的 Credit，在此感謝「CC0 免費高畫質圖庫」，WFU 自己拍的 iPhone 效果還真是沒臉拿出來見人。文章開頭的 iPhone 示意圖，出處作者為「inthesky」，再次感謝 CC0...
View ArticleClik here to view.
Clik here to view.
Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體
完成 Blogger 自訂行動版「標頭+導覽列+廣告」、「文章+側邊欄+頁尾」的所有版面區塊後，現在要完成最後的收尾工作。根據「優化網站效能該注意哪些事?」，加快網頁載入速度需要從 "圖片" 與 "Javascript"...
View ArticleClik here to view.
讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧
這個主題其實有些爭議，某些觀點認為鋰電池是消耗品，沒什麼好保養的，說不定電池還沒壞，就準備換新的行動裝置了。在這樣的前提之下，的確電池能用多久不是需要關心的事，不過事實上，如果好好對待電池的話，還是能帶給我們不少便利。相信很多人會遇到，電池充飽後很快又沒電，也就是電量消耗得很快，其實這就是電池循環次數很多，電池容量越來越低的狀況。當沒有好好保養電池的時候，在電池生命的中、後期，你就得經歷這樣的情形很...
View ArticleClik here to view.
[Google Drive 外連產生器 V2] 一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟
前幾天讀者回報「Google Drive 外連產生器 V1」在新版雲端硬碟失效，試了一下果然如此，距離上一個版本不過短短半年而已。失效的原理稍後會說明，而為了繞過造成失效的情境也稍微有些麻煩。希望這個版本能撐久一點，否則需要頻繁修改的話，可能得像「Blogger 單篇文章瀏覽數 V2」走收費路線了。一、失效的原因V1...
View ArticleClik here to view.
Blogger 製作自適應網頁(RWD)﹍懶人法實作
過去在「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。然而，RWD 範本不是那麼好製作，要修改現成的 RWD 範本也需要一定的功力，因此 WFU 思考的是，Blogger 平台下實現 RWD...
View Article