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

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

之前製作了「 FB 粉絲頁 RSS 網址線上產生器 」，很可惜撐不到一年，日前該篇文章留言 #5 有讀者通知：「6/23 Rss for FB service has been closed down」，意思就是 FB 不支援粉絲頁的 RSS 了。 既然 FB 不玩了，那麼這...

繼續閱讀全文

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

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

你的網站是否也用了很多小圖示，例如 "首頁"、"留言對話泡泡"、"Email" 等等？這些圖檔雖然體積小，但每個檔案的載入都需要耗費一個 http 請求，是影響網頁載入速度的一個小原因。 最早為了解決這個問題，出現「...

繼續閱讀全文

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

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

上一篇「 Unicode 表情圖案(emoji ) + 特殊符號字元一覽表 」，展示了許多可以取代網站小圖示的 UNICODE，其優點非常顯而易見： 1. 字元的傳輸量遠低於圖片的傳輸量 2. 可以 減少許多小圖示的 http 請求量 相信對於在意網站效能的站長而言，以...

繼續閱讀全文

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

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

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

繼續閱讀全文

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

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

過去就曾耳聞 Blogger 文章中插入表格(table)時，會遇到一些狀況，不過直到最近需要在網站整理一些表格，才有這個機會來研究這個主題。 Blogger 文章編輯器其實問題不少，過去曾整理過一篇「 Blogger 文章編輯模式只要切換, 就可能產生異常現象? 」。而插入...

繼續閱讀全文

Blogger 相關文章 V3

Blogger 相關文章 V3

這個工具使用了「相關文章」的版本號，但其實跟「 相關文章 V2 」的市場、用途並不相同。V2 版的文章會顯示縮圖，而 V3 版完全只有文字，難不成這個工具退化了嗎？ 其實他比較偏向「 系列文功能 」的風格，只列出建議閱讀清單的文章標題。但篩選方式又不同， 系列文是利用 &qu...

繼續閱讀全文

標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率

相信在逛網站的時候，越上方的位置、越吸睛的圖片比較能吸引到目光，因此我們很常看到輪播圖片的小工具，被擺放在網頁最上方的位置。 這不是沒有道理的，根據「 F 形眼球運動軌跡 」，多數訪客的行為模式就是如此。 如果想推銷網站的熱門文章，那麼在網頁上方擺放輪播圖片，會是一個增加...

繼續閱讀全文

協助架設 Blogger 網站, 優化非官方範本

協助架設 Blogger 網站, 優化非官方範本

架設網站時使用的平台考量，用最簡單的二分法判斷，就是你需不需要使用主機。若不需要主機的話，使用雲端服務即可，沒有流量限制，這方面最好的選擇就是 Google 旗下的 Blogger 平台，沒有之一！ 那什麼情況需要使用主機呢？無論是使用自己的主機、或是租用主機，都是一筆昂貴的...

繼續閱讀全文

客製 Blogger 行動版範本, 改善網頁載入效能

客製 Blogger 行動版範本, 改善網頁載入效能

想要改善 Blogger 行動版的網頁載入效能，最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章，那麼的確採取這個方案即可。 如果你準備經營個人品牌、形象網站，那麼「官方行動版範本」顯然是不夠的，因為無法打造自己的版面效果，營造更好的視覺形象。 使用 R...

繼續閱讀全文

取消 Blogger 行動版「向左/向右滑」切換文章的功能

取消 Blogger 行動版「向左/向右滑」切換文章的功能

有多位讀者反應 Blogger 行動版一個非常擾民的問題，也就是操作手機時，滑動螢幕只要稍微不小心往左或往右，就會切換到「上一篇/下一篇」文章。 這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換，但往往我們是在操作「往上/往下」時，不小心手勢的角度偏左或偏右，便會立...

繼續閱讀全文

讓 Line 按鈕只在手機+行動裝置顯示

讓 Line 按鈕只在手機+行動裝置顯示

如果網站有安裝過 Line 按鈕的話，應該會發現只有行動裝置(手機+平板)有作用，而網頁版的 Line 按鈕按下後，只會連結到官網。 前陣子有讀者反應，" 能否讓 Line 按鈕只在手機及平板出現，網頁版不要出現？ "。的確，如果能這麼做的話是最好，以下就...

繼續閱讀全文

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

以下接續「 第一篇 」的步驟。

繼續閱讀全文

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

之前舊版的「 讓 Google 試算表能自動寄信 」，由於近期 Google Drive 雲端硬碟陸續強制升級為新版，如果是新的使用者，已經無法依照原本的流程安裝，因為官方已經取消了舊版試算表的「指令碼庫」功能，無法從後台安裝 FormEmailer 這個自動回信外掛。 其實...

繼續閱讀全文

RWD 標頭(header)圖片實作 [CSS 技巧]

RWD 標頭(header)圖片實作 [CSS 技巧]

使用自適應網頁(RWD)時，標頭圖片的設計與擺放，需要一些巧思與技巧。既然希望網頁能自適應調整寬度，那麼標頭圖片自然在不同寬度之下，都不能讓訪客覺得突兀。 最近接到一個標頭圖片的需求，希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解，因此用文章...

繼續閱讀全文

Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面

Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面

Blogger 圖片異常的各種提問，算是非常頻繁出現的，常見狀況大致有： 1. PICASA 上傳後的圖片看起來有點失真，但 Flickr 的就不會？ 2. 手機上的圖片好像比較模糊？ 3. 我的 Blogger 圖片怎麼消失了？ 4. 有的圖片比較大，超出文章區塊怎麼...

繼續閱讀全文

讓標題過長的文字自動省略﹍單行 CSS 技巧

讓標題過長的文字自動省略﹍單行 CSS 技巧

在設計版面的時候，控制區塊的寬度與高度是重要的技巧，因為文字數量或圖片尺寸非我們所能控制。當內容太多、超出了區塊的範圍，如果不熟悉 CSS 語法，沒有做適當的參數設定，輕則視覺效果變差，重則版面整個爆掉！ 圖片超出區塊的調整，將會另闢一個主題。本篇先說明如何使用 CSS 語法...

繼續閱讀全文

Blogger 製作自適應網頁(RWD)﹍懶人法實作

Blogger 製作自適應網頁(RWD)﹍懶人法實作

過去在「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。 然而...

繼續閱讀全文

Google Drive 外連產生器 V2﹍一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟

Google Drive 外連產生器 V2﹍一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟

由於「 Google Drive 檔案外連功能於 2016 年 9 月關閉 」，本站過去寫的所有 Google Drive 外連產生器均已失效， 本篇產生器為 2019.7.23 更新版本，目前確實可用 。

繼續閱讀全文

讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧

讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧

這個主題其實有些爭議，某些觀點認為鋰電池是消耗品，沒什麼好保養的，說不定電池還沒壞，就準備換新的行動裝置了。在這樣的前提之下，的確電池能用多久不是需要關心的事，不過事實上，如果好好對待電池的話，還是能帶給我們不少便利。 相信很多人會遇到， 電池充飽後很快又沒電 ，也就是電量消...

繼續閱讀全文

Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體

Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體

完成 Blogger 自訂行動版「 標頭+導覽列+廣告 」、「 文章+側邊欄+頁尾 」的所有版面區塊後，現在要完成最後的收尾工作。 根據「 優化網站效能該注意哪些事? 」，加快網頁載入速度需要從 "圖片" 與 "Javascript" ...

繼續閱讀全文

Blogger 多層下拉選單實作

Blogger 多層下拉選單實作

前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。 一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼...

繼續閱讀全文

Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾

Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾

接續上一篇「 自訂行動版的實作 」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。 ...

繼續閱讀全文

讓 Blogger 樹狀標籤只顯示真實標籤名稱

讓 Blogger 樹狀標籤只顯示真實標籤名稱

「 多層樹狀標籤 」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。 不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文...

繼續閱讀全文

Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告

Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告

Blogger 的行動版網頁，呈現方式可以有三種選擇： 1. 自適應網頁 (RWD) 2. 官方行動版 3. 自訂行動版 該使用哪一種，可根據你的網站屬性，參考「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」→「四、你適合哪一種選項？」來抉擇。...

繼續閱讀全文

自製簡易 Blogger 即時留言版

自製簡易 Blogger 即時留言版

原本 WFU BLOG 側邊欄有個「 Wyboard 留言版 」，因為比較花俏、耗資源，所以用「 分頁功能 」隱藏起來，當讀者需要留言、點擊分頁時才動態載入。 後來想想，隱藏在分頁的功能，八成讀者都不太會發現，留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋，開始尋找有沒...

繼續閱讀全文

高畫質免費圖庫搜尋引擎(CC0)﹍2015 版

高畫質免費圖庫搜尋引擎(CC0)﹍2015 版

為了方便從網路搜尋，及使用合法、無爭議的免費圖片，製作了一個「 CC0 免費圖庫搜尋引擎 」，可以一次同時搜尋所有 CC0 免費圖庫。 有了這個搜尋引擎，可不必再單獨進入個別圖庫網站，來做個別搜尋的動作，這也代表製作網站使用的圖片，可節省不少流程與時間。 使用說明及介紹請...

繼續閱讀全文

防止 Adsense 自動轉址, 造成你的訪客流失

防止 Adsense 自動轉址, 造成你的訪客流失

在網站放 Adsense 廣告後，很怕自己不小心點到，因為網頁上有不少動態載入的區塊時，有時你明明點的是 A 位置，但由於時間差，突然會出現 B 區塊而誤點。萬一點到自己網站的廣告，就得提心吊膽是否會被停權。 前幾個月偶爾會出現，進入 WFU BLOG 後，忘了自己下意識做過...

繼續閱讀全文

加快 Blogger 行動版圖片載入速度的密技

加快 Blogger 行動版圖片載入速度的密技

要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「 優化網站效能該注意哪些事? (1)最關鍵的考量因素 」。 行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦...

繼續閱讀全文

分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊

分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊

最近剛好有幾位讀者都詢問到 FB 分享文章時，會遇上的各種狀況，例如標題、摘要敘述無法正常顯示，或是想要自訂縮圖等等。 這些問題牽涉的層面不太簡單，需要瞭解的知識不少，例如 FB 自己制訂的 Open Graph 標記規範。不過網路可以找到的解答文章倒是不少，因此這些任務可以...

繼續閱讀全文

Blogger 圖片語法轉換器﹍改變行動版圖片尺寸

Blogger 圖片語法轉換器﹍改變行動版圖片尺寸

從這篇「 加快 Blogger 行動版圖片載入速度 」我們瞭解到，Blogger 有辦法讓行動版的圖片改用小尺寸，進而讓網頁載入速度非常有感地提升，只要符合這兩個要件： 1. 使用 PICASA 圖床 2. 為每張圖片設定寬度 手動設定圖片寬度的方法，請參考該篇文章的...

繼續閱讀全文

可商業用途及修改的高畫質免費 CC0 圖庫整理

可商業用途及修改的高畫質免費 CC0 圖庫整理

經營部落格或網站，為了尋找、使用合適的圖片，得花上不少時間與心思，畢竟圖片是吸引注意力及增加訪客停留時間的重要因素。過去一向使用 Google 來搜尋圖片，因為這是樣本資料庫最大，且最省時省力的方式。但其實這麼做有風險，因為 我們沒有足夠的時間來找出每張圖片、每個網站的使用條款，...

繼續閱讀全文

行動裝置瀏覽器(Android / iOS)的好選擇﹍Opera 各版本評價及心得(Browser / Mobile / Mini)

行動裝置瀏覽器(Android / iOS)的好選擇﹍Opera 各版本評價及心得(Browser / Mobile / Mini)

(Pic from: maczapp.com ) 兩年前買的「 初代 Nexus 7 」平版，貧乏的 1G 記憶體在歷經升級 Android 5.1 後、加上越來越肥大的 Chrome 瀏覽器，才開三、四個網頁便老是呈現痴呆狀態，Chrome 果真不愧「記憶體怪獸」的稱號。 ...

繼續閱讀全文

Blogger 單篇文章瀏覽數 V2﹍(2) 新版本特點及安裝程式碼

Blogger 單篇文章瀏覽數 V2﹍(2) 新版本特點及安裝程式碼

既然改了版，V2 程式碼順便改善舊版的某些功能。舊版要在一個頁面、多個位置擺放計數器不太方便， 新版的優點為，一篇頁面要在多少個位置擺放計數器都沒有限制 ，程式彼此間不會打架。 因此裝了 V2 後，如果你熟悉程式碼，只要發揮想像力，可以自己想辦法擴充到其他 Blogger 工...

繼續閱讀全文

Blogger 單篇文章瀏覽數 V2﹍(1) 取得 Google Analytics 數據

Blogger 單篇文章瀏覽數 V2﹍(1) 取得 Google Analytics 數據

最近發現計數器呈現停滯狀態，進了 Google 試算表才發現，原來官方已經強制升級為新版試算表，因此舊版試算表抓取 Google Analytics(簡稱 GA) 的功能跟語法已經失效，導致計數功能無法執行，請見這個「 Google 試算表升級公告網頁 」。 若你安裝的舊版「...

繼續閱讀全文

iPhone 製作 mp3 鈴聲﹍絕對成功的方法

iPhone 製作 mp3 鈴聲﹍絕對成功的方法

(Pic from: pixabay.com ) 習慣 Windows 系統後，對於蘋果系統有很大的不適應性，例如簡單就能播放的 mp3 鈴聲，在蘋果設備要播放或製作都不是那麼容易。 最簡單的方法是藉由 iTools 這個軟體，就能輕鬆幫 iPhone 製作 mp3 鈴聲，...

繼續閱讀全文

[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)

[教學] 快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)

(Pic from: keytothecity.co.uk ) 之前做過兩個「回到頂端」按鈕的版本，分別是「 Go Top 按鈕符合使用者體驗的友善設計 」、「 Go Top 按鈕放在浮動導覽列 」。最近處理的 case 需要炫一點的特效，因此將之前的版本增加一些動畫效果。 ...

繼續閱讀全文

iPhone 檢測電池容量的方法 (免越獄JB) + 挑選副廠電池心得

iPhone 檢測電池容量的方法 (免越獄JB) + 挑選副廠電池心得

家人使用了很久的 iPhone 4s，電池已經換過一次，但最近又開始出現耗電快速的情形，看來又該換電池了。原本準備讓店家換，但打了幾家電話，每個都說自己電池是原廠的...看倌你知道 原廠電池要多少錢嗎？行情價約 NT. 2800 。 然而這些收費 NT. 600 ~ 900 ...

繼續閱讀全文

[工具] Blogger 隨機文章 + 自適應尺寸縮圖

[工具] Blogger 隨機文章 + 自適應尺寸縮圖

2016.5.26 公告： 目前已有新版本，可改安裝「 隨機文章 V2 + 輪播效果 」。 前陣子幫朋友安裝放在文章結束處的「 系列文 」功能，以及放在留言區塊前面、類似 Linkwithin 的「 相關文章 」工具，跟他解釋「系列文可以從文章相關的標籤，隨機抽選指定的文章數...

繼續閱讀全文

[CSS] 美化 Blogger 官方標籤雲

[CSS] 美化 Blogger 官方標籤雲

最近朋友買了一個漂亮的 Blogger 範本，除了配色一定比官方範本好看之外，也會有一些 jQuery 特效。不過非官方範本想要自己修改版面，就不是那麼容易了，同時也會有一些相容性問題，例如本文的主題 "標籤雲"，不巧執行就遇上版面破裂的情形。 Blogg...

繼續閱讀全文

[教學] Blogger 行動版如何讓 Adsense 最佳化

[教學] Blogger 行動版如何讓 Adsense 最佳化

過去 一直使用的是 Blogger "官方" 行動版，其實這也不啻為懶人的好選擇，不但讀者用手機閱讀時載入速度快、版面簡潔，自己也不用管理第二套範本內容，而依照「 行動版擺放 Adsense 的簡易技巧彙整 」也能讓 Google 及自己有所收益，算是三贏的局...

繼續閱讀全文

舊筆電回春日記﹍XP + SSD 硬碟使用心得

舊筆電回春日記﹍XP + SSD 硬碟使用心得

這陣子需要幫家人弄一台可以上網、玩 Line 的文書機，想起了十年前買的筆電小狗機(TravelMate 3000)，當初用了三年後，一過保固期螢幕馬上就異常，時間算得還真準！ 小狗機退役期間雖然找到了方法解決異常(可參考「五、舊筆電螢幕異常的處理」)，不過老舊配備連跑 Ch...

繼續閱讀全文

[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包

[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包

上一篇「 Blogger 自訂安裝 Google Adsense 的各種位置及方式 」，雖然內容很詳盡，只是對不熟悉語法與 Blogger 範本的讀者，可能看得有點吃力。 另外一點是，很多讀者 想在文章中放入 Adsense 廣告，但得一篇篇手動加入安裝碼，這對網站有數百篇文...

繼續閱讀全文

[教學] 改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕

[教學] 改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕

在網站擺放各式熱門的分享按鈕，可方便讀者主動幫我們宣傳，有助於散播文章到不同的平台。這件事已經有不少第三方服務可替我們代勞，例如「 Shareaholic 超完整社群網站分享按鈕 」，讓我們不必單獨安裝個別分享按鈕，省下不少麻煩。 本站沒使用這類服務的原因，主要考量為減少 j...

繼續閱讀全文

[教學] 安裝 Line 分享按鈕﹍網頁版及行動裝置都相容的語法

[教學] 安裝 Line 分享按鈕﹍網頁版及行動裝置都相容的語法

2017.1.20 公告： 由於 Line 出了網頁版的程式，本篇的程式碼已經改為網頁版及行動裝置都相容的語法。可忽略原始的文章說明內容，直接跳到「二、所有網站通用的語法」安裝程式碼即可。 雖然 Line 很久以前就釋出可以安裝在部落格網站的分享按鈕，不過之前幫忙朋友安裝時...

繼續閱讀全文

Windows 用 VMware Player 模擬 MAC OS X 心得 [筆記]

Windows 用 VMware Player 模擬 MAC OS X 心得 [筆記]

為了讓網頁效果能跨瀏覽器相容，這在網頁設計來說一直是令人頭疼的事。除了搞定「 IE 不同版本 」、行動裝置以外，另一個更難解的算是蘋果系統了。 畢竟蘋果裝置沒那麼普及、系統比較封閉。同一個網站，在 Windows 的 Safari、或 Yosemite 的 Safari、或 ...

繼續閱讀全文

[教學] 管理網站外連檔案的技巧﹍讓 Google Drive 與 Dropbox 同步

[教學] 管理網站外連檔案的技巧﹍讓 Google Drive 與 Dropbox 同步

歷經「 Google Drive 外連檔案無預警失效 」三天後，上一篇提出了「 幫網站外連檔案買保險 」的方法，可確保部落格外連沒有後顧之憂。 經實際操作的結果，當有兩處資料夾，需要各自保存一份同樣的檔案時，所有的動作得重複做兩次，例如檔案的 "新增"、上...

繼續閱讀全文
TOP