2014年12月30日

簡單漂亮的 CSS tooltip 提示框﹍(2) data-title 設定 + 疑難雜症排除

上一篇「 CSS 提示框懶人包實作」說明了 CSS tooltip 原理,不過懶人包畢竟無法處理各種變數,留言提出了各種異常狀況,因此本篇仔細說明不同狀態下的解決方式。


<< 請注意!本篇文章含會員限定內容 >>
2014年12月28日

簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

HTML 標籤屬性 title 裡的提示訊息,在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代,訪客閱覽文章多半施展 "超速讀",相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現。使用 javascript(簡稱 js) 處理可讓 title 訊息立即顯現(就是所謂的 tooltip 效果),還可做出各式外框、動畫、置中等等效果,這才是友善的使用者體驗設計,就像下面這個按鈕:

滑鼠請移過來


效果還不錯吧!不過特別的是,這並非使用 js 做出來的,而是純 CSS 效果。因為在「優化網站效能」的前提下,為了減少網頁 js 的使用,嘗試將一些 js 能輕易辦到的事,看看能否轉交給 CSS 完成。

好消息是這個構想成功了,且本文的安裝方式非常簡單(傳統的 CSS tooltip 製作方法很麻煩、步驟多),複製貼上後整個網站就能立即套用效果。以下先說明製作原理,想直接安裝請跳至「二、安裝 CSS」。


<< 請注意!本篇文章含會員限定內容 >>
2014年12月23日

聖誕音樂點唱機﹍部落格應景外掛

首先感謝 +Mark X 製作的「聖誕節佈置懶人包」,每年節慶期間都可從倉庫中取出,重新在網站上裝飾一番。這組套件包含了網頁背景、雪花效果、滑鼠游標、以及最重要的主體──音樂點唱盒。

原版本包含了貓咪、小朋友、及水晶聖誕音樂,由於今年想要變換一下音樂,於是徵求了 Mark 的同意。以下提供這個音樂點唱機的修改方法,可自訂音樂清單,不過如作者所提的,請注意 mp3 的版權合法性,尊重音樂著作權。

2014年12月22日

CSS3 漸層語法產生器﹍計數器背景實作(1)

使用 CSS 產生的漸層效果很棒,不過這些複雜的語法參數對一般使用者而言,跟看到天書是差不多的。在這個「Blogger 中文社群討論串+綜合口味 推薦了這個線上 CSS 漸層語法產生器「Ultimate CSS Gradient Generator」,且 +Mark X 也是愛用者。相信有了行家的背書,在眾多線上產生器之中,這會是絕佳的選擇,且 WFU 試用後也覺得效果很好、操作便利。



本篇將以上圖這個 Blogger 官方流量計數器的背景圖為例,實際操作如何藉由這個線上工具,來產生此效果的漸層背景圖。

2014年12月17日

[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)

當網頁圖片多的時候,「影響效能的最大因素就是圖片載入」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外,更好的改善方法是讓圖片能延遲載入,先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「Lazy Load」的作用。

過去寫了一篇「Lazy Load 最佳安裝方式」,可以改善圖片載入的狀況。不過想要讓網頁效能最佳化的話,得另外解決「瀏覽器回流(reflow)」的現象──方法之一為每張圖片事先設定寬、高像素值。

當然這件事極為繁瑣,一一檢視每張圖片的尺寸、手動設定個別 CSS 參數,相信沒幾個人有這樣的耐心,同時這也是沒效率的事;而更讓人打消退堂鼓的是,網站的舊文章還有成千上萬張圖片,躺在那等著我們設定寬、高像素值呢!

好的,本篇的程式正是為了解決以上所有難題,自動幫文章中的圖片預先設定尺寸、並能執行最佳的 Lazy Load 效果。以下大致先說明原理,想直接安裝懶人包請跳至「二、準備動作」。




<< 請注意!本篇文章含會員限定內容 >>
2014年12月14日

[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析

Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得超乎想像。

我們從網路搜尋看到的單一安裝方式,都算是片面的用途,本篇綜合整理「讚按鈕」的完整安裝方式,讀者可從中審視自己的需求,選擇最適當的安裝方案。

2014年12月11日

讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

上一個版本「相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版」FB 留言 Herman Tsao 詢問「能做成依瀏覽器語言做自動轉換嗎?」,其實偵測訪客的瀏覽器語言設定是做得到的,我們應該有這樣的經驗,某些安裝 Google 翻譯的網站,能得知我們的預設語言,在畫面上自動顯示 "是否翻譯為 xxx 語言" 這類訊息。藉由這樣的偵測功能,就完成了本文的這個小工具升級版。

那麼讀者的問題或許會是:「那還需要這個小工具嗎,使用 Google 翻譯不就好了?」的確如此,不過 Google 翻譯用久了,就會發現以下不方便之處:

  • 畫面上方會被 Google 翻譯強制佔用一定的高度,而破壞版面
  • Google 翻譯耗費的時間還滿久的

因此,如果只需要簡繁自動轉換(或切換)的話,這個小工具的切換速度可用 "光速" 來形容,比 Google 翻譯強太多了。以下先說明原理,想直接安裝請跳至「二、安裝程式碼」。

2014年12月7日

[教學]減少網頁 reflow(回流) 的 CSS 實作技巧﹍優化網站效能(3)

在增進網頁效能的執行事項之中,減少瀏覽器回流(reflow)是重要的一環。然而 reflow 這個名詞不常見、且翻譯也不易理解,不如稱之為「瀏覽器重新佈局」、或「網頁區塊重新安排」會來得白話一些。而為何要減少 reflow?因為它會造成 CPU 無謂的重複運算,消耗瀏覽器效能及渲染頁面的時間

關於這件事先說結論,除非網站 Javascript(簡稱 js) 大部分是自己寫的,否則站長能做的改善有限,因為 js 寫得好不好無法由自己控制。因此如何減少 reflow,本篇著重在可以經由修改範本來改善的部分,也就是我們能 "自力救濟" 的部分

在 Blogger 平台如果硬要打分數的話,以這個系列文來說,能完成「優化網站效能該注意哪些事? (1)最關鍵的考量因素」起碼可拿到 50 分以上,完成「 HTML / Javascript / CSS 最佳化處理」約可拿到 20 分;而本文按照教學設定正確的 css 最多可拿到 5~10 分,如能自行解決 js 可額外拿到 5~15 分,依範本中需要處理的多寡而定。

2014年11月30日

讓 Blogger 過長的文章自動產生數字分頁﹍系列文加強版

上一個版本「讓 Blogger 自動顯示系列文章」留言 #5 WHY 詢問「有時文章過長,想幫文章變更為好幾頁 ( 寫好幾篇 ),能否讓【 自動顯示系列文章 】的顯示結果不出現標題,而出現數字」。基本上「文章分頁」算是常見的功能,當文章內容較長,分頁功能可以讓讀者稍微喘口氣。雖然有的網站是為了增加瀏覽次數而使用這個功能,但畢竟太過火而引起讀者反感,總是得不償失,相信站長們心中自有一把尺。

在 Blogger 要做出分頁機制,並不是很好設計,需要說明的地方不少,因此把篇幅留給使用說明。建議先看 上一篇 →「一、系列文的原理」瞭解設計的原理,後續內容比較能理解。




<< 請注意!本篇文章含會員限定內容 >>
2014年11月28日

[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)


(Pic from: mybloggertricks.com)
過去寫了不少篇屬於優化網站效能的基礎知識,如果都曾讀過、打好基礎後,那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例,說明如何整理程式碼、讓範本最佳化,也就是能夠減少體積、執行有效率,同時又易於維護。

不過動手之前,最好先確認對 html/js/css 有基本的認識,瞭解 debug(除錯) 的方法,以免不小心操作錯誤之時,能夠還原事先的範本內容。對範本進行任何變更之前,建議先閱讀「備份範本的訣竅」系列文章,備份需要有版本控制的觀念。

2014年11月26日

雖然 PageRank 停止更新,沒關係還有 MozRank


(Pic from: allbloggingways.com)
這個「Blogger 中文社群討論串」提到了 Google 不再更新 PageRank 的消息,而這件事 Google 很久以前便開始預告,PageRank 的數字也有很長的一段時間沒有變動,越來越少看到網站掛上 PageRank 貼紙。

為何 Google 這麼做,想瞭解原因可參考「別再用 PageRank 當評量標準」的簡單說明。不過 PageRank 的演算方式是公開的,因此 Google 不做這件事,照樣可以有其他人來做,只是演算法稍微有些變更而已。

現在起無法從 PageRank 了解網站的評等變化,那麼以後就利用本文介紹 MozRank 吧,而且這個服務提供的數據更多呢!

2014年11月24日

活用 HTML/Javascript/CSS 格式化及壓縮工具﹍修改 Blogger 範本的觀念 (3)

隨著範本修改次數增加、範本檔越來越肥大,從最乾淨的狀態不到 100k 直到 2、300k 的情況都在所多有(如果備份時有注意檔案容量的話),是不是會覺得開啟範本的等待時間越來越久?也難怪網頁開啟時間越來越慢。

進入主題前先回顧一下系列文前兩篇,站長要如何不盲目地修改範本、脫離單純複製貼上所衍生的麻煩與未爆彈,得先瞭解「備份及註解範本的訣竅」;想讓範本的程式碼執行有效率,得先瞭解「Javascript(簡稱 js)、CSS 的執行原理」。

接下來要談的是如何幫範本瘦身,利用各種免費的線上工具,幫 html/js/css 來縮減體積,加快網頁載入速度。不過跟人體一樣,一昧瘦身只會適得其反,均衡飲食才是健康之道。除了讓體積最小化之外,某些程式碼也得搭配格式化工具,幫助視覺上的閱讀效果、讓範本內容更加美化。

2014年11月21日

[Google Drive 外連產生器] 一秒鐘輕鬆複製連結, 圖片適用, 支援新舊版雲端硬碟

2015.5.8 公告:目前已經有更新版,請前往「Google Drive 外連產生器 V2」頁面。

取得 Google Drive 外連路徑不是輕鬆的事,對於使用免費網路空間的站長,這些外連檔案 html / js / css / jpg / png 等等包括圖檔,如果無法方便地複製連結,那麼長遠來看,操作 Google Drive 的不便會影響使用意願,相較之下 Dropbox 複製連結路徑的設計是很友善的。

過去 Google Drive 每個檔案大約花費 3~4 個步驟才可取得外連,請參照「Google Drive 取得檔案外連路徑」。不過最近 Google 推出新版雲端硬碟,官方已經封鎖了外連路徑的資訊顯示,我相信有其考量的因素。而國外一些線上取得檔案外連的服務,都得先連上其網站,為了廣告收入這也是可以理解的。總之目前的所有解決方案,在操作上都是繁冗不便的。

為了自己使用方便,於是動手寫了個懶人專用的產生器,如果有同樣需求的讀者,相信試用後也能感受到他的便利。

2014年11月19日

優化網站效能該注意哪些事? (1)最關鍵的考量因素


(Pic from: seocorporation.net)
經營部落格一段時間後,站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等,轉移到更深的層面,例如網頁載入的速度、手機版的效能、範本程式碼優化等等。

會開始關注這些考量點,代表除了內容以外,也會站在讀者立場,想打造友善的使用者體驗。

本篇為這個系列的第一篇,由於整個主題很大,首先試著從大方向著眼,由幾個主要標題的詢問句,來協助站長釐清及分析如何進行考量,避免做出不合意的選擇。

2014年11月16日

專業的「網站維修中」及倒數計時功能, 不用擔心訪客看到異常頁面

喜歡裝潢門面的站長可能三不五時會有一點小困擾,在站內維護的期間,例如調整版面 CSS 配置、測試安裝某些外掛時,網站不可避免地會讓訪客經歷版面異常、或局部功能失效的狀況。而這還算小問題,因為多半只影響不到一天的時間。

如果是網站大改版、或是更換新範本(模版)等,那問題可就大了,受影響的期間少至數天、多至一兩個星期都有可能。建設中的工地會用圍籬、帷幕遮蓋起來,我們也該替自己的門面維持一下形象,對吧?

最近 +Orsino Sung 提出了很好的問題,「部落格能否設定短暫關閉,讀者連過來會顯示"網站升級改版中或是維修中"等資訊」,且剛好有案主希望網站能建構完畢後再設定為公開,因此設計了本文的工具。以下先介紹功能及出處,想直接安裝請跳至「二、準備動作」。



<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>
2014年11月10日

[小工具]Blogger 數字分頁導覽 + Ajax 動態頁面載入效果

網站使用數字分頁功能,來方便訪客跳頁尋找、閱讀文章,這是各大網站很常見的設計。但 WFU BLOG 一直以來未採用,原因有二:

1. 如果不瞭解 Blogger 的機制,裝了這樣的外掛一定抱怨連連,請參考「Blogger官方自動分頁機制」,分頁的狀況常常會不如預期。

2. 本站屬於「資訊提供」的性質,訪客有七成來自搜尋引擎,主要目的為尋求問題的解答,平均停留頁數少,比不上旅遊、美食、心情抒發、插畫等等諸多類型的網站,訪客比較有輕鬆的心情進行跳頁式的閒逛。

不過最近一個案子需要分頁功能,且相信很多網站還是需要數字分頁的導覽效果,因此發佈此項研究成果。另外這個小工具能在跳頁時,頁面使用 Ajax 動態載入,算是獨家功能。以下先進行功能介紹,想直接安裝請跳至「二、準備動作」。



2014年11月6日

jQuery 圖片輪播外掛﹍camera 安裝及使用詳解

許多非官方的 Blogger 範本,都會內建圖片輪播效果,可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本,才能擁有 slideshow 功能,已經有數量龐大、可免費使用的現成 jQuery 函式庫,例如這些介紹網頁「20 個免費好用的響應式 jQuery 輪播幻燈片插件」、「70+不同類型的jQuery Slider教程與DEMO」。

其中有許多功能強悍的輪播效果,甚至能展示各種 3D 特效、一次輪播數張圖片等等。而本文要介紹的這款套件「camera」,相較之下沒那麼花俏,不過 WFU 正是喜歡他的表現平穩、用途廣泛,相信其適用性可滿足最多的使用者,因此專文介紹。


2014年11月3日

[教學]在 Google Drive 建立 HTML 網頁, 需要注意這三件事

2016.4.13 公告:由於「Google Drive 將於 2016 年 8 月關閉外連」功能,建議參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」,將檔案放在支援 "目錄路徑" 的網路空間,才能成功建立網頁。


使用 Google Drive 建立網頁其實很簡單,做好執行的 HTML 檔(例如 index.html),把所有相關的檔案(html/js/css/jpg)上傳後,網站就架設完畢了,而上傳檔案及獲得外連路徑的操作可參考「取得 Google Drive 外連路徑」系列文章。

不過本篇要說明的是,操作 Google Drive 建構網頁的過程中,一些可能遇到、但鮮少被提及的狀況。同時藉由實際案例說明,更能瞭解操作要點。

2014年10月28日

訂閱 Facebook 社團貼文心得__IFTTT 應用

訂閱 RSS 是獲得資訊的重要來源,尤其部落格站長更是需要。而如何收集各種國內外資訊來源,除了需要敏銳度,也得配合各種不同工具、或網路服務的應用能力。如果能擁有越多的資訊素材,除了寫文章不怕沒題材寫,也能增加內容的深度與廣度。

過去曾介紹過「如何取得 mobile01、PTT 的 RSS」、「如何取得 FB 粉絲頁 RSS」,除此之外,還有一個大宗資訊來源──FB 社團的貼文。FB 社團的角色可以看成是論壇、BBS 的一個討論區,如果你需要訂閱 mobile01、PTT 的某些討論區的話,那麼在 FB 一定也可以找到一些討論比較有深度的社團。

由於 FB 社團並沒有提供 RSS 的功能,不像 FB 粉絲頁可以找到 RSS 網址直接訂閱。不過 WFU 利用各種網路服務搭配組合,就能全自動取得貼文,並交由 Feedly 來訂閱,以下就來看看怎麼實現。

2014年10月26日

會員中心新增「小遊戲區」


(Pic from: wallpaperstock.net)
2016.4.9 公告:因 Google Drive 外連失效,停止「小遊戲區」的功能。


首先,會員中心公開試營運三個禮拜以來,雖然曾遇上 Google Drive 升級的意外,使得有段期間新會員無法註冊加入,不過日前會員的人數已經突破了三位數。

加入會員很簡單,只要有 FB 帳號即可、不必填寫個資,就能閱覽不公開的「會員限定文章」。而現在會員又多了一項福利,可進入新增的「小遊戲區」,且遊戲的數量會持續增加,遊戲列表也會再本篇自動更新。

2014年10月24日

如何讓 Javascript/CSS 執行有效率﹍修改 Blogger 範本的觀念 (2)


(Pic from: css-javascript-toolbox.com)
網頁載入速度是影響訪客對網站印象的重要一環(參考「網頁載入速度 黃金三秒」),而 Javascript(以下簡稱 js) 與 CSS 在範本中如何配置,關係著網頁執行的效率。不過對於初心者而言,這些知識未免太過複雜,為了讓不懂語法的新手站長們都能享受架站的樂趣、順利地安裝各種網頁小工具, WFU 製作了各種懶人包,以期讓安裝過程無腦化。

然而懶人包的缺點就是──執行效率可能稍差。因此本篇的內容主要提供給進階使用者,瞭解 JS/CSS 的執行原理,並據以調整適當的擺放位置,讓網頁載入及執行速度加分。

2014年10月18日

想知道自己網站的台灣或全球排名嗎?安裝 Alexa 貼紙秀給訪客看


(Pic from: seomastering.com)
經營部落格一段時間後,如果小有人氣的話,站長們可能都會好奇,自己的網站在台灣能排上第幾名呢?其實對於這件事,能提供具有公信力的來源並不多,在亞洲地區可以申請加入「博勢力」的部落格排行榜。不過由於分類很多,且參加排行的網站比例不高,由部落格貼紙顯示的排名,很難看出網站的實力落在哪裡。

世界龍頭等級的 Amazon,旗下的「Alexa」提供了全世界網站的排名與統計數據。雖然為人詬病的是──「Alexa 可以買榜」,不過能花錢的網站畢竟佔少數,目前而言 Alexa 的排名算是最具有公信力的。

Alexa 官方提供的網站貼紙能在部落格顯示「世界排名」,而 WFU 提供的工具則能顯示「台灣排名」(或是地區排名),如果讀者有買網域的話,那麼就可試試本文的工具。
2014年10月16日

利用 Google 試算表當小型資料庫 (3)簡易查詢與排序 (及新版試算表讀取流程)


(Pic from: veryicon.com)
免費的部落格平台,結合 Google 試算表後,使用簡單的 javascript 操作,就可對試算表資料庫進行存取,在網站上實現各種應用,例如初期發表的「部落格即時留言板」,一直到近期的「會員系統」。

不過資料庫若只做到儲存與寫入,則無法發揮其長處。如能對大量資料進行排序及查詢,那麼網頁就能滿足訪客的各種特定需求,例如從龐大的手機商品資料庫中,篩選出「iPhone」這個型號的列表,接著使用排序功能,依照價格由高至低排列,諸如此類的情境。以下將舉實例來說明,如何使用試算表資料庫,來做出簡易的查詢及排序。

2014年10月9日

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包

2016.4.13 公告:為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「Fancybox 燈箱外掛 CDN 安裝懶人包」。


上一篇的「fancybox 安裝教學」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯示效果,其過程十分繁複。

喜歡懶人包的讀者可以不用折騰了,這篇除了提供打包好的檔案,也提供簡便安裝的方式。然而 fancybox 功能非常多,這個懶人包的缺點就是,只能遷就 WFU 打包好的功能與效果。不過本文提供的懶人包,包含了「縮圖+滾輪特效」,也就是完全模擬 Blogger 官方的燈箱效果,相信對多數使用者而言,已經非常美觀及實用了。

一、「縮圖+滾輪特效」的優點


1. 原始效果

曾看過上一篇的讀者應該看過原本的 DEMO 頁面效果,請按下面按鈕前往示範網頁:



WFU 不太喜歡這個預設效果,因為用滑鼠滾輪、或手動切換圖片的時候,圖片會上下或左右劇烈晃動,看得眼睛都花了。


2. 縮圖+滾輪特效

現在可以比對一下這個懶人包的效果,請點以下按鈕前往示範頁面:



除了畫面不再晃動以外,多了縮圖提示效果,也可方便瞭解閱覽圖片的進度、或是否已經看完所有的圖片;若沒有縮圖,當圖片一多時,讀者一定不會發現已經滾完一輪了。



二、本篇特效使用的檔案


請對照「上一篇」→「二、部落格安裝 fancybox 的方法」,本篇的特效並沒有使用所有的 js 及 CSS 檔,只使用了以下原始檔的內容:

  • jquery.fancybox.pack.js → 主程式
  • jquery.fancybox-thumbs.js → 縮圖
  • jquery.mousewheel-3.0.6.pack.js → 滾輪
  • jquery.fancybox.css → 主要 css
  • jquery.fancybox-thumbs.css → 縮圖 css
  • fancybox_sprite.png
  • fancybox_overlay.png
  • fancybox_sprite@2x.png
  • fancybox_loading.gif
  • blank.gif
  • fancybox_loading@2x.gif


另外為了節省空間及方便引用,將三個 js 檔及兩個 css 檔全部壓縮,及合併為一個 js 檔及一個 css 檔。



三、安裝程式碼


1. 準備動作

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

請到後台「範本」→「編輯 HTML」,搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。


2. 安裝程式碼

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



3. 修改參數

請對照以上程式碼行號:

G~R:這部分的內容與作用,跟上一篇完全一樣,以下只摘錄重點──E 行的紅色字串 .post-body 是 Blogger 平台的文章區塊,如果非 Blogger 平台,建議利用「Chrome 開發人員工具」找出文章區塊的 class 或 id,然後置換此字串(class 的前面要加 ".",而 id 前面要加 "#")。這段前導程式做的事情為:
  • 只抓出文章區塊的圖片來展示燈箱效果,自動加上 fancybox 需要的參數,不需要手動設定
  • facnybox 預設有超連結的圖片,才能展示燈箱效果,但網頁有的圖片可能當初忘了設定超連結,那麼這個前導程式可以自動補上超連結

S~AD:這段程式碼為 fancybox 的參數設定

T~U:設定了前一張圖片、下一張圖片的切換效果。藍色字串 "fade" 代表為 "淡入淡出" 的效果。可以改為 "none",代表沒有切換效果。或是改為 "elastic" 就是預設的、看了頭暈的搖晃效果。

W:藍色字串 "true" 代表「滾輪切換圖片時,背景畫面不會跟著上下捲動」。

Y~Z:藍色數字 "50" 分別設定了縮圖尺寸寬、高的像素(px)值。

存檔後找一篇圖片多的文章來測試,即可看到效果,或是點以下按鈕前往示範頁面:



更多其他 fancybox 的參數使用,請參閱「官方說明書」。



四、備份及分流 js、CSS、圖檔


雖然使用這個懶人包很方便,可以無痛體驗 fancybox 的特效,然而這些連結檔案放在 WFU 的 Google Drive 空間,過去發生了「Google Drive 流量限速」的情形,為了避免將來某天這個小工具無預警罷工,請讀者有空時,務必將相關檔案分流。

除了程式碼 B、C 行的 js/css 檔,還有 6 個圖檔也必須分流。為了方便操作,我把所有 8 個檔案放在以下 Google Drive 資料夾路徑:





上圖為檔案列表,將所有檔案下載後,請參考上一篇「fancybox 安裝教學」→「二、部落格安裝 fancybox 的方法」→「3. 上傳檔案方式 2」,將所有檔案上傳到自己的 Google Drive,放在同一個資料夾,並設定共用權限。

最後將自己的 js 檔及 css 檔外連路徑,置換程式碼 B、C 行綠色字串的路徑,就完成了檔案分流,可以避免將來流量遭到限制。


2016.4.13 公告:由於「Google Drive 將於 2016 年 8 月關閉外連」功能,屆時程式碼 B、C 行的外連都將失效,請讀者將上面這個 Google Drive 資料夾路徑中的 8 個檔案下載,並存放到自己的雲端空間(必須是目錄型的空間),取得自己的 JS/CSS 檔案連結後,自行置換 B、C 行的綠色字串連結。

如不清楚何謂 "目錄型的空間",可參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」。


Fancybox 系列文章:
2014年10月7日

最佳 CSS 3D 按鈕產生器__Button X 操作心得

使用 CSS 語法產生的按鈕,要做的好看不容易;然而圖片式的按鈕雖然畫面呈現較佳,卻需要花費 http 請求時間,也就是會影響網頁載入速度。如果可以的話,使用 CSS 按鈕會是最佳選擇。

網路上有許多線上 CSS 按鈕產生器,可以讓我們輕易取得不少漂亮的按鈕。而本篇要介紹的 CSS 按鈕產生器──Button X,是 WFU 認為最棒的一個,滿符合該網站對自己的期許(Best CSS Button Generator)。他們提供了許多精緻的預設按鈕,質量比其他網站的 CSS 按鈕好很多。

按理說這類的線上服務其實不必特別介紹操作方式,通常滑鼠拉一拉就能產生 CSS 語法。不過本篇的線上服務,除了英文介面外,操作過程碰到些許小小複雜,因此特別整理一下使用心得,讓讀者能順利上手。下面這顆按鈕就是利用這個線上服務所製作出來的效果──


2014年10月4日

部落格網站「會員系統」試營運

有關注 WFU BLOG 的朋友應該會發現,九月中開始,某些文章出現了「會員限定」的功能,因為 WFU 預先悄悄在部落格網站測試「會員系統」的可行性。

在免費部落格平台、或沒有租用主機的網站實現「會員系統」不是容易的事,需要解決後端資料庫、系統安全、行動版等等諸多問題。一方面感謝有讀者回報安全性問題,一方面值得欣慰的是到目前為止,主要問題都找到了解決方案,因而藉此篇公告,本站的「會員系統」即日起正式開始 "試營運"。

在網站右上角的「加入會員」按鈕、以及導覽列上的「會員中心」下拉選單,都能進入及使用會員中心的各項功能,以下就來一一介紹。

(圖片出處: lendingsolutions.com)
2014年9月29日

Blogger 串聯式留言(threaded comment)__留言編號及自訂版面樣式實作

跟 Blogger 舊範本時代的官方留言系統比起來,新範本的串聯式留言全部由 javascript 產生,讓習慣改 Blogger 範本的使用者難以下手 hack。不過對於熟悉 CSS 的使用者,想把串聯式留言的界面改漂亮一點,倒也不是難事。

本篇為 WFU 的修改紀錄,不一定能含括所有串聯式留言區塊。不過對 CSS 熟悉的讀者,可以參考這篇紀錄的概念,為留言區塊新增功能(留言編號)、或把版面改成心目中滿意的樣式。

2014年9月23日

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

上一篇「快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計」留言 #18 Jean Hsiung 詢問:「我對您的"↑TOP"鈕比較有興趣,這個有沒有教學?」。

為何 WFU 要將 "回到網頁上方" 的這顆 Go Top 按鈕放在導覽列?主要是因為閱讀時,眼睛不喜歡螢幕上有浮動區塊,無論造成文字被遮住(例如「浮動側邊欄」的實例)、或是有個東西在某處飄,總是覺得怪怪的。個人能接受的浮動區塊,只有在網頁「最上方」以及「最下方」,因為這樣就感覺不出有浮動區塊,也是比較友善的使用者體驗。

所以將「↑ Top」按鈕放在浮動導覽列,算是個人偏好,不過也是有知名網站採用這樣的設計,例如「Feedly」,那麼以下就來看看這樣的功能如何實作。

2014年9月17日

[小工具]讓 Blogger 串聯式留言能由新到舊排序

Blogger 留言排序這件事,從使用 Blogger 以來(舊範本時代),一直到現在的串聯式留言(新範本),不斷有使用者提出詢問:「能不能從最新的留言開始顯示」?實際上從 "使用者體驗" 的角度來看,這個要求非常合理,否則當留言一多時,螢幕都得捲到最底部才能看到新的留言,這是非常不友善的設計。

可惜這麼多年以來,此事一直沒有進展,而多數有名的第三方留言外掛(G+、FB、Disqus),留言能以各種方式排序都是基本配備,也難怪乎 Blogger 使用者紛紛棄官方留言板而去。

實際上,官方留言板擁有無可取代的優點存在,而 WFU 也準備撰寫專文推廣,但最大的阻力在於,官方留言板功能過於陽春。因此這篇文章要寫出來,第一個要解決留言排序的問題。那麼,對官方留言板還有信心的讀者,請按本文的操作,來安裝這個「Blogger 留言由新到舊排序」的功能吧!



<< 請注意!本篇文章含會員限定內容 >>

2014年9月14日

超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)


(Pic from: elated.com)
在所有 HTML 標籤之中,相信很多人第一個學會的就是超連結(A 標籤)語法吧!雖然超連結語法很簡單,不過其實也可以很複雜。若能了解 A 標籤的詳細操作方式與原理,可以在 SEO 上加分不少。

如果想更進一步精進網頁技巧,利用 A 標籤實現一些不常見的網頁效果,那麼可參考本篇的心得整理。

2014年9月7日

[小工具] jQuery 展開收合效果安裝懶人包

「展開收合效果」是常見的網頁技巧,最早是在 +Mark X 的「留言版提示 - jQuery 展開收合效果」看到這個效果。

如果一個頁面只有一處需要用這個效果,那麼請直接參考 mark 這篇文章即可;如果同一網頁有多處需要展開收合時,這個功能在使用上會稍微麻煩一些,需要每一處個別設定 id、個別執行不同的 js 程式碼,對於不熟悉程式碼的讀者,可能會不知如何下手。

因此有這樣的需求時,可使用本文提供的懶人包,就能批次搞定多處的程式碼。第一次需要花點心思設計樣式,不過以後套用就非常方便。


<< 請注意!本篇文章含會員限定內容 >>

2014年9月4日

Google Authorship 作者資訊正式失效, 是否需要移除 G+ 作者連結?


(Pic from: standardmarketing.com)
沒想到距離上次事件「搜尋結果不再顯示作者頭像!Google 為何要這麼做?」才兩個月,現在 Google 連作者資訊也一併從搜尋結果取消了;不但如此,官方正式宣佈 Google Authorship 將不會是搜尋引擎排名權重的影響因素之一。

+Mark X 撰寫專文說明了這件事,並提出獨家分析及觀察。本文內容主要轉載自他這篇「Google 搜尋結果不再顯示作者資訊連結」,希望能讓更多讀者瞭解此事,以及網路的新趨勢。

2014年9月2日

備份 Blogger 範本的訣竅﹍修改 Blogger 範本的觀念 (1)

如果是本站的忠實讀者,那麼修改範本可說是稀鬆平常的事。而常常修改 Blogger 範本的話,最重要的一件事,就是能否養成正確的備份範本習慣。

有的讀者可能會好奇,備份範本有什麼了不起,跟 Copy & Paste 一樣稀疏平常,只要知道快速鍵怎麼按就會做這件事了,有需要特地寫一篇文章嗎?的確非常需要,除了自己使用 Blogger 早期所引發的不測,WFU 也看過太多慘案,因此就算有備份的習慣,都不一定能避免悲劇的發生。唯有具備正確的觀念與工具,才能確保範本的安全──或許,都不修改才是最安全的。

只要踏上修改範本這條路,那麼這個系列文的重要性,跟「Blogger範本內容」系列文是並駕齊驅的。本篇要提供的進階觀念大致如下:

1. 如何正確備份範本
2. 如何養成習慣
3. 如何比對不同版本差異

2014年8月29日

取代Rainlendar管理行事曆的好選擇__Checker Plus for Google Calendar使用心得(Chrome套件)

過去在 Windows 系統非常好用的 Rainlendar,進入行動裝置的雲端時代後有些不敷使用,現在能夠隨時隨地跨平台同步的 Google Calendar 才是王道。

雖然 Rainlendar 也可同步 Google Calendar 的內容,不過免費版的使用有諸多限制。而 Google Calendar 雖然跨平台及同步很方便,但在 Windows 使用瀏覽器界面才能操作並不友善,除了讀取時間久,也不可能一直開著 Google Calendar 來讓待辦事項的提醒出現。

在桌面端沒有夠好的 Google Calendar 代理界面之下,也許較佳的選擇是使用瀏覽器套件,而本文要介紹的 Checker Plus for Google Calendar 為 Chrome 套件,其功能強大,足以取代我使用 Rainlendar 的工作。

2014年8月25日

網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)

對於網頁能使用的中文字體,我們比較難有自訂的選擇。上一篇「網頁中英文字型跨平台設定最佳化 」說明了,由於中文字型檔太大,網頁絕對不能引用外部中文字型檔,否則載入速度可以讓訪客好整以暇地泡好一杯咖啡,並跳離該頁面。

前陣子 Google 發布了免費的中文字型「思源黑體」,不過請打消將這個字型設定在網頁上的念頭,因為這不是作業系統的預設字型,多數訪客的電腦中依然沒有這個檔案,就算設定了這個字型,訪客仍然看不到思源黑體的。

而在使用者最大宗 Windows 系統下,網頁設定中文字型比較順眼、常見的選擇會是「微軟正黑體」。但 WFU BLOG 設定的幾項字型中,主要使用的是「明瞭體」,如果沒聽過的話,其實還有更多你沒聽過的字型可用。想知道還有哪些不錯的中文字體可選擇嗎?請見以下詳細的整理。

2014年8月22日

Blogger 文章編輯模式只要切換, 就可能產生異常現象? 教你徹底解決的技巧

長久以來使用 Blogger 文章編輯器,常常在「HTML模式」與「撰寫模式」切換之後,發生許多讓人 OOXX 的狀況,例如版面錯亂、語法失效等等,卻又找不出個根治的方法。

也許大部分使用者很少發生類似以上情境,因為只要專注於寫作,文章內容不去使用額外的 HTML、Javascript(簡稱 js) 語法,不使用花俏的版面設計效果,說不定會對這篇的標題無感。

不過若你已經是 WFU BLOG 的忠實讀者,相信遇上本文的異常現象是遲早的事。以下先列舉各種過往經歷的異狀,並提供有效的解決方案。

2014年8月20日

Evernote 變得遲緩了嗎? 改善速度過程全紀錄(windows)


(Pic from: slashgear.com)
不知道從何時開始,在 Win8 使用 evernote 開啟記事(notes)時,會停個幾秒鐘才能顯示記事內容。一開始不以為意,不過久了超過忍耐的臨界點後,認為這樣的生產力軟體,反而在降低生產力,需要找個時間徹底解決。

以下本文為 WFU 算是 debug 的過程,每個人的作業環境、裝置不同,也許會有不同的結果,不過若是有同樣問題的使用者,希望這個經驗能有作為參考的價值。

2014年8月18日

Blogger 留言超過 200 篇怎麼處理?

這篇的內容可以算是公告,也可以算是心得分享。雖然公告內容比較枯索,然而本篇關於心得的部份,屬於應該了解的知識,因此建議詳讀。

先進行公告,由於本站原本的「留言板」網頁,留言數量已經超過兩百篇,會造成以下不便的現象:

  • 因為最新的留言不會出現在第一頁,導致讀者找不到自己的留言與 WFU 的回覆。
  • 讀者往往必須先進入第一頁(1~200則留言),才能跳到其他頁(例如200則以後的留言)
  • 由於第一頁須載入 200 則留言,導致浪費太多載入時間,才能進入其他頁。

目前本站採取的對策為,每兩百篇留言會新開一個留言板,且留言板名稱附上留言編號,封鎖舊留言板的留言功能,以免造成上述的不便。

上方浮動導覽列的「留言板」連結已更新,編號為 (200~)。但有的讀者可能會從側邊欄「熱門文章」列表進入舊的留言板,因此請稍微注意一下留言板的文字訊息,就像上面的示意圖,可從「留言板列表」找到最新的留言板連結。

2014年8月16日

Blogger 是否搬家到 Wordpress 的比較﹍部落格經營觀念釐清


(Pic from: sehabitat.com)
部落格的成長週期若是大略區分,可看成三個階段:

1. 免費部落格平台:例如痞客邦
2. BLOGGER
3. 自架站:例如 Wordpress(簡稱WP)等需要租用主機的平台

這三個階段有何差別,花簡短篇幅來比較介紹一下。

2014年8月15日

Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學

2016.4.13 公告:為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「Fancybox 燈箱外掛 CDN 安裝懶人包」。


圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,除了有優雅的展示畫面,更令人驚豔的是,就算不使用圖片的燈箱效果,只要發揮創意,Fancybox 還能做各種應用,例如文字幻燈片、影片彈出、以及這篇 +Mark X 介紹的「文字提示視窗」。而會寫 js、jquery 的話,fancybox 也有 API 能實現各種想像力。

不過讀者請記住一個原則,功能越強、設定越多的的工具,就越不容易學習、操作與上手;功能越簡單、越單一的工具,就越容易安裝,不過也沒什麼項目能設定。

而 fancybox 則是屬於,不但設定不容易,連基本安裝都可能碰壁的一套工具。看了一些網路教學,發現要實現基礎的功能都很有難度,不過要歸咎起來的話,算是官方的問題比較大。而本文的教學說明,相信至少讓讀者能正確安裝,並了解如何套用官方說明書。


2014年8月12日

在 Blogger 標籤動手腳, 擺盜文者一道!


(Pic from: Lois Lin FB)
前幾天「蘋果報導」了一位美少女部落客,在文章安插「台灣是主權獨立的國家」字串,讓盜文者貼到大陸網站而渾然不覺,為何她能成功呢?

因為她把字串埋在標籤,而一般讀者看完本文後,通常不會注意標籤的字串,最後 copy & paste 就把標籤也一併複製了。

+跪婦阿冠 bigsishead 在這個「Blogger中文社群討論串」詢問 "blogger平台該怎麼設tag或埋連結比較能被一起盜過去?",WFU 想到兩種方式可以運用,以下說明原理及操作實例。

2014年8月10日

為何瀏覽數會爆增?揭開 Blogger 快樂流量的真面目


(Pic from: 3dprint.com)
曾寫過一篇「Blogger 後台文章瀏覽數與 Google Analytics(簡稱GA) 數據差別很大的原因」,大致說明 Blogger 與 GA 各自的計數原理。

當然,在正常的使用下,Blogger 官方的統計數字已經比 GA 高;而本篇要揭露的,是在不經意的使用下、甚或是刻意的使用下,Blogger 官方數據是會爆增的。

因此,本文雖屬學術分析,但請小心服用,以免落入數字陷阱;最好是了解原理後,檢測範本中有無誤用的程式,並使用替代方案。

2014年8月9日

部落格熱門文章排行榜﹍依照「按讚數」,「瀏覽數」,「+1 數」

本篇的熱門文章排行榜工具,需要額外製作後端的試算表資料庫,來儲存所有文章的統計數據,無法只靠前端的程式就能執行,因此屬於需要付費的客製的工具。

製作上讀者需要先提供網站資料、及一個新的 Google 帳號給 WFU,並在後台把我設為管理員,才能進行所有的作業,流程不少,因此不算是一個大眾化的工具。如「會員加值文章」所標示的兌換點數,如果讀者有一定的預算時,可與我聯繫此工具的製作。

而這個排行榜,根據需求可以有三種形式:
  • 依按讚數排行
  • 依瀏覽數排行
  • 依 +1 數排行

2014年8月4日

[教學]Google+ 分享文章時,如何讓縮圖以大尺寸呈現?

以前在 G+ 分享文章時,縮圖的尺寸比較小。現在他們了解到,社群行銷大圖才是王道!因此我們漸漸可以發現,目前很多 G+ 貼文的縮圖,都是以 "滿幅" 的大圖呈現,能夠快速吸引讀者的目光。

那麼需要具備哪些要件,才能在分享到 G+ 時,讓縮圖以大尺寸顯示呢?請見本文以下的說明。

2014年8月1日

Blogger 各種疑難雜症發問管道, 及提問注意事項


(Pic from: pichost.me)


相信 Blogger 使用者一定會有許多大大小小的問題、或各種需求,但 Blogger 這個平台跟台灣其他部落格不同,沒有客服人員能解答,只能靠使用者互相幫忙。

這篇文章提供使用者提問的管道,以及說明發問時應了解的技巧,有助於縮短溝通時間及得到答案。

2014年7月29日

[小工具]幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)

2015.9.4 公告:若因未將 js 檔分流,而導致留言分頁無法顯示,請重新安裝本文程式碼,並自行將 js 檔分流!

部落格常見的留言板外掛有 G+、FB、Disqus 等留言板,如果能同時擺放幾個留言板是有他的好處(後面會分析),但多個留言板並存時,隨之而來的是版面凌亂,由上到下的多個留言板會讓訪客滑鼠捲個不停。因而喜歡潔淨版面的站長會選擇只放其中一種,甚至隱藏官方留言板,但這是很可惜的事,因為最不該屏棄的就是官方留言板。

如果安裝了本文的留言分頁小工具後,不但 Blogger、G+、FB 留言板三合一,沒有了上述的缺點,還能各自保有本身的優點。以下先簡單介紹這個留言分頁的功能及三個留言板的優點,想直接安裝請跳至「二、安裝準備動作」。


2014年7月26日

Blogger 行動版 Adsense 廣告如何追蹤成效?


(Pic from: oxoitech.com)
之前「在 Blogger 行動版放 Adsense 廣告」,由於本站讀者特性多為使用網頁版,因此一直未有動力追蹤行動版的成效。

過了幾個月後,現在覺得應該會有數據來分析 Blogger 行動版投放 Adsense 的效用,作為是否該使用自適應版面的評估。結果赫然發現,在 Adsense 後台找不到 Blogger 行動版的廣告單元,這下子該怎麼追蹤成效呢?

到 G+ 的 Adsense 社群跟官方詢問了一下,很快得到了回覆,但隨即發現這個回覆可說是幫忙起了個頭,但離解決這件事還很遙遠。如果對追蹤行動版 Adsense 收益有興趣的讀者,這件事其實不如想像中容易,以下 WFU 提供的心得可以得到一些概念。但能否有徹底追蹤完整數據的管道,得看將來 Blogger 或 Adsense 會不會改進後台的功能了。

2014年7月24日

長時間瀏覽網頁眼睛不舒服嗎?快使用高對比模式 (Chrome 套件)

電腦螢幕的製程越來越進步,開發出成本越來越低、更省電、顏色更鮮艷的零組件,從 CRT → LCD → LED,然而對眼睛的傷害卻是越來越大。原本 LCD 的背光已經不適合眼睛長期直視,但更慘的是,目前市面上只能買到光線更強的 LED 背光螢幕(新品)。

要讓眼睛對抗強光、調適瞳孔的程度比較緩和,除了購買昂貴的特殊過濾光線眼鏡(或是「抗藍光夾式鏡片」),我們能做的,就是盡量將螢幕上的字體放大(讓 Chrome 只放大縮小文字套件),以及使用對眼睛負擔最小的「高對比配色」。

由於現在瀏覽器的使用,佔據了電腦操作很大一部份的時間,因此本文先介紹 Chrome 的兩個高對比套件:High ContrastHacker Vision