瞭解 Blogger 動態檢視範本 + 行動版範本的特質

February 12, 2016, 5:00 pm

≫ Next: 運用 PTT 蒐集各種(旅遊)資訊﹍不可不知的操作及搜尋技巧

≪ Previous: 部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果

$

0

0

這個 Blogger 中文論壇貼文詢問「動態檢視範本如何修改」，其實本站寫的許多小工具，不時也有讀者詢問怎麼安裝到動態檢視範本(Dynamic Views)、或官方行動版範本，因為顯示不出來。

雖然 Blogger 是個自由度很高的平台，什麼都能改、什麼都不奇怪，不過 "動態檢視範本"跟 "官方行動版範本"這兩者有著不一樣的特性，非常的不自由。所以開頭問題的答案是：任何工具、外掛在正常情況下，都無法安裝到動態檢視範本及官方行動版範本。

Blogger 網頁版跟一般部落格平台不同，只要有 HTML/CSS/JS 的基礎，「版面/功能」想要怎麼改都行；而 "動態檢視範本"跟 "官方行動版範本"則比較像一般部落格平台，類似住在公寓、或社區大廈，只能選擇特定版型，看起來跟其他住戶的門面、格局都差不多。

總之 "動態檢視範本"跟 "官方行動版範本"我們能做的改變有限，最多自行粉刷一下外牆、或多買幾張桌椅。那麼本篇就來說明這兩種範本的特質，以及瞭解我們能做的事有哪些。

一、動態檢視範本的特質

• 動態檢視的意思為，利用 AJAX 動態載入的技術來讀取資料，換頁時可以加快載入速度，且所有頁面內容都不是用 HTML 產生的。
• 官方提供了七種版面效果，大部分都滿好看的：
  
  • 傳統模式(Classic)
  • 翻卡模式(Flipcard)
  • 雜誌模式(Magazine)
  • 拼貼模式(Mosaic)
  • 側欄模式(Sidebar)
  • 快照模式(Snapshot)
  • 時間表模式(Timeslide)
• 詳細的操作及介紹，請直接參考這篇：「Blogger最新推出的動態檢視功能」
• 動態檢視範本的網頁效果，由於全部由 JS 產生，在範本中找不到地方可以修改，來新增自訂的功能。
• 某些官方小工具可以支援動態檢視範本，根據「官網說明」，一共有這些：
  
  • 網誌存檔(Blog Archive)
  • 追蹤者(Followers)
  • 標籤(Labels)
  • 簡介(Profile)
  • 訂閱連結、透過電子郵件追蹤(Subscribe )
  • 連結清單(Link List)
• 由於官網的資料太舊(2012年)，其實還有一些在這段期間推出的小工具也有支援動態檢視範本，有需要的讀者可一一嘗試。
• 但是最重要的「HTML/Javascript」工具無法支援，這也代表使用者很難有自主性。
• 我們有控制權的，只有網頁的 CSS 效果，可藉由新增 CSS 參數做到此事。

二、官方行動版範本的特質

• 啟用官方行動版範本的步驟為：後台 → 範本 → 行動服務 → 按下方「齒輪」圖示 → 勾選「是，在行動裝置上顯示行動版範本。」→ 選擇行動版範本

• 上圖除了「自訂」以外，都是可選擇的官方行動版範本。
• 官方行動版範本的程式碼，不在後台的範本之中，也不額外讀取範本中的 CSS、不能新增小工具，因此我們無法做 HTML/CSS/JS 的修改。
• 因為無法修改，導致官方行動版成為制式化的版面，只好跟其他網站 "撞衫"。
• 要讓 Blogger 行動版跟別人不一樣，只能選擇 "自訂"範本，請參考「Blogger 行動版範本修改技巧」
• 要自訂 Blogger 行動版，是一件比 Blogger 網頁版更困難的任務，建議網頁版的修改已經很有心得、且 HTML/CSS/JS 都有一定的基礎以後，再來挑戰這件事。

三、修改動態檢視範本

動態檢視範本的程式碼，由於有一小部分放在範本之中，而且會讀取範本中的 CSS 內容，因此動態檢視範本存在著修改的可能性。不過 WFU 直接說結論，就算可以改，也不建議去研究這一塊，因為真的有點自討苦吃，投入的時間與獲得會不成正比。

1. 修改 CSS

這是最簡單的一部份了，只要懂 CSS 的讀者，相信就知道怎麼改動態檢視範本的版面效果。步驟為：

• 後台範本 → 自訂 → 進階 → 新增 CSS → 填入想調整的 CSS 參數即可

這個 Blogger 論壇討論串「讓自己的動態檢視功能(Dynamic Views)更有特色」提供了一個 CSS 修改的範例，可參考看看。


2. 修改 HTML

這部分算是不可能的事了，因為網頁內容全部都是用 JS 產生，你填入的任何 HTML 碼，最終都會被 JS 產生的動態 HTML 給覆蓋掉。


3. 修改 JS

國外有位很強的網頁開發者，解析了 Blogger 動態檢視範本 JS 程式碼的架構，找出如何破解動態檢視範本的方法，詳細內容可參考這篇「How to customize Blogger's Dynamic Views templates」。

大致說明一下原理，他解析出 Blogger 動態檢視範本新增頁面元素的語法結構，只要新增符合結構的語法，就能在頁面上增加指定的 HTML/JS 等工具。

然而如前面所提，研究這件事真的吃力不討好，因為：

• 這些語法結構很特殊，並不直覺。
• 就算熟悉 HTML/JS，也不容易熟悉這個新的語法架構。
• 這個修改方式並非官方公佈的方法，而是這位開發者自己找到的現有規則。這也代表哪天官方程式碼若做了變動，那麼修改方法就要重新研究了。
• 也就是說，辛苦半天就算能弄出一個嶄新的動態檢視範本，很有可能某天突然間網頁就不能執行了。

這位開發者另外提供了一篇心得，說明如何在動態檢視範本安裝知名的社群分享按鈕「AddThis」這個小工具，有興趣的讀者可以鑽研看看。

四、小結

對於 Blogger 的動態檢視範本與行動版範本，我會建議喜歡使用的讀者，遷就現有的效果就好，別花時間研究怎麼進行改裝。除非你具有網頁開發人員等級的實力，那麼研究這件事才會比較容易上手(不過通常不太會是本站的讀者了)。

真的不喜歡網站跟別人看起來一樣的話，以 "動態檢視範本"來說，就乾脆不要使用了。其實這樣的效果，稍微會寫 JS 的話，也是可以自己做出來，還能進行額外的版面修改。

而修改 "行動版範本"，可以參考本站「Blogger 行動版」這個標籤的所有相關文章，會程式的讀者應該是能自己處理。而不熟悉程式、又想改版面的讀者，則可與 WFU 聯繫，省下自行研究的時間。

更多 Blogger 行動版相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

運用 PTT 蒐集各種(旅遊)資訊﹍不可不知的操作及搜尋技巧

February 16, 2016, 4:03 am

≫ Next: Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

≪ Previous: 瞭解 Blogger 動態檢視範本 + 行動版範本的特質

$

0

0

「BBS」看似是一個古老、過時的平台，但是在搜尋特定資訊時，跟 Google 相較之下，有時它會是我心目中的第一把交椅。

在多數情況，Google 能幫我們找到問題的正確解答。但是當搜尋的資訊牽涉到商業行為時，那麼 Google 到的資料就很容易包含大量雜訊，我們需要分辨哪些內容可能是廠商花錢產生的業配文，或是請工讀生、寫手四處散播的干擾資訊。除非是網路重度使用者，不然很難快速分辨資訊的真實性。

「論壇、BBS」這類平台有著類似的特質，經由大量使用者的參與討論、反覆思辨過程，可將錯誤、過時資訊、或有心人釋放的風向，與真實的資訊分離出來。也就是說，很多我們需要的資訊，在大型討論區會是更好的取得管道。

「BBS」雖然介面比「論壇」粗糙，但熟悉操作後，他的搜尋、操作速度反而是最快速的平台。為了讓朋友快速上手 "PTT"這個最熱門的 BBS 站台，本篇整理了我常用的操作及搜尋技巧，並以搜尋實用的 "旅遊資訊"為例，相信有助於快速理解，並進而舉一反三、瞭解找到其他各式資訊的方法。

一、PTT 各平台工具

連上 BBS 雖然可以用簡單的 telnet指令，不過還是有個介面會比較好操作，以下是各個平台推薦使用的工具：

1. PCMAN

Windows 系統下的連線工具首推「PCMAN」，下載網址如下：

• http://www.azofreeware.com/2006/12/pcman-2004-combo.html

2. CHROME 外掛

如果覺得額外安裝軟體、設定很麻煩，最簡單方法就是安裝 Chrome 擴充套件「PttChrome」，下載網址如下：

• https://chrome.google.com/webstore/detail/pttchrome/hhnlfapopmaimdlldbknjdgekpgffmbo

安裝完套件之後，將以下網址加入書籤，可直接使用 PTT：

• http://iamchucky.github.io/PttChrome/index.html

3. Android APP

Android 系統排名前二的 APP 為這兩個：

• Mo PTT：https://play.google.com/store/apps/details?id=mong.moptt&hl=zh_TW
• JPTT：https://play.google.com/store/apps/details?id=com.joshua.jptt&hl=zh_TW

4. iOS APP

蘋果 iOS 系統推薦的 PTT 連線 APP 為「PTT+」，下載網址如下：

• https://itunes.apple.com/tw/app/ptt+/id918374674?mt=8

5. SSH 加密連線

最近幾個月開始，PTT 不時會有連不上的情形發生，原因有多種可能性，請參照這篇「PTT 過載連不上？各種軟體快速登入技巧整理」的方法，改用 SSH 加密連線的話，不但帳號密碼不容易外洩，連線也更容易。

二、註冊與操作

1. 註冊

雖然 PTT 就算不註冊，也能用訪客(guest)的身份試用功能，但我們主要目的是要搜尋資訊的話，還是必須註冊一個帳號，才有權限使用一些進階搜尋的技巧。

只不過在 PTT 註冊，這件事並不如想像中容易，稍稍有點難度。也因為如此，前陣子「大陸網軍為了進攻 PTT」，還得想辦法花錢買帳號。

想要成功註冊，首先得先準備一個 "非免費"的電子郵件信箱(所以 Gmail 帳號是不能註冊的)，然後按照這篇「一步一步教你怎麼註冊PTT」的步驟，應該就可以成功註冊了。


2. 操作

APP 軟體由於是圖形介面，操作上會比較直覺一些，就不特別說明了，本篇之後的內容主要針對 Windows 下的 PCMAN 的操作介面來介紹：

• 瀏覽文章或操作，使用 上、下、左(離開看板或文章)、右(進入看板或文章) 這四個方向鍵，就能完成所有直覺式的操作。
• 使用 [、]鍵可以閱覽上一篇、下一篇同標題的系列文章。
• 到了任何一個畫面，不曉得要做什麼事、或不曉得有哪些快速鍵可以操作時，按下 h(代表 help) 就會出現能使用的快速鍵列表。

更多的操作方式，下面經由不同主題逐步介紹。

三、尋找看板

PTT 由於看板太多、分類的非常細，許多很棒的板往往知道的人不多。因此對於新手而言，要如何找到需要的討論區是一大挑戰。

1. 分類看板

從 PCMAN 的開始畫面 → (C)lass [分組討論區] → 可看到討論區的大分類：




一開始不知從哪逛起時，可直接從 12 (即時熱門看板) 開始逛：



排行榜第一大多由最有名的 "八卦版"佔據，這個版有最即時的各種小道消息。

看板名稱顏色不一樣的(例如藍色)，表示已經加入我的最愛。要將常去的看板加入最愛，按 m即可，以後就會出現在開始畫面 → (F)avorite [我的最愛]，這樣進入看板就比較快了。

提供一個找版範例，假設現在的任務是，搜尋「日本旅遊」的相關資訊，那麼回到討論區分類的畫面，以下為路徑：

• 9 生活娛樂館 → 13 Traveling 旅遊 → 13 Japan_Travel

進入後，就可搜尋資訊、或參與討論了。


2. 直接搜尋

如果知道看板的英文名稱的話，可以在任何畫面按 s，輸入看板名稱來搜尋看板。



忘記英文怎麼拼也沒關係，例如要搜尋 "八卦板"，才輸入 "goss"就卡住，不知道後面的字母時，只要按下空白鍵 space，系統會自動補齊剩下的可能性，顯示 "gossip"，因為有兩個看板名稱，前幾個字母同時符合這些字串，我們只要再將 "gossiping"打好打滿，就可進入八卦板了！


3. 問版(AskBoard)

最麻煩的是，我們想找的板，除了不知道英文怎麼拼、也不知道 PTT 到底有沒有這個板，那麼最快的方法，就是直接問了。

因此進入 PTT 的第一個動作，建議先將「問版(AskBoard)」加入最愛，利用上面「2. 直接搜尋」的技巧即可。

進入「問版」後，搜尋文章標題就能得知是否有要找的板，按下 shift + ? (也就是輸入問號的方式) 再輸入字串。



例如想去淡水玩時，上圖為搜尋 "淡水"的結果，第 4 篇就有熱心鄉民協助回答如何前往 "淡水板"了。

如果你要的板都沒人問過，那麼也可自己 PO 一篇文求救囉！

四、搜尋資訊的技巧

學會找板後，接下來要學習的是如何運用各種技巧，來找到我們需要的資訊、文章。

1. 查詢標題

同樣以 "淡水板"為例，假設我們要搜尋特定的美食資訊，最快速的方法就是搜尋文章標題。

• 操作方法：前面已經介紹過，按下 shift + ?搜尋字串即可。

這裡假設我們搜尋 "食記"這個字串，會發現竟然有 821 個結果！那麼我們可以縮小搜尋範圍，做第 2 次的搜尋。在搜尋結果的畫面，再按一次 shift + ?搜尋 "捷運"這個字串，就可找到淡水捷運附近的食記了。

這樣的深層搜尋技巧：

• 大約可重複 3~4 次
• 不僅限於搜尋文章標題，也可用於其他的複合搜尋方式，例如搜尋推文數、作者等等。

2. 搜尋作者

PTT 逛久了，我們會發現某些網友的文章特別有內涵、深度，想要拜讀他所有的文章，那麼就可使用 "搜尋作者"的功能。

• 操作方法：按下 a再輸入作者 ID 即可。

例如八卦板 (gossiping) 有位資深香港網友「chenglap」，每次發文都能獲得數量龐大的推文數(常被推爆)，且被版主標記(m文)的文章數量一樣非常可觀，代表他的發文質與量兼具，可利用這個技巧一覽他的文章。


3. 搜尋推文

這是 WFU 極力推薦的篩選資訊技巧，利用搜尋推文數，可節省我們大量的閱覽時間。

一般來說，推文數越高的文章越有價值(或熱門)、噓文數越高則相反。我們一天只有 24 小時，在資訊爆炸的八卦板，如何找到最熱門、最有價值的資訊呢？就是利用推文數了！

• 操作方法：按下 shift + z再輸入推文數量即可篩選文章。

假設我們只能挪出 3 分鐘的時間逛八卦板，那麼可搜尋 100 推以上(也就是 "爆")的文章來看就好，數量比較少、但多半是必看的資訊。

依照我們能運用的時間，可調整篩選 50 推、20 推不等的文章，如此就不必一直上、下頁切換，來尋找資訊了。


4. 搜尋版主篩選好文

比較認真管板的板主，看到質量較好的文章時，可能會暫時(用 m 這個記號)標記起來，那麼我們在這一類的板，找到好文的時間就能大大縮短。

• 操作方法：按下 shift + g再按下 m。

例如想買筆電時，同型號的開箱使用經驗是非常重要的，而被 m 文的內容相信會更可靠一些。那麼在 notebook(筆電板) 先用以上技巧搜尋出所有的 m 文，再來搜尋自己的型號，就可找出這一類的精華文章了。


5. 搜尋精華區

最認真的板主，還會將所有精華文章放到「精華區」，並分門別類整理好，依照各種方便查詢的方式排列整齊，可說是造福人群！

• 操作方法：按下 z即可進入精華區。

例如 movie(電影板) 的精華區真的整理得非常棒，除了內容詳盡，且分類得很好，喜愛電影的朋友不得不逛這個精華區。

五、過濾資訊

在資訊爆炸的年代，雖然搜尋資料、知識的取得很容易，但雜訊相對而言反而更多。光是 Line、FB 的轉貼資訊就已經難辨真假了，而夾雜在討論區之中的業配訊息、躲在推文中帶風向的黨工、甚至商業公司或傳媒安插的暗樁，我們是否能分辨的出來？

「盡信書不如無書」，比起搜尋資訊，我想這個年代更重要的是分辨資訊的真偽，以下分享幾個過濾資訊的技巧。

1. 謹慎面對轉貼文章

很多發表在 PTT 的文章是從部落格、或他處網站轉貼而來：

• 如果是名人的網站、部落格、FB，由於持續接受大眾檢驗，內容可信度會比較高。而提供錯誤資訊的名人，照樣很快就會被噓爆。
• 如果是不認識的網站、部落格，需要花時間檢驗內容是否為置入行銷，最好持保留態度。
• 小心聳動標題的文章，多半是為了吸引點擊率(賺廣告點擊)而寫，內容充實度常與標題有極大落差。

2. 檢驗內容真偽

當看到一篇難以驗證內容真偽的文章，我通常會這麼做：

• 忽略全文內容
• 注意力放在別人回覆的內容，因為通常會對原文有誤的地方進行修正、無誤的地方表示贊同。
• 至於回文說的是否正確，可看後續的其他回文是否再度修正，通常一系列討論串看個幾篇，得到的結論跟正解就不會差距太遠。
• 原文內容雖然可以忽略，但是原文的推文也等於是 "回覆內容"，所以推文也是在幫助我們過濾資訊真偽，必須大致掃一下。
• 有些特定團體的暗樁，會專門在推文的前 10~20 樓帶風向，所以別偷懶只看前面幾則推文，否則一樣會得到錯誤資訊。
• 總之，經由反覆辯證後的結果，才是比較可靠的資訊，盡量別看完原文就將結論帶走。

從以上流程可瞭解，網路上搜尋到的某篇文章，如果沒有什麼留言進行正反方的意見激盪，很難證明內容的可信度，只能靠自己的判斷力了。相較之下，討論區、BBS 則提供了會議式的意見交流，有助於我們取得更可靠的資訊。

六、搜尋範例

1. 淡水行程

接下來附一個簡單範例，來安排熱門的「淡水一日遊」，首先進入淡水板：

• 搜尋 "一日遊"字串，可看到各種規劃的行程建議。
• 以前在老街吃的 "阿給"總覺得，到底 "阿給"有名在哪，吃不出來啊？現在搜尋字串 "阿給"後，在地人就會告訴你，好吃的在真理街哪幾家，要什麼時候去吃才吃得到。
• 在老街總會看到大排長龍的 "現烤蛋糕"，真的有這麼好吃嗎？搜尋字串 "蛋糕"，就會看到在地鄉民告訴你由來、秘辛，或是還有哪幾家可以買等等。
• 怕還有什麼沒吃到的話，可以搜尋 "必"這個字，看看有哪些 "必吃"、"必推"的項目
• 至於景點的話，當然就是搜尋 "景點"兩個字

這樣子差不多吃的、玩的資訊就都有囉！


2. 旅遊資訊相關看板

安排行程較遠、天數較長的旅遊時，那麼以下這些看板是非常實用的。

• TaiwanPlaza 台灣：這是台灣所有各地區看板的總分類，進去後可再進入各個細分的區域看板。
• Hotel 旅館：尋找旅館、民宿的資訊及評價等等。
• Car-rent租車：自助旅行的話，一定要來這個板找租(機)車的資訊，以免遇到黑店。
• Tour-Agency旅行社：跟團詢價比行情的地方
• Japan_Travel 日本旅遊：如版名
• Ind-travel世界自助旅行：如版名
• EuropeTravel 歐洲旅行：如版名
• Hiking 徒步旅行：有關登(高)山、爬(郊)山的遊記、資訊等

七、其他使用技巧

• 推噓文：按 shift + x可進行推文、噓文
• 發表文章：找不到資訊時，就直接發文詢問吧！可參考這篇「發文教學」，且每個板的規定都不同，發文前記得先閱讀置底版規，免得不小心就被禁言了。
• 回覆文章：按 r可回覆該篇文章
• 訂閱看板文章：沒時間逛 PTT 的話，可直接訂閱 PTT 看板的文章，請參考「找出 PTT 的 RSS 網址」→「四、找出論壇 RSS 的方法」→「3. PTT」

最後，如同「網站故事」所提，我們從前人得到了網路上留下的大量資訊與知識，也該回饋給網路些什麼。

如果曾經從 PTT 擷取了對我們有幫助的資訊，為了感謝鄉民們正反意見激盪後留下的果實，將來看到能提供意見的討論串時，也別忘了留下贊同或反駁的聲音，無論是對是錯，我們的每一字、每一句，都在為傳承盡一份力量。

更多 PTT 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

February 19, 2016, 11:46 pm

≫ Next: 檢查你的 Google Analytics 是否安裝了兩次, 那麼數據也會乘以二喔！

≪ Previous: 運用 PTT 蒐集各種(旅遊)資訊﹍不可不知的操作及搜尋技巧

$

0

0

最近幫讀者處理行動版時，發現 Adsense 若改用「自適應(RWD)廣告單元」，效果會比想像中來得好。

使用原始固定尺寸的廣告時，在不同行動裝置的效果都不一樣，小尺寸手機有可能超出頁面，而在大尺寸裝置或平板，則可能版面顯得空曠。總之，有一好就沒兩好。

那麼本篇就來分享測試心得，並舉例說明其優點。

(圖片出處: pixabay.com)

一、Adsense 固定尺寸的效果

1. 手機版尺寸

Adsense 在行動裝置推薦的廣告尺寸有兩種：

• 320 x 100
• 300 x 250

這兩個尺寸的寬度，都不超過 320px 的原因是，市面上最小的手機顯示尺寸為 480 x 320，在考量手機直立使用的情況下，320px 是讓版面正常顯示的最大寬度。

只不過這樣的尺寸，在手機橫擺、或大尺寸行動裝置的螢幕上，效果不太好。



上圖為模擬 iPhone 6s 的效果，紅框部份為原本 320x100 應顯示的範圍，這樣的效果已經讓廣告區塊顯得空曠了，結果剛好又遇到 320x100 的廣告額度用光，只能顯示 320x50 的廣告，整個版面顯得又更突兀了。


2. 非手機版尺寸

什麼情況下使用者會拿 "非手機版的廣告尺寸"來用呢？最常見的就是在文章中安插了 336x280 這樣的尺寸，當然這樣的考量主要是為了 "網頁版"的效果。很可惜副作用就是，在小尺寸手機上，這個廣告就會超出頁面了。



上圖為模擬 iPhone4 直立的效果，在沒有使用 RWD 廣告的情況下，正方形區塊的廣告超出了頁面範圍，讓版面顯得不美觀。

這個舉例並非文章中的版面，而是另一個更常見的情形，在網站底部放置的 Adsense 通用廣告，可讓 "網頁版"及 "手機版"都顯示這個廣告。

同樣是有一好沒有兩好，共同使用的廣告單元，在網頁版可正常顯示，但在手機版可能就會破壞版面了。

二、自適應廣告的副作用

當初沒有考慮自適應廣告的原因，其中一點是怕誤觸規定，請參考「Adsense 廣告尺寸及版面配置優化技巧整理」→「四、補充事項」→「3. 行動版注意事項」，一進入行動版頁面後，若出現 300x250 這個尺寸的廣告，是違規的行為，這件事知道的讀者並不多，WFU 接觸過的案主曾有因為這一點而被停權。

因為怕「自適應廣告」自作主張，在一進入行動版頁面後，自動產生了像 300x250 這樣的大廣告，所以才會不敢嘗試這種廣告。

不過這次幫讀者處理行動版時，發現「自適應廣告」已經將這個因素考慮進去，一進入行動版頁面出現的廣告，會自動顯示小廣告，後面會舉實例展示。

這麼一來，我的疑慮就消除了。不過「自適應廣告」還是有些副作用，以下摘錄「Adsense 官網」的訊息：

1. 在設備屏幕方向改變之後加載新廣告時，我們會緩存之前展示的原始廣告。如果設備隨後又改用原先的屏幕方向，我們將再次展示原來的廣告，而不是加載其他新廣告。
2. 因屏幕方向改變而刷新廣告的行為會產生額外的廣告請求，您可能會發現每千次展示收入和點擊率指標存在輕微下滑的現象。但請放心，您的整體收入不會受到負面影響。
3. 您的網站使用第三方 JavaScript。如果您的網站使用在自適應廣告代碼之前執行的腳本（例如為了在網頁完全加載之前隱藏網頁中的廣告），我們的廣告代碼將無法計算適合自適應廣告單元的尺寸。在這種情況下，您需要使用我們的高級自適應代碼，並使用 CSS 媒體查詢來設置廣告單元的尺寸。
4. 父級容器未設置寬度。如果您將自適應廣告代碼放在未設置明確寬度的父級容器內（例如浮動元素內），我們的廣告代碼將無法計算適合自適應廣告單元的尺寸。在這種情況下，您需要修改代碼並使用 CSS 媒體查詢來設置父級容器的尺寸。

前兩點的意思是，行動裝置曾轉過方向的話，會重新載入適當尺寸的廣告，而導致 Adsense 後台統計數據失真。

後面兩點一般的讀者應該比較少會遇到，通常是自訂版面、常修改範本才會遇到，不過這類的讀者應該是有辦法自行解決。

另外的缺點是，非官方行動版建議的尺寸(例如 320x100、300x250)，廣告數量會比較少，熟客比較會常看到一樣的廣告。這一點要藉由修改程式碼才能改善，後面會有技巧說明。

三、各種 RWD 效果

以下借「熊本一家の生活紀實」的行動版頁面來舉例，展示各種 RWD 廣告的效果：

1. 第一個畫面的廣告尺寸



上圖為模擬 iPhone4 直立的畫面(320x480)，進入行動版後，由於這個版型，左右邊界設定了 padding: 10px，可用的版面寬度剩下 300px，第一個廣告不足以顯示 320x100 尺寸，於是自適應廣告自動選了大約是 "300x50"這樣的尺寸來顯示(這個位置不會選擇大尺寸廣告來顯示)，以符合頁面寬度。




同一個頁面將 iPhone4 橫擺後(480x320)，同樣位置的這個廣告，會重新展示另一個廣告，也就是不重整頁面的情況下，有兩次廣告展示機會。

而且版面重新計算的結果，為了符合頁面寬度，這次系統自動選了 "460x100"這樣的尺寸來展示。


2. 其餘的廣告尺寸效果

這個板面的設計是，每隔三篇文章放一個自適應廣告，這次改用 iPhone 6s(414x736) 來模擬：



上圖可看到手機直立的效果，第一個文章之間的廣告、與第二個文章之間的廣告，尺寸不一定會一樣，但都會符合頁面寬度。

第一個紅框的廣告尺寸為 394x62，第二個紅框的廣告為 394x272。




上圖為手機橫躺的效果，由於這個橫躺的寬度比較少見，大尺寸的廣告比較少，多半出現較窄的廣告。

第一個紅框的廣告尺寸為 647x60，並沒有完全符合頁面寬度，但至少會盡量以較大的寬度呈現，並且置中。

第二個紅框的廣告為 736x60，這個就有符合版面寬度了。

從本篇以上的所有舉例可看到，展示的廣告會盡量符合頁面寬度，從而讓我們的行動版版面效果保持美觀，比較不會有突兀的廣告尺寸出現。

四、安裝及修改自適應 Adsense 廣告

看了本篇的效果，如果要安裝 RWD 廣告也很簡單，請參考這篇官網說明即可：

• 創建自適應廣告單元

其實自適應廣告也能調整尺寸，也就是說，若覺得某些 RWD 廣告的尺寸比較罕見，導致出現的廣告都是那幾個，那麼可以修改程式碼，強制出現自訂的尺寸。請參考這篇官網說明：

• 如何修改自適應廣告代碼

如果覺得官網說明文謅謅，那麼也可參考友站的這篇修改心得：

• 修改AdSense自適應廣告尺寸提高點擊率技巧

經過調整後的自適應 Adsense 廣告，相信就能既兼顧版面美觀，又能保持廣告投放的彈性，不會常常出現一樣的廣告了。

更多 Adsense 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

檢查你的 Google Analytics 是否安裝了兩次, 那麼數據也會乘以二喔！

February 24, 2016, 2:30 am

≫ Next: Blogger 使用文章編輯器的技巧, 及各種疑難雜症整理

≪ Previous: Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

$

0

0

最近幫讀者檢視及優化 Blogger 範本內容時，發現 Google Analytics (以下簡稱 GA) 安裝碼出現了兩次，根據「優化網站效能該注意哪些事? (1)最關鍵的考量因素」，範本中的 JS 執行應該盡量減少，因此順手移除了其中一個。

原本認為這不是什麼大不了的事情，想說 Google 應該沒那麼笨，就算我沒做這個動作，GA 自己也能排除重複執行的 js。結果後來事情的發展並不是這樣，看來挺嚴重的，因此整理一下這件事的過程及心得。

從這次事件來看，應該不會是偶發事件，可能也有相當比例的讀者會遇到同樣的情形，建議詳讀本篇為 GA 做個檢查。

(圖片出處: pixabay.com)

一、GA 建議的安裝方式

如上圖，Blogger 很貼心的，在後台 → 設定 → 其他 → Google Analytics (分析)，就可填入自己的 GA 安裝碼 ID，儲存之後就完成了安裝，不需要再做任何動作。

這個安裝方式的好處是，雖然 GA 隨著網路生態發展，可能會推出不一樣的安裝碼版本，但只要 ID 一樣，那麼 Blogger 範本會自動調整 GA 的安裝碼，因此我們不必去變更範本內容，減少發生錯誤的機會。

從 WFU 經手的許多案例，發現還是有不少讀者不知道後台就能設定 GA，另外在範本中自行放了 GA 的安裝碼。不過這樣子也不會有不良影響，只是要自行維護 GA 安裝碼罷了。

二、為何 GA 會安裝兩次

這次發生「GA 安裝兩次」的案主，則是屬於 "知道 Blogger 後台可設定 GA"，而自己另外又從 GA 官網取得了安裝碼，"在範本中也安裝了 GA 官網的安裝碼"，這就會讓範本中，出現了兩組 GA 安裝碼。

這情形真的有可能不少，因為 "知道 Blogger 後台可設定 GA"的使用者佔的比例算是多數，其中也一定有不少人會閱讀網路相關文章，進而從 GA 官網來取得新版的 GA 安裝碼，然後安裝到自己的範本之中。

所以，我相信有不少讀者自行在範本中安裝了 GA，卻又沒有去除「一、GA 建議的安裝方式」這裡提到的 Blogger 後台設定，那就造成 GA 重複安裝、重複執行，進而導致數據失真了。

三、為何 GA 數據失真

讀者表示，"GA 安裝碼只留下一組後，GA 數據少了很多"、"過去 GA 數據是 Blogger 後台的 1.5 倍"等等情形，這才讓我發覺不對勁，因為 GA 數據不可能大於 Blogger 後台瀏覽數。

要知道，"Blogger 瀏覽數"是出了名的快樂流量，GA 數據若比他還多，那 GA 可就麻煩了！詳細原因請看這兩篇「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」、「為何瀏覽數會爆增？揭開 Blogger 快樂流量的真面目」的分析。

於是仔細調查了一下，是否有 "GA 安裝兩次，會讓數據變成兩倍"這樣的事情發生：

• Check your website against incorrect Google Analytics implementations

上面這篇文章的作者，認為 GA 安裝碼中，"ga('send', 'pageview');"這個程式碼執行了兩次，會導致瀏覽數(pv) 計算兩次。後面他也提供了圖表數據，證明 pv 會差到一倍。

不過由於作者沒有引用相關文件，而根據他的圖表，我無法 100% 確定 "pv 差了一倍是安裝碼執行兩次所造成"，所以我決定尋找更多資料佐證。

• If I use Google Analytics “pageview” twice on a page, does it count the page once or twice?
• Twice GTM code installed, does GA count hits twice?

上面這兩篇 stackoverflow 的討論串，都指向相同的結論，"GA 安裝兩次，會讓 pv 數據 x 2"，有了這麼多資料驗證，那麼 WFU 會傾向同意本文的結論。

順便分享一下 WFU 查閱網路技術文章的機制，由於自媒體時代的來臨，每個人都可在網路發表自己的論點、概念，但論點想要站得住腳，就像發表論文一樣，最好要附上 "提出論點的依據"、"想法引用的出處"，或是 "自己實驗的數據"。如果一篇技術文章沒有引用官方說法、或任何他人觀點來做正反佐證，我都會持保留態度。類似的搜尋資訊概念，也可參考「運用 PTT 蒐集各種(旅遊)資訊﹍不可不知的搜尋技巧」。

四、官方說法

• Analytics舊版與新版程式碼安裝問題

後來看到上面這個討論串，出自 Google 官方的佈告欄，其實嚴格來說不能算是官方說法，但由於有官方管理員的回答，勉強可以視為官方說法。

而管理員的說詞，也一定程度回答了我的疑慮，因為我記得以前舊的 Google Analytics 安裝碼，的確重複安裝是沒有影響的。

而管理員現在明確表示，新、舊安裝碼若混裝，會造成 "數據詭異"的現象，那麼也算間接證實「三、為何 GA 數據失真」的國外文章，實驗內容是有可能發生的。

五、GA 安裝位置的影響

這是讀者提出的問題，"GA 安裝在範本中不同的位置，會不會有影響"，藉這篇文章順便回答。

1. Blogger 官方 GA 程式碼，放在範本中 </head>之前的位置，長得像這樣：

<b:include data='blog' name='google-analytics'/>
放在這個位置，表示頁面載入之前就會執行。


2. 如果注重網頁載入效能，JS 的執行要越後面越好，避免延遲文章內容的顯示，那麼會建議放在範本中 </body>之前的位置。

但是第 2 點的作法，存在著一種可能性，當訪客在頁面完全讀取之前，也就是只看了一眼，發覺這個頁面不是他要的，便跳離了網站，也就是 GA 還沒執行前就離開，那麼這個 pv 就沒有機會被計算到。

這是 WFU 個人觀點：GA 放在頁面底部執行雖有可能導致部分 pv 消失，不過這類的 pv 其實也不具意義，因此可看輕這一小部分的 GA 數據。

六、補充說明

讀者若對 Blogger 後台數據、GA 數據計算的方式仍有疑慮，一樣請參考詳讀「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」，可在本篇或該篇文章提問。

更多 Google Analytics 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 使用文章編輯器的技巧, 及各種疑難雜症整理

February 25, 2016, 2:30 pm

≫ Next: 讓 WIN8 / WIN10 平板關閉螢幕後能繼續播放(Youtube)音樂, 不會進入睡眠

≪ Previous: 檢查你的 Google Analytics 是否安裝了兩次, 那麼數據也會乘以二喔！

$

0

0

前陣子幫讀者調整部落格版面及字體 CSS 時，被詢問到「我已經按照 "網頁中英文字型跨平台設定最佳化"的教學來設定，為什麼文章的字型還是顯示 "新細明體"？」。其實這樣的案例 WFU 遇到不少，問題出在 Blogger 文章編輯器的使用方式。

除了這個狀況，Blogger 文章編輯器會遇到的問題著實不少，本篇就來整理一下，處理各種問題需要的技巧，並以 FAQ 的形式呈現。

(圖片出處: )

一、除了官方編輯工具, 有無其他寫作軟體?

相信很多人覺得官方文章編輯器不太好用、上傳圖片不方便等等，那麼可參考這篇「部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧」，提供了其他的選擇。

使用離線編輯工具例如 Open Live Writer、Evernote 等等的好處有，可以直接調整版面、字型大小、會自動幫我們上傳圖片等等。

而缺點有文章開頭提到的 "文章內的字型、大小不容易統一調整"，以及不容易進行版本控制，發生意外時不容易救回文章內容，因此個人比較習慣的編輯方式仍然是，使用「純文字編輯軟體」+「Blogger 文章編輯器」。

二、為何文章內的字體無法改為自訂字型？

如文章開頭的案例，一般而言，只要依照「網頁中英文字型跨平台設定最佳化」的 CSS 設定，就可以變更文章區塊的字型。但是若文章內的文字放在 HTML 標籤之內，且這些標籤已經內定了字型 CSS 設定，那麼外部的 CSS 設定，將不發生作用(因為優先權較低)。

那麼，什麼情況下會發生文章內容已經內定 CSS 呢？大致有兩種：

• 使用前面提到的離線編輯軟體，且設定了文章的字型
• 使用 WORD 等文書軟體，編輯完後才複製到 Blogger 文章編輯器

上述情形都會內定文章字型，進而導致我們在 Blogger 範本中，對文章區塊設定的 CSS 字型優先權較低，所以無法生效。

因此，若想要彈性的設定網站文章的字型，例如今天用 "微軟正黑體"、明天隨著版面調整想設定成 "仿宋體"換換感覺，那麼建議還是使用「純文字編輯軟體」+「Blogger 文章編輯器」的組合，才能自由地從範本中調整文章區塊的字型。

三、為何文章內會出現意料之外的斷行？

有時我們會覺得，文章中明明沒有設定這麼大的間隔，但行與行之間還是出現了一大段(或一小段)的間距？這有兩種可能性：

1. 換行符號的設定



如上圖右下角紅框，如果勾選了「按下Enter鍵可建立換行符號」，且在「HTML模式」之下，那麼只要按下 Enter 就等於斷行。

但若勾選了「使用 br 標記」的話，那麼怎麼按 Enter，文章中都不會斷行。

所以若出現了意外的斷行，請檢查一下這篇文章的斷行設定，是否有跑掉。


2. 切換模式後間隔異常

其實更多時候，是切換「撰寫模式」與「HTML模式」後，會出現意外的斷行間距。這部分是 Blogger 文章編輯器的判斷問題。

這部分可能算是無解，最安全、不想出現奇怪間隔的方法，就是盡量使用「HTML模式」來編輯，那麼出現的版面，絕對都是能控制的狀態。

四、插入的圖片如何調整寬度？

這個 Blogger 論壇貼文詢問 「文章圖片貼上後, 能否調整為想要的寬度?」。

的確，官方編輯器要一張張調整圖片寬度是很麻煩的事，因此我寫了這個「Blogger 圖片語法轉換器」，這個工具非常方便，他可以幫我們自動做到這些事：

• 改變圖片實際寬度為各種預設寬度、或任意自訂尺寸
• 另開視窗語法 target="_blank"
• 刪除官方無用參數
• 幫圖片增加自訂 class 名稱(可製作各種外框、陰影等效果)

以後要變更圖片設定，就不用一個個手動進行了。

五、能否批次幫圖片增加 ALT 敘述？

這也是非常重要的功能，幫每張圖片加添 ALT 描述文字，可大大增加被搜尋到的機會，可參考「增加網站流量, 提升圖片搜尋排名﹍自動產生 ALT 內容」。

不過很麻煩的事，跟上一點一樣，我們必須一張張圖片手動進行這件事。因此我寫了這個「圖片 ALT 描述自動產生器」，其實就是上一點「Blogger 圖片語法轉換器」的加強版，使用方式相同，但可以自動產生 ALT 描述，可以說是 Blogger 編輯文章必用的工具。

六、Blogger 如何製作好看的表格？

1. 版面控制

使用 Blogger 編輯器，要控制表格的版面美觀不太容易，或者應該說根本就很難控制。我整理了這篇「Blogger 插入表格的最佳流程 + 自適應寬度表格」，按著流程進行，就能製作出適應各種螢幕寬度的美觀表格。


2. 表格排序

如果表格有特殊需求，必須提供讓訪客排序資料，例如價錢由高至低、由低至高等方便查詢的功能，那麼得藉助外掛程式才能做到，可參考這篇「讓網頁表格能自動排序﹍TableSorter 安裝懶人包」。

七、文章中的某些語法，不知為何會失效？

這同樣是 Blogger 文章編輯器的問題，在切換「撰寫模式」與「HTML模式」後，就會對某些 HTML 標籤產生判斷上的問題，且一直以來都無法解決，例如：

• 錨點語法
• HTML 標籤內包含 OL、UL 等語法
• 使用自定義 HTML 標籤來包含其他標籤
• 使用 javascript 內含 HTML 標籤

最安全的作法當然是只使用「HTML模式」，絕不切換到「撰寫模式」。但這是不太可能的事，那麼為了避免以上情境所帶來的語法失效，請參考這篇「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」提供的技巧，將相關的語法進行編碼，讓官方編輯器看不出這些 HTML 標籤，才是根本的解決之道。

八、使用繼續閱讀的好處

官方編輯器提供的「繼續閱讀」功能非常實用，不過很多 Blogger 新手不知道這樣的功能，這是很可惜的事。

他們可能會去另外安裝「繼續閱讀」的外掛，但也會產生額外的異常現象，例如：

• 安裝數字分頁外掛後，分頁所出現的文章，跟想像的不太一樣。
• 文章內容、圖片一多後，讀取首頁的速度就變得很慢。
• 首頁出現的文章好像少了幾篇。

其實只要使用官方文章編輯器提供的「繼續閱讀」功能，這一切自然就解決了，也不必安裝外掛，請參考這篇「Blogger 首頁文章怎麼消失了？」，也請讀者在編輯文章時，無論是否需要，找個地方安插「繼續閱讀」就對了！

更多 Blogger 相關主題：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

讓 WIN8 / WIN10 平板關閉螢幕後能繼續播放(Youtube)音樂, 不會進入睡眠

February 28, 2016, 2:30 pm

≫ Next: 部落格網站是否加強 SEO 就能帶來流量？

≪ Previous: Blogger 使用文章編輯器的技巧, 及各種疑難雜症整理

$

0

0

在運用零碎時間、或做些不必使用眼力的活動時，我會同時聆聽一些 Youtube 演講、或不錯的節目片段，使用的工具是把富有行動力的 Asus T100 平板，當成音樂、影音播放器，因為電池續行力比手機強。

沒想到測試之後，Windows 8 / 10 系統也碰到跟 Android 一樣的狀況，螢幕關閉後 Youtube 也隨之停止播放！

不過 Android 系統的狀況比較不一樣，因為 Youtube 的政策就是不允許任何 APP 在播放影片時關閉螢幕，這是合理的，不然廣告就無法展示了。(當然，Android 系統還是有 "特殊"方法可解決這件事)

而 Windows 8 桌面版並沒有 APP 的限制，還會發生這樣的狀況也算離奇，因此本篇記錄一下我的解決方法，讓 Win8 能夠關閉螢幕後仍可播放聲音，這樣才不至於讓平板太耗電。

(圖片出處: pixabay.com)

一、睡眠模式為肇事主因

找到 Mobile01 這個討論串「求讓 surface pro3 可以只關閉螢幕的方法?」才知道，原來 Win8 平板的設計為，只要按下電源鍵關閉螢幕後，系統就會自動進入睡眠狀態，那麼自然所有程式都被暫停，除了 Youtube 沒得播放，其他軟體一樣也聽不到音樂或聲音了。

說實在，這個設計的確考慮不夠周全，因為平板系統這樣設計的話是合理的(可以比較省電)，但 Win8 並非專為平板而設計，他還可以跑桌面版系統，並不需要一按關閉螢幕的按鍵，就強制進入睡眠。

很多桌面板的程式是需要在螢幕關閉時，持續在背景運作的，最簡單的例子就是 WIFI 必須持續保持開啟，才能把大檔案下載完畢。

因此該討論串也有人提到，Win8 是應該把選項開放出來，在按下關閉螢幕按鈕時，可選擇只關閉螢幕、而不進入睡眠狀態。

大概查找了一下 Win10 的狀況，這個 PTT 討論串「Surface Pro 3 如何僅關閉螢幕不睡眠」提到了 Win10 也有同樣的問題，看來 Win8 / Win10 對於這一點，官方並沒有提供好的解決方案。

二、可能的解決方案

1. 讓螢幕自動關閉

有人提到一個折衷方案，就是被動地等待螢幕自動關閉。因為 Win8 電源選項可以設定 "幾分鐘後關閉螢幕"，假如設定為 3 分鐘的話，那麼時間到後，螢幕雖然關閉了，但不會進入睡眠狀態，程式依然會繼續執行，那麼 Youtube 的音樂或聲音就可持續播放。

這的確是一種解法，不過就是要浪費幾分鐘的電力就是了，如果能夠想關閉螢幕時就立即關閉，會是比較完美的機制。


2. 安裝軟體

討論串有人提到可安裝一些小程式，來單獨關閉螢幕。這應該是最佳解法，但對於出處不明的程式，由於裝過幾次國外的軟體(而且還是大型的下載網站)，被偷偷值入亂七八糟的東西，還得另外花時間找解除的方法，因此現在 WFU養成一個習慣，只會從信任的網站下載軟體。


3. 修改機碼

還有人提供了一種解法，利用修改登錄的機碼(regedit)，把系統的睡眠功能取消，這個方法我也嘗試了，的確關閉螢幕後就不會進入睡眠狀態。

不過隨之而來的是更嚴重的狀況，因為在系統的電源設定之中，就再也找不到 "睡眠"的選項，變得我們將沒有任何方法可以讓 Win8 睡眠，這樣豈不是更浪費電力啊！

三、最佳的替代方案

可能是運氣不錯，下對了關鍵字找到這篇「Turn off display in Windows on command」，在 Windows 下可以用 Dos 指令讓螢幕啟動 "黑屏模式"，其實就是呼叫系統的 "空白"(blank) 螢幕保護模式，這樣產生的效果，其實跟關閉螢幕是差不多的，而且又不會觸發睡眠模式。

最重要的是，不必另外安裝程式、也不必改機碼，我認為是最簡便的替代方案了，請按以下流程進行即可：

1. 開啟 "記事本"，貼上以下指令：

%systemroot%\system32\scrnsave.scr /s

2. 儲存檔案，檔名設定為 "關閉螢幕.bat"，可以放在桌面，要關閉螢幕時，點兩下執行這個檔即可。

3. 如果想要用快速鍵啟動 "關閉螢幕"的功能，可以對著 "關閉螢幕.bat"按右鍵 → 建立捷徑。

4. 對著這個捷徑按右鍵 → 內容 → 快速鍵 → 設定要觸發的按鍵 (例如按下 A~Z)

5. 假設觸發的按鍵是 M 的話，以後依序按下 Ctrl + Alt + M就能立即關閉螢幕了。

更多 Win8 相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

部落格網站是否加強 SEO 就能帶來流量？

March 1, 2016, 2:30 pm

≫ Next: Blogger 延伸閱讀 [小工具][文字版]

≪ Previous: 讓 WIN8 / WIN10 平板關閉螢幕後能繼續播放(Youtube)音樂, 不會進入睡眠

$

0

0

這是一個詢問度很高的主題，不少讀者請 WFU 檢視網站時會詢問 "SEO 有哪裡要加強"、或是 "SEO 要如何改善才能帶來流量"？

我想 "SEO"對很多部落格站長而言，也許存在一些迷思，有些是把 SEO 當作一種解決方案，有的可能把 SEO 與流量視為因果關係。

不過 SEO 的定義實在太廣，把 SEO 與流量劃上等號這件事不是說 "對"與 "不對"，這樣的簡單二分法就能含混過去。那麼就藉這機會談談我的想法，也算是統一回答讀者的一篇心得。

(圖片出處: pixabay.com)

一、SEO 是什麼？

1. SEO 定義

「Search Engine Optimization」(搜尋引擎最佳化)，這就是 SEO 的定義，可參考「Google 官方解釋」，也可閱讀「Google 搜尋引擎最佳化初學者指南」，裡面包含所有 SEO 該做的事。

Google 決定搜尋排名的因素有數百個，但不會全部公開，以避免人為操縱。而所謂的 "做 SEO"，就是針對 "可能決定搜尋排名的因素"進行改善、優化，讓網站得到 Google 搜尋引擎較佳的評價，進而提升排名。


2. SEO 公司

SEO 公司的主要工作，主要為找出(破解) Google 決定搜尋排名的因素，利用這些技術協助客戶取得較佳的排名。

就像是米其林餐廳評鑑，如果買通了內部人員的情報，事先得知評鑑人員可能上門的時間、評鑑的項目等等資料，那麼餐廳就能在特定時間、為特定顧客端出特製(而非一般)的餐點供打分，進而取得超出平均水準的評價分數。

而當 Google 發現某些因素易於人為操作後，便會修改演算法，那麼 Google 與 SEO 公司的鬥智便會不斷持續下去，客戶也必須不斷付錢才能持續使用更新(再度破解)的 SEO 技術，藉以長期保持搜尋排名。


3. 誰需要做 SEO？

回到搜尋引擎的初衷，排名的目的是為了什麼呢？

為了節省使用者搜尋的時間，經過 Google 的分析之後，一定是將認定為最有價值的 "內容"、"資訊"排在最前面，讓使用者很快就能找到需要的資料或解答。

在這個前提之下，我們其實可以發現，被認定為比較有價值的網頁，通常就是 "部落格"、"討論區"、"論壇"(以及"新聞") 這一類的網站，因為這些都是以 "內容"、"資訊"為主的網站，也是搜尋引擎 "最想蒐集的資訊"，基本上搜尋引擎最喜歡 "獨一無二"、"富有原創性"的內容。

同時搜尋引擎也喜歡 "比較新"的資訊，因為舊資訊可能過時，而新方法、新觀念可能比較有效。 剛好 "部落格"、"論壇"(以及 "新聞") 也都有持續更新的特質，所以先天上，這些性質的網站就比其他類型的網站，更受 Google 喜愛。

而不是以 "內容"為主的網站，例如商業、購物、形象網站，由於比較難受搜尋引擎青睞，那麼非得找 SEO 公司想辦法 "做 SEO"，才能在排名佔有一席之地了。

二、實體商店與網站經營

看完「一、SEO 是什麼？」的簡要分析，相信部落格站長們應該已經可以理解，SEO 對於 "部落格"網站而言，究竟重不重要。

不過還沒得到解答的，是 "流量"這件事。在進入主題之前，先來看看實體商店是如何經營運作的。

1. 實體商店

以 "餐廳"為例，下面沒列出所有經營要項，只拿出幾點可以對照的因素：

• 市調：必須先做市調，確認產品有客群
• 地點：營運的地點人潮是否足夠
• 裝潢：不出名的餐廳，一開始必須靠足夠水準的裝潢吸引來客
• 產品：餐點是最重要的，若無法吸引回頭客一定無法持續經營
• 規劃管理：店內動線設計、擺設、環境衛生、菜單設計...
• 服務：人員的訓練、客訴處理...
• 宣傳行銷：發傳單、下廣告、促銷...

經營實體商店很不輕鬆，要獲得持續的人潮(客源)，以支撐一家店的開銷，至少有以上這些事要做，一項都不能馬虎。


2. 部落格網站

跟實體商店要獲得人潮差不多，部落格真的要當一個事業經營，想要流量不斷成長，也是可以參考同樣的經營要項：

• 市調：先確認產品有客群(網站主題的市場是大眾還是小眾？有沒有人想看？)
• 地點：自有網域的權威度會比較高(需要買網址)
• 裝潢：使用有美感的版面範本，或請人設計，塑造專業感
• 產品：文章內容是最重要的，所有其他項目都只是輔助、催化劑
• 規劃管理：網站導覽的動線設計、符合使用者友善操作介面的設計...
• 服務：與訪客的互動、回答留言...
• 宣傳行銷：有沒有用各種管道幫網站宣傳，交換連結...

不知道以上細節看完之後，站長們有沒有覺得很累呢？這就跟真的經營一家餐廳是一樣的，沒做足功夫的話，客人不會自己上門。

所以實情是，網站不會開了就有流量，而以上這些要項我們做了多少，就會得到對應的流量。

三、簡化經營要素

上面的舉例，列出的經營要素太細(雖然還可以更細)，目的是要凸顯經營一個事業需考慮的面向。其實為了便於理解，經營部落格只要簡化成三個要素就好：產品、市場、行銷。

1. 產品

• "產品"是最重要的，如果產品(文章內容)不夠好的話，建議先提升品質，再來求流量。
• 好產品能夠形成口碑，讓讀者、其他網站 "主動幫你行銷"
• 文章極具有價值，Google 也會幫忙提升排名，也等於 "主動幫你行銷"
• 讓讀者或其他網站主動連結分享的話，流量就能不斷成長

2. 市場

• 文章主題的市場大不大，也決定了流量的多寡
• 以本站為例，Blogger 主題畢竟屬於小眾，Blogger 文章的流量跟其他文章相比，相對非常少，可參考本站「百大熱門文章排行榜」。
• 真的要求流量的話，部落格主題若是小眾市場就比較困難。

3. 行銷

• 不夠好的產品建議先不要行銷，免得自己把商譽打壞了。
• 但是好產品沒有行銷宣傳的話，流量一樣起不來，因為沒有人知道。
• 所以要打開知名度，一定得努力宣傳
• 可以把文章分享在社群網站，或貼到 FB 社團、PTT、論壇等相關的討論區。

四、SEO 與流量的關係

看到這裡，相信讀者應該能接受，影響部落格流量(或是人潮)的最重要關鍵，是這三個要素：產品、市場、行銷，而且缺一不可。

那麼 SEO 跟流量的關係究竟是什麼呢？


1. 限縮 SEO 定義

由於 SEO 定義太廣，廣義的 SEO 連社群也要操作(SEO 公司常常也要負責行銷)。因此本篇討論的 SEO 定義有必要縮小範圍。

回過頭來看一開始的提問，部落格站長們想要瞭解的問題，"SEO 有哪裡要加強"、"SEO 要如何改善才能帶來流量"，應該可以這麼明確定義：

• 網站後台的設定，以及範本、文章中的程式碼(或設定)要如何修改，可以加強 SEO？
• 加強了這些設定後，可以帶來多少流量？

2. 流量的來源

再來瞭解一下流量的分類：

• 直接來源：書籤、從瀏覽器直接打網址..等等而來
• 搜尋引擎：從 Google、Yahoo...等等而來
• 社群媒體：從 FB、Twitter...等等而來
• 外部連結：從其他網站的引用連結、論壇、PTT 等等而來

廣義的 SEO 每種流量都會有影響，但是經過限縮後的定義，也就是指 "修改網站後台的設定，以及範本、文章中的程式碼(或設定)之後，可以改善的 SEO"，那麼能夠影響的，其實只有來自「搜尋引擎」的流量，因為只有 "搜尋引擎"會對程式碼進行分析，其他三項是不會對程式碼有感情的。

更明確的說，修改這些設定之後，影響的是搜尋引擎對網頁的評分，例如從 50 分上升到 60 分，也許排名從第 5 頁上升到第 4 頁這樣的程度(舉例)。但是做的不對的話、或做的是過時 SEO，反而可能從 50 分下降到 40 分！

讀者們有看出蹊蹺嗎？做 SEO 這件可以讓排名變動，但是真正的關鍵是，一開始的排名是 50 名、還是第 5 名、還是 500 名，這個名次到底是怎麼決定的呢？


3. Google 的評鑑

就像開頭提到的 "米其林餐廳評鑑"，Google 搜尋引擎排名，正是對我們部落格文章的一個評鑑：

• 如果某篇文章瀏覽量很高(從搜尋引擎、社群網站、各處來的流量加總)
• 訪客停留時間久(判定為有價值、對讀者有幫助)
• 很多數據綜合評估後，就是比其他網站相同主題文章的分數高
• 那麼這篇文章可能被排在搜尋結果第一名

請注意以上的流程，我們網站在完全沒有做任何 SEO 優化的前提下，如果真的有一篇最有價值的文章，Google 自動地根據演算法，會將他排在搜尋排名第一名，這就是 "Google 的評鑑結果"。

換句話說，如果這篇文章真的出色、原本就能吸引人群的注意，Google 會給你應有的排名。就像根據 "米其林餐廳評鑑"慕名而來的食客，這篇文章也會獲得越來越多的流量。

五、提升流量的關鍵

相信經過這麼多論述，部落格站長們可以找到你要的結論。而最後也再總結一下本篇想表達的論點，提醒一下，這是一份針對 "部落格網站"所下的特定定義與結論：

1. SEO 與流量的相關性

• 不少站長可能會把 SEO 與流量當成因果關係。
• 實際上 SEO 與流量可能只是有 "相關性"(correlation)→ 做 SEO 有可能提升部分流量
• 真正與流量成 "因果關係"(causation) 的，我認為是三要素「產品」、「市場」、「行銷」。

2. Google 的角色

做 SEO 是為了討 Google 的青睞，但看完本篇之後，你可能會發現錯看 Google 了，因為：

• Google 不會雪中送炭：如果你的網站原本流量就很低、沒什麼人看，Google 給你的起始排名也會非常低，就像 "米其林評鑑"不會去找沒沒無名的餐館打分數。
• Google 只會錦上添花：如果你的網站經營得很好，人潮絡繹不絕，Google 也會主動把第一頁的排名頒給你。就像出了名的餐廳，各大媒體、雜誌都會爭相報導一樣。

「自助而後人助」，Google 的作法倒是滿有幾分這樣的哲理！你必須先有流量，Google 才能給你更多的流量。


3. 部落格網站面對 SEO 的態度

因此，相信這段結論部落格站長們是可以接受的：

• 部落格網站花時間做 SEO 的成效影響有限
• 時間花在 SEO 的效益，比不上宣傳行銷帶來的流量
• 要得到最多的流量，最重要的是檢視 "產品"(內容) 與 "市場"(主題)

4. 部落格網站可以進行的 SEO

不過，部落格站長們可以進行的 SEO 項目，文章到目前為止，還是沒有提到對吧？

既然這些 SEO 項目就算做了，也影響不了多少流量，那麼對於只想專心寫文章的站長，的確也是可以完全忽略這一塊。

而真的想瞭解這一塊的讀者，雖然是可以直接寫出要做哪些事，但在那之前，我認為先瞭解本篇的概念，才是更重要的事。有了本篇的前提之後，下一篇會簡單摘錄一些大方向，讓站長們不用花費太多時間在 SEO 上，知道 SEO 只要做到哪些事就好。

更多 SEO 相關主題：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 延伸閱讀 [小工具][文字版]

March 3, 2016, 2:30 pm

≫ Next: 緊貼螢幕邊緣的浮動 FB 粉絲團外掛

≪ Previous: 部落格網站是否加強 SEO 就能帶來流量？

$

0

0

為了讓訪客看完文章不馬上離開，我們通常會在文末設計一個區塊，稱為 "延伸閱讀"或 "您可能對這些文章有興趣"等等，接著手動挑選、安插一些相關文章的連結。

手動複製這些連結自然是很麻煩，也是可安裝一些小工具來替我們做這件事。其實 WFU 已經寫過不少這一類的程式，而版本之多還可能讓讀者嚇一跳。

那麼為何還要再額外寫本篇的版本？究竟與其他版本的差異為何？請讀者先看以下各版本的功能比較，再決定安裝哪一個比較適合你的網站。

點此看範例網頁

(圖片出處: lifeofpix.com)

一、各種延伸閱讀小工具

1. 系列文功能

• 安裝網址：讓 Blogger 自動顯示系列文章
• 藉由設定 "關鍵字"，可在文末列出包含 "關鍵字"的相關文章標題
• 必須每篇文章手動設定

2. 分頁功能

• 安裝網址：讓 Blogger 過長的文章自動產生數字分頁
• 此為系列文的加強版
• 若系列文的標題，都有設定數字序號，安裝此工具後，可在文末自動顯示數字分頁。
• 必須每篇文章手動設定

3. 相關文章 V2

• 安裝網址：Blogger 相關文章 V2__安裝懶人包
• 從該篇文章的標籤，隨機抽選相關文章來顯示
• 可自訂縮圖尺寸
• 不需每篇文章手動設定

4. 隨機文章

• 安裝網址：Blogger 隨機文章 + 自適應尺寸縮圖
• 從網站所有文章，隨機抽選文章來顯示
• 可自訂縮圖比例
• 自適應版面寬度(RWD)
• 不需每篇文章手動設定

5. 相關文章 V3

• 安裝網址：Blogger 相關文章 V3
• 每篇文章手動設定的話，可指定標籤名稱，隨機抽選相關文章來顯示
• 可手動設定，顯示多個不同的相關文章區塊
• 若文章沒指定標籤名稱，會自動從該篇文章的標籤，隨機抽選相關文章來顯示
• 文字版，不顯示縮圖
• 可手動設定、也可不設定

6. 延伸閱讀

• 此為本篇工具的版本
• 等於是「相關文章 V2」，去掉縮圖的版本(也就是文字版)
• 不需每篇文章手動設定

7. 系列文 + 相關文章 V3

• 結合「系列文」與「相關文章 V3」
• 可自行根據文章性質，設定為顯示「系列文」、或顯示「相關文章」
• 此為未公開、自用的版本

二、準備動作

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，再搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/* 延伸閱讀 */
.extPost { /* 整個區塊 */
margin: 20px 0;
font-size: 14px;
}
a.extPost_caption { /* 標題文字 */
text-decoration: none;
font-weight: bold;
color: #666;
}
</style>
第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝程式碼

接著請搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：


以下參數修改請參照以上程式碼行號：

F：紅色參數為顯示延伸閱讀的數量(例如設為 4 代表最多顯示 4 篇，但若該篇文章的標籤，沒有足夠的相關文章，則不一定能顯示到 4 篇)

G：藍色字串為延伸閱讀工具的標題文字

H：如果希望這個小工具出現在文末的話，那麼不必變動此藍字參數；如果是非官方範本、或想擺放在自訂位置，請更改本行參數──

• 如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#related-post"。
• 如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".related-post"。

N：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流，並用「Google Drive 外連產生器 V2」取得外連網址。

存檔後即可，想要先看效果可前往範例網頁：

點此看範例網頁

四、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 延伸閱讀的相關文章，有時候會顯示不出來，有時候可以，不知道可能是哪裡有問題呢?

Ans: 有幾種可能：

• 該篇文章的標籤沒有其他文章，就無法產生相關文章。
• 請檢查 JS 檔是否有分流；若確定 JS 檔沒問題，可能是伺服器暫時有問題。
• 除了「官方文件」註明標籤名稱不得使用的字元 &<>@!+,之外，也請不要使用 "#"這個字元，相關文章就能正常顯示了。

延伸閱讀：
更多實用工具：

• 本站使用的 Blogger hack 及工具整理

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

緊貼螢幕邊緣的浮動 FB 粉絲團外掛

March 6, 2016, 2:30 pm

≫ Next: Picasa 關閉之後, Blogger 要如何管理圖片？

≪ Previous: Blogger 延伸閱讀 [小工具][文字版]

$

0

0

這個不會隨著螢幕捲動而變換位置的 Facebook 粉絲團外掛，會黏貼在螢幕邊緣、只顯示垂直的 "Facbook"字樣，當滑鼠經過時才將 FB 粉絲團滑動顯示出來，而滑鼠離開後則立即收合。這樣的外掛效果並不算少見，許多知名部落格都有設置。

最近處理一個案子需要安裝這個效果時，Google 到不少教學文章，程式碼多半都相同，主要來源為國外網站。由於這些 code 不是我自己寫的，語法看不太習慣，參數也很難調整、修改，於是乾脆重新寫一個。

本篇的版本把所有的參數都開放出來，整個外觀只要看得到的，不論是粉絲團設定、圖片、外觀、尺寸、位置都可修改，算是最方便自訂的一個版本了。

點此看範例網頁

一、安裝程式碼

請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入以下程式碼：


先別儲存，請繼續參考以下說明來修改主要參數。

二、修改參數

以下參數修改請參照程式碼行號：

A：第一行可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

J：這是最重要的參數，請將紅字改為自己的 FB 粉絲團網址。

如果沒有特殊需求的話，改完以上兩點，其他都用預設參數，即可存檔看效果了。

若需要更詳細的自訂效果，請繼續往下改。

K~L：分別設定 FB 粉絲團外掛的寬、高 px 值，根據設定的數值，會自動調整版面效果。

M：可調整這個小工具，跟螢幕上方距離的百分比。

N：如果想要自訂圖案的話，請將綠字改為自訂圖片網址即可。

請注意：預設圖片的尺寸為 33x105 px，若使用不同尺寸的圖片，請勿必修改 O~P 的數值，版面比較好看。

O~P：如果使用自訂圖片，這兩行請修改為自訂圖片的寬、高 px 值。

Q~U：如果想要調整粉絲團外掛顯示的內容，可修改這幾行的參數(例如顯示粉絲團最新的貼文)。而修改的方法，請參考「FB 粉絲團外掛簡易安裝法及各種應用方式」→「二、簡易安裝法」的修改說明。

Z~AP：如果熟悉 CSS 的話，可自行修改這幾行的參數。

更多 Facebook 相關工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Picasa 關閉之後, Blogger 要如何管理圖片？

March 8, 2016, 2:30 pm

≫ Next: H1 標籤使用圖片代替文字時, 該如何處理？

≪ Previous: 緊貼螢幕邊緣的浮動 FB 粉絲團外掛

$

0

0

自從前陣子 Google 宣布「關閉 PICASA」之後，不少讀者擔心 Blogger 使用的 PICASA 圖片會不會受影響？另外一點就是，習慣用 PICASA 管理、編修圖片的使用者，將來要如何管理圖片？

Google 的意圖很明顯，收購 PICASA 取得關鍵技術後，PICASA 就不再重要，且逐漸將功能移轉到「Google 相簿」(Google Photo)。一方面圖床的功能會和平移轉到 Google Photo，一方面也將 PICASA 管理圖片的介面關閉。

不過讀者可以放心的是，PICASA 圖床原本的圖片仍然會保留、圖片外連也不會失效，Blogger 依然可以從後台上傳圖片(仍舊存放在 PICASA 圖床)，因此這件事對 Blogger 完全沒任何影響。

會受到影響的是，使用 PICASA 圖片管理介面的讀者，例如下載桌面端軟體、或使用 PICASA 網頁管理的功能。本篇會討論這些介面關閉之後，將來要如何管理圖片。

一、Blogger 上傳的圖片會出現在哪？

1. PICASA 圖床

所有 Blogger 後台上傳的圖片，網址格式大概長得像這樣：

• http://3.bp.blogspot.com/-7XB9wXTOy7I/VSNU2gc83jI/AAAAAAAALcw/gSIN8w63yXg/s640/cc0-image-search-engine.jpg

網域都是 bp.blogspot.com → 這就是 PICASA 的圖床網域之一。

雖然 PICASA 關閉 "圖片管理介面"，但 PICASA 圖床並沒有關閉，圖床網域會持續保持運作。


2. Blogger 後台



Blogger 上傳後的圖片，將來都能再次引用。找到這些圖片的方法很簡單，在 Blogger 編輯文章的畫面，使用 "上傳圖片"的功能時，就可看到上圖的選項：

• 選擇「來自 PICASA 網路相簿」
• 再選擇你的網站名稱

依照以上步驟，就可看到所有圖片了。但是這個介面不具備管理功能，因為所有圖片會依照時間、全部列出，要拉到想使用的圖片，會花不少時間。


3. Google Photo

前面有提到「圖床的功能會和平移轉到 Google Photo」，不過根據「官方提供的 FAQ」→「What this means for Bloggers」：

Blogger photos are not shown in Google Photos Albums, but exist in a hidden place where you won't have access to them. This can be seen as a good thing, because you won't accidentally delete that folder and potentially lose your photos on your Blogger blog.

中文的意思是，Blogger 上傳的圖片，雖然 Google Photo 也會有一份資料，但為了確保不被使用者誤刪，導致 Blogger 圖片外連失效，因此 Google Photo 不會顯示這些 Blogger 上傳的圖片。

所以很可惜的，Google Photo 無法成為 Blogger 管理圖片的工具。


4. Google Drive

「Google Drive」(雲端硬碟) 有個「同步 Google 相簿」的功能，開啟之後，可以看到神奇的現象，這些 Google Photo 看不到的 "Blogger 上傳的圖片"，反而在 Google Drive 可以看到。

那麼運用 Google Drive，我們就可以有一些方法來管理 Blogger 上傳的圖片，下面來詳細說明。

二、Google Drive 的特質

1. 注意事項

在管理圖片之前，非常有必要先瞭解 Google Drive 的特質。首先必須說明一下，Google Drive 雖然可以同步 Google Photo 的圖片，但是經過我的實驗後，以下幾點必須注意：

• 從 Google Photo 上傳的圖片，會同步到 Google Drive → 若 Google Drive 刪除圖片，Google Photo 也會同步刪除
• 從 Blogger 上傳的圖片，可經由 Google Photo 同步到 Google Drive → 若 Google Drive 刪除該圖片，對 Google Photo 以及 PICASA 都沒有任何影響

2. Google Drive 的特質

從以上結果來看，可得到這樣的結論：

• 由 Google Photo 產生的圖片，在 Google Photo 與 Google Drive 之間的動作是雙向同步的。
• 由 Blogger 上傳的圖片，可能在 Google Photo 是 "唯讀"的狀態，因此 Google Drive 對圖片作的動作，無法對 Google Photo 產生任何影響
• 所以由 Blogger 上傳的圖片，在 Google Drive 只能視為「副本」，就算做了 "刪除"、"編修"等動作，都不會影響到「正本」

3. 編修效果

雖然用 Google Drive 有辦法對圖片進行編修，但經由前述的結論，這些編修後的圖片，都只能視為 "副本"，不會影響到 Blogger 網站上顯示的 "正本"圖片。

因此將來若需要使用編修過的圖片，那麼依然只有重新從 Blogger 後台上傳一途。

三、使用 Google Drive 管理圖片

有了以上認知後，接下來我們來看看如何使用 Google Drive 管理 Blogger 上傳的圖片。

1. 同步 Google Photo

基本上幾個月前，只要進入 Google Drive 就會被詢問「是否要將 Google 相簿加入 Google Drive」，如果同意的話，Google Photo 的圖片就會被同步過來。

如果不確定有沒有同意過，或是想知道如何設定，可參考這篇「Google Drive 同步 Google 相簿照片教學」

這篇文章還說明了如何在 Google Drive 使用 Google Photo 的相簿分類，不過與本文主題無關，有需要的讀者請參考該篇文章內容。


2. 圖片排序方式

Blogger 上傳的圖片，基本上不會在 Google Photo 顯示，自然也不會被分類。這些圖片被同步到 Google Drive 後，會依照上傳的時間、日期來顯示，如下圖：



WFU BLOG 最近幾篇上傳的圖片，都依照時間排列出來，只要我們一直往下捲，就能找到 Blogger 上傳的圖片。

P.S. 我在 Google Drive 看到的從 Blogger 上傳的圖片，最早約為 2015 年 12 月，不曉得是不是我太晚開啟 Google Drive 同步 Google Photo 的緣故，因此有相關需求的讀者，請儘早開啟這個功能。



3. 對圖片進行分類

Google Photo 雖然可以分類圖片，但那是 "標籤"的概念，並非資料夾的概念，因為分屬不同 "標籤"的同一張圖片，其實指向同一張圖片。聽起來好像是廢話，不過往下看就懂了。

由於 Google Drive 可以建立資料夾，對圖片進行 "實質的分類"，將同一張圖片複製到不同資料夾後，那麼圖片彼此之間就是獨立的，所作的變更不影響其他資料夾的同一張圖片。(Google Photo 就會有影響)

需要對 Blogger 圖片進行管理的讀者，現在我們可以在 Google Drive 建立多個資料夾，然後一一將圖片拖曳到你建立的資料夾，這樣日後需要重複使用圖片時，就不用一直捲一直捲，捲到天荒地老...


4. 分類範例



如上圖，我建立了一個大分類資料夾「管理Blogger圖片」，下面有兩個次分類資料夾。接著將 Facebook 相關的圖片，都拖曳到「Facebook」這個資料夾，將來要查找 FB 相關的圖片，就比較好管理了。

四、將圖片同步到電腦

讓圖片能雙向、同步到電腦也是非常重要的管理功能，這樣子我們不必所有的動作都要上 Google Drive 網站才能做，在電腦端就能直接作業。

我們需要的動作是下載「Google Drive 雲端硬碟桌面版」，而關於操作、使用的技術面的問題，有不少教學文章可參考，可參照這篇「Google Drive 雲端硬碟心得」。

五、編修圖片

PICASA 的管理介面關閉還是很可惜，畢竟使用 PICASA 就能一條龍完成很多事，也能直接對圖片進行編修。

而目前的替代方案 Google Photo、Google Drive 也是有辦法可以線上直接編修圖片，當然還是沒有 PICASA 方便就是了，有這方面需求的讀者可參考以下的方法：

1. Google Photo

可參考官網文件「編輯相片」的說明，在 Android、iOS 都有 APP 可下載，而桌面端則是需要上 Google Photo 的網頁來編輯圖片。


2. Google Drive

Google Drive 有不少外掛可安裝，因此不乏圖片編輯外掛，可參考這篇「免費中文線上影像處理軟體 Pixlr」來安裝 Pixlr 這個外掛即可。

不過既然能用「Google Drive 桌面版」的話，我覺得就不太需要這類的線上編修外掛，因為可以用更強大的桌面編輯軟體(例如 PhotoShop, PhotoImpact)，圖片編輯完後就能自動同步到雲端硬碟，會比線上編修更節省時間。

當然，如果常常需要使用行動裝置作業的話，只好使用外掛 APP 來編輯圖片了。

六、結論

總結一下本篇的幾個重點：

1. 使用 Google Drive 可以非常有效率的管理、分類所有 Blogger 上傳的圖片。

2. 但 Blogger 後台沒有辦法看到 Google Drive 的分類資料夾。

3. Google Drive 可安裝桌面板，將所有分類後的資料夾同步到電腦端。

4. 將來如果要重複使用 Blogger 上傳的圖片，我們可以從電腦端快速找到對應的 Google Drive 資料夾，重新上傳圖片(取得連結)即可。

(反正容量幾乎無限制，就盡量傳吧...)
(重複上傳的圖片，在 Google Drive 不要再次分類就好了)

更多 PICASA 相關文章：

更多 Google Drive 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

H1 標籤使用圖片代替文字時, 該如何處理？

March 10, 2016, 2:30 pm

≫ Next: CC0 免費圖庫搜尋引擎﹍2016 更新版

≪ Previous: Picasa 關閉之後, Blogger 要如何管理圖片？

$

0

0

前陣子處理一個案子時，被詢問到「網站標題使用圖片的話，會不會比較不容易被搜尋到？」顯然這位讀者是具備 SEO 概念的，一般來說，網站標題會放在最重要的 H1 標籤，而且使用文字敘述。

由於 SEO 非我的專長，還是看看專家怎麼說比較保險。然而在尋找資料的過程中，發現用 "H1 標籤 圖片 代替 文字"這幾個關鍵字去搜尋，前幾篇竟然全是錯誤的作法。

當然 SEO 的操作方法每一年都有可能變動，但是若排名在前的文章都不是正確資訊時，我相信沒幾個人知道這件事該怎麼做。為了讓讀者能接收到正確的訊息，還是寫一篇標準作法比較好。

(圖片出處: pickupimage.com)

一、text-indent: -9999px

在開始之前，如果讀者對 H1 標籤的意義不太清楚，可先參考這篇「符合 SEO 的 H1 H2 H3 標籤配置研究」。

而從接觸網頁設計的領域以來，就不斷看到 text-indent: -9999px 這個神奇的技法，用在 H1 標籤。他的原理是這樣的：

• 當網站標題需要使用圖片呈現時(比較美觀)，H1 標籤就不能讓文字出現
• 但又怕搜尋引擎機器人沒有讀取到 H1 的網站標題文字，導致 SEO 受影響，於是仍在 H1 塞入文字。
• 以前的 SEO，如果直接用 display: none隱藏文字，會被搜尋引擎扣分
• 所以出現了這招 text-indent: -9999px，讓文字向左偏移 9999px、出現在螢幕之外的地方，也等於是隱藏文字
• 最後再為 H1 設定背景圖片(background)，就完成了 "H1 標籤以圖片取代文字"這件事

在以前的年代，相信這是 SEO 高手為了對付 Google 想出的高招。不過我一直覺得這技法很不自然，且對 SEO 優化不太積極，所以沒有很想用這招。

二、Google 官方說法

這個國外討論串「For SEO of the company name, should we use a logo with alt text or a company name div replaced in CSS with an image?」正是本文的主題，回答者引述了 Google 搜尋引擎部門龍頭 Matt Cutts 的話，這真是太好了！由 SEO 制訂者本人說出的話，大家就能奉為圭臬了。Matt Cutts 的說明影片如下：



雖然回答者很貼心的附上 Matt Cutts 英文逐字稿，但很顯然他的聽力不太好，其實看不太懂逐字稿是什麼意思，那麼以下是我針對 Matt Cutts 口述內容的簡單翻譯：

• 有人詢問 "想把公司 Logo 放在網站時，為了做好 SEO，有什麼好方法可以加入文字呢，應該使用 ALT 屬性嗎？如果用 CSS 把文字隱藏起來會不會有影響？"
• 以下都是 Matt Cutts 的回答：(用 CSS 把文字隱藏起來)當然有影響(對SEO不太好)，最好的方法是直接使用圖片，然後在圖片 IMG 標籤 的 ALT 屬性，放入你要加入的文字敘述。
• 這個作法會比使用各種 CSS 技法來隱藏文字來得好，就像是 text-indent: -9999px 這樣的 CSS 隱藏文字技巧。
• 
  這就是為什麼要為 IMG 標籤設計 ALT 的原因，所以放心的使用 ALT 吧！搜尋引擎會辨識且讀取 ALT 的文字。
• 如果是我，就不會使用任何 CSS 隱藏文字的方法。IMG 的 ALT 屬性是個最簡單又方便的作法，可以達到 SEO 的目的。

好了，相信大家都知道該怎麼做了，而且這個影片還是 2009 年 6 月發佈的喔！可見這件事以訛傳訛至少將近七年了。

三、Google 官網

來舉個實例，看看 Google 是怎麼做這件事的，下圖是我們每天都會拜訪的 Google 網站：



Google 官網並沒有網站標題文字 "Google"，而是用各種顯示 "Google"字樣的圖片、每天都可能更換，那麼 H1 標籤是如何設定的呢？檢視了網頁原始碼後，長的像這樣：

<h1><a id="logo" href="https://www.google.com.tw/webhp?hl=zh-TW" title="Google 首頁"><img width="167" height="410" src="/images/nav_logo242_hr.png"alt="Google"></a></h1>
我們可以看得很清楚，H1 標籤之內放了 IMG 標籤，且使用了 ALT，內含網站標題 "Google"文字。

所以處理 "網站標題使用圖片"這件事變得很簡單、也很直覺，當 Google 都這麼做時，那麼我們也依樣畫葫蘆就行了。

四、打破 SEO 的迷思

瞭解 H1 標籤如何正確設定是重要的事，不過 2016/3/9 看到的這個 Google 官網畫面，覺得可以給讀者更深層面的思考：



Google 每隔幾天遇上特殊的紀念日子，就會更換 Google Doodle 的主題，上圖的畫面，我特地檢視了網頁原始碼，看看 Google 是怎麼處理 H1 標籤的。

結果竟然發現 → 整個頁面找不到 H1 標籤！

一方面 Google Doodle 的圖案並非 "圖片" (IMG)，而是可以互動的程式，一方面 H1 標籤的設計可能不是用來塞這樣的程式碼，所以 Google 乾脆連 H1 都不用了。

連 SEO 的制訂者 Google，都可以不在乎網頁裡非常重要的 H1 標籤，我想這傳達給部落格站長一個重要的訊息：不必過度鑽研 SEO。

有些站長可能會依照網路教學進行不少 SEO 優化，而不小心找到的是過時、錯誤的操作方法，反而會被 Google 扣分。在這樣的情況下：

• 完全不理會 SEO 可能只是沒加到分
• 學習了不正確的 SEO 資訊反而比沒做還不好

我想站長們更關心的是如何提升網站的流量，那麼可參考這篇「部落格網站是否加強 SEO 就能帶來流量？」，相信可以打破 SEO 的迷思，瞭解真正提升流量更重要的因素有哪些。

更多 SEO 相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

CC0 免費圖庫搜尋引擎﹍2016 更新版

March 13, 2016, 3:30 pm

≫ Next: 防止 Chrome 自動重新讀取分頁內容

≪ Previous: H1 標籤使用圖片代替文字時, 該如何處理？

$

0

0

製作「CC0 免費圖庫搜尋引擎」已經將近一年，在這不算短的時間內，各大免費 CC0 圖庫產生了不少變化，收錄的網站也是有調整的必要。

同時使用上，發現一些不太正常的現象，例如搜尋結果有時會出現 "非 CC0 圖庫網站"的圖片。雖然常使用 CC0 圖庫的愛好者，可以一眼看出某些搜尋結果是不正確的，但畢竟不是每個使用者都很熟悉這一點，因此「CC0 免費圖庫搜尋引擎」必須減少這樣的搜尋結果產生，這是改版要解決的首件要事。

此外 2016 更新版還有一些友善設計，而更多新版的變化，請見本文的說明。

一、新的獨立圖庫分頁

1. 圖片索引量提升

跟去年同期相較，某些圖庫也許經營不力，圖片被 Google 收錄的數量沒什麼太大變化；不過更多圖庫則是庫藏量越來越豐富，索引數量大躍進，而且有大者恆大的現象。

例如 Pixabay 去年介紹的時候，被 Google 收錄的圖片超過 100 萬張。而日前測試搜尋的結果，Google 收錄圖片量竟然已經超過 1200 萬張！！這數字跟 Pixabay 官方顯然落差很大，可能跟 Google 演算法有關，但至少我們可以知道的是，使用「CC0 免費圖庫搜尋引擎」的圖片搜尋結果，會隨著時間演進越來越豐富。


2. 獨立分頁



而在 Pixabay 以外，經過一年之後，已經有好幾個圖庫，被 Google 索引的圖片量達到數萬(甚至超過 10 萬)，因此 2015 初始版本只有 Pixabay 獲得獨立分頁的情況下，現在 2016 更新版計有 5 個圖庫有獨立分頁：

• Pixabay
• Pexels
• Pickupimage
• Stocksnap
• 攝圖網

這樣的設計，可以讓搜尋更有效率，在「Pixabay」找不到中意的圖片時，還有其他多個分頁可以提供更多的選擇。尤其在 Ajax 動態載入的技術下，切換分頁的搜尋結果只需花不到 1 秒的時間，找圖片的速度會比 2015 初始版快很多。

二、刪除的圖庫

1. Unsplash

開頭提到的問題「搜尋結果有時會出現 "非 CC0 圖庫網站"的圖片」，這一點其實滿嚴重的，為了判別圖片是否屬於 "CC0 圖庫"，也會浪費不少時間。使用這個搜尋引擎不就是為了節省時間嗎？如果還要花時間辨別真偽，那可能不如直接到 CC0 圖庫網站搜尋好了。

運氣不錯的是，在整理「一、新的獨立圖庫分頁」時，意外發現了罪魁禍首：

• http://Unsplash.com/

這個網站的圖片，被 Google 索引數量高達 11 萬，因此進入了此波 "獨立分頁"的名單。結果經測試之下，搜尋結果有很大的百分比，圖片都不是來自 Unsplash.com。

這可能牽涉到 Unsplash.com 收錄圖片的原則、站內 301 轉址的設定、Google 索引技術等等相關因素，總之「CC0 免費圖庫搜尋引擎」若是收錄這個網站，反而會造成更大的問題，造成使用者誤用非來自 CC0 圖庫的圖片。

因此 Unsplash.com 雖然屬於頂尖的 CC0 圖庫，可惜只能忍痛割捨，不再列入名單之中。若對此網站情有獨鍾的讀者，只好請直接上該網站搜尋圖片了。


2. 其他獨立分頁

經一一測試之後，目前使用的 5 個獨立分頁圖庫網站，搜尋結果都滿正常的，因此讀者可以安心使用。

不過關於 "主要高畫質"、"備用高畫質"這兩個分頁，由於收錄網站極多，無法一一進行測試，若讀者發現大量的異常搜尋結果，再麻煩回報狀況了，會來研究是哪些圖庫造成的問題，並進行移除。

三、新增的圖庫

過去 2015 年陸續新增的圖庫記錄，請參考「可商業用途及修改的高畫質免費 CC0 圖庫整理」→「三、候補 CC0 圖庫」。

這次 2016 新增以下六個圖庫：

• 攝圖網：「免費中文圖庫推薦！40 萬張正版 CC0 授權圖片下載」
• Librestock：「從 20 個常用圖庫搜尋數萬張高畫質 CC0 授權免費相片素材！」
• Good Free Photos
• Barn Images
• Travel Coffee Book
• Skuawk

比較重要的是前兩個：

• 攝圖網：是中文圖庫網站，Google 圖片索引量超過 2 萬，因此收錄為獨立分頁。
• Librestock：Google 圖片索引量約 1 萬

其他的被 Google 的索引量較少，就不特別介紹了。

四、中英文搜尋

由於中文圖庫不算多，中文圖片的索引資料量不夠大，因此大部分的搜尋，建議讀者還是以英文為主。

如果用英文搜尋有困難、只能以中文搜尋的讀者，那麼推薦使用以下這三個分頁：

• Pixabay：網站包含中文語系
• Pickupimage：圖片索引會翻譯成中文，可參考「可商業用途及修改的高畫質免費 CC0 圖庫整理」→「二、收藏量大的 CC0 高解析圖庫」→「7. Pickupimage」
• 攝圖網：中文圖庫

上圖為 Pickupimage 搜尋 "櫻花"的結果。

在 2016 更新版中，有中文需求的使用者，請記得切換到這三個分頁，就可以進行中文搜尋了。

更多免費圖庫相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

防止 Chrome 自動重新讀取分頁內容

March 20, 2016, 2:29 am

≫ Next: FB「讚」按鈕與 Google「+1」按鈕最簡單安全的安裝方式﹍可解決對齊問題

≪ Previous: CC0 免費圖庫搜尋引擎﹍2016 更新版

$

0

0

最近發現使用 Chrome 時，對於已經開啟的網頁，只要切換到別的分頁一段時間後，再切回原來的分頁時，整個頁面就像自動按了「重新整理」一樣，會強制自動重新載入整個網站。

這樣的情形其實還滿困擾的，因為不會只有一個分頁需要重新載入，而當多個分頁都要花時間等待再度載入時，真的是滿浪費時間的。

其實之前並不會發生這樣的情形，想必是新版更新後造成的現象。那麼為何 Chrome 要這麼設計，又有什麼辦法可以關閉這個功能呢？請見以下的說明。

一、減少記憶體使用

1. 釋放記憶體

大家對 Chrome 的印象，多半是個「吃記憶體的怪獸」，雖然執行速度快，不過是建立在使用大量系統記憶體所展現的成果。

當 Chrome 開啟的分頁一多，其實每個分頁佔用的記憶體都很驚人，那麼作業系統若還同時執行其他程式時，就可能卡卡的、不太順暢。

這篇「Chrome 開發者也知道自己是吃記憶體怪獸」提到，Android 版本的 Chrome 為了減少記憶體的使用，會將暫時用不到的分頁釋放記憶體，等需要用到該分頁時再重新載入。


2. 行動版的設計

這樣的設計對於行動裝置來說，算是非常必要，畢竟行動裝置的記憶體多半沒辦法像桌機這麼大，為了保持系統運作的順暢，不這樣設計也不行，否則記憶體不夠，整個行動裝置也是有可能因為執行 Chrome 而當掉。

然而現在(Windows)桌機版 Chrome 也採用這個設計的話，我倒覺得矯枉過正，畢竟桌機是要拿來長時間作業用的，一次開多個分頁就是為了查詢資料方便。記憶體不足這樣的問題，使用者自然會為桌機增添記憶體，畢竟 PC 要增加記憶體是比行動裝置容易的。

二、修改 Chrome 設定

為了在 PC 作業順利、不浪費等待分頁載入的時間，請按照以下步驟來修改設定，讓 Chrome 回到之前的順暢狀態：

1. 在網址列輸入以下字串：

chrome://flags/#automatic-tab-discarding

2. 接著會看到下圖畫面：



「自動捨棄分頁 Mac, Windows」這個標題的上方也有一個選項 "預設"，這裡不小心可能會改錯選項，請不要改到上方那一個，必須改下方那個、紅框標示的選項，改為「已停用」即可。

使用 "預設"選項代表 Chrome 會自動捨棄分頁 → 會導致分頁內容需要重新載入

改成 "已停用"後，Chrome 就不會自動捨棄分頁了。

更多 Chrome 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

FB「讚」按鈕與 Google「+1」按鈕最簡單安全的安裝方式﹍可解決對齊問題

March 21, 2016, 3:30 pm

≫ Next: 網頁圖片該怎麼處理, 顯示效果會比較清楚？

≪ Previous: 防止 Chrome 自動重新讀取分頁內容

$

0

0

在「Facebook 讚按鈕﹍四種安裝方式剖析」有讀者於留言 #2 表示 "不曉得刪除了哪個小工具的語法，所有文章都不會再顯示臉書專頁的讚按鈕了"。

如果對程式碼不熟悉的話，FB 官方提供的 HTML5 語法，的確有可能安裝失敗、或發生彼此打架的情形。最安全、絕不會影響他處 FB 外掛的安裝方式，就是採取本文推薦的 IFRAME 安裝語法。

本篇除了介紹安裝 FB 讚按鈕的語法，也一併說明 Google「+1」按鈕最簡便的語法。同時，使用本篇的語法，還能有效排除「讚按鈕」與「+1按鈕」放在同一行時，無法上下對齊的問題，算是一石二鳥的解決方案。

(圖片出處: pixabay.com)

一、讚按鈕安裝語法

請將以下程式碼，放在想顯示的地方：

<iframe src='' scrolling='no' frameborder='0' style='width:150px; height:20px;' allowTransparency='true' onload='this.src="http://www.facebook.com/plugins/like.php?locale=zh_TW&amp;href=http://" + location.hostname + location.pathname + "&amp;layout=button_count&amp;action=like&amp;colorscheme=light&amp;share=false"; this.onload="";'></iframe>
如需要修改參數的話，請參考以上藍色字串：

• width: 寬度 px 值
• height: 高度 px 值
• layout: 有 3 種參數可修改
  
  • standard: 按鈕佔面積最大，顯示訊息最多。
  • button_count: 按鈕所佔面積小，統計數量顯示在按鈕 "右"方。
  • box_count: 按鈕所佔面積小，統計數量顯示在按鈕 "上"方。
• action: 有 2 種參數可修改
  
  • like: 出現 "讚"字樣
  • recommend: 出現 "推薦"字樣
• colorscheme: 有 2 種參數可修改
  
  • light: 適合淺色背景
  • dark: 適合深色背景

二、+1 按鈕安裝語法

請將以下程式碼，放在想顯示的地方：

<iframe allowTransparency='true' src='' style='width:150px; height:20px;' frameborder='0' scrolling='no' onload='this.src="https://plus.google.com/_/+1/fastbutton?url=http://" + location.hostname + location.pathname + "&amp;size=medium"; this.onload="";'></iframe>

如需要修改參數的話，請參考以上藍色字串：

• width: 寬度 px 值
• height: 高度 px 值
• size: 有 4 種參數可修改
  
  • small
  • medium
  • standard
  • tall

如果要跟 FB 讚按鈕擺在一起，那麼 size 建議使用 medium 就好，版面比較美觀。

三、效果展示

1. 效果展示

將以上兩組語法放在一起後，效果如同下面這樣：




2. 對齊效果

有時我們將多個社群分享按鈕放在同一列時，會發生高、矮不齊的狀況，版面很不美觀。

不過使用了本文的安裝碼後，從上面的效果可看到，「讚」按鈕與「+1」按鈕可以上下切齊，沒有需要調整版面的問題。


3. 分享功能

本篇的安裝碼，執行上由於都是 IFRAME，會比官方安裝碼載入的速度快。不過也是會有副作用 → 沒有分享的功能，可以試著按按看就知道了。

因此以上的安裝碼，適合只顯示按讚數、+1 數，以及提供訪客按讚及 +1 的功能。

如果一定需要分享按鈕的功能，那麼請繼續往下看，改用不同的參數或安裝碼。

四、讚按鈕+分享按鈕安裝語法

請參照「一、讚按鈕安裝語法」，將藍色字串 share 的參數從 "false"改為 "true"，那麼讚按鈕的右邊，就會額外出現一個「分享」按鈕了。

五、+1 按鈕分享功能語法

必須將 +1 按鈕，改用官方語法，才能出現分享功能：

<div class='g-plusone' data-size='medium'></div>
<script src='https://apis.google.com/js/platform.js' async='async'></script>
需要修改參數的話，同樣請參考「二、+1 按鈕安裝語法」的說明。

六、分享功能效果展示

將以上兩組語法放在一起後，效果如同下面這樣：



這組安裝碼，一樣可讓「讚」按鈕與「+1」按鈕上下切齊，提供給需要 "分享"功能的讀者多一種的選擇。

更多 FB 相關技巧：

更多社群分享按鈕工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

網頁圖片該怎麼處理, 顯示效果會比較清楚？

March 23, 2016, 3:30 pm

≫ Next: Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式

≪ Previous: FB「讚」按鈕與 Google「+1」按鈕最簡單安全的安裝方式﹍可解決對齊問題

$

0

0

最近有讀者遇到一個狀況，網站使用的圖片都是 640px 寬，但在 Blogger 的文章區塊扣掉 padding 等等的數值後，可顯示寬度為 590px 左右。當圖片從 640px 縮小到 590px 的情況下，圖中某些文字因為變小而顯得比較不清楚(或是說效果比較差)。因此，希望我幫他調整文章區塊的版面寬度，讓圖片可以顯示 640px 這樣的寬度。

當然，調整版面寬度是一種解決方法，不過這麼做，是否一定可以讓網頁的圖片變得清楚呢？這件事需要考慮的因素，其實比想像中要來得多。

同時，部落格的圖片，該如何兼顧尺寸、美觀清楚、以及載入速度，算是還滿重要的考量點，因此寫一篇專文來討論此事。

(圖片出處: pexels.com)

一、圖片及文字不清楚的原因

1. Blogger 上傳的圖片

從 Blogger 上傳到 PICASA 圖床的圖片，由於牽扯到 Google+ 的設定，過去發生不少圖片模糊、或圖片異常的現象，因此花了點時間整理各種案例，請參考這篇「Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面」。


2. 文字不清楚

我們可能會在圖片加上文字、或是網址浮水印等資訊，若是使用的字體比較細，那麼圖片縮小的時候，就可能出現本文的案例，導致文字看起來不清楚。

把圖片用原尺寸顯示是一種解決方法，但是我們必須了解，訪客的螢幕各種尺寸都有可能，所以幾乎很難能讓訪客看到一張 1:1 尺寸的圖片：

• 在寬螢幕圖片就會被放大
• 在行動裝置圖片就可能被縮小

要根本解決文字、浮水印不清楚的問題，就是使用較粗的字型(例如微軟雅黑體)，或是文字設定為粗體。




更好的方法，是使用影像編輯軟體做些效果，例如上圖的文字，周圍有一圈白色底色、以及陰影。這樣的文字效果，無論經過圖片放大、縮小，都可以被清楚地辨識。

二、寬螢幕的圖片效果

1. 圖片會被放大

市場上的主流是寬螢幕，很多訪客的螢幕都是 1920 x 1080 這樣的解析度。若部落格網頁的寬度設定在 1000px~1100px 時，代表在訪客的螢幕上通常是放大到將近兩倍(才能撐滿螢幕)，而所有的圖片也會放大為將近兩倍。

在這個前提之下，一張壓縮過的 jpg 圖檔本身已經失真，再放大為兩倍的話，通常看起來就會比較模糊了。以 Blogger 熱門文章小工具為例，預設的文章縮圖為 72px 正方形大小，原本已經不太清楚，那麼在 1920 x 1080 的螢幕上又放大兩倍，自然是更加模糊。


2. 圖示的製作

想讓圖片在大螢幕上放大兩倍後不失真，最好的方法是製作一張兩倍寬度的原圖，接著再設定該 img 標籤的寬度為原尺寸，那麼這張圖在訪客的 1920 x 1080 螢幕上，放大兩倍後剛好還原為原圖尺寸，就不會失真了。

例如「最新回應」小工具的頭像圖示，預設顯示的寬度為 35px，程式的設計會讀取 70px 寬的頭像圖示，這樣無論在較小、較大的螢幕都能清楚顯示。

本站其他跟縮圖相關的工具，例如「最新文章」、「相關文章」等等，也都是利用同樣的原理，讀取兩倍寬度的縮圖來顯示。


3. 文章圖片的處理

不過文章中的圖片，若是刻意製作兩倍寬度的圖片來顯示，就不一定適合了。

例如為了讓寬螢幕的視覺效果，製作 1280px (兩倍)寬的圖片，顯示為 640px 寬，這可能需要衡量得失，下個章節來探討這一點。

三、大圖會影響網頁載入時間

1. 網站效能的影響

小圖片就算放大為兩倍，增加的檔案大小其實不多。但是大圖片寬度還放大為兩倍的話，檔案容量可是會爆增的。

根據「優化網站效能該注意哪些事? (1)最關鍵的考量因素」，圖片正是影響網頁載入速度最大的原因，因此為了讓圖片比較清楚、好看，是否需要為了寬螢幕的顯示效果，而放大圖片尺寸，是需要思考的事情。


2. 建議的數據

這裡提供的圖片相關數據，屬於個人經驗，請斟酌參考即可。文章中的圖片建議使用：

• 最大約 600~800px 寬的尺寸
• 壓縮後的 jpg 檔大小能在 50k 以下最好
• 每張圖盡量不超過 100k

這樣的話，若一篇文章有 10 張圖片，至少不用為了讀取圖片，而花費 1000k 的連線、下載時間。


3. 行動版效果

由於行動版的螢幕尺寸都很小，若文章放了 1000px 寬的圖片，那麼行動版照樣也是要讀取這麼大張的圖片，非常花時間。

行動裝置本身記憶體就小了，而讀取跟網頁版一樣大張的圖片，更是花費大量記憶體與時間、操作起來會更卡，那麼對訪客而言，將不是友善的閱覽體驗。

一方面前述「2. 建議的數據」會對行動版有幫助，另一方面如果是 Blogger 平台，可參考這篇「加快 Blogger 行動版圖片載入速度的密技」來改善此事。

四、另開原始圖片的技巧

還有另一個非常好的理由，讓我們不必為文章中的圖片，放原始大圖，那就是利用 A 標籤的「另開視窗」語法 (target="_blank")。

熟悉這個語法的話，可以在文章中顯示較小尺寸的圖片，當訪客點擊圖片時，在另開視窗彈跳出原始大圖。這樣的做法，就可以 "網頁載入速度"與 "圖片清楚美觀"兩者兼顧了。

以下就介紹幾種，讓原始大圖可以另外彈出的技巧。

1. 另開視窗語法

從 Blogger 後台上傳的圖片，可以選擇顯示的尺寸，建議選擇顯示 640px 的尺寸就好，當訪客點擊時，頁面會出現原尺寸圖片。

不過我們會發現，Blogger 後台產生的語法，並不會另開視窗，因此可使用「Blogger 圖片語法轉換器」，來自動產生 "另開視窗語法"。

然而這個轉換器無法讓舊文章的圖片也另開視窗，那麼讀者可以參考「超連結 A 標籤及錨點, 你不知道的操作技巧」→「一、另開視窗的重要性」→「4. 讓文章中的(圖片)超連結另開視窗」，安裝這裡的語法可以讓圖片另開視窗。




2. 使用燈箱效果

在 Blogger 後台 → 設定 → 文章和留言 → 在燈箱中展示圖片 → 選擇「是」，可以開啟 "燈箱"效果，等於是安裝系統提供的這個外掛。

當訪客點擊圖片時，會產生燈箱效果，這樣跟另開視窗的功用類似，我們可以在文章顯示小尺寸圖片，以加快載入速度，當點擊圖片時，燈箱會開啟較大的圖片。




3. 安裝 Fancybox

有時因為不知名原因、或使用了其他外掛，會使得 Blogger 官方的燈箱失效，那麼可以改用這個知名的 jQuery 外掛「Fancybox」，一樣可以有燈箱、縮圖導覽的效果。



可點擊本篇文章中的各個圖片，欣賞 Fancobox 的燈箱效果。

五、小結

本篇提出的解決方案，算是非常完美地解決了 "網頁載入速度"與 "顯示原始大圖"的兩難問題，只要你是使用 Blogger 部落格，從後台上傳圖片時，就能選擇以小尺寸圖片顯示，接著看是要搭配「另開視窗」語法，或是燈箱外掛，就能讓訪客也可看到原始大圖了。

更多網站效能相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式

March 27, 2016, 3:30 pm

≫ Next: 發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖

≪ Previous: 網頁圖片該怎麼處理, 顯示效果會比較清楚？

$

0

0

很多從其他部落格平台搬到 Blogger 的站長，都會詢問「按下標籤後顯示文章標題列表」這樣的功能。的確，站長們對自己的文章內容瞭如指掌，想要找站內的資料時，真的只需要看到文章標題就好。

但是站在訪客的立場，對於我們的文章內容、甚至網站風格都不太熟悉的時候，按下標籤若貿然只顯示文章標題，可能不具備足夠的吸引力來點擊，最好還是維持有封面圖、摘要等內容比較恰當。

那麼，有沒有這樣的工具，可以同時滿足站長及訪客的需求，能夠自由選擇按下標籤時，要出現文章標題列表、或顯示原有的封面圖及摘要呢？WFU 本篇研發的工具，將可完美實現這件事，同時兼顧兩種需求、而且安裝簡單方便，請見以下的介紹。

點此看範例網頁

一、功能介紹

在開始之前，可先進入上面的範例網頁，搭配以下的介紹內容：

1. 官方「標籤」小工具

使用本篇的工具，必須先安裝官方「標籤」小工具，無論使用 "清單"或 "標籤雲"模式都可以。

過去曾為了本篇的功能，寫了原始版 V1 的「讓 Blogger 按下標籤後出現文章列表」，不過對於如何只顯示 "自訂的標籤"，處理上有些麻煩。

現在搭配官方「標籤」小工具後，由於可以自訂要顯示的標籤，那麼 V1 的不方便之處就得到了解決。


2. 切換模式



本篇的工具會在官方「標籤」小工具上方，顯示兩個切換模式的按鈕：

• 摘要模式：選擇此模式後，按下標籤會顯示 Blogger 預設的文章摘要內容(也就是跳至標籤頁面)。
• 標題模式：選擇此模式後，按下標籤會顯示該標籤的文章標題列表。

這個小工具可以將預設值設定為 "摘要模式"，方便訪客瞭解文章及網站的風格。顯示文章封面圖、摘要的話，版面也比較好看。

而站長或熟客可自行選擇 "標題模式"，方便查找網站中的文章及資料。

幾年前曾為這個功能寫了「讓 Blogger標籤/搜尋頁面 能隨時切換標題模式與文摘模式」，但修改方式非常複雜、麻煩，而且對不熟悉範本的讀者來說很危險，一不小心就會把範本改壞。

現在這個版本安裝起來不但簡單、而且安全多了。曾安裝過舊版的讀者，請小心參考原文說明，倒推回去將範本恢復原狀，再來安裝本篇的版本。


3. 選項會自動記憶

由於程式使用了 cookie，只要切換過模式一次，就會自動記憶設定。將來再進入網站時會讀取 cookie，不用每次都重新切換模式，非常方便。


4. 動態切換上下頁



當標籤的文章數過多時，文章列表會自動分頁，且上、下頁切換都是使用 Ajax 動態載入，速度飛快、不會重整頁面，可節省大量查找文章及資料的時間。

二、準備動作

1. 安裝「標籤」小工具

• 如前所述，網站請先安裝官方的「標籤」小工具
• 如果網站確定只安裝過一次「標籤」小工具，那麼可跳到「2. 安裝 CSS」
• 記下「標籤」小工具設定的標題，到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋標題字串
• 如下圖，搜尋到小工具的標題後，在同一行可找到小工具的 id，例如圖中的 "Label1"，將此字串記下來，之後會用到。

2. 安裝 CSS

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*標籤文章列表 V2*/
.labelTOC2_caption {
font-size: 20px;
}
#labelTOC2 ol {
padding-right: 0;
}
#labelTOC2 li {
padding: 5px 0;
border-bottom: 1px solid #eee;
text-indent: 0;
}
#labelTOC2 a,
#labelTOC2_info a, #labelTOC2_nav a {
text-decoration: none;
}
#labelTOC2_info {
text-align: left;
font-size: 11px;
font-family: arial, sans-serif;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#labelTOC2_info a {
color: #ccc;
}
.labelTOC2_title {
display: inline-block;
font-weight: bold;
width: calc(100% - 100px);
padding-right: 10px;
vertical-align: top;
}
#labelTOC2_postIndex {
margin: 5px 0;
text-align: center;
}
#labelTOC2_switchPage,
#labelTOC2_nav {
background-color: #eee;
margin: 5px 0;
padding: 3px;
}
#labelTOC2_switchPage a,
#labelTOC2_switchPage span,
#labelTOC2_nav a {
box-sizing: border-box;
display: inline-block;
width: 50%;
padding: 0;
border-left: 1px dashed #aaa;
text-align: center;
}
#labelTOC2_switchPage a:hover,
#labelTOC2_nav a:hover {
background-color: rgba(100, 100, 100, 0.1);
}
#labelTOC2_switchPage a:first-child,
#labelTOC2_switchPage span:first-child,
#labelTOC2_nav a:first-child {
border-left: 0;
}
</style>
第一行綠色字串可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

其餘的部分，如果對 CSS 熟悉可自行修改參數。

三、安裝程式碼

接著請搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼：


以下參數修改請參照以上程式碼行號：

E：如果確定網站只安裝過一次「標籤」工具的話，那麼 id 通常就是 "Label1"；如果不確定的話，請按照「二、準備動作」→「1. 安裝標籤小工具」的步驟，修改小工具的 id 字串

F：這一行的設定決定此工具第一次執行時，所顯示的模式。一般來說，這一行的參數建議設定為 0，預設使用 "摘要模式"，對訪客比較好，因為訪客不一定知道切換模式的用處、或是不熟悉怎麼操作這個工具。

G~H：修改兩種模式的按鈕字串；如果熟悉 IMG 標籤語法的話，這裡也可填入含 IMG 標籤的圖片網址。

I：可修改文章列表每頁顯示的文章數

J~K：更改上、下頁的圖示；若要使用圖片，可參考 G~H 行的說明。

L~M：修改相關字串

O：由於過去發生「Google Drive(js檔)流量限速」的情形，為了避免將來某天這個小工具無預警罷工，建議讀者有空的時候，參考以上文章連結，自行將綠色字串的 js 檔分流，並用「Google Drive 外連產生器 V2」取得外連網址。


以上儲存後即可看到效果，若想先測試操作一下，請前往範例網頁：

點此看範例網頁

更多實用工具：

• 本站使用的 Blogger hack 及工具整理

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖

March 30, 2016, 3:30 pm

≫ Next: Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner

≪ Previous: Blogger 按下標籤出現文章列表 V2﹍可切換摘要及標題模式

$

0

0

最近處理一個 case 需要幫忙設定 Facebook 的 Meta 標籤，也就是讓 Blogger 文章分享到 FB 時，可以正常出現縮圖、摘要...等等資訊，結果很意外的，使用「官方 Debug 工具」時，頻頻出現以下錯誤訊息：

"Errors That Must Be Fixed More Than One OG URL Specified: Object at URL 'http://xxx.com/' of type 'article' is invalid because it specifies multiple 'og:url' values:..."

這樣的訊息是最近才開始出現，查了一陣子才知道是 Blogger 預設的範本內容有了變更，開始正式支援 FB 分享的縮圖顯示。

不過這件事其實有好有壞，究竟是怎麼回事，請看本文的說明。

一、Blogger 內建 FB Meta 語法

1. FB Meta 語法

在過去，Blogger 文章分享到 Facebook 時，只要沒有刻意進行 FB 的 Meta 語法相關設定，那麼顯示的文章縮圖、標題、摘要等等資訊，八成會不如預期。

偏偏這件事又非常重要，如果不能確保文章能出現 "大尺寸縮圖"、"詳細的文章摘要"等資訊，那麼在 FB 的傳播效果一定會大打折扣。

因此所有 Blogger 站長們，請務必詳讀這篇「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」來進行設定、及瞭解各種排錯的方法。


2. FB debug 錯誤訊息

不過有按照前述教學設定過 FB meta 語法的站長們，最近一定會發現，怎麼以前「FB debug 工具」都不會出現錯誤訊息，現在一定會出現以下的畫面：



這訊息的意思是說，我們設定了重複的 "og:url"，要求更正這項設定。

於是 WFU 在範本裡拼命搜尋，但是怎麼找都只看到自己設定的一行 "og:url"，沒有看到重複的語法，那麼問題到底出在哪裡呢？

最後想到可以檢視「網頁原始碼」，結果真的找到了兩個 "og:url"，這代表什麼含意呢？


3. Blogger 更新範本語法

原來 Blogger 最近悄悄地在範本中內建了 "og:url"相關的 Meta 設定，而且包覆在 Blogger 語法之中，所以在範本中是搜尋不到的。

而且詳細檢查的結果，Blogger 一共內建了兩行與 FB 分享有關的 Meta 語法：

• 一個是 "og:url"
• 另一個是 "og:image"

因此 Blogger 算是很貼心的，偷偷的更新了範本的內容。這也就是說，我們在不用進行任何設定的情況下，Blogger 文章分享到 FB 時，也能出現縮圖。

二、重複的 og:url

Blogger 的努力更新其實 WFU 都有看到，不過
Blogger 的貼心壞就壞在，他默默的做事但是不公告，所以沒有人知道這樣的事，才會導致已經安裝過 FB Meta 語法的使用者，出現了重複的 "og:url"。

因此，曾看教學安裝過 FB 相關 Meta 語法的讀者，請在範本中搜尋這一行：

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
找到後將他刪除，那麼在 FB debug 工具就不會看到錯誤訊息了。

三、重複的 og:image

如前面提到的，重複的不止有 "og:url"，還有 "og:image"，所以曾安裝過 FB 相關 Meta 語法的讀者，Blogger 範本中也會多了一行 "og:image"的相關語法。

這一點的問題比較沒有那麼大，只是會出現下圖的異常現象而已：



分享到 FB 後，由於設定了多個 "og:image"，如圖中紅框標示，會出現圖片切換按鈕。

但實際上重複的兩行 "og:image"由於指向同一張圖片，所以不管怎麼切換也只會顯示同樣的圖片，也就是多了個沒有作用的功能而已。

那麼這部分就看讀者了，如果覺得礙眼的話，可以在範本中移除所有跟 "og:image"相關的語法，例如類似下面這行：

<meta expr:content='data:blog.postImageUrl' itemprop='image' property='og:image'/>

四、小結

因為 FB 完整的 Meta 語法設定，不是只有 "og:url"、
"og:image"這兩項，Blogger 的這項更新可以讓不熟悉語法的使用者，在分享文章到 FB 時，能夠有基本的縮圖效果呈現。

但如果想完整呈現正確的標題、摘要、作者名稱等等資訊，那麼還是請參考「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」來進行，才能得到最好的效果。

更多 Facebook 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner

April 5, 2016, 9:07 pm

≫ Next: Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備

≪ Previous: 發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖

$

0

0

用「RSS」訂閱網站最新文章，是非常方便又強大的工具，可惜只有網路重度使用者比較知道 RSS 是什麼，一般的讀者並不熟悉 RSS、且不一定想要瞭解。

為了讓各種層次的讀者都能收到網站最新文章的通知，提供 Email 訂閱會是最簡單的方式，且操作方便、不需另外研究相關工具。

Blogger 官方提供了「透過電子郵件追蹤」這個小工具，可以放在側邊欄讓讀者訂閱網站文章。不過前陣子接到一個需求，想要把這個工具放在文章標題下方。仔細想想也是有些道理，側邊欄比較顯眼的位置可能會被其他更重要的工具搶走，例如熱門文章、搜尋框、Adsense 等等。

其實網頁能吸引讀者注意、增加訂閱率的位置還有不少，例如最上方的標頭區塊，本篇的例子文章標題附近，或是文章結束處也是很好的擺放地方。那麼以下就來看看，怎麼把這個「用 Email 訂閱」的功能搬到 Blogger 各種自訂位置，同時也會說明在 FeedBurner 如何管理「Email 訂閱」的功能。

(圖片出處: pixabay.com)

一、安裝官方工具

一般來說，網站想要提供「Email」訂閱的功能，必須先到「Feedburner」註冊、燒錄網站...等等進行不少流程，不過因為 Feedburner 早被 Google 收購，那麼自家產品 Blogger 倒是可省下這些流程，直接就能使用「Email」訂閱的功能，請按以下步驟進行：

1. 安裝「透過電子郵件追蹤」



後台 → 版面配置 → 新增小工具 → 選擇「透過電子郵件追蹤」→ 填入標題並儲存即可。

接下來這個小工具可拖曳到想擺放的位置，如果沒有中意的位置可擺，那麼改用本文的安裝碼，之後將小工具移除也沒關係。


2. 取得網站 ID



安裝過程的畫面如上圖，我們可以得到幾個重要資訊：

• Blogger 會自動幫我們在 Feedburner 註冊、並燒錄網站的 RSS
• 註冊的身份是圖中顯示的這個 Google 帳號(Gmail)
• 燒錄的網站 RSS 網址如圖中所示，為 http://feeds.feedburner.com/WfuBlog
• 請記下自己紅框標示的 ID 字串，如圖中的 "WfuBlog"，這非常重要，之後會用到。

二、安裝程式碼

想要讓「讀者透過 Email 訂閱文章」的功能放在網站的指定位置，那麼就必須修改範本內容，最好具備基本的 HTML/CSS 技巧，並參考「Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼」系列文章，來瞭解程式碼應該擺放在範本中的什麼位置。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。


1. 安裝 CSS

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<style>
/*email訂閱*/
#emailForm input {
font-size: 20px;
border: 1px solid #e3e3e3;
padding: 5px 10px;
height: 36px;
box-sizing: border-box
}
.emailInput {
width: 65%;
background: #fff
}
.emailSubmit {
width: 33%;
float: right;
cursor: pointer;
background: #8C2D17;
color: #fff
}
</style>
如果熟悉 CSS 的話，可自行修改參數。


2. 安裝 HTML

接著在範本(或文章)中想要顯示「Email 訂閱」功能的地方，插入以下程式碼：

<form action='http://feedburner.google.com/fb/a/mailverify' id='emailForm' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=WfuBlog", "popupwindow", "scrollbars=yes,width=550,height=520"); return true;' target='popupwindow'>
<input class='emailInput' name='email' placeholder='輸入 EMAIL' type='text'/>
<input name='uri' type='hidden' value='WfuBlog'/>
<input name='loc' type='hidden' value='zh_TW'/>
<input class='emailSubmit' type='submit' value='訂閱'/>
</form>
先別存檔，需要修改一些參數：

• 紅色字串：請將兩處 "WfuBlog"字串改為前面「一、安裝官方工具」→「2. 取得網站 ID」取得的 ID 字串
• 藍色字串：輸入框及按鈕的提示字串，請修改兩處藍色字串。

存檔後，效果如同下面這個 Email 訂閱框及按鈕工具：



這個「Email 訂閱框」也是目前 WFU BLOG 擺放在側邊欄的效果，由於一併跟其他訂閱按鈕、以及「FB 粉絲團」擺放在一起，光是安裝官方「Email 訂閱」工具很難呈現這樣的效果，還是得使用本文的程式碼，搭配其他按鈕、FB 粉絲團的程式碼，才有辦法組合在同一個區塊。

三、FeedBurner 操作補充

FeedBurner 有很多設定可以修改或管理，不過基本上完全不去管這些參數的話，Email 訂閱功能也可以正常運作，不會有什麼影響。

對進階設定有興趣的讀者，網路上有很多詳細的教學，可參考「FeedBurner電子報設定教學」，有一系列完整的說明。




這裡只簡單說明幾項跟本文主題「Email 訂閱」有關的內容，請進入「FeedBurner 官網」→「選擇網站」→「宣傳摘要」→「Email Subscriptions」



1. 管理 Email 名單

上圖左側的選項「Subscription Management」可以看到所有訂閱網站的讀者 Email 名單，並進行管理。畫面需要捲到最下方──



對著上方紅框的「查看訂閱者詳情」按下後，會展開全部的名單。

正常來說都會是 "激活"的狀態，表示讀者能正常接收到訂閱的 Email 通知；但若看到如紅框中的 "未驗證"，代表讀者訂閱後沒有到 Email 信箱點擊確認信，有可能是太忙忘了、或是確認信跑到垃圾郵件去了。

貼心的站長可以定期檢視這份名單，針對 "未驗證"的讀者發個提醒 Email，通知讀者點擊確認信，完成 Email 訂閱的流程。


2. Email 郵件格式設定

左側選項「Email Branding」可以設定電子郵件的格式，例如標題、內文、字體等等的細項，或是當一天發佈兩篇文章時，可以分別設定不同的標題字串。

這部分的詳細說明，可直接參考這篇「設定部落格電子報的版面」。


3. 設定出刊時間

基本上，網站發佈新文章後，讀者訂閱的 Email 通知並不會馬上寄出，而是會等到 FeedBurner 預設的時間才寄出，因此最晚的話，會等到隔天才寄出通知。



要進行出刊時間設定的話，可進入左側選項「Delivery Options」→ 分別設定時區、發送時間，按下「保存」即可。

更多 Blogger 相關工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備

April 8, 2016, 3:20 am

≫ Next: Dropbox 外連產生器﹍可使用於非公開(Public)資料夾

≪ Previous: Blogger 讓讀者以 Email 訂閱最新文章﹍任何位置都能擺放, 免註冊 FeedBurner

$

0

0

如果你的網站使用了任何放在 Google Drive 的外連檔案，例如 JS / CSS / 圖片 / 影音 / PDF...等，很不幸的，再過幾個月後，於 2016/8/31 開始，這些外連檔案就要永久失連，相關報導可參考這篇「這次是Google Drive的網絡託管服務即將關閉」。

這樣的消息很無奈，不過依照部分族群對免費空間的使用模式，這一天的到來可能只是或早或晚而已。

無論如何這件事對部落格或 Blogger 平台還是有一些衝擊，要說有什麼好的對策也很困難。趁著還有一小段時間，本文我們來看看有什麼補救的方法。

(圖片出處: splitshire.com)

一、Google 的態度

一開始是「Google Code 關閉」的事件，雖然 Google Code 的目的是讓使用者存放程式碼，但太多人把 Google Code 當作免空來用，放了各種影音、謎檔，導致佔用巨額流量。剛好 Google 準備推廣 Google Drive，因此有個好藉口關閉了 Google Code。

不過使用者行為模式不變的情況下，果然 Google Drive 一樣成為下一個 Google Code，而且能儲存的空間還多達 15G，成為各種大檔的絕佳存放場所，想當然 Google 必然會對這個現象開刀，否則每天哪堪這麼巨大的流量費用，沒什麼公司燒得起這樣的錢。

這讓我們部落格站長們，只想有個空間可以存放小小的 JS/CSS 檔，但命運卻得跟濫用空間的使用者綁在一起。去年發生了「Google Drive 外連失效事件」後，逼迫站長們得想辦法對外連檔案開始找備胎，用以迎接萬一沒有 Google Drive 外連的日子。

現在這一天真的即將來臨，有經歷「Google Drive 外連失效」事件的站長，是否做好準備了呢？

根據官方說法「Deprecating web hosting support in Google Drive」，從 2016/8/31 開始，請注意你的網站，是否有 Google Drive 這樣格式的檔案連結：

googledrive.com/host/文件 id
如果有的話，時間一到這些外連就失效。

而這次 Google 也很乾脆的不再提供任何免費空間，建議我們直接考慮付費的「Google Cloud」。

二、影響較大的族群

以下列出 2016/8/31 之後，哪些族群會受到很大的影響。

1. 影音檔

影像、mp3 音樂等大檔，應該是 Google Drive 要開刀的主要對象，同時也是佔用流量的大宗。

不過這類檔案的主人，很多都是在大型論壇提供下載連結，應該已經很習慣在不同的免空之間來去自如，所以個人覺得 Google 應該針對這些族群進行限制比較公平。但話說回來，似乎也不存在什麼好的機制，例如：

• 限定只能存放特定的附檔名 → 但使用者可將大檔偽裝成特定的附檔名
• 限定檔案大小 → 但使用者可以用分割檔的方式存放

2. 下載網站

有些網站專門提供特定的小型檔案下載，也許是 App、小遊戲、文件...等等，這些檔案存放在 Google Drive 的比例也很高，因此這些網站在 8/31 之後也得另謀出路。


3. 圖床

一開始 WFU 不太瞭解為何使用者把 Google Drive 當圖床，因為「Google Drive 是有流量限制的」，站長應該不會希望某天超過流量額度後，讓訪客看到圈圈叉叉的圖片吧？

而且 Blogger 若使用 Google Drive 當圖床，還有不少缺點，請參考「Google Drive 當圖床對 Blogger 的不好影響」。

後來終於知道了原因，主要是從別的部落格搬到 Blogger 後，所有圖片得重新上傳到 PICASA，並置換所有文章中的圖片連結。由於這個工程太浩大，若把圖片放到 Google Drive 的話，那麼處理圖片連結會比較方便，也因此出現了一些把「Google Drive 當圖床」的教學。

無論如何，現在這些把 Google Drive 當圖床的站長們可能要傷腦筋了，在 8 月底之前要想辦法搬到別的圖床(或是重新上傳到 PICASA)，並且修復網站的所有圖片連結，這會是很大的工程，而且文章數目越多的站長，花費的時間會越長。

三、對 Blogger 的影響

與其說是對 Blogger 站長們的影響，不如說是對 WFU BLOG 的影響比較大，因為本站提供了大量的 Blogger Hack 與工具的教學，文章中有很多 JS / CSS 的連結，現在這些教學提供的連結，得在 8/31 之前做更新，否則這些工具就要失效了。

Blogger 站長們要做的事沒有那麼多，假設範本中裝了 3 個 JS 外掛的話，那麼只需要：

• 另外找個空間
• 上傳 JS
• 修改為 3 處新的 JS 連結

如果不曉得要找什麼空間放 JS / CSS 檔的話，可以參考「幫 Google Drive 的 JS 檔買保險」、「Google Drive 又無法外連？備用方案 OpenDrive」這兩篇文章。

四、JS / CSS 外連的替代作法

連網路龍頭 Google 都不願意提供免費外連的時候，說實在，其他的免費空間，有辦法給我跟 Google 等同的信任感嗎？有辦法找到獲利方式、有辦法撐多久不會倒呢？

免空濫用的行為只會不斷移轉，如同蝗蟲一般，掠奪一空後另尋他處，所以 WFU 倒是放棄了另尋空間擺放 JS / CSS 的想法。那麼我準備怎麼做呢？

1. 本站教學內容

原本的部分教學內容，包含了外連 JS 檔的連結，那麼程式碼由於行數少，看起來會比較簡潔、清爽。

為了避免將來每次 JS 外連失效，得重新尋找新的空間、這樣的無止盡循環，我計畫將 JS 檔的所有內容，直接一股腦倒進教學的程式碼之中，這樣行數會一瞬間暴增，程式碼看起來非常龐大，但也是沒辦法的事了。


2. 範本的管理

跟上一點同樣的原理，若讀者也不想再另尋免費空間的話，可以將 JS / CSS 的外連內容，直接倒入範本之中。

這樣的副作用就是，範本變得肥大，日後管理起來比較不便，需要捲動較多的內容。

WFU 提供一個管理上的訣竅，可以將 JS / CSS 的內容直接放在「HTML/JAVASCRIPT」小工具之內，就不會造成範本的肥大，管理上比較容易，這也是我目前的作法。

五、小結

看完本篇之後，其實對大部分 Blogger 站長的影響有限，因為我們的圖片放在 PICASA，只要沒有提供訪客下載「Google Drive」的檔案，那麼只需要針對某些外掛找免空，或是參考「四、JS / CSS 外連的替代作法」就好。

而如果網站有不少檔案是從 Google Drive 外連的話，那麼只剩 4 個月的時間，需要即早做準備，進行免空、或是圖床的轉換了。

更多 Google Drive 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Dropbox 外連產生器﹍可使用於非公開(Public)資料夾

April 11, 2016, 10:17 pm

≫ Next: WFU BLOG 外連 JS 變更及操作說明

≪ Previous: Google Drive 檔案外連功能將於 2016 年 8 月關閉, 站長須即早準備

$

0

0

由於「Google Drive 檔案外連功能將於 2016 年 8 月關閉」，為了讓曾安裝本站各種工具的讀者，能先找到 JS / CSS 外連的替代空間，因此製作了這個「Dropbox 外連產生器」。

原本 Dropbox 公開(Public)資料夾的檔案，都可取得直接連結，但 2012 年 10 月以後才註冊的使用者，Dropbox 關閉了公開資料夾的功能，所有檔案只提供分享連結。

這個工具可以將原本 Dropbox 檔案的分享連結，轉換為 "直接連結"，原本不能外連的 JS / CSS 檔就可拿來讓網頁引用了。

一、外連產生器

使用方式很簡單，將 Dropbox 提供的分享連結，貼到下面「貼上 Dropbox 分享連結」的輸入框即可，格式大概長得像這樣：

https://www.dropbox.com/s/gqpa8wxve756hta/test.js?dl=0
貼上連結後，會自動產生直接連結、以及下載連結。

二、取得 Dropbox 分享連結

如果不清楚怎麼取得 Dropbox 分享連結，請參考以下的步驟：

1. 進入 Dropbox 官網：

• https://www.dropbox.com/home

2. 選擇資料夾 → 選擇要製作連結的檔案



如上圖，按下「共享」按鈕，就可取得分享連結網址。複製後，貼到「外連產生器」即可。

三、Dropbox 補充說明

1. 製作此工具的用途

雖然我曾提供管理網站 JS 外連更好的方式：「徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險」，不過仍有讀者對於處理程式碼不熟悉，因而留言求助。

相對之下，使用這個工具取得 Dropbox 檔案的 JS 外連，會比這篇文章的處理方式簡易許多。對於研究程式碼很頭痛的讀者，就請用本篇的工具吧！

然而，熟悉程式碼的讀者，建議還是參考該篇文章的教學，使用 "目錄型"的外連空間，可以比較不用擔心日後 JS 的管理問題。


2. 是否適合圖片外連

或許有的讀者，會把這個工具拿來取得圖片外連，把 Dropbox 當作圖床使用。

一方面來說用這個方式取得連結其實挺麻煩的，一方面這些連結網址都有隨機字串，並不適合後續的管理、或是搬遷。

WFU 並不推薦把 Dropbox 當作圖床，除非你是 2012 年 10 月以前的使用者，有公開資料夾功能，使用 "目錄型"的連結網址，這樣就適合當作圖床，圖片連結就比較好管理了。


3. Dropbox 警告

相信 Google Drive 為了打擊免費空間的濫用行為，決定關閉外連功能讓很多使用者都感到錯愕，那麼濫用行為因而轉到 Dropbox 的話，例如在 Dropbox 放影音、大檔，再用這個工具取得連結供人下載，導致 Dropbox 耗用巨額流量，其實官方也是有提出警告的，請看公告頁面「為什麼我的分享連結或檔案請求被禁止了？」，這是官方的聲明：

若我們查到違反使用規章的連結，我們會禁用該帳戶所有的連結和分享功能。

或許 Dropbox 不會像 Google Drive 一樣，說關閉就馬上關閉外連功能，但 Dropbox 會把你養了很久的帳號禁用，那麼後果可就得不償失了。

更多 Dropbox 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！