Blogger 相關文章 V4﹍行動版專用
不少讀者都詢問過「 相關文章 V2 (含縮圖功能) 」能否裝在手機版，實際上如果真的這麼做的話，一定馬上就破版，因為行動裝置有著各種不一樣的螢幕寬度，加上直立、橫躺的操作，各種專為行動版而設計的工具一定要符合 RWD 才行。 除此之外，V2 的版面也不適合做成 RWD，如果要...
繼續閱讀全文解決 Blogger 行動版導覽列選單上「首頁」的異常現象
前陣子接到一個委託，表示 Blogger 行動版的導覽列選單，「首頁」這個項目沒有反應。 其實這個問題很久以前就有發現，只是自己的行動版沒有使用官方的「網頁」小工具，所以沒有深究這個問題。 這次有這個機會來審視一下這個異常現象，才發現要解決的話，還真是出乎意料的棘手，因此...
繼續閱讀全文Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理
在「 Lazy Load 圖片延遲載入 」留言 #6， +Ala Go 提出了一個觀點：「我的行動版即使使用"網頁版"，載入也頗快的，就用"網頁版"頂著先」。 根據與他的一系列對話，以及其他讀者的相關提問，覺得可以將處理 Blogge...
繼續閱讀全文讓手機版網頁 Youtube 影片能自動調整寬高尺寸
最近接到一個需求，在手機上的 Youtube 內嵌 Iframe 影片會超出版面，希望能解決這個異常現象。 會發生這個狀況，主要是 Youtube 提供的內嵌程式碼，預設尺寸大致為 560px 寬、315px 高，這樣的數值在網頁版是 ok 的，但手機的話寬度就不夠了。 ...
繼續閱讀全文Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀
最近幫讀者處理行動版時，發現 Adsense 若改用「 自適應(RWD)廣告單元 」，效果會比想像中來得好。 使用原始固定尺寸的廣告時，在不同行動裝置的效果都不一樣， 小尺寸手機有可能超出頁面，而在大尺寸裝置或平板，則可能版面顯得空曠 。總之，有一好就沒兩好。 那麼本篇就...
繼續閱讀全文瞭解 Blogger 動態檢視範本 + 行動版範本的特質
這個 Blogger 中文論壇貼文詢問「 動態檢視範本如何修改 」，其實本站寫的許多小工具，不時也有讀者詢問怎麼安裝到動態檢視範本(Dynamic Views)、或官方行動版範本，因為顯示不出來。 雖然 Blogger 是個自由度很高的平台，什麼都能改、什麼都不奇怪，不過 &...
繼續閱讀全文部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果
雖然 WFU 已經幫不少 Blogger 平台的站長做過行動版，不過自己的行動版網頁卻是一直沒有好好進行規劃，原因跟網站性質有關，讀者多半會在網頁版閱讀程式碼及操作，且 WFU BLOG 的行動裝置訪客大約只有 10% 左右，所以改造行動版這件事遲遲沒有排進待辦事項。 不過像...
繼續閱讀全文讓行動版網頁能用手指縮放螢幕大小
這個「 Blogger 論壇貼文 」表示，"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站，發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候，由於某些網頁字不夠大，常常需要用兩隻手指將螢幕放大。...
繼續閱讀全文客製 Blogger 行動版範本, 改善網頁載入效能
想要改善 Blogger 行動版的網頁載入效能，最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章，那麼的確採取這個方案即可。 如果你準備經營個人品牌、形象網站，那麼「官方行動版範本」顯然是不夠的，因為無法打造自己的版面效果，營造更好的視覺形象。 使用 R...
繼續閱讀全文取消 Blogger 行動版「向左/向右滑」切換文章的功能
有多位讀者反應 Blogger 行動版一個非常擾民的問題，也就是操作手機時，滑動螢幕只要稍微不小心往左或往右，就會切換到「上一篇/下一篇」文章。 這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換，但往往我們是在操作「往上/往下」時，不小心手勢的角度偏左或偏右，便會立...
繼續閱讀全文讓 Line 按鈕只在手機+行動裝置顯示
如果網站有安裝過 Line 按鈕的話，應該會發現只有行動裝置(手機+平板)有作用，而網頁版的 Line 按鈕按下後，只會連結到官網。 前陣子有讀者反應，" 能否讓 Line 按鈕只在手機及平板出現，網頁版不要出現？ "。的確，如果能這麼做的話是最好，以下就...
繼續閱讀全文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 製作自適應網頁(RWD)﹍懶人法實作
過去在「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。 然而...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體
完成 Blogger 自訂行動版「 標頭+導覽列+廣告 」、「 文章+側邊欄+頁尾 」的所有版面區塊後，現在要完成最後的收尾工作。 根據「 優化網站效能該注意哪些事? 」，加快網頁載入速度需要從 "圖片" 與 "Javascript" ...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾
接續上一篇「 自訂行動版的實作 」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。 ...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告
Blogger 的行動版網頁，呈現方式可以有三種選擇： 1. 自適應網頁 (RWD) 2. 官方行動版 3. 自訂行動版 該使用哪一種，可根據你的網站屬性，參考「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」→「四、你適合哪一種選項？」來抉擇。...
繼續閱讀全文加快 Blogger 行動版圖片載入速度的密技
要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「 優化網站效能該注意哪些事? (1)最關鍵的考量因素 」。 行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦...
繼續閱讀全文Blogger 圖片語法轉換器﹍改變行動版圖片尺寸
從這篇「 加快 Blogger 行動版圖片載入速度 」我們瞭解到，Blogger 有辦法讓行動版的圖片改用小尺寸，進而讓網頁載入速度非常有感地提升，只要符合這兩個要件： 1. 使用 PICASA 圖床 2. 為每張圖片設定寬度 手動設定圖片寬度的方法，請參考該篇文章的...
繼續閱讀全文[教學] Blogger 行動版如何讓 Adsense 最佳化
![[教學] Blogger 行動版如何讓 Adsense 最佳化](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ9SEsTVBbkXGtsMY11Pn8wOXNpiqfnL_lSZQMopQ-EtuYY6sdEELKVmQcllk12JOwZZsdNxDhb3bA1VovHAL52skMErBCnFvO3D0Q1hbytjAO04OaNOJB3UlECyrLLpVtmArg2DPHgmuj/s1600/blogger-mobile-adsense-optimize.jpg)
過去 一直使用的是 Blogger "官方" 行動版，其實這也不啻為懶人的好選擇，不但讀者用手機閱讀時載入速度快、版面簡潔，自己也不用管理第二套範本內容，而依照「 行動版擺放 Adsense 的簡易技巧彙整 」也能讓 Google 及自己有所收益，算是三贏的局...
繼續閱讀全文Blogger 行動版 Adsense 廣告如何追蹤成效？
之前「 在 Blogger 行動版放 Adsense 廣告 」，由於本站讀者特性多為使用網頁版，因此一直未有動力追蹤行動版的成效。 過了幾個月後，現在覺得應該會有數據來分析 Blogger 行動版投放 Adsense 的效用，作為是否該使用自適應版面的評估。結果赫然發現， 在...
繼續閱讀全文