Blogger 插入表格流程 + 自適應寬度
過去就曾耳聞 Blogger 文章中插入表格(table)時，會遇到一些狀況，不過直到最近需要在網站整理一些表格，才有這個機會來研究這個主題。 Blogger 文章編輯器其實問題不少，過去曾整理過一篇「 Blogger 文章編輯模式只要切換, 就可能產生異常現象? 」。而插入...
繼續閱讀全文Blogger 相關文章 V3
這個工具使用了「相關文章」的版本號，但其實跟「 相關文章 V2 」的市場、用途並不相同。V2 版的文章會顯示縮圖，而 V3 版完全只有文字，難不成這個工具退化了嗎？ 其實他比較偏向「 系列文功能 」的風格，只列出建議閱讀清單的文章標題。但篩選方式又不同， 系列文是利用 &qu...
繼續閱讀全文標頭 Banner 隨機輪播熱門文章﹍提高網站點閱率
相信在逛網站的時候，越上方的位置、越吸睛的圖片比較能吸引到目光，因此我們很常看到輪播圖片的小工具，被擺放在網頁最上方的位置。 這不是沒有道理的，根據「 F 形眼球運動軌跡 」，多數訪客的行為模式就是如此。 如果想推銷網站的熱門文章，那麼在網頁上方擺放輪播圖片，會是一個增加...
繼續閱讀全文協助架設 Blogger 網站, 優化非官方範本
架設網站時使用的平台考量，用最簡單的二分法判斷，就是你需不需要使用主機。若不需要主機的話，使用雲端服務即可，沒有流量限制，這方面最好的選擇就是 Google 旗下的 Blogger 平台，沒有之一！ 那什麼情況需要使用主機呢？無論是使用自己的主機、或是租用主機，都是一筆昂貴的...
繼續閱讀全文客製 Blogger 行動版範本, 改善網頁載入效能
想要改善 Blogger 行動版的網頁載入效能，最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章，那麼的確採取這個方案即可。 如果你準備經營個人品牌、形象網站，那麼「官方行動版範本」顯然是不夠的，因為無法打造自己的版面效果，營造更好的視覺形象。 使用 R...
繼續閱讀全文取消 Blogger 行動版「向左/向右滑」切換文章的功能
有多位讀者反應 Blogger 行動版一個非常擾民的問題，也就是操作手機時，滑動螢幕只要稍微不小心往左或往右，就會切換到「上一篇/下一篇」文章。 這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換，但往往我們是在操作「往上/往下」時，不小心手勢的角度偏左或偏右，便會立...
繼續閱讀全文讓 Line 按鈕只在手機+行動裝置顯示
如果網站有安裝過 Line 按鈕的話，應該會發現只有行動裝置(手機+平板)有作用，而網頁版的 Line 按鈕按下後，只會連結到官網。 前陣子有讀者反應，" 能否讓 Line 按鈕只在手機及平板出現，網頁版不要出現？ "。的確，如果能這麼做的話是最好，以下就...
繼續閱讀全文![[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUW3_e7cA8yldT9176HKDIeMOqS4iP0oCiuyn4q4xhDHcv0xDRlhzh_K8d8Mhyphenhyphen-F_6Sx5GUl5Mlvb0HB_pjWuV-yOMuQPOMC4TEqFPyGePE45pRMniu-XQHPlNWPaMB_LwQftO_zLhL2vm/s640/google-spreadsheet-auto-send-email.png)
[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式
![[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqlvaJt2nssJlcEFU8oxzPkbCUKWKGY1rp4jgUhMWBwbj7H_O_9r8t5MvbgEaAE-gdzqgv8fMR1K8dAdamkLwlFW4bYanEEePveNPwJkbpdlBWSNDHu9blPq26Ou9sUAN2GFMJW4bpdw3/s640/google-form-auto-send-email.jpg)
之前舊版的「 讓 Google 試算表能自動寄信 」，由於近期 Google Drive 雲端硬碟陸續強制升級為新版，如果是新的使用者，已經無法依照原本的流程安裝，因為官方已經取消了舊版試算表的「指令碼庫」功能，無法從後台安裝 FormEmailer 這個自動回信外掛。 其實...
繼續閱讀全文RWD 標頭(header)圖片實作 [CSS 技巧]
![RWD 標頭(header)圖片實作 [CSS 技巧]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGA0ef-Bvs1kubJV_NCHFiX7P4vsJNRYgRfR2f98cyzmvlzjO-QnCG_-Np6GeQixG6aO40Q64TU52hK30yS27xKDQpaZzyh3J8J4KjEHIxKiXNomnuSpkh3e7S2Y7J3aU9nh5wFEoTc04/s640/rwd-full-width-header-image.jpg)
使用自適應網頁(RWD)時，標頭圖片的設計與擺放，需要一些巧思與技巧。既然希望網頁能自適應調整寬度，那麼標頭圖片自然在不同寬度之下，都不能讓訪客覺得突兀。 最近接到一個標頭圖片的需求，希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解，因此用文章...
繼續閱讀全文Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面
Blogger 圖片異常的各種提問，算是非常頻繁出現的，常見狀況大致有： 1. PICASA 上傳後的圖片看起來有點失真，但 Flickr 的就不會？ 2. 手機上的圖片好像比較模糊？ 3. 我的 Blogger 圖片怎麼消失了？ 4. 有的圖片比較大，超出文章區塊怎麼...
繼續閱讀全文讓標題過長的文字自動省略﹍單行 CSS 技巧
在設計版面的時候，控制區塊的寬度與高度是重要的技巧，因為文字數量或圖片尺寸非我們所能控制。當內容太多、超出了區塊的範圍，如果不熟悉 CSS 語法，沒有做適當的參數設定，輕則視覺效果變差，重則版面整個爆掉！ 圖片超出區塊的調整，將會另闢一個主題。本篇先說明如何使用 CSS 語法...
繼續閱讀全文Blogger 製作自適應網頁(RWD)﹍懶人法實作
過去在「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。 然而...
繼續閱讀全文Google Drive 外連產生器 V2﹍一秒鐘輕鬆複製連結, 支援新舊版雲端硬碟
由於「 Google Drive 檔案外連功能於 2016 年 9 月關閉 」，本站過去寫的所有 Google Drive 外連產生器均已失效， 本篇產生器為 2019.7.23 更新版本，目前確實可用 。
繼續閱讀全文讓 iOS 設備(iPhone iPad)鋰電池能正確充電、降低循環次數的技巧
這個主題其實有些爭議，某些觀點認為鋰電池是消耗品，沒什麼好保養的，說不定電池還沒壞，就準備換新的行動裝置了。在這樣的前提之下，的確電池能用多久不是需要關心的事，不過事實上，如果好好對待電池的話，還是能帶給我們不少便利。 相信很多人會遇到， 電池充飽後很快又沒電 ，也就是電量消...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體
完成 Blogger 自訂行動版「 標頭+導覽列+廣告 」、「 文章+側邊欄+頁尾 」的所有版面區塊後，現在要完成最後的收尾工作。 根據「 優化網站效能該注意哪些事? 」，加快網頁載入速度需要從 "圖片" 與 "Javascript" ...
繼續閱讀全文Blogger 多層下拉選單實作
前陣子處理一個案子，需要在 Blogger 安裝多層下拉選單，說真的這不是一個輕鬆的任務，因此值得記錄一下過程，減少日後重新摸索的時間。 一般而言，如果像本站屬於主題集中、文章數幾百篇的規模，應該使用單層的下拉選單就足夠，太多層的下拉選單對於讀者而言，其實在尋找資訊時不是那麼...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾
接續上一篇「 自訂行動版的實作 」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。 ...
繼續閱讀全文讓 Blogger 樹狀標籤只顯示真實標籤名稱
「 多層樹狀標籤 」是開站以來，Blogger 最熱門的工具，由於與第二名的差距太大，相信將來寶座的位置也不太會變動。 不過樹狀標籤有一個小缺點，其標籤命名格式為「AAA-BBB-CCC」，當顯示在網頁上時，稍嫌佔版面了一些。如果一篇文章使用了多個樹狀標籤，那麼效果就類似本文...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告
Blogger 的行動版網頁，呈現方式可以有三種選擇： 1. 自適應網頁 (RWD) 2. 官方行動版 3. 自訂行動版 該使用哪一種，可根據你的網站屬性，參考「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」→「四、你適合哪一種選項？」來抉擇。...
繼續閱讀全文自製簡易 Blogger 即時留言版
原本 WFU BLOG 側邊欄有個「 Wyboard 留言版 」，因為比較花俏、耗資源，所以用「 分頁功能 」隱藏起來，當讀者需要留言、點擊分頁時才動態載入。 後來想想，隱藏在分頁的功能，八成讀者都不太會發現，留言版這個算是滿重要的功能等於形同虛設。於是動動腦筋，開始尋找有沒...
繼續閱讀全文高畫質免費圖庫搜尋引擎(CC0)﹍2015 版
為了方便從網路搜尋，及使用合法、無爭議的免費圖片，製作了一個「 CC0 免費圖庫搜尋引擎 」，可以一次同時搜尋所有 CC0 免費圖庫。 有了這個搜尋引擎，可不必再單獨進入個別圖庫網站，來做個別搜尋的動作，這也代表製作網站使用的圖片，可節省不少流程與時間。 使用說明及介紹請...
繼續閱讀全文防止 Adsense 自動轉址, 造成你的訪客流失
在網站放 Adsense 廣告後，很怕自己不小心點到，因為網頁上有不少動態載入的區塊時，有時你明明點的是 A 位置，但由於時間差，突然會出現 B 區塊而誤點。萬一點到自己網站的廣告，就得提心吊膽是否會被停權。 前幾個月偶爾會出現，進入 WFU BLOG 後，忘了自己下意識做過...
繼續閱讀全文加快 Blogger 行動版圖片載入速度的密技
要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「 優化網站效能該注意哪些事? (1)最關鍵的考量因素 」。 行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦...
繼續閱讀全文分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
最近剛好有幾位讀者都詢問到 FB 分享文章時，會遇上的各種狀況，例如標題、摘要敘述無法正常顯示，或是想要自訂縮圖等等。 這些問題牽涉的層面不太簡單，需要瞭解的知識不少，例如 FB 自己制訂的 Open Graph 標記規範。不過網路可以找到的解答文章倒是不少，因此這些任務可以...
繼續閱讀全文
