Blogger 相關文章 V4﹍行動版專用
![Blogger 相關文章 V4﹍行動版專用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmPh0XO4imimLSy6DMARU0bgazcGSfxFso_PADRUj9PJ14yp6p-pIO8i3xCkFTDVSF0kbLrvH8sJo0DiV49JkOeNhDjp2DW7owsCQ8Q12AxO6MPRC0RLWaWcPhViS1IZVaBIp-XDP-Jdq/s1600/blogger-related-posts-v4.jpg)
不少讀者都詢問過「 相關文章 V2 (含縮圖功能) 」能否裝在手機版,實際上如果真的這麼做的話,一定馬上就破版,因為行動裝置有著各種不一樣的螢幕寬度,加上直立、橫躺的操作,各種專為行動版而設計的工具一定要符合 RWD 才行。 除此之外,V2 的版面也不適合做成 RWD,如果要...
繼續閱讀全文解決 Blogger 行動版導覽列選單上「首頁」的異常現象
![解決 Blogger 行動版導覽列選單上「首頁」的異常現象](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRliPrVbObdLECDe7_4A8rAVIu7aELxw6A7z7lNrZX9GImTfaYMu-MdcsMDQppm041C3Y1AgpULEISCIqcx_Iuc8GwGE5_H2-I3LuU2m9GlgCKVRbuiW2FAHpD0fV3i8cphar9wXLUL3-m/s1600/blogger-mobile-page-widget-home-link-fail.jpg)
前陣子接到一個委託,表示 Blogger 行動版的導覽列選單,「首頁」這個項目沒有反應。 其實這個問題很久以前就有發現,只是自己的行動版沒有使用官方的「網頁」小工具,所以沒有深究這個問題。 這次有這個機會來審視一下這個異常現象,才發現要解決的話,還真是出乎意料的棘手,因此...
繼續閱讀全文Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理
![Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGykVyrYG1c1KO1iU7EcSaFY5ubGedbtYBcp5tXnQPo8MIG0JXYTRWBQFNXfgYCHv32xdLwMmG-qIbNYbAYDnlpzc04UXEBiWX4yOkDaiSEVtrU_E37y_cFgmZlb-CaFLA3eH8r_khgLW/s640/blogger-mobile-faq.jpg)
在「 Lazy Load 圖片延遲載入 」留言 #6, +Ala Go 提出了一個觀點:「我的行動版即使使用"網頁版",載入也頗快的,就用"網頁版"頂著先」。 根據與他的一系列對話,以及其他讀者的相關提問,覺得可以將處理 Blogge...
繼續閱讀全文讓手機版網頁 Youtube 影片能自動調整寬高尺寸
![讓手機版網頁 Youtube 影片能自動調整寬高尺寸](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitKOXdekZG9l4aGd5ixtND3f4FYY2YVvElZThYzIHqdI8v16fZTIchagrirYGncBruu89Ad0DGXubTnL-qd1enrWAsqrTfb7NaybQmUcxYDq-BhO1VJisCM6LMg03QAkKW1UkU1P3N0n9F/s1600/mobile-youtube-auto-resize-rwd.jpg)
最近接到一個需求,在手機上的 Youtube 內嵌 Iframe 影片會超出版面,希望能解決這個異常現象。 會發生這個狀況,主要是 Youtube 提供的內嵌程式碼,預設尺寸大致為 560px 寬、315px 高,這樣的數值在網頁版是 ok 的,但手機的話寬度就不夠了。 ...
繼續閱讀全文Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀
![Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2cZ_hOmA7TFKLclEL3SLxEurz6f_-Y4PqtYyrB4_FymUUfG6gI3O7a6V8-HRdhwk97MZ0VTeIjXt6isKjJ-AUKEXCEzqmA9OHUhXi0akvyb39mIQNZvW6P4LgNHq0R5-jOWo6ft7dogE/s640/adsense-rwd.jpg)
最近幫讀者處理行動版時,發現 Adsense 若改用「 自適應(RWD)廣告單元 」,效果會比想像中來得好。 使用原始固定尺寸的廣告時,在不同行動裝置的效果都不一樣, 小尺寸手機有可能超出頁面,而在大尺寸裝置或平板,則可能版面顯得空曠 。總之,有一好就沒兩好。 那麼本篇就...
繼續閱讀全文瞭解 Blogger 動態檢視範本 + 行動版範本的特質
![瞭解 Blogger 動態檢視範本 + 行動版範本的特質](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdL7itLQyrfIEei9pp6-bnqQLk2TwvOs8K455p7RRtbKErHMwV1Yp1t4txzAXE3fbdNfOG072-LtKnUWRNR4jl8Cx0ew6YLb4VzIyf97W2yaBzJOcFltWwL_ukt1WOKOUNwpewjXPBxW6l/s640/blogger-dynamic-views-template.jpg)
這個 Blogger 中文論壇貼文詢問「 動態檢視範本如何修改 」,其實本站寫的許多小工具,不時也有讀者詢問怎麼安裝到動態檢視範本(Dynamic Views)、或官方行動版範本,因為顯示不出來。 雖然 Blogger 是個自由度很高的平台,什麼都能改、什麼都不奇怪,不過 &...
繼續閱讀全文部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果
![部落格行動版的首頁設計﹍欣賞這 9 個網站的版面效果](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingTMIZ5Yy0ebo-kVa1Rh-2DljRzwrRvxxazcmQb1X4T3sYPtu1KzFmDKRpY53XPtCIl6buV4LOmrCglRMRjsAnrimRQpuVsSCY6WYQEye6SQtxPbOpRDTtLZX4x_UEnx6qKKjZ3hrMK7H/s400/wfublog-mobile.jpg)
雖然 WFU 已經幫不少 Blogger 平台的站長做過行動版,不過自己的行動版網頁卻是一直沒有好好進行規劃,原因跟網站性質有關,讀者多半會在網頁版閱讀程式碼及操作,且 WFU BLOG 的行動裝置訪客大約只有 10% 左右,所以改造行動版這件事遲遲沒有排進待辦事項。 不過像...
繼續閱讀全文讓行動版網頁能用手指縮放螢幕大小
![讓行動版網頁能用手指縮放螢幕大小](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDo6FIVKTgfEo4ONntEaAKtqlrtOyQH_r3y0D9rB99QE_ScatGngUSRbj9g-r7J8T6d0ESmKMn7oRNo-5ULyEAAerww1Q-MZ5Sz3m1fMbfAdis8NtUwC-gLpnNlAev4Nw0NKvcVIMup4L/s1600/mobile-finger-zoom.jpg)
這個「 Blogger 論壇貼文 」表示,"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站,發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。...
繼續閱讀全文客製 Blogger 行動版範本, 改善網頁載入效能
![客製 Blogger 行動版範本, 改善網頁載入效能](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9s2_LGSvggfMvMeid7ZYXhdGofELJisNJeYMk5cJ4DyiWRgk4V1QXvJWc88wLVSpPyXuzBiWpqs4OO_DGbQvsS8QuKWqDHWOHLK6ZQhqWz9B9eGgSv3sjPmH424CShyphenhyphenllU3-fvHiqJwX/s640/blogger-mobile-customize-template-improve-speed.jpg)
想要改善 Blogger 行動版的網頁載入效能,最簡單的方法是使用「官方行動版範本」。如果你的網站只是純粹分享文章,那麼的確採取這個方案即可。 如果你準備經營個人品牌、形象網站,那麼「官方行動版範本」顯然是不夠的,因為無法打造自己的版面效果,營造更好的視覺形象。 使用 R...
繼續閱讀全文取消 Blogger 行動版「向左/向右滑」切換文章的功能
![取消 Blogger 行動版「向左/向右滑」切換文章的功能](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbe-rF96yy3Tk4fHMePjm8nbn7hayQHXQBBuP_2cho6sh-8aSV1Mpn3UfPmQl8UWv6bm000Q3DxDzbUVGLgr9rwbLErT6qLVc1yd76WCiQHenW0bJedsxvReYed4HnxVuhtiFlzDVPw706/s640/blogger-mobile-disable-swipe-left-right.jpg)
有多位讀者反應 Blogger 行動版一個非常擾民的問題,也就是操作手機時,滑動螢幕只要稍微不小心往左或往右,就會切換到「上一篇/下一篇」文章。 這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換,但往往我們是在操作「往上/往下」時,不小心手勢的角度偏左或偏右,便會立...
繼續閱讀全文讓 Line 按鈕只在手機+行動裝置顯示
![讓 Line 按鈕只在手機+行動裝置顯示](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0s7m9PuqtaThBZdlplMAZ9vpeB1NQ3JxzqJLZa6itnijgo7jFAJI9sZrLCr-ttM2It-kdfqZlYyRPNVV-FyhrkeNDpqBR8VnjXFH51I1jiN9nAmCryfrHOLKNHIBfGBcl04qBUurceQfK/s640/line-button-mobile-device.jpg)
如果網站有安裝過 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)﹍懶人法實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIRQzEZqO_u-7ZwiiwtOE9ixBFI-qS445gAcp6qghWjOiH79bD_XuZd6mFV-H8c3j5vLOiU77jAJhCHPk3ovXDlojK77rUGu0s9Q-ivkImcD5hpCF8Rcdyf0G1oJAYVMEezWtJlmqhpuV/s640/blogger-mobile-rwd-skill.jpg)
過去在「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」曾經歸納出的其中一個結論,對於 "有修改能力、能處理自適應範本" 的站長,Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」,這是行動版的最佳選擇。 然而...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體
![Blogger 自訂行動版範本實作﹍(3) 工具+圖片+字體](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL56SReQtNpBRAqvUl9nanY9dCkxG7KKp5T9Cvj_WGDkAr0b_PCITkRq3Dj__umNa7gDdF2yX3068qVJ6O29CSYz-oZEJEIxR_Rc_s1NGvdFYxIhNHIt7HIBDXknQ5o7Pmj5P0CkIV8XO9/s640/blogger-mobile-customize-template-3.jpg)
完成 Blogger 自訂行動版「 標頭+導覽列+廣告 」、「 文章+側邊欄+頁尾 」的所有版面區塊後,現在要完成最後的收尾工作。 根據「 優化網站效能該注意哪些事? 」,加快網頁載入速度需要從 "圖片" 與 "Javascript" ...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾
![Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLqJ8q7jfXDVUoitUsXo7DUozYI_HNsy2p-kRrXjanArqvu0Du9LrLrFOlcIGbjWReZxlF-67oKiSIyv23AgXWvCDHTrHzTh38w6vS-a8Jz9BiECYm4zs7rPeK70NbBUmYeaSUJu2OEOD/s640/blogger-mobile-customize-template-2.jpg)
接續上一篇「 自訂行動版的實作 」,前面說完了 "標頭"、"導覽列"、"廣告" 的部分,接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。 ...
繼續閱讀全文Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告
![Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlyuQ08B53yiTFS8PJCZbpZWsgkrt-Gfg1ZMQ30UUAXMtOOYVIGeC6UliIT__dplMfs-UO_8AY1sLi_ikP4r4btebYCuY9aA5NVhM3B_O5eRkuX7a7DURP1X9lii3og4YWKGOh8KYVcay/s640/blogger-mobile-customize-template-1.jpg)
Blogger 的行動版網頁,呈現方式可以有三種選擇: 1. 自適應網頁 (RWD) 2. 官方行動版 3. 自訂行動版 該使用哪一種,可根據你的網站屬性,參考「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」→「四、你適合哪一種選項?」來抉擇。...
繼續閱讀全文加快 Blogger 行動版圖片載入速度的密技
![加快 Blogger 行動版圖片載入速度的密技](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmY8LnC-Uj-A8lmMpFWkNzt7XRIcwQ4CiEwZAYjNlG3PvMgt25jtROAIQ3TyX4oK35YnE6Rlu3tUntxzEpZhR3FwoBIMAIs1mxiBhmJN8iNRVbQv0tGYFpaFWN9P4nOmxNdBk-kEuhgBNv/s1600/blogger-mobile-image-size-optimize.jpg)
要加快網頁載入速度,最有感的兩個方向就是從「圖片」以及「Javascript」下手,詳細的說明可參考「 優化網站效能該注意哪些事? (1)最關鍵的考量因素 」。 行動版網頁由於螢幕比較小,如果跟網頁版一樣載入相同尺寸的圖片,那麼讀取一定很花時間。一般使用者能做的,最多就是想辦...
繼續閱讀全文Blogger 圖片語法轉換器﹍改變行動版圖片尺寸
![Blogger 圖片語法轉換器﹍改變行動版圖片尺寸](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoc6iXRuKrpj9BVNqYM4btMHZp44Xl_jtdPOJRkaX8Xv1vykaFaV5IoO9aaa3OFZqkbJXCIFVlwF88seAszfQoR1EVgdnJtAoTm34LOy_GxT_d9uSXbdvCEoWoI95Yv8DsYfS4p5h8pUhL/s640/online-converter-tool.jpg)
從這篇「 加快 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 廣告如何追蹤成效?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGzK1K769RZg3D8geBTc037yPBEFX1zXnXLDKOlzCe93A8t9pF2VS14_7rFivP5QAaHf8JoAMxix5bsybI3MjyiqdfO_cgm8LxowB3aLZLjO8wJzAi_sMTA9206AcO4l9V8nNt_wPUXUwb/s1600/adsense-revenue.jpg)
之前「 在 Blogger 行動版放 Adsense 廣告 」,由於本站讀者特性多為使用網頁版,因此一直未有動力追蹤行動版的成效。 過了幾個月後,現在覺得應該會有數據來分析 Blogger 行動版投放 Adsense 的效用,作為是否該使用自適應版面的評估。結果赫然發現, 在...
繼續閱讀全文