Clik here to view.
讓標題過長的文字自動省略﹍單行 CSS 技巧
在設計版面的時候，控制區塊的寬度與高度是重要的技巧，因為文字數量或圖片尺寸非我們所能控制。當內容太多、超出了區塊的範圍，如果不熟悉 CSS 語法，沒有做適當的參數設定，輕則視覺效果變差，重則版面整個爆掉！圖片超出區塊的調整，將會另闢一個主題。本篇先說明如何使用 CSS 語法 text-overflow: ellipsis，讓單行文字不超出指定範圍，而多行文字有機會也會另外說明。+Ala Go 在「讓...
View ArticleClik here to view.
Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面
Blogger 圖片異常的各種提問，算是非常頻繁出現的，常見狀況大致有：1. PICASA 上傳後的圖片看起來有點失真，但 Flickr 的就不會？2. 手機上的圖片好像比較模糊？3. 我的 Blogger 圖片怎麼消失了？4....
View ArticleClik here to view.
RWD 標頭(header)圖片實作 [CSS 技巧]
使用自適應網頁(RWD)時，標頭圖片的設計與擺放，需要一些巧思與技巧。既然希望網頁能自適應調整寬度，那麼標頭圖片自然在不同寬度之下，都不能讓訪客覺得突兀。最近接到一個標頭圖片的需求，希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解，因此用文章開頭的示意圖來說明：紅框範圍的寬度，代表螢幕(滿幅)寬度。有的版型會設定 "內襯值"...
View ArticleClik here to view.
[教學] 讓新版 Google 試算表(表單)能自動寄信﹍(1) 製作表單格式
之前舊版的「讓 Google 試算表能自動寄信」，由於近期 Google Drive 雲端硬碟陸續強制升級為新版，如果是新的使用者，已經無法依照原本的流程安裝，因為官方已經取消了舊版試算表的「指令碼庫」功能，無法從後台安裝 FormEmailer 這個自動回信外掛。其實自動回信的程式碼不難，官方已經提供了 API...
View ArticleClik here to view.
[教學] 讓新版 Google 試算表(表單)能自動寄信﹍(2) 安裝程式碼
以下接續「第一篇」的步驟。在試算表的畫面，按「工具」→「指令碼編輯器」圖中紅框原本的程式碼請全部清除，置換為本文的安裝程式碼。三、安裝程式碼如果要修改參數的話，請參照以上程式碼行號。B：紅色字串請務必改為自己的 email 地址C：此行字串可改為自訂標題D：如果你的 Google 表單供填寫 email 的項目名稱就是 "email"，此項不必變動E：每個 Google 帳號每日可寄信的額度為...
View ArticleClik here to view.
Clik here to view.
讓 Line 按鈕只在手機+行動裝置顯示
如果網站有安裝過 Line 按鈕的話，應該會發現只有行動裝置(手機+平板)有作用，而網頁版的 Line 按鈕按下後，只會連結到官網。前陣子有讀者反應，"能否讓 Line 按鈕只在手機及平板出現，網頁版不要出現？"。的確，如果能這麼做的話是最好，以下就來看看這件事如何進行。一、Line 按鈕的難題先說結論，這件事沒有 100% 的完美解決方法，但是有應付 95%...
View ArticleClik here to view.
Clik here to view.
客製 Blogger 行動版範本, 改善網頁載入效能
想要改善 Blogger 行動版的網頁載入效能，最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章，那麼的確採取這個方案即可。如果你準備經營個人品牌、形象網站，那麼「官方行動版範本」顯然是不夠的，因為無法打造自己的版面效果，營造更好的視覺形象。使用 RWD...
View ArticleClik here to view.
協助架設 Blogger 網站, 優化非官方範本
架設網站時使用的平台考量，用最簡單的二分法判斷，就是你需不需要使用主機。若不需要主機的話，使用雲端服務即可，沒有流量限制，這方面最好的選擇就是 Google 旗下的 Blogger 平台，沒有之一！那什麼情況需要使用主機呢？無論是使用自己的主機、或是租用主機，都是一筆昂貴的開銷，一年至少要有數千元的預算、甚至上萬，還要有資安維護的本事(防駭客)。不過有主機的話，另外再投資 10...
View ArticleClik here to view.
標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率
相信在逛網站的時候，越上方的位置、越吸睛的圖片比較能吸引到目光，因此我們很常看到輪播圖片的小工具，被擺放在網頁最上方的位置。這不是沒有道理的，根據「F 形眼球運動軌跡」，多數訪客的行為模式就是如此。如果想推銷網站的熱門文章，那麼在網頁上方擺放輪播圖片，會是一個增加點閱率，以及讓訪客停留時間更長的好主意。於是寫了本篇的小工具，請見後續的說明及安裝方法。一、設計原理1....
View ArticleClik here to view.
Blogger 相關文章 V3 [加值文章]
這個工具使用了「相關文章」的版本號，但其實跟「相關文章 V2」的市場、用途並不相同。V2 版的文章會顯示縮圖，而 V3 版完全只有文字，難不成這個工具退化了嗎？其實他比較偏向「系列文功能」的風格，只列出建議閱讀清單的文章標題。但篩選方式又不同，系列文是利用 "關鍵字" 來篩選，而這個 V3 版則是用 "標籤"...
View ArticleClik here to view.
Blogger 插入表格的最佳流程
過去就曾耳聞 Blogger 文章中插入表格(table)時，會遇到一些狀況，不過直到最近需要在網站整理一些表格，才有這個機會來研究這個主題。Blogger 文章編輯器其實問題不少，過去曾整理過一篇「Blogger 文章編輯模式只要切換, 就可能產生異常現象?」。而插入表格時，一定會切換到 "撰寫"...
View ArticleClik here to view.
Unicode 表情圖案(emoji ) + 特殊符號字元一覽表
網頁常常會用到一些小圖示，例如搜尋框、郵件圖示、留言對話泡泡等。最簡單的方法可以直接 Google 這些圖示、或是到素材網站尋找合適的圖案，不過最近發現「Unicode 組織」越做越強大，很多常用的圖示都已經可以在 Unicode 編碼中找到。而且 Unicode 非常跟的上潮流，FB、Line 等社交工具的風行，讓表情圖案需求大增，因此 Unicode...
View ArticleClik here to view.
如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示？
上一篇「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」，展示了許多可以取代網站小圖示的 UNICODE，其優點非常顯而易見：1. 字元的傳輸量遠低於圖片的傳輸量2. 可以減少許多小圖示的 http 請求量相信對於在意網站效能的站長而言，以上兩點是非常重要的。不過 UNICODE...
View ArticleClik here to view.
讓 Blogger 樹狀標籤只顯示真實標籤名稱
「多層樹狀標籤」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文開頭的示意圖。+Alisha艾莉莎...
View ArticleClik here to view.
取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號
你的網站是否也用了很多小圖示，例如 "首頁"、"留言對話泡泡"、"Email" 等等？這些圖檔雖然體積小，但每個檔案的載入都需要耗費一個 http 請求，是影響網頁載入速度的一個小原因。最早為了解決這個問題，出現「CSS SPRITE」技術，將多個小圖合併為一張圖，減少了大量 http 請求。但由於手續繁雜、加上管理不便，沒什麼人有耐心採用這項技術。後來發展出「ICON...
View ArticleClik here to view.
Facebook 停止發佈粉絲頁 RSS﹍目前只剩這個替代方案能訂閱
之前製作了「FB 粉絲頁 RSS 網址線上產生器」，很可惜撐不到一年，日前該篇文章留言 #5 有讀者通知：「6/23 Rss for FB service has been closed down」，意思就是 FB 不支援粉絲頁的 RSS 了。既然 FB 不玩了，那麼這件事只能靠熱心的網友來提供第三方服務，否則要提供 RSS 不是很簡單的事。運氣不錯的是，還真的有國外網友提供 RSS...
View ArticleClik here to view.
讓網頁顯示特定中文字型﹍安裝實作教學
在網站使用中文字型是個大問題，由於字型檔在現有的網路速度下，過長的傳輸時間讓我們不能隨心所欲使用喜歡的字型，也因為如此，只能遷就訪客作業系統現有的字型，例如「網頁中文字型除了微軟正黑體, 還有這些好選擇！」。這篇「使用 UNICODE 特殊符號取代網頁小圖示」，使用了 CSS3...
View ArticleClik here to view.
會員中心贈送點數限時活動 (20150706 - 0715)
試營運已久的「會員中心」，最近即將宣布正式營運，同時也會有一系列活動，例如開幕期間，「會員加值文章」所有的 "Blogger 工具" 都只要 50 點即可兌換。如果你是長期關注本站的忠實讀者，且已經加入會員，現在 WFU BLOG 舉辦的限時贈點有獎徵答活動，參加期限只有 10 天，答對越多可拿到越多點數，換得更多獎品。還沒加入會員也沒關係，只要有 FB...
View Article