WFU BLOG

讓 Blogger 樹狀標籤只顯示真實標籤名稱

「 多層樹狀標籤 」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。 不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文...

Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告

Blogger 的行動版網頁，呈現方式可以有三種選擇： 1. 自適應網頁 (RWD) 2. 官方行動版 3. 自訂行動版 該使用哪一種，可根據你的網站屬性，參考「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」→「四、你適合哪一種選項？」來抉擇。...

自製簡易 Blogger 即時留言版

原本 WFU BLOG 側邊欄有個「 Wyboard 留言版 」，因為比較花俏、耗資源，所以用「 分頁功能 」隱藏起來，當讀者需要留言、點擊分頁時才動態載入。 後來想想，隱藏在分頁的功能，八成讀者都不太會發現，留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋，開始尋找有沒...

高畫質免費圖庫搜尋引擎(CC0)﹍2015 版

為了方便從網路搜尋，及使用合法、無爭議的免費圖片，製作了一個「 CC0 免費圖庫搜尋引擎 」，可以一次同時搜尋所有 CC0 免費圖庫。 有了這個搜尋引擎，可不必再單獨進入個別圖庫網站，來做個別搜尋的動作，這也代表製作網站使用的圖片，可節省不少流程與時間。 使用說明及介紹請...

防止 Adsense 自動轉址, 造成你的訪客流失

在網站放 Adsense 廣告後，很怕自己不小心點到，因為網頁上有不少動態載入的區塊時，有時你明明點的是 A 位置，但由於時間差，突然會出現 B 區塊而誤點。萬一點到自己網站的廣告，就得提心吊膽是否會被停權。 前幾個月偶爾會出現，進入 WFU BLOG 後，忘了自己下意識做過...

加快 Blogger 行動版圖片載入速度的密技

要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「 優化網站效能該注意哪些事? (1)最關鍵的考量因素 」。 行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦...

分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊

最近剛好有幾位讀者都詢問到 FB 分享文章時，會遇上的各種狀況，例如標題、摘要敘述無法正常顯示，或是想要自訂縮圖等等。 這些問題牽涉的層面不太簡單，需要瞭解的知識不少，例如 FB 自己制訂的 Open Graph 標記規範。不過網路可以找到的解答文章倒是不少，因此這些任務可以...

Blogger 圖片語法轉換器﹍改變行動版圖片尺寸

從這篇「 加快 Blogger 行動版圖片載入速度 」我們瞭解到，Blogger 有辦法讓行動版的圖片改用小尺寸，進而讓網頁載入速度非常有感地提升，只要符合這兩個要件： 1. 使用 PICASA 圖床 2. 為每張圖片設定寬度 手動設定圖片寬度的方法，請參考該篇文章的...

可商業用途及修改的高畫質免費 CC0 圖庫整理

經營部落格或網站，為了尋找、使用合適的圖片，得花上不少時間與心思，畢竟圖片是吸引注意力及增加訪客停留時間的重要因素。過去一向使用 Google 來搜尋圖片，因為這是樣本資料庫最大，且最省時省力的方式。但其實這麼做有風險，因為 我們沒有足夠的時間來找出每張圖片、每個網站的使用條款，...

行動裝置瀏覽器(Android / iOS)的好選擇﹍Opera 各版本評價及心得(Browser / Mobile / Mini)

(Pic from: maczapp.com ) 兩年前買的「 初代 Nexus 7 」平版，貧乏的 1G 記憶體在歷經升級 Android 5.1 後、加上越來越肥大的 Chrome 瀏覽器，才開三、四個網頁便老是呈現痴呆狀態，Chrome 果真不愧「記憶體怪獸」的稱號。 ...

Blogger 單篇文章瀏覽數 V2﹍(2) 新版本特點及安裝程式碼

既然改了版，V2 程式碼順便改善舊版的某些功能。舊版要在一個頁面、多個位置擺放計數器不太方便， 新版的優點為，一篇頁面要在多少個位置擺放計數器都沒有限制 ，程式彼此間不會打架。 因此裝了 V2 後，如果你熟悉程式碼，只要發揮想像力，可以自己想辦法擴充到其他 Blogger 工...

Blogger 單篇文章瀏覽數 V2﹍(1) 取得 Google Analytics 數據

最近發現計數器呈現停滯狀態，進了 Google 試算表才發現，原來官方已經強制升級為新版試算表，因此舊版試算表抓取 Google Analytics(簡稱 GA) 的功能跟語法已經失效，導致計數功能無法執行，請見這個「 Google 試算表升級公告網頁 」。 若你安裝的舊版「...

iPhone 製作 mp3 鈴聲﹍絕對成功的方法

(Pic from: pixabay.com ) 習慣 Windows 系統後，對於蘋果系統有很大的不適應性，例如簡單就能播放的 mp3 鈴聲，在蘋果設備要播放或製作都不是那麼容易。 最簡單的方法是藉由 iTools 這個軟體，就能輕鬆幫 iPhone 製作 mp3 鈴聲，...

[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)

(Pic from: keytothecity.co.uk ) 之前做過兩個「回到頂端」按鈕的版本，分別是「 Go Top 按鈕符合使用者體驗的友善設計 」、「 Go Top 按鈕放在浮動導覽列 」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。 ...

iPhone 檢測電池容量的方法 (免越獄JB) + 挑選副廠電池心得

家人使用了很久的 iPhone 4s，電池已經換過一次，但最近又開始出現耗電快速的情形，看來又該換電池了。原本準備讓店家換，但打了幾家電話，每個都說自己電池是原廠的...看倌你知道 原廠電池要多少錢嗎？行情價約 NT. 2800 。 然而這些收費 NT. 600 ~ 900 ...

[工具] Blogger 隨機文章 + 自適應尺寸縮圖

2016.5.26 公告： 目前已有新版本，可改安裝「 隨機文章 V2 + 輪播效果 」。 前陣子幫朋友安裝放在文章結束處的「 系列文 」功能，以及放在留言區塊前面、類似 Linkwithin 的「 相關文章 」工具，跟他解釋「系列文可以從文章相關的標籤，隨機抽選指定的文章數...

[CSS] 美化 Blogger 官方標籤雲

最近朋友買了一個漂亮的 Blogger 範本，除了配色一定比官方範本好看之外，也會有一些 jQuery 特效。不過非官方範本想要自己修改版面，就不是那麼容易了，同時也會有一些相容性問題，例如本文的主題 "標籤雲"，不巧執行就遇上版面破裂的情形。 Blogg...

[教學] Blogger 行動版如何讓 Adsense 最佳化

過去 一直使用的是 Blogger "官方" 行動版，其實這也不啻為懶人的好選擇，不但讀者用手機閱讀時載入速度快、版面簡潔，自己也不用管理第二套範本內容，而依照「 行動版擺放 Adsense 的簡易技巧彙整 」也能讓 Google 及自己有所收益，算是三贏的局...

舊筆電回春日記﹍XP + SSD 硬碟使用心得

這陣子需要幫家人弄一台可以上網、玩 Line 的文書機，想起了十年前買的筆電小狗機(TravelMate 3000)，當初用了三年後，一過保固期螢幕馬上就異常，時間算得還真準！ 小狗機退役期間雖然找到了方法解決異常(可參考「五、舊筆電螢幕異常的處理」)，不過老舊配備連跑 Ch...

[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包

上一篇「 Blogger 自訂安裝 Google Adsense 的各種位置及方式 」，雖然內容很詳盡，只是對不熟悉語法與 Blogger 範本的讀者，可能看得有點吃力。 另外一點是，很多讀者 想在文章中放入 Adsense 廣告，但得一篇篇手動加入安裝碼，這對網站有數百篇文...

[教學] 改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕

在網站擺放各式熱門的分享按鈕，可方便讀者主動幫我們宣傳，有助於散播文章到不同的平台。這件事已經有不少第三方服務可替我們代勞，例如「 Shareaholic 超完整社群網站分享按鈕 」，讓我們不必單獨安裝個別分享按鈕，省下不少麻煩。 本站沒使用這類服務的原因，主要考量為減少 j...

[教學] 安裝 Line 分享按鈕﹍網頁版及行動裝置都相容的語法

2017.1.20 公告： 由於 Line 出了網頁版的程式，本篇的程式碼已經改為網頁版及行動裝置都相容的語法。可忽略原始的文章說明內容，直接跳到「二、所有網站通用的語法」安裝程式碼即可。 雖然 Line 很久以前就釋出可以安裝在部落格網站的分享按鈕，不過之前幫忙朋友安裝時...

Windows 用 VMware Player 模擬 MAC OS X 心得 [筆記]

為了讓網頁效果能跨瀏覽器相容，這在網頁設計來說一直是令人頭疼的事。除了搞定「 IE 不同版本 」、行動裝置以外，另一個更難解的算是蘋果系統了。 畢竟蘋果裝置沒那麼普及、系統比較封閉。同一個網站，在 Windows 的 Safari、或 Yosemite 的 Safari、或 ...

[教學] 管理網站外連檔案的技巧﹍讓 Google Drive 與 Dropbox 同步

歷經「 Google Drive 外連檔案無預警失效 」三天後，上一篇提出了「 幫網站外連檔案買保險 」的方法，可確保部落格外連沒有後顧之憂。 經實際操作的結果，當有兩處資料夾，需要各自保存一份同樣的檔案時，所有的動作得重複做兩次，例如檔案的 "新增"、上...

[小工具] 徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險

Google Drive 上星期發生了「 JS 檔外連失效 」事件，雖然日前已經修復，但相信所有經歷這件事的站長都不好受，心理也會留下陰影，是否哪天殘破的部落格版面又要重現？ 誠如我在上一篇提到的，「 放在雲端的任何東西，沒有一樣是絕對安全的 」，網站隨時有開天窗的風險總是無...

Google Drive 外連失效﹍開放會員索取 js 檔案

(Pic from: pocketables.com ) Google Drive 去年曾發生過一次外連失效的事件，原因為「 外連流量限制 」，因此當時請讀者將外連 js 檔自行分流。而昨日(2015-02-06)開始，Google Drive 的所有外連 js 檔又陷入異常狀...

[網站登錄教學] Google 網站管理員的活用方法﹍我的例行待辦事項

(Pic from: awesomelytechie.com ) 有讀者詢問「看了好多的SEO教學文章， 為何我網站的文章 Google 引擎還是難以搜尋到？ 」，這樣的情況通常出現在新網站，而使用 Google 網站管理員，就能檢視搜尋引擎的索引狀況。另外一個常見的問題是「 ...

Blogger 留言數量提示字串修改

如果有注意 Blogger 官方留言數量這件事的站長，大概會發現，官方預設的提示字串不太合語意，看起來怪怪的。 當文章沒有留言時，首頁提示的字串顯示為「 沒有留言： 」，多個冒號不知何意，且不管有幾則留言都會出現這個冒號。還有，一般會比較習慣看到 "數字"...

Email 傳送檔案到 Dropbox 的各種應用情境 (Send to dropbox)

Dropbox 算是雲端備份工具的龍頭，除了基本的同步功能，現在還能外連檔案、架設網站。他自身的功能已經夠強悍，再搭配各種第三方外掛，應用層面真的非常廣。 本篇要介紹的是 WFU 一直在使用的外掛「 Send to dropbox 」，主要用途為 利用 Email 傳送內容或...

Blogger 文章不小心誤刪了怎麼辦？救回及善後技巧整理

前陣子剛發生「 Blogger 網站消失 」的事件，現在又有讀者於「 Blogger 批次修改標籤的方法 」留言 #12 表示 " 有什麼方式能救回來誤刪的文章? "。相對之下，雖然「網誌」被誤刪聽起來比較嚴重，但 「文章」被誤刪的話，可能比網誌更難救 ，因為...

Blogger 提供新的網站地圖(sitemap)格式﹍一勞永逸的提交方法

過去 Blogger 要提交網站地圖到「Google / Bing 網站管理員」時，其實有點小小的麻煩，因為 Blogger 提供的兩種格式 Atom/Rss，無法儲存太多資料，一個 sitemap 網址最多能存放 500 篇文章，超過時只能手動分開提交。 現在 Blogge...

CSS tooltip 進階探討﹍(3) 讓提示框顯示圖片及應用方式

CSS tooltip 系列文前兩篇「 安裝懶人包 」及「 疑難雜症排除 」詳細說明了安裝及解決所有問題的方式。而 +Ken CHEN  提出了「 CSS tooltip 能否顯示圖片 」的問題，答案雖然是可以，但很麻煩，且需要考量的因素不少。 +Mark X  在前一篇留言...

Blogger 網站突然消失了怎麼辦？(網誌被刪除案例分析)

(Pic from: blogolect.com ) 最近有位苦主發生「 Blogger 網誌被移除 」這樣的悲劇，經營許久的部落格，突然間網址消失、進不去。看到網誌不見一定很令人錯愕，長久花費的心血都沒了。 Blogger 網誌被刪除的案例在國外有很多，多半是被判定或檢舉...

[教學]檢查 Google 帳號是否被盜用﹍查詢最近登入的 IP 紀錄

為了避免 Google 帳號被入侵、或盜用，官方有提供帳號最近一個月內登入的詳細紀錄，可查詢從任何裝置(行動或PC)的使用記錄，若看到可疑的裝置登入我們的帳號，可立即移除該裝置。 不過最近發現查詢記錄的頁面及流程都不太一樣了，因此稍微做個圖文筆記，方便將來查閱。

假日大台北何處去？訂閱旅遊部落格「特定分類標籤」文章之技巧

由於 WFU 住台北，假日不想跑太遠時，會選擇在大台北地區逛逛、健行等等。拜旅遊類優質部落格眾多之賜，只要挑選幾個內容豐富、經常更新的指標性網站來訂閱文章，就不太需要煩惱到時跟家人的旅遊去處、或是有沒有新的熱門景點出現。 不過身處大數據(Big Data)的時代，資料篩選是一...

領取 Adsense 西聯匯款最優惠的方法﹍大眾銀行理財紀實

上次從「 元大銀行領取西聯匯款 」時，得知大眾銀行很快就會開放「網路領取西聯匯款」，便決定下次要改循此管道，將來不必再跑銀行。 這次有機會再領取 Adsense，果然前陣子大眾銀行已經開通此功能，因此很高興地前往附近的大眾銀行開戶。不過本篇的內容並非介紹開戶與領款的流程，網路...

會員系統點數加值說明

個資及隱私權保護宣告 (Privacy Policy)

(Pic from: felipegodoy.wordpress.com )