Blogger 如何自訂縮圖、封面圖尺寸

很久以前曾寫過「 Blogger 封面圖+縮圖 各種呈現方式 」,說明如何在首頁顯示文章縮圖,在文章頁顯示封面圖。現在 Blogger 範本提供了非常實用的語法,可直接對縮圖、封面圖進行裁切,調整為任意長寬比例,本篇就來看看如何實作。 不過奇特的是,這麼重要且強大的功能,跟上一...
繼續閱讀全文Blogger 日期格式化詳解

Blogger 如果想調整日期格式的話,後台就有許多排列組合可選,照理說總能找到一個滿意的。只不過 Blogger 是外國人設計的產品,日期格式主要按照西式的排列習慣,還真不一定能符合所有人喜好。 雖然 Blogger 官方並沒公開關於日期格式化的說明,不過網路上倒有一些資料可...
繼續閱讀全文讓 Blogger 導覽列的頁籤連結點擊後變色

標題的意思也許不太容易能理解,不過搭配圖片就比較清楚了。可參考上方示意圖,出自「 WFU 應用精選 」,點擊導覽列上的「精選作品」進入該頁面後,這個頁籤的顏色會與其他頁籤不同,能清楚辨識出這個頁面顯示的文章、工具屬於什麼性質。 這功能 Blogger 不必另外寫程式也能做到,...
繼續閱讀全文讓 Blogger 文章標題及文末都出現編輯圖示,方便修改文章

為了方便站長們編修文章,Blogger 官方在後台提供了設定方法,可在文末指定位置顯示編輯文章的小工具圖示,點擊後可直接編輯文章,省下在後台搜尋指定文章再編輯的時間。 這功能算是很貼心了,但對我來說還不夠,因為捲到文末仍需要花一些時間,如果要做到最方便的話,我想在文章標題附近...
繼續閱讀全文讓 Blogger 首頁每篇文章都能顯示日期

2024.2.1 公告: 現在已經有更方便的作法,請參考「 Blogger 日期格式化詳解 」→「二、首頁每篇文章都顯示日期(新版)」 最近接到一個需求,希望Blogger 首頁每篇文章都能顯示日期,因為同一天發佈的文章只會顯示第一篇的日期。 官方會這麼設計也不能說不合...
繼續閱讀全文Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

最近進行 WFU BLOG 改版,需要在新版型上切出一些欄位,來安裝小工具。如果使用官方範本,那麼這是很簡單的事,後台就有各種的欄位樣式可以選擇,看要將區塊切成 2 等分或 3 等分都行。 如果熟悉 CSS 的話,自己切版也很容易,而缺點就是切出來的區塊無法安裝小工具,只能將...
繼續閱讀全文讓 Blogger 首頁能點擊圖片就進入文章頁面

最近接到一個需求:「能不能點擊首頁文章的大圖,就直接跳到文章網址?否則要點 "繼續閱讀" 才能進入」。仔細想想的確很有道理,這才是友善的操作介面設計,以前怎麼都沒想過! 於是現在 WFU BLOG 首頁文章封面圖,改為以最大尺寸呈現,並且加上文章頁面的連結...
繼續閱讀全文Blogger 文章封面圖 (縮圖) 的各種呈現方式

最近接到一個需求,案主希望在文章標題上方擺放文章縮圖。要說是 "縮圖" 其實不太精確,因為圖片必須滿幅寬(跟文章區塊同寬),而這麼大的圖,應稱為 "封面圖" 比較貼切。 要做到這件事不難,使用「 PICASA 或 Blogger 後台上...
繼續閱讀全文在 Blogger 標籤動手腳, 擺盜文者一道!

(Pic from: Lois Lin FB ) 前幾天「 蘋果報導 」了一位美少女部落客,在文章安插「台灣是主權獨立的國家」字串,讓盜文者貼到大陸網站而渾然不覺,為何她能成功呢? 因為她把字串埋在標籤,而一般讀者看完本文後,通常不會注意標籤的字串,最後 copy ...
繼續閱讀全文Blogger 範本裡為何這麼多亂碼?告訴你解決的方法

(Pic from: techbyte4u.com ) +Pan Kuan 在這個「 Blogger中文社群討論串 」詢問:" 我範本裡放了GA的語法,存檔後會被轉碼成這樣,想請教是我範本壞掉了嗎?還是我動了哪邊的設定而造成的呢? ",其實這也是許多使用者...
繼續閱讀全文[教學]Blogger 行動版範本初探__修改技巧整理
![[教學]Blogger 行動版範本初探__修改技巧整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9uOM-8XoCN7tfXXBwyHm1OaXYRWRoQwtJ6OSPD1GEO3w-V_fqBppkF4jI45LpFXgbb_H4xlG8boMZ50SjGJGxGxHM8gz5yQW6_Ns6uzAowoiSgLdww6tMwq0TCA-UGegw2VXckx7lTgpn/s1600/blogger-mobile-template.jpg)
近來行動裝置的瀏覽量不斷攀升,因此如何完善 Blogger 行動版的功能與版面配置、及如何修改行動版範本,這件事遲早會受到矚目。 參考了官方文章「 Introducing custom mobile templates 」後,大致整理一下修改 Blogger 行動版必備的觀念...
繼續閱讀全文Blogger 頁面判斷語法__五個實用範例說明

上一篇「 Blogger 七種頁面形態判斷語法詳解 」可以有千變萬化的應用,讓自己的部落格版面運用更有效率,也與眾不同。本文整理了一些實用範例,除了適合理解與上手,也非常適合套用到自己的部落格。
繼續閱讀全文[教學]Blogger 七種頁面形態判斷語法詳解
![[教學]Blogger 七種頁面形態判斷語法詳解](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpR24NSpwvkRo5pIZQAzmKki9CPqR7qmmq-9iGZ0Rce241d2Pcy91o-ZSM4iokhXdjT14quCoWHubFgKuyGRLSe3b7tXnh8SJR2m7QHUgHod3-pNVk38cMrA6KsQONhS3XJX2zrUjCp0d/s1600/blogger-page-type.jpg)
在這篇「 7 Blogger Page Types: Analysis, Code Snippets, Data Matrix 」看到了過去「 Blogger 頁面判斷式(PageType)的各種應用 」沒提過的頁面判斷方式,而且其資料整理得很詳細,只差在部分語法可以精簡一些。 ...
繼續閱讀全文[教學]Blogger 範本﹍(3) 文章及留言區塊的程式碼
![[教學]Blogger 範本﹍(3) 文章及留言區塊的程式碼](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqnCpy50BV0vfjkbDDs9zpi6WuIgL2kQCTYMdFggQ0JefvKPfBGidMkrCmEkyKzSmvRhTaIE8qIJMKaIWlIPeP38FgpfJrovQ6X_nLE_zssl1eb9pyINEi2WOM5KgFvlJvyPPsX9vdMBdY/s1600/blogger-layout-program-2.jpg)
本篇的內容為 Blogger 範本中,文章及留言區塊的程式碼整理,並附帶簡單說明。建議參考系列文「 第一篇 」,將範本中的每個區塊加上註解,如此日後搜尋、修改都很方便。 為了避免提供的程式碼錯誤,特地開了一個全新的網誌(使用新範本),以確保本系列文提供的程式碼是最乾淨的狀態。...
繼續閱讀全文[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼
![[教學]Blogger 範本﹍(2) 標頭、導覽列、側邊欄、頁尾區塊的程式碼](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSAyU1QimCv7MBm3jg3Mk26kBL7iXTrr_IaCjg151HQcw4APzAKRAr4eEFhLX40zbb09kgjvpQ0PEnh3Cb-YbMz4X_HcJwSlsJ7EHtrCugMdZOHF80qlIWKil40PplTNYLUFjdHl3Fs0mR/s1600/blogger-layout-program-1.jpg)
本篇的內容為 Blogger 範本各個區塊的程式碼整理,包含除了文章區塊外的所有區塊(標頭、導覽列、側邊欄、頁尾區塊),並附帶簡單說明。建議參考系列文「 第一篇 」,在範本中加上註解,如此日後搜尋、修改都很方便。 以下大標題依照範本中出現的順序排列──
繼續閱讀全文[教學]Blogger 範本﹍(1) 各種註解方式及區塊的修改
![[教學]Blogger 範本﹍(1) 各種註解方式及區塊的修改](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-x4pIf1AX9dbCJna_9ouk3cOSL4WWBuEekmxvnbGzSpQmkLvJelTtxFgmELBntgNz-lD-1fzIJ6I73nsG-b8qJnE19XyovWCTQ7nvZu47om-DRBx_lCOc1xwmXRZWMv-ZNoYa_YZ0Vm_/s1600/layout-template-remark.jpg)
這個系列的文章共有三篇,目的是為了方便修改 Blogger 範本時,可快速找到正確的修改區塊。先前發表的「 讓Blogger能顯示 "單篇文章瀏覽數" 」,由於這個小工具每個人想擺放的位置不一定都一樣,如此要說明擺放位置變的異常困難。 於是將範本的各個重要...
繼續閱讀全文[教學]Blogger 頁面判斷式(PageType)的各種應用
![[教學]Blogger 頁面判斷式(PageType)的各種應用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlEqzjyXrqpdSTZ7LN8O9XVITQQvS0u6GxpiFBvL-AnEC_6ny0zQ4EQD9GvTjEvaX9_Zqr2gb3ltUTY_hrLsgYgsqstmJjp8aEFWs5qPr6kzi7mrFp0Tm9bq5BfFa9cPfjW1gKWUJ4C90h/s1600/pic-size-switch.jpg)
Blogger 跟其他部落格比較起來,比較不友善的地方就是一些工具說明得自己想辦法啃官方說明文件;而本文的主題「Blogger 頁面判斷式」,配合不同的頁面型態(PageType)參數,就能在不同頁面時展現不同的版面效果,只是就算啃了「 官方說明文件 」對其應用也可能是一知半解。...
繼續閱讀全文