Clik here to view.
Blogger 百大熱門文章排行
對於第一次逛到我們部落格的陌生新訪客，沒什麼工具比得上「熱門文章」，能更快熟悉網站精華之所在。就像在首次嘗鮮的店家點餐時，如果不想踩地雷，點菜單上的 "人氣"、"推薦"、"招牌"餐點會是安全的選擇。Blogger 官方提供了「熱門文章」小工具，是部落格側邊欄數一數二的安裝選擇，可以吸引讀者注意力、增加停留時間。不過可惜的是，這個官方工具最多只能顯示瀏覽人數最多的前 10...
View ArticleClik here to view.
線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤
前陣子也許 Blogger 在測試新功能，出現了這個「Blogger 論壇」貼文提到的異狀，在後台編輯文章的畫面，出現 "您的 HTML 不被接受，結尾標記沒有對應的開頭標記"這樣的提示訊息。其實 Blogger 編輯文章時，如果切換到 HTML 模式，衹要語法不對，本來就會出現錯誤的提示。不過這次出現的錯誤訊息實在太誇張，滿滿的一整頁的確會讓人以為我們做錯了什麼事！因為我沒遇到這個狀況，說不定這個...
View ArticleClik here to view.
解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案
除了這個「Blogger 論壇貼文」詢問這件事，也有朋友在 12/11 就告訴我，Windows Live Writer(以下簡稱 WLW) 一直無法發文到 Blogger 要怎麼辦？直接說結論，這是 Google 堅持維護安全性問題造成的影響，短期內這件事無解，不過一段時間後可望有曙光，只是要多久沒人能保證。以下先簡單說明一下為什麼會發生這件事，同時也提供幾個變通的替代方案，讓習慣 WLW...
View ArticleClik here to view.
圖床會被大陸封鎖，Blogger 有無解決方案？
自從之前提出「部落格網站如何不被大陸封鎖？」的構想後，不少讀者來信詢問如何進行。如果詳細讀完這篇文章，會明白最困難的是解決圖床的問題。關於圖床 WFU 提出了多種解決方案，而礙於篇幅的關係，上一篇無法深入說明及詳細分析。因此本篇獨立出來，除了比較各方案的利弊，也讓讀者知道，使用 Blogger...
View ArticleClik here to view.
Adsense 廣告尺寸及版面配置優化技巧整理
有讀者詢問 Adsense 適合擺放的廣告尺寸，以及版面配置如何最佳化。基本上不只我們會關心這件事，應該說 Adsense 官方比我們本身更關心，因為網站的廣告收入同時也直接影響 Google 及 Adsense 的收益(可抽成 32%)。為了賺更多錢，Adsense 官方的立場一定是想辦法教會所有站長，任何有關廣告配置優化的知識。從「Adsense...
View ArticleClik here to view.
讓行動版網頁能用手指縮放螢幕大小
這個「Blogger 論壇貼文」表示，"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站，發現的確連 WFU BLOG 也不能做到這件事。其實在使用平板的時候，由於某些網頁字不夠大，常常需要用兩隻手指將螢幕放大。而手機的螢幕可視範圍更小，如果網頁有圖片的話，"能用手指縮放"這件事的確能提供讀者友善的使用體驗。於是研究了一下 Blogger...
View ArticleClik here to view.
Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)
除了「熱門文章」，側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具，就是 "隨機文章"了。之前曾製作了「Blogger 隨機文章 + 自適應尺寸縮圖」，由於是橫式版面，只適合擺放在文章結束處。不過將程式碼稍微修改一下，變成直式版面的話，就可以擺在側邊欄了。以下簡單介紹這個工具的特點，想直接安裝請跳至「二、安裝程式碼」。點此前往範例網頁(圖片出處:...
View ArticleClik here to view.
Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果
之前曾介紹過如何「改造 Blogger 官方分享按鈕」，除了增加常用的熱門社群分享按鈕，也讓官方分享按鈕展現不同的風格。在行動裝置普及之後，「扁平化設計」開始流行，網頁開始使用簡單的顏色、線條來設計，減少陰影、立體、複雜的圖案，最直接的好處就是「減少圖片的使用後，能加快網頁載入速度」，許多熱門大站現在都是採用這樣的設計。本篇實作一組扁平化設計的常用社群分享按鈕，並加上簡單的 CSS...
View ArticleClik here to view.
Font Awesome 進階使用方式整理﹍製作社群分享按鈕
「Font Awesome」是一套把 "向量圖示"做成字型的套件。過去為了減少網站小圖示的使用(加快網頁讀取速度)，採用「UNICODE 特殊符號」這個方案。而最近處理一些案子需要製作各式的 "社群分享按鈕"，發現 "UNICODE 特殊符號"缺乏這些分享按鈕的圖示，而 "Font Awesome"除了支援多數的社交分享按鈕，一些網頁設計常會用的網路相關圖示，例如...
View ArticleClik here to view.
Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面
過去曾介紹讀者使用「Google 自訂搜尋」來當作站內搜尋的工具，其原因在「取代 Blogger 搜尋小工具﹍Google 自訂搜尋」說明得很詳細，主要是「Google 自訂搜尋(以下簡稱 CSE: Custom Search Engine)」可動態載入搜尋結果、執行速度快，能給訪客很友善的使用體驗，快速找到需要的資料。該篇文章最近有讀者留言，表示："google...
View ArticleClik here to view.
Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入
要安裝這個「Ajax 搜尋框」工具，請務必先完成上一篇「自製搜尋頁面」的流程，這樣搜尋結果的版面才會美觀。第一階段完成後，本篇要把「官方導覽列搜尋框」搬到側邊欄，並加上 "Ajax 動態載入"的搜尋結果畫面。點此看範例網頁(圖片出處: pixabay.com)一、安裝程式碼請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→...
View ArticleClik here to view.
Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包
最近在進行整理網站外部連結的 "年終大掃除"行動，目前已經清除所有的 "網站小圖示" (改用「Font Awesome 圖示字型」)，以及刪除 "Google 自訂搜尋" (改用「Ajax 搜尋框」)。接下來成為目標的，是「Fancybox」這個檔案肥大的 jQuery 燈箱外掛 。Fancybox 不但容量大、而且檔案又多，外部連結包含了 JS/CSS/一堆小圖示。除非網站完全不用燈箱效果，不然...
View ArticleClik here to view.
安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用
上一篇「圖示字型 Font Awesome 進階使用方式整理」，說明了如何利用重疊圖示，來組合出一個 FB 分享按鈕。只做出一個不過癮，本篇要示範如何利用 Font Awesome 圖示字型，繼續做出所有常見的社群分享按鈕，例如...
View ArticleClik here to view.
讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數
過去在製作「浮動側邊欄」時，雖然知道這樣的工具可以得到大量曝光機會，不過對於要讓什麼主題在側邊欄浮動，一直沒有強烈的想法。前陣子幫讀者提出「FB 粉絲團專頁外掛(Page Plugin)」的簡易安裝法後，產生了一個想法，以目前的網路行銷生態來看，讓「Facebook 粉絲頁」在側邊欄浮動，或許是 CP 值非常高的選擇，因為：1. 曝光率大大提升2. 粉絲頁按讚的機率自然提升3....
View ArticleClik here to view.
在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理
雖然已經有一些討論 Blogger 的管道，不過偶爾 WFU 也是會收到讀者從 Facebook 傳來的訊息，詢問「Blogger/部落格/網路」的相關問題。這讓我瞭解到，在 "G+/Blogger網站"以外的生態圈，對於 FB 這個平台的使用者，還是需要一個可以討論相關主題的管道，原因很簡單：● 不常用 "FB 帳號"的人，可能會駐留在 "G+"平台● 不常用 "G+ 帳號"的人，可能會駐留在...
View ArticleClik here to view.
Google 搜尋不到自己的文章嗎？各種搜尋結果不如預期的疑難雜症整理
這個 Blogger 中文論壇貼文詢問為何「Google搜尋結果找不到文章」？相信站長們都很關心自己網站的文章，在搜尋引擎的能見度，畢竟搜尋結果會直接影響網站流量。如果能弄清楚 Google 的一些運作原理，就能知道哪些事是我們的基本動作。類似的提問並不算少見，然而細節又有些微差異，因此藉這機會整理一下各種常見的案例，以 FAQ 的方式呈現，方便日後查詢。(圖片出處:...
View ArticleClik here to view.
使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩
最近使用「Font Awesome」替換了網站各處所有的小圖示，包含「社群分享按鈕」、各式側邊欄及網頁底部圖示。由於官網並未提供方便的安裝語法查詢管道，導致必須一一點開個別圖示的頁面來複製語法，因而浪費不少時間。於是整理了本篇的 Font Awesome 圖示一覽表、以及安裝語法速查表(cheat sheet)，有需要的讀者可將網址存在書籤，方便隨時查閱。一、使用方法1. 官網 cheat...
View ArticleClik here to view.
部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧﹍如何進行版本控制, 當內容被覆蓋或誤刪時可以救回
有讀者在「Blogger 文章不小心誤刪了怎麼辦？」留言表示，在 Blogger 後台編輯時出了意外，文章發佈前就不小心把內容覆蓋，詢問是否有機會救回？答案很簡單：沒辦法。然而這案例發生的機率很低，所以本篇不會針對極端的狀況進行分析，主題著重在事前要如何預防意外。很明顯的，案主會這麼問，表示他習慣用 Blogger 文章編輯器來寫作，也就是在雲端作業。而 "部落格寫作"這件事，我會比較建議使用...
View ArticleClik here to view.
Blogger 何時該發佈「文章」, 何時該發佈「網頁」?
這個 Blogger 中文論壇貼文詢問「"文章"與 "網頁"的差別」，對於剛接觸 Blogger 的使用者，的確很難區分這兩者的差異、以及使用的時機。Blogger 的官網「建立及編輯文章」、「在網誌中新增網頁」這兩個頁面，大致說明了兩者的使用方法。不過要從這些制式內容快速瞭解 "文章"與 "網頁"的特性，其實還是不太容易。雖然這算是新手問題，不過就算是老手，也不一定能完全瞭解何時需要發佈...
View ArticleClik here to view.
部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果
雖然 WFU 已經幫不少 Blogger 平台的站長做過行動版，不過自己的行動版網頁卻是一直沒有好好進行規劃，原因跟網站性質有關，讀者多半會在網頁版閱讀程式碼及操作，且 WFU BLOG 的行動裝置訪客大約只有 10%...
View Article