2015年12月31日

Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)

random-number-Blogger 隨機文章 + 自訂尺寸縮圖  側邊欄工具除了「熱門文章」,側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具,就是 "隨機文章" 了。

之前曾製作了「Blogger 隨機文章 + 自適應尺寸縮圖」,由於是橫式版面,只適合擺放在文章結束處。不過將程式碼稍微修改一下,變成直式版面的話,就可以擺在側邊欄了。

以下簡單介紹這個工具的特點,想直接安裝請跳至「二、安裝程式碼」。



(圖片出處: pixabay.com)
2015年12月29日

讓行動版網頁能用手指縮放螢幕大小

這個「Blogger 論壇貼文」表示,"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站,發現的確連 WFU BLOG 也不能做到這件事。

其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。而手機的螢幕可視範圍更小,如果網頁有圖片的話,"能用手指縮放" 這件事的確能提供讀者友善的使用體驗。

於是研究了一下 Blogger 行動版如何開啟這項功能,其實方法很簡單,請見本文的筆記整理。

(圖片出處: pixabay.com)
2015年12月23日

Adsense 廣告尺寸及版面配置優化技巧整理

adsense-hot-zone-Adsense 廣告尺寸及版面配置優化技巧整理有讀者詢問 Adsense 適合擺放的廣告尺寸,以及版面配置如何最佳化。基本上不只我們會關心這件事,應該說 Adsense 官方比我們本身更關心,因為網站的廣告收入同時也直接影響 Google 及 Adsense 的收益(可抽成 32%)。為了賺更多錢,Adsense 官方的立場一定是想辦法教會所有站長,任何有關廣告配置優化的知識。

從「Adsense 官網」我們可看到,所有相關教學的文件整理的非常清楚,只不過就像看到一本厚厚的教科書,打開來查閱的慾望會比不上一本輕薄的摘要筆記。本篇簡單整理了一些 WFU 擺放、測試 Adsense 的心得,相信讀者可以從這些步驟、流程來找出最適合自己廣告版面的排列組合。

2015年12月15日

解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案

windows-live-writer-解決 Windows Live Writer(WLW) 無法登入 Blogger 的替代方案除了這個「Blogger 論壇貼文」詢問這件事,也有朋友在 12/11 就告訴我,Windows Live Writer(以下簡稱 WLW) 一直無法發文到 Blogger 要怎麼辦?

直接說結論,這是 Google 堅持維護安全性問題造成的影響,短期內這件事無解,不過一段時間後可望有曙光,只是要多久沒人能保證

以下先簡單說明一下為什麼會發生這件事,同時也提供幾個變通的替代方案,讓習慣 WLW 介面的讀者能繼續操作 WLW。想直接看解答請跳至「三、用 Email 轉寄 Blogger」

(圖片出處: windowsreport.com)
2015年12月10日

線上檢查 HTML/Javascript/CSS 語法工具, 自動偵測錯誤

htmlhint-線上檢查 HTML Javascript CSS 語法工具 自動偵測錯誤前陣子也許 Blogger 在測試新功能,出現了這個「Blogger 論壇」貼文提到的異狀,在後台編輯文章的畫面,出現 "您的 HTML 不被接受,結尾標記沒有對應的開頭標記" 這樣的提示訊息。

其實 Blogger 編輯文章時,如果切換到 HTML 模式,衹要語法不對,本來就會出現錯誤的提示。不過這次出現的錯誤訊息實在太誇張,滿滿的一整頁的確會讓人以為我們做錯了什麼事!

因為我沒遇到這個狀況,說不定這個 Bug 現在已經修復了。無論如何,讀者如果要確定文章中使用的 HTML/Javascript/CSS 程式碼是正確的,可以利用本文介紹的這個線上語法檢查工具,來找出所有錯誤,確保文章內容都是沒有問題的。

2015年12月6日

Blogger 百大熱門文章排行

100-Blogger 百大熱門文章排行對於第一次逛到我們部落格的陌生新訪客,沒什麼工具比得上「熱門文章」,能更快熟悉網站精華之所在。就像在首次嘗鮮的店家點餐時,如果不想踩地雷,點菜單上的 "人氣"、"推薦"、"招牌" 餐點會是安全的選擇。

Blogger 官方提供了「熱門文章」小工具,是部落格側邊欄數一數二的安裝選擇,可以吸引讀者注意力、增加停留時間。不過可惜的是,這個官方工具最多只能顯示瀏覽人數前 10 名的文章,對於累積了數百、上千篇文章的站長而言,我們巴不得能提供更多的人氣文章讓讀者挑選,對吧!

目前而言,要提供更多的熱門文章,只能選擇自製一途,例如參考「標頭 Banner 隨機輪播熱門文章」。另外 WFU BLOG 最近製作了「百大熱門文章排行」,效果還不錯,讀者可以試玩看看。

(圖片出處: pixabay.com)
2015年12月2日

圖床會被大陸封鎖,Blogger 有無解決方案?

自從之前提出「部落格網站如何不被大陸封鎖?」的構想後,不少讀者來信詢問如何進行。如果詳細讀完這篇文章,會明白最困難的是解決圖床的問題。

關於圖床 WFU 提出了多種解決方案,而礙於篇幅的關係,上一篇無法深入說明及詳細分析。因此本篇獨立出來,除了比較各方案的利弊,也讓讀者知道,使用 Blogger 突破大陸封鎖圖床時,需要付出的機會成本有哪些。

閱讀本篇之前,請務必先瞭解上一篇「部落格網站如何不被大陸封鎖?」的概念。

2015年11月30日

PTT 過載連不上?各種軟體快速登入技巧整理(SSH加密連線)

ptt-overload-PTT 過載連不上?各種軟體快速登入技巧整理(SSH加密連線)以前登入 PTT 時,若是在晚間熱門時段,當人數逼近 15 萬就可能連線超載而連不上。但最近一反常態,連冷門時段、或線上人數不過 4 萬而已,竟也會出現「系統過載」的訊息,讓人不免懷疑是否 PTT 的連線遭到攻擊。

於是蒐集了一下事件發生的原理及解法,本篇整理了各種工具(PCman, PttChrome, Mo PTT, JPTT, PTT+),包含了各種平台(BBS、Chrome瀏覽器、Android、iOS)能順利連上 PTT 的技巧,讓塞車時段也能獲得優先連線的權利,有效減少不斷重新登入的次數。

2015年11月28日

修改 Blogger 各處 CSS(文章標題+內文+其他),以字型大小顏色舉例

blogger-template-design-tool-修改 Blogger 各處 CSS(文章標題+內文+其他),以字型大小顏色舉例這個「Blogger論壇貼文」表示,使用 Blogger 後台「範本設計工具」來將文章標題的字體改大,結果首頁文章標題的尺寸如預期大小,但文章頁面的尺寸變小。

這個情況有點奇特,本篇試著瞭解為何會如此,順便說明 Blogger 其他區塊的字型要如何調整 CSS,做個系統性的整理。

2015年11月26日

讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入

win8-ctrl-space-讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入自從 Windows 8 的輸入法切換被罵翻天後,原本還冀望微軟會聽進廣大中文市場的聲音,結果 Windows 10 的輸入法一樣難用,讓人大失所望。

由於現在新出的 筆電/平板,只要是 Windows 系統,一律搭載 Win8 以上的版本,每當需要輸入時不免綁手綁腳。如果輸入法能像舊版本一樣,使用 Ctrl + Space (空白鍵) 就可中英切換,那麼這些新配備用起來就順暢多了。

(圖片出處: pixabay.com)
2015年11月23日

如何找出 Google 帳號異常登入的 IP 記錄

google-account-login-ip-record-如何找出 Google 帳號異常登入的 IP 記錄這個「Blogger論壇討論串」表示,Google 帳號有不明的登入記錄,詢問如何查詢 IP 記錄。原來之前寫的「檢查 Google 帳號是否被盜用﹍查詢最近登入的 IP 紀錄」,當初 Google 提供了最近 1 個月登入的 IP 記錄,但現在測試才發現,Google 已經不提供 IP 資訊了。

由於 Google 的功能、介面常常改版,現在該如何查出異常登入的 IP,請參考本文的技巧。

2015年11月18日

[Blogger] 將 Adsense 廣告放在標籤索引頁面實作

google-adsense-index-page-Blogger 將 Adsense 廣告放在標籤索引頁面實作有的知名部落格會對標籤頁面的 Adsense 廣告,進行版面配置的最佳化,例如「重灌狂人」的標籤頁面是這麼安排的:

1. 文章區塊上方放置 Adsense 700 x 150

2. 隔三篇文章之後放置 Adsense 700 x 150

3. 再隔三篇文章之後放置 Scupio(酷比) 700 x 250

當然不是說這樣一定是收益最大化的配置,因為每個網站的格局、特性都不同,需要進行 A/B 交叉測試,才能找出最佳的結果。

Blogger 要在標籤索引(index)頁面自由擺放廣告,不是一件簡單的事,雖然我們過去已經學會使用「Blogger 七種頁面形態判斷語法」,但這還不足以處理所有的狀況。

本篇將以實例說明如何修改範本,讓 Adsense 廣告可以擺放在各種自訂位置,來方便執行 A/B 交叉測試。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>

(圖片出處: pexels.com)
2015年11月11日

為何分享文章會被 FB 封鎖或出現安全驗證?解決「無法分享+留言框失效+確認按鈕」等異常現象

fb-block-website-account-post-為何分享文章會被 FB 封鎖或出現安全驗證?解決「無法分享+留言框失效+確認按鈕」等異常現象分享文章到 Facebook 是效果最好的社群媒體行銷管道,但是如果稍不注意,操作的過於頻繁,那麼可是會發生不少問題。

這個「Blogger 論壇討論串」提出了在 Facebook 分享文章時,出現的一些異常現象。除此之外,WFU 也整理了更多 FB 分享時可能會遇到的案例,以下採問答的方式呈現,若有更多狀況,會持續補充在本文。

(圖片出處: pixabay.com)
2015年11月7日

幫網站嵌入 Facebook 粉絲團專頁(Page Plugin)﹍簡易安裝法及各種應用方式

wfublog-fb-fan-page-幫網站嵌入 Facebook 粉絲專頁(Page Plugin)﹍簡易安裝法及各種應用方式這個外掛以前稱為 Like Box(粉絲團讚視窗),更早叫 Fan Box(粉絲框),現在的名稱 Page Plugin 倒是比較直覺一些,就是 FB 粉絲專頁的外掛工具,可以將粉絲專頁嵌入網站的指定位置,是效果很好的行銷宣傳工具。

這個「Blogger論壇討論串」,原 PO 表示重新安裝 "FB 粉絲頁" 很多次,還是無法正常顯示。對於不熟悉語法的使用者而言,FB 許多外掛工具今年的改版,的確少了很多彈性,也增加了安裝的出錯率。(以往外掛都提供了多種安裝方式,現在只剩下一種)

以下先簡單介紹官方安裝方式,而為了讓嵌入 FB 粉絲專頁外掛更為方便,WFU 另外提供了簡易安裝法,只要一個步驟就能安裝成功,保證不會失敗。想節省時間可直接跳到「二、簡易安裝法」,最後並提供各種粉絲專頁的應用作法。

2015年11月3日

Blogger 標頭版面配置實作﹍圖片+標題+廣告

blogger-header-design-Blogger  標頭版面配置實作﹍圖片+標題+廣告這個「Blogger中文論壇貼文」詢問 Blogger 標頭區塊的版面如何製作,主要是因為原 PO 比較欣賞「Logo + 標題」這樣的版面設計。

這是很合理的,部落格若要長久經營、帶給訪客深刻印象,設計一個簡明的 Logo 圖案會很有效果,能讓訪客看到 Logo 就連想到我們的網站,就像知名商標例如蘋果、Nike 一樣。

不過關於 Logo 圖案要如何設計這件事,只能請讀者發揮想像力了。本篇要說明的,是如何將 Logo 擺設在網站的標頭,順便舉例 Adsense 廣告如何放在這個區塊。

(圖片出處: picjumbo.com)
2015年11月1日

百大熱門文章排行﹍DEMO

2015年10月30日

Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.x

nexus7-cover-Nexus 7 提升速度及效能的方法﹍將 Android 版本降為 4.xNexus 7 是 CP 值相當高的平板裝置,且為 Google 旗下產品,Android 系統的支援度很高,只要出新版本,沒多久就會通知我們更新了,可享受最新的技術、介面效果。而一般的行動裝置則否,當 Android 推出新版本時,不一定能升級,且得看該硬體廠商能否即時更新韌體來支援。

不過系統升級也不是沒有副作用,較舊的行動裝置不一定能跟上軟體的更新,例如我的初代 Nexus 7 升到 5.x 版後,速度從越變越慢、到最後動不動就整個當掉,一天到晚需要重開機,一度已經準備放棄,另尋新的平板裝置。

還好後來發現解決方法,N7 至今仍然持續運作地很順暢,以下記錄我的解決過程及心得分享。

(圖片出處: asus.com)
2015年10月24日

酷比(Scupio)廣告使用心得

酷比Scupio廣告使用心得雖然幾年前就知道酷比 Scupio 這家廣告聯播代理商,但是官方規定的申請門檻 "單月瀏覽量 30 萬",對小規模的網站實在是天方夜譚,因此一直不得其門而入。

直到前陣子這則 Blogger 中文論壇貼文「Scupio 酷比廣告申請心得」,原來有使用者分享,現在 "每月網頁瀏覽次最好要有上萬才有機會通過審核"。門檻從「30 萬降到 1 萬」,標準大為降低,相信很多部落格都可以嘗試來申請看看。

以下分享這陣子使用酷比廣告的心得,除了一定要擺放的「Adsense」之外,或許 Scupio 可以成為額外的選項。

2015年10月21日

Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

blogger-recent-post-v2-Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS之前寫的舊版工具「最新文章」已經很久沒有更新,由於前陣子「BLOGGER 支援 HTTPS」之後,很多 Blogger 工具都需要修改才能相容於 HTTPS 模式,因此藉這個機會來改版,除了加強縮圖的呈現方式,也新增不少功能。

以下先介紹更新的功能列表,想直接安裝請跳至「二、安裝程式碼」。



(圖片出處: pixabay.com)
2015年10月16日

引用 jQuery 連結及版本的注意事項

許多 Blogger 工具都會用到 jQuery 這個 javascript 框架,需要引用一個外部 js 檔連結。對於不熟悉程式碼的使用者,極有可能從網路上 google 找來許多工具、外掛,並在自己網站引用了多次 jQuery 連結,結果導致網頁載入時,重複讀取了多次 jQuery、或使用了多個不同版本的 jQuery,不但拖慢網頁速度,而且不同版本之間也可能會打架。

WFU 寫的不少工具都會用到 jQuery,過去在撰寫使用說明時,都是直接引用這篇「如何使用jQuery版本」。不過因為最近「BLOGGER 支援 HTTPS」,以及考量到「部落格網站如何不被大陸封鎖?」,決定重新整理一下引用 jQuery 時,所有需要注意的細節,也請安裝過 WFU BLOG 工具的讀者,瞭解一下這個主題。

2015年10月10日

Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS

blogger-recent-comments-v2-Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS三年前原始的版本「Blogger 最新回應+留言者頭像+文章標題」其實功能已經很完整,不過前幾天的最新消息「BLOGGER 支援 HTTPS」之後,幾乎所有的 Blogger 工具都將無法相容於 HTTPS 模式,瀏覽器多會出現「混合內容錯誤」。

藉這機會來更新算是使用率極高的「最新回應」工具,且整理了舊版本所有讀者的留言意見,一併改善版面配置、使用體驗、讀取速度等等,相信這個 V2 版本會是 Blogger 最佳的 "最新留言" 小工具。

以下先介紹更新的功能列表,想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)
2015年10月3日

我的部落格網站需不需要拓展大陸市場?

always-outstanding上一篇「部落格網站如何不被大陸封鎖?」談完了部落格平台,進軍大陸市場需要克服的技術性問題,要能全部解決不是太輕鬆,必定得花不少時間與心力在這些硬體層面的障礙。

本篇來談談軟體層面需要考量的因素,要西征之前得先裝備齊全,軟硬體實力兼備才得以在殺戮戰場立足。

(圖片出處: imgur.com)
2015年10月2日

BLOGGER 終於支援 HTTPS﹍搞懂安全傳輸協定的重要性及影響

blogger-https-guide-BLOGGER 終於支援 HTTPS﹍搞懂安全傳輸協定的重要性及影響雖然 Blogger 近年來一直不被看好,很多人認為隨時可能被 Google 遺棄,然而他們可能不知, Blogger 持續不斷進行各種有形、無形的更新,例如官方發佈的「各種表達式語法」、WFU 發現的「Blogger 文章封面圖語法」。而最震撼的,就是官方昨日發佈的重大消息「Blogger 開始支援 HTTPS 安全傳輸協定」。

相信這是一個非常明確的訊息,以及給 Blogger 使用者的定心丸,因為支援 HTTPS 加密協定必須使用更好的伺服器進行運算,也代表 Google 在這方面的投資與決心。其實 WFU 對 Blogger 的前景看法一直沒變,可參考「Blogger 的未來」。

回到主題,Blogger 開放 HTTPS 功能後,無論目前是否需要、到底有沒有實質的好處,使用者要不要馬上開啟,的確需要評量一下。每個站長的需求不盡相同,這件事很難有標準答案,WFU 試著從各種角度,來思考 HTTPS 安全傳輸協定的功用與影響,提供不同的想法讓讀者做抉擇。

(圖片出處: pixabay.com)
2015年9月30日

增加網站流量, 提升圖片搜尋排名﹍自動產生 ALT 內容

image-seo-alt-提升圖片搜尋 自動產生ALT內容相信有注意 SEO 的讀者都曉得,在圖片標籤 IMG 加上 ALT 敘述,是做 SEO 的基本功,可增加被搜尋引擎索引的內容,提升被訪客搜尋到的機會。

對於公司、形象網站而言,不太需要常常增加圖片,那麼處理 ALT 這件事不算太麻煩。不過對於部落格站長,常常需要發表新文章,那麼逐一設定每張圖片的 ATL 內容,就是件苦差事了,因此不太可能在這件事上花時間。

為了解決處理 ALT 的難題,WFU 寫了一個「ALT 內容自動產生器」,讓站長們可以快速地完成這項 SEO 作業,同時本文也簡單介紹,為何中文環境的圖片搜尋結果不佳,及如何改善 ALT 索引。



(圖片出處: pixabay.com)
2015年9月29日

圖片 ALT 描述自動產生器

img-alt-generator-圖片 ALT 描述自動產生器為圖片 IMG 標籤自動添加 ALT 描述內容,是 SEO 的重要工作,可為網站增加不少額外流量。但這件事很瑣碎,需要額外花不少時間。

因此 WFU 製作了「ALT 內容自動產生器」,讓這件事變得非常容易。請見本文的操作說明,並前往這個工具的頁面:

2015年9月26日

Blogger 文章列表極速版﹍依標籤排列 (更新版)

舊版本「文章列表極速版﹍依標籤排列」發表後,獲得許多讀者的想法與意見,大多是非常有建設性的,可以讓這個小工具使用上更為友善。

這個更新版將目前收到的構想全部統合,運用的彈性比以前大很多,已經安裝過的讀者,請重新安裝本篇的更新版本。

2015年9月24日

部落格網站如何不被大陸封鎖?

台灣的免費部落格平台基本上已經全部被大陸封鎖,若想要避開封鎖,似乎只有自行架站一途。當然,沒有固定收益的部落格,很難支撐這樣的花費。

若仔細瞭解大陸封鎖的原理,一一拆解分析之後,是有突破封鎖的可能性。上一篇「不被大陸封鎖的 "免費空間/圖床" 測試心得」,已經提供了其中兩項最困難的解決方案,本篇繼續分析其餘待克服項目的可能性。

(圖片出處: pickupimage.com)
2015年9月22日

不被大陸封鎖的「免費空間/圖床」測試心得

greatfirewallofchina-org前陣子讀到 +coke tech 這篇「Blogger 使用 Cloudflare CDN 的幾點心得 」,他的實驗結果可以讓 Blogger 自訂網域避開大陸的封鎖。

這個主題算是不少台灣部落格站長都相當關注的一件事,畢竟大陸帶來的 page view(瀏覽量) 相當可觀,但是要克服的問題非常多。這次 Coke 的實驗也讓 WFU 翻出過去整理的資料,繼續研究這個主題的可能性。首先是探討最不確定的因素,有哪些「外連空間/圖床」可以在大陸正常運作?

2015年9月19日

Blogger 文章封面圖 (縮圖) 的各種呈現方式

最近接到一個需求,案主希望在文章標題上方擺放文章縮圖。要說是 "縮圖" 其實不太精確,因為圖片必須滿幅寬(跟文章區塊同寬),而這麼大的圖,應稱為 "封面圖" 比較貼切。

要做到這件事不難,使用「PICASA 或 Blogger 後台上傳的圖片」,Blogger 就能取得文章縮圖,再利用 Javascript 修改圖片網址參數,即可讓縮圖改以大圖呈現,並放到網頁的指定位置。

文章標題上方擺長方形圖片這個效果真的不錯,現在 WFU BLOG 版面也做了相關的調整。且後來發現 Blogger 還有更輕鬆的方式,不必寫任何 js 程式就做出這個效果,更棒的是圖床不限定 "PICASA 或 Blogger 後台上傳",例如處理 "Flickr" 圖片也沒問題,因此值得分享新的作法及延伸應用。

(圖片出處: pixabay.com)
2015年9月17日

不必再進入 Facebook﹍訂閱不公開社團 RSS 的技巧

ifttt-fb-group-rss之前寫過一篇「IFTTT 訂閱 Facebook 社團貼文心得」,可惜敵不過 FB API 的頻繁改版,現在 IFTTT 已經無法再支援「FB 社團」的同步功能。

不能訂閱 FB 社團是很麻煩的事,因為 WFU 加入的社團很多(人數也很龐大),在訊息量這麼大的情況下,不太可能天天進 FB 社團看每一則貼文,就像我們不可能掃完所有 Line 群組的每一條訊息。

利用 RSS 閱讀器介面,從標題篩選、過濾不必要的雜訊,才是資訊爆炸時代獲得訊息的王道,也是我們網路族群善用網路工具所具備的優勢。

於是花了點時間研究,有沒有一個機制能夠利用 RSS 閱讀器來訂閱 FB 社團的貼文。最終找出來的步驟不少,但相信將來足以省下更多時間,請見本文的心得分享。

2015年9月15日

讓 Blogger 留言能顯示圖片及 Youtube 影片﹍將網址字串轉換為圖片

一直以來 Blogger 留言不開放貼圖語法,這是很可惜的事,畢竟很多時候「一張圖勝過千言萬語」,搭配影像的輔佐可節省許多文字的描述。

當然官方應該也是有其考量,若開放了 img 標籤的使用,萬一訪客放了高解析大圖、或是大量貼圖用來惡搞網站,導致網頁開啟速度被癱瘓是有可能的;更甚者在圖片網址夾雜惡意連結,都有可能造成資安危機。

因此,已經考量清楚的站長,決定開放 Blogger 留言區塊讓訪客貼圖的話,可前往「二、安裝程式碼」。

2015年9月13日

增加工作效率﹍四款倒數計時 Chrome 套件評比

countdown-timer-chrome-plugin「倒數計時」這類功能簡單、又可增加工作效率的小軟體,過去試用了多款桌面軟體,不過始終找不到一個輕量級、好操作、看得順眼的選擇,最終乾脆在桌上擺個實體計時器,直接按還比較方便快速。

直到最近測試了幾個 Chrome 套件,沒想到效果、質感比桌面軟體好很多,操作也比實體計時器便捷。由於打開電腦作業時,Chrome 幾乎都是開啟的狀態,因此倒數計時的套件的確能取代實體計時器的使用。

基本上 WFU 對軟體的選擇還滿挑剔的,基本除了功能要符合需求,如果操作介面不順手、畫面太粗糙,多半也會用不下去。

以下本文介紹四款套件,已經剔除品質不佳、操作不便的相關套件,順序從「推薦」→「極推薦」的等級評比,不過評判標準是依據個人的使用習慣,因此還是請讀者依自己的習慣做抉擇。

2015年9月10日

BLOGGER 留言有禁止訪客自刪的功能嗎?

在備份「Blogger 中文社群」文章到「Blogger 中文論壇」時,發現了這個討論串「BLOGGER留言有禁止訪客自刪的功能嗎?」。

這樣的需求不是沒有道理,若是自刪的留言原本為 "發問內容、題目",那麼當有人回覆、提出解答,日後其他的訪客在閱讀整個討論串時,前後文邏輯對不起來,這則資訊在網路上將失去存在的意義,也阻礙了資訊的流通。

以下大概說明一下處理的原理,想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)
2015年9月7日

「BLOGGER 中文論壇」正式成立

Blogger 長久以來在中文環境下,沒有能匯集使用者、進行交流分享的專屬討論區。將近三年前,WFU 在 Google+ 成立了「Blogger中文社群」,作為中文環境的 Blogger 討論區之用。一開始在 G+ 社群功能剛發佈的推手下,討論算是十分熱絡。不過隨著時間拉長,除了 G+ 是否能持續經營產生雜音;另一方面,把 "社群媒體" 當作 "討論區" 用途的缺陷也慢慢浮現。

"G+ 社群" 畢竟不是專為 "論壇功能" 而設計的工具,長久來看,Blogger 還是需要一個專門的討論區,才能讓有深度、真正重要的主題獲得持續的關注與討論,而不是像 "社群媒體" 的特質 → 討論串在兩三天後就消逝無蹤。

現在,籌備多時「BLOGGER 中文論壇」終於完成建置。這個論壇保有了傳統討論區的功能與優點,也融合了部分 "社群分享" 的元素,有任何「Blogger 相關」、「網頁技巧」、「網路雲端」的問題討論、資訊分享,都可前往這個新天地──


2015年8月27日

將網頁所有網址字串轉換為超連結

雖然「超連結」語法不難,但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼,那麼在留言、發表意見時,若需要引用網址,訪客是不會使用 A 標籤語法的,只會直接貼上 http 開頭的網址連結字串。

如此一來,留言中的網址連結無法點擊,不利於資訊傳播。因此我們可以看到 Facebook、Google+ 等社群媒體的設計,會自動將網址字串轉換為超連結,才能發揮社群的散播力。

同樣的,如果想讓自己網站(或留言區塊)的網址字串發揮傳播力,同時也是友善的使用者體驗,那麼安裝本文這個工具相信是必須的。以下先說明程式原理,想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)
2015年8月15日

讓網頁表格能自動排序﹍TableSorter 安裝懶人包

web-table-sort-jquery-plugin前陣子製作「CSS 色碼英文名稱對照表一覽」時,需要一個 "讓表格能排序" 的功能,這樣讀者就能依照自己需求,針對不同欄位進行排序,如此查找資料非常方便,算是一個「友善的使用者體驗」。

因此研究了一下網頁表格排序的功能,本篇記錄一下處理的心得,並將安裝方式整理成懶人包,有需要的讀者套用起來會很方便。

2015年8月11日

CSS 色碼英文名稱對照表一覽﹍快速挑選好看的顏色

color-code-table之前看到這篇「CSS1-CSS3 顏色知識知多少?」,整理了所有 "可用英文命名" 的顏色及色碼,這樣的表格對於查找顏色還滿不錯的。

由於原作者的表格,是依照 CSS1 ~ CSS3 的順序來編排,算是學術用途。我把這個表格整理了一下,變成可以依照英文字母、也可依照色碼來升冪、降冪排序,這樣對於實務用途會比較方便。

2015年8月1日

Blogger 首頁文章怎麼消失了?

add-readmore其實這個問題已經趨近每月一問,由於出現次數頻繁,乾脆整理成一篇,以後直接給此篇連結就好。

要瞭解這個問題之前,得先瞭解 Blogger 的官方限制。知道原理之後,就能理解解決方法了。

2015年7月30日

避免使用 PICASA 網路相簿圖片外連,會造成 Google+ 及 Blogger 縮圖失效

picasa-google-photo-blogger之前曾寫過一篇「Google Drive 當圖床對 Blogger 的不好影響__使用 Picasa 的三大好處」,主要是因為 PICASA 的圖片網址,能夠產生各種縮圖尺寸,這算是 Google 非常高竿的獨家技術。

不過 Google 前陣子推出了同質性的新產品「Google 相片」,這個決策似乎影響了「PICASA 網路相簿」,從七月以來發生了一些災情:

1. Blogger 縮圖失效:詳細情形請見「Blogger 相關文章 V2__安裝懶人包」的留言 #43 ~ #45。

2. Google+ 縮圖失效:詳細情形請見這個「Blogger 中文社群討論串」。

針對這些狀況,有必要瞭解一下如何因應,如果習慣使用 PICASA 網路相簿的讀者,請詳讀本文的分析,我們要討論可能的替代方案:
  • Blogger 上傳圖片
  • Google+ 相片(相簿)
  • Google 相片(相簿)
2015年7月28日

Blogger 放大留言頭像尺寸的 JS 語法

過去曾寫了幾篇關於修改 Blogger 頭像尺寸的文章,例如「舊範本修改各種身份頭像」、「新範本修改留言頭像尺寸及形狀的 CSS 語法」。

不過最近 +toa to 於這個「Blogger 中文社群討論串」表示, "最近發現,雖然把頭像變大了,但網址還是s35-c,導致圖片看起來很模糊"。後來仔細想了一下,當初寫 CSS 修改語法時,並不會有這樣的問題,那麼大概是 Blogger 有什麼地方做了變動,因此無法再用 CSS 語法就能處理這件事。

以下先大致說明前因後果、需要解決的問題,想直接安裝請跳「二、準備動作」。

(圖片出處: pixabay.com)
2015年7月24日

安裝 PAYPAL 贊助+分期付款(訂閱)按鈕﹍以及使用心得

paypal-button前陣子幫讀者處理 PAYPAL 贊助按鈕的設置,加上還有分期付款的需求,藉這機會整理一下心得,讓有需要的讀者參考。

雖然網站很久以前就放了 PAYPAL 贊助按鈕,不過到後來發現贊助的使用率較少,反而是支付的使用較多。因為轉帳對於某些族群比較麻煩,而 PAYPAL 的「信用卡支付」功能,可一定程度提高交易的成功率。

如果你的網站提供了某些服務或商品(例如「諮詢與商品販售」),可以讓使用者進行消費;或是以經營權威網站為方向,內容足以讓讀者進行贊助,那麼在草創時期、資金不足以建構金流的時候,PAYPAL 能夠在 "免架設成本" 之下幫我們解決這件事,是一個不錯的選擇。

2015年7月17日

網頁使用自製紋理背景﹍雜點+拔絲+再生紙效果實作 [CSS 技巧]

noise-background過去本站各個區塊一直都是使用單色背景,稍微比較沒質感,而好處是網頁載入速度會快一些。前陣子剛好有讀者詢問哪裡可以找到不錯的紋理背景圖案,因此稍微研究了一下這方面的資訊,順便幫網站背景換上自製的紋路,不過就是得稍微犧牲幾個 http 請求。

其實網路上的免費背景圖資源非常多,可以找到各式極有質感的圖案。為何 WFU 選擇自製?主要是越好看的背景,圖檔也越大,得花更多的載入時間。因此最後找了一些簡單的小尺寸圖案,加以變化後竟也弄出不錯的效果。

以下分享我的實作心得,根據這樣的原理,相信讀者可以做出比我更好的效果。

2015年7月10日

部落格「會員系統」啟用

member-support從去年九月「會員中心」試營運以來,最近終於將預計規劃的功能全部上線,同時也感謝讀者的支持,目前已經累積了超過一千名會員。

究竟為何需要加入會員?使用會員中心有什麼好處?正式營運又有什麼優惠呢?請見以下詳細的說明。

(圖片出處: hartsplumbingwa.com)
2015年7月8日

讓 Google 問卷(表單)能自動計分 V2

google-form-auto-score由於 Google Drive 全面更新為新版雲端硬碟,過去曾寫過的「讓 Google 試算表製作的問卷試題能自動計分」,某些舊試算表函數功能已經被廢除,導致在新版試算表,將無法執行舊版自動計分的功能。

如果你的 Google Drive 還保有一些舊版檔案,那麼或許可以套用舊版的自動計分製作方法。如果是新的 Google 帳號,會被強制使用新版雲端硬碟,那麼就得改用本篇的流程來製作問卷表單了。

(圖片出處: pixabay.com)
2015年7月6日

會員中心贈送點數限時活動 (20150706 - 0715)

20150716 公告:解答已公佈在「二、作答題目」

試營運已久的「會員中心」,最近即將宣布正式營運,同時也會有一系列活動,例如開幕期間,「會員加值文章」所有的 "Blogger 工具" 都只要 50 點即可兌換

如果你是長期關注本站的忠實讀者,且已經加入會員,現在 WFU BLOG 舉辦的限時贈點有獎徵答活動,參加期限只有 10 天,答對越多可拿到越多點數,換得更多獎品。

還沒加入會員也沒關係,只要有 FB 帳號就能立即加入(本站右上角的「加入會員」按鈕),請把握時機趕快參加吧!

2015年7月3日

讓網頁顯示特定中文字型﹍安裝實作教學

chinese-custom-font在網站使用中文字型是個大問題,由於字型檔在現有的網路速度下,過長的傳輸時間讓我們不能隨心所欲使用喜歡的字型,也因為如此,只能遷就訪客作業系統現有的字型,例如「網頁中文字型除了微軟正黑體, 還有這些好選擇!」。

這篇「使用 UNICODE 特殊符號取代網頁小圖示」,使用了 CSS3 的語法,可以讓網頁只載入字型檔中特定的字元,而不必載入整個字型檔。從而舉一反三,龐大的中文字型檔,使用了這個技巧後,就可以只載入指定的文字,節省了大量的傳輸時間,以下就來看看怎麼實作吧!

2015年6月30日

Facebook 停止發佈粉絲頁 RSS﹍目前只剩這個替代方案能訂閱

fb-fan-page-rss之前製作了「FB 粉絲頁 RSS 網址線上產生器」,很可惜撐不到一年,日前該篇文章留言 #5 有讀者通知:「6/23 Rss for FB service has been closed down」,意思就是 FB 不支援粉絲頁的 RSS 了。

既然 FB 不玩了,那麼這件事只能靠熱心的網友來提供第三方服務,否則要提供 RSS 不是很簡單的事。運氣不錯的是,還真的有國外網友提供 RSS 服務,而且好像也找不到第二個了。

另外由於新版 FB API 的限制,就算 FB 粉絲頁能訂閱 RSS,使用上也無法再像以前一樣便利了,請見本文詳細的說明。

2015年6月26日

取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號

unicode-food-icon你的網站是否也用了很多小圖示,例如 "首頁"、"留言對話泡泡"、"Email" 等等?這些圖檔雖然體積小,但每個檔案的載入都需要耗費一個 http 請求,是影響網頁載入速度的一個小原因。

最早為了解決這個問題,出現「CSS SPRITE」技術,將多個小圖合併為一張圖,減少了大量 http 請求。但由於手續繁雜、加上管理不便,沒什麼人有耐心採用這項技術。

後來發展出「ICON FONT」,把小圖示製作成字形,不但可減少 http 請求,每個圖示還能向量無限縮放尺寸,簡直是劃時代的技術。其中最有名的是「FONT AWESOME」這套字型,包含了不少網頁常用圖示,是許多網頁範本的愛用字型。

不過最近發現的驚奇是,其實從遠古時代就一直存在的 UNICODE 特殊符號,會是網頁小圖示更方便的選擇,本篇將詳細介紹他的優點。

(示意圖出處: foodiesfeed.com)

2015年6月19日

如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示?

unicode-special-character-display-on-webpage上一篇「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」,展示了許多可以取代網站小圖示的 UNICODE,其優點非常顯而易見:

1. 字元的傳輸量遠低於圖片的傳輸量
2. 可以減少許多小圖示的 http 請求量

相信對於在意網站效能的站長而言,以上兩點是非常重要的。不過 UNICODE 並非每個瀏覽器版本、每個作業系統都能完全支援,這一點上一篇有詳細說明。那麼接下來的問題會是,要怎麼讓自己網站所使用的 UNICODE 表情圖案、特殊字元,都能讓所有訪客看到呢?

2015年6月16日

Unicode 表情圖案(emoji ) + 特殊符號字元一覽表

網頁常常會用到一些小圖示,例如搜尋框、郵件圖示、留言對話泡泡等。最簡單的方法可以直接 Google 這些圖示、或是到素材網站尋找合適的圖案,不過最近發現「Unicode 組織」越做越強大,很多常用的圖示都已經可以在 Unicode 編碼中找到。

而且 Unicode 非常跟的上潮流,FB、Line 等社交工具的風行,讓表情圖案需求大增,因此 Unicode 早已創造了許多表情圖案,且每年不斷地持續新增,今年~明年將有數百個表情符號可用。

本篇整理了所有 Unicode 特殊字元、符號的一覽表,方便查詢及複製。不過 Blogger 平台請詳讀下一篇的使用說明書「如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示?」→「五、將 UNICODE 再編碼」,因為 Blogger 編輯器對 Unicode 的相容性有點問題,需要特殊技巧才能正常顯示,貿然使用可能會引起災難

2015年6月14日

Blogger 插入表格的最佳流程 + 自適應寬度表格

copy-table-to-blogger過去就曾耳聞 Blogger 文章中插入表格(table)時,會遇到一些狀況,不過直到最近需要在網站整理一些表格,才有這個機會來研究這個主題。

Blogger 文章編輯器其實問題不少,過去曾整理過一篇「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。而插入表格時,一定會切換到 "撰寫" 模式,那麼自然得小心副作用。

本篇整理了我的使用心得,並整理出一套比較安全的操作心得,有需要的讀者可以參考。

(圖片出處: morguefile.com)