2016年1月29日

部落格寫作軟體的選擇, 以及確保文章寫作安全的技巧﹍如何進行版本控制, 當內容被覆蓋或誤刪時可以救回

有讀者在「Blogger 文章不小心誤刪了怎麼辦?」留言表示,在 Blogger 後台編輯時出了意外,文章發佈前就不小心把內容覆蓋,詢問是否有機會救回?

答案很簡單:沒辦法。然而這案例發生的機率很低,所以本篇不會針對極端的狀況進行分析,主題著重在事前要如何預防意外。

很明顯的,案主會這麼問,表示他習慣用 Blogger 文章編輯器來寫作,也就是在雲端作業。而 "部落格寫作" 這件事,我會比較建議使用 "離線編輯軟體",可以避免一些發生在雲端的意外(例如伺服器出錯),導致花了幾個小時的心血化為灰燼。

但也不是說 "離線編輯軟體" 就不會出意外,WFU 就發生多次程式當掉、當機、不小心覆蓋原內容等等的慘痛經驗,導致文章必須重寫,所以完全可以體會案主心在淌血的感覺。那麼本篇就來分享部落格寫作軟體的選擇,以及確保文章寫作安全的各種技巧。

(圖片出處: pexels.com)
2016年1月27日

使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩

font-awesome-cheat-sheet-使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩最近使用「Font Awesome」替換了網站各處所有的小圖示,包含「社群分享按鈕」、各式側邊欄及網頁底部圖示。由於官網並未提供方便的安裝語法查詢管道,導致必須一一點開個別圖示的頁面來複製語法,因而浪費不少時間。

於是整理了本篇的 Font Awesome 圖示一覽表、以及安裝語法速查表(cheat sheet),有需要的讀者可將網址存在書籤,方便隨時查閱。

2016年1月25日

Google 搜尋不到自己的文章嗎?各種搜尋結果不如預期的疑難雜症整理

這個 Blogger 中文論壇貼文詢問為何「Google搜尋結果找不到文章」?相信站長們都很關心自己網站的文章,在搜尋引擎的能見度,畢竟搜尋結果會直接影響網站流量。如果能弄清楚 Google 的一些運作原理,就能知道哪些事是我們的基本動作。

類似的提問並不算少見,然而細節又有些微差異,因此藉這機會整理一下各種常見的案例,以 FAQ 的方式呈現,方便日後查詢。

(圖片出處: pixabay.com)
2016年1月22日

在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理

fb-fanpage-blogger-在 FB 社團與其他 Blogger 愛好者交流﹍各種中文討論區整理雖然已經有一些討論 Blogger 的管道,不過偶爾 WFU 也是會收到讀者從 Facebook 傳來的訊息,詢問「Blogger/部落格/網路」的相關問題。這讓我瞭解到,在 "G+/Blogger網站" 以外的生態圈,對於 FB 這個平台的使用者,還是需要一個可以討論相關主題的管道,原因很簡單:

● 不常用 "FB 帳號" 的人,可能會駐留在 "G+" 平台
● 不常用 "G+ 帳號" 的人,可能會駐留在 "Facebook"
● 有 "PTT 帳號" 的人,可能會一直掛在 "PTT"

於是搜尋了一下 FB 社團,看看有無 Blogger 的中文相關社團,也真的有熱心朋友成立了「Google Blogger 素人聊天室」。因此本文藉機會整理一下,各種可以針對 Blogger 來討論、提問、交流的中文平台。

2016年1月20日

讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數

floating-fb-fanpage-讓 FB 粉絲團專頁在側邊欄浮動顯示﹍快速累積按讚數過去在製作「浮動側邊欄」時,雖然知道這樣的工具可以得到大量曝光機會,不過對於要讓什麼主題在側邊欄浮動,一直沒有強烈的想法。

前陣子幫讀者提出「FB 粉絲團專頁外掛(Page Plugin)」的簡易安裝法後,產生了一個想法,以目前的網路行銷生態來看,讓「Facebook 粉絲頁」在側邊欄浮動,或許是 CP 值非常高的選擇,因為:

1. 曝光率大大提升
2. 粉絲頁按讚的機率自然提升
3. 按讚數增加後,粉絲頁貼文的觸及人數自然就增加了
4. 部落格文章都有貼在粉絲頁的話,自然也增加網站文章的能見度、被分享的機會

那麼本篇就來分享,如何讓 FB 粉絲頁外掛在側邊欄浮動。

2016年1月18日

安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用

round-social-share-buttons-自製常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用上一篇「圖示字型 Font Awesome 進階使用方式整理」,說明了如何利用重疊圖示,來組合出一個 FB 分享按鈕。

只做出一個不過癮,本篇要示範如何利用 Font Awesome 圖示字型,繼續做出所有常見的社群分享按鈕,例如 G+、Line、微博、噗浪、推特、郵件等等。

2016年1月13日

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

fancybox-cdn-Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包最近在進行整理網站外部連結的 "年終大掃除" 行動,目前已經清除所有的 "網站小圖示" (改用「Font Awesome 圖示字型」),以及刪除 "Google 自訂搜尋" (改用「Ajax 搜尋框」)。接下來成為目標的,是「Fancybox」這個檔案肥大的 jQuery 燈箱外掛 。

Fancybox 不但容量大、而且檔案又多,外部連結包含了 JS/CSS/一堆小圖示。除非網站完全不用燈箱效果,不然 Fancybox 還滿難割捨的,沒什麼檔案小、功能強、效果佳的替代方案。

還好發現有不少網站佛心地為 Fancybox 提供了「CDN」服務,外連檔案若能放在 CDN,速度絕對比自己的網頁空間快上許多,甚至還可能不必外連。

本篇簡單整理使用的方法,並同樣提供一組安裝懶人包。

(圖片出處: pixabay.com)
2016年1月11日

Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

blogger-search-box-ajax-load-Blogger 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入要安裝這個「Ajax 搜尋框」工具,請務必先完成上一篇「自製搜尋頁面」的流程,這樣搜尋結果的版面才會美觀。

第一階段完成後,本篇要把「官方導覽列搜尋框」搬到側邊欄,並加上 "Ajax 動態載入" 的搜尋結果畫面。


(圖片出處: pixabay.com)
2016年1月8日

Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

blogger-search-box-page-layout-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面過去曾介紹讀者使用「Google 自訂搜尋」來當作站內搜尋的工具,其原因在「取代 Blogger 搜尋小工具﹍Google 自訂搜尋」說明得很詳細,主要是「Google 自訂搜尋(以下簡稱 CSE: Custom Search Engine)」可動態載入搜尋結果、執行速度快,能給訪客很友善的使用體驗,快速找到需要的資料。

該篇文章最近有讀者留言,表示:"google 自訂搜尋
為什麼永遠都是要等整頁全部內容load完之後, 搜尋列才會顯示出來...我的網誌經常被人說沒有搜尋列"。我的回答是:"這是正確的網頁程式設計,將不重要的工具延後載入,讓網頁重要的文章內容先顯示...讓網頁內容載入時不至於塞車"。

雖是如此,這件事其實不斷有使用者提出,且長久以來我一直有個構想要解決這件事、但遲未動手。最近剛好在進行加快網頁速度的計畫,準備減少外部連結的讀取,例如不使用圖示:「圖示字型 Font Awesome 使用方式整理」,同時也會減少外掛的使用,所以 CSE 也是開刀對象之一。

最後我做出了這個更強大的搜尋框工具,功能、介面與 CSE 差不多,執行速度甚至可更快,不需外掛連結,算是我心目中最佳的 Blogger 搜尋工具了。

以下先分享原理、製作方式,共分上下兩篇,想直接安裝可跳至「二、自訂搜尋頁面」,想先測試效果可前往展示網站,操作右邊側邊欄的搜尋框:



(圖片出處: pixabay.com)
2016年1月6日

圖示字型 Font Awesome 進階使用方式教學﹍製作社群分享按鈕

font-awesome-Font Awesome 進階使用方式整理﹍製作社群分享按鈕Font Awesome」是一套把 "向量圖示" 做成字型的套件。過去為了減少網站小圖示的使用(加快網頁讀取速度),採用「UNICODE 特殊符號」這個方案。

而最近處理一些案子需要製作各式的 "社群分享按鈕",發現 "UNICODE 特殊符號" 缺乏這些分享按鈕的圖示,而 "Font Awesome" 除了支援多數的社交分享按鈕,一些網頁設計常會用的網路相關圖示,例如 "Chrome"、"FireFox"、"Html5" 等等,也都內建在其中。

Font Awesome 基本的使用方法並不困難,另外一些進階的應用方式還能讓網頁設計更加方便。本篇將簡單介紹 Font Awesome 的進階使用方法,並舉例如何運用 CSS 技巧做出漂亮的社群分享按鈕圖示。

2016年1月4日

Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果

flat-social-share-button-Blogger 自製社群分享按鈕(扁平化設計) + 動畫效果之前曾介紹過如何「改造 Blogger 官方分享按鈕」,除了增加常用的熱門社群分享按鈕,也讓官方分享按鈕展現不同的風格。

在行動裝置普及之後,「扁平化設計」開始流行,網頁開始使用簡單的顏色、線條來設計,減少陰影、立體、複雜的圖案,最直接的好處就是「減少圖片的使用後,能加快網頁載入速度」,許多熱門大站現在都是採用這樣的設計。

本篇實作一組扁平化設計的常用社群分享按鈕,並加上簡單的 CSS 動畫,是很實用的範例。

2016年1月2日

BLOGGER 「架站作品/維護網站/購物車」摘錄

以下收錄 WFU BLOG 製作、維護的網站,點圖片可看大圖,下方有網站的連結,包含網頁版及行動版的效果。若需要客製網站可參考「BLOGGER "網頁版 / 行動版" 客製化作業流程」。

2016年1月1日

BLOGGER 「網頁版 / 行動版」 客製化作業流程

與本站接洽合作案件時,請參考以下的流程及注意事項。