ETBlue 外星人吟遊地球: -步驟-新作法！Blogger 動態背景圖片，首頁使用大圖，內頁使用小圖，並在首頁將文章內容的字體縮小（使用 b:if 條件式，無 javascript） new method! conditional change background image and resize post body font (use b:if tags only, no more javascript!) - my Blogger template tweak, using Picture Window

* Hi, if you are looking for an English version of this tutorial, please check the green text in this article (and throw Google Translate away)

之前曾經寫了一篇「-步驟-Blogger 動態背景圖片，首頁使用大圖，內頁使用小圖並放大文章內容字體」，是利用 javascript 小工具，動態的修改 css 所實作出來的。

但是，其實根本不用那麼麻煩。 orz

昨天看了 Blogger Sentral 的這篇文章「Apply different layout/styling to static pages」後，菜鳥我才發現，原來 Blogger 樣板的 b:if 標籤、data: 標籤，可以直接放在 html body 之中，並不是非要塞進 widget 之內不可的。（淚）

所以，如果你很不幸的已經按照之前的作法修改樣板的話，請回到那篇文章，按照相反順序復原，然後改而採用本文所描述的方法。

因為我的遜咖，給各位讀者帶來麻煩，真是不好意思 ^^b

Last month I wrote a tutorial about "conditional change background image and resize post body font - my Blogger template tweak, using Picture Window ." I was wrong. Yesterday I found a much better way doing this, thanks to Blogger Sentral "Apply different layout/styling to static pages ." Please forget my previous article (or reverse those steps if you have already done that) and take the following steps. Sorry for misleading. ^^b

樣板功能：header 的圖片，在首頁時用大圖，內頁時用小圖，並在首頁將文章內容的字體縮小

Template feature: use large background image on home page, and small background image on others, plus make post body font smaller on homepage.

在首頁使用大的背景圖片，並縮小文章內容字體：

large background image and smaller post body font size on home page:

在內頁使用小的背景圖片：

small background image on other pages:

實作的方式，是利用 Blogger 的 b:if 系統標籤。步驟如下：

We are going to use b:if tags and conditional change css.

準備兩張圖，一大一小。我是用慣用的 Adobe Illustrator 製作。
prepare two background images. (use Adobe Illustrator or GIMP...)
在 Blogger 後台的 Template Designer 的 Backgrounds 裡面，將小圖設定為底圖，取代 Picture Window 原本設定的底圖。
go to Template Designer and make the small one be your background image, instead of the default background image of Picture Window template.
把大圖的檔案，上傳到某個可以公開存取的地方。我因為自己有架工作室網站，所以，是上傳到自己的智邦虛擬主機。一般網友可以上傳到 Picasa 或 Dropbox 等免費空間，上傳後，它們應該都有相關的選項，可以把圖片的資料夾設定成 public 公開存取。
upload the big image to somewhere that can be accessed in public. for example Picasa web album or Dropbox. there should be options that can set your folder public (access without password).
到 Blogger 後台的 Design > edit HTML 頁面。
go to Design > edit HTML .
按 Ctrl + F 搜尋 <body ，可以找到這段文字：
press Ctrl + F and search for "<body", you can find this:
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
...
在 body expr:class='"loading" + data:blog.mobileClass' 這一行的下面，插入這段文字：（紅字是插入的部份）
insert following text just below <body ... > tag: (insert the red part)

<body expr:class='"loading" + data:blog.mobileClass'>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-body {font-size:small !important;}
body {background:#027abb url(http://www.etblue.idv.tw/blogs/ETBlueTheAlienNewBlogger.png) repeat-x scroll top center !important;}
.header-outer {height:300px !important;}
.header-inner {padding-top:180px !important;}
.columns, .fauxcolumn-center-outer {padding: 0 250px !important;}
</style>
</b:if>
第一行和最後一行是 html 的註解，註解沒有作用，只是方便我們日後閱讀和維護。
第二行和倒數第三行是 Blogger 系統的條件式標籤，意思是「如果目前頁面的網址，跟部落格首頁網址一樣的話，就...」。
第三行和倒數第四行是樣式標籤，意思是「這裡面的東西，請瀏覽器大哥把它們當成 css 來解讀」。
the first and the last lines are html notes. they have no function. they are just for code reading and maintaining.
the second and last third lines are Blogger condition tags, which mean "if current url equals to blog home page url, then ..."
the third and last fourth lines are style tags, which means "dear browser, please interpret the text as css style sheet."
第四行的 .post-body {font-size:small !important;} 意思是將文章內容的字體大小，指定為 small。以我的例子而言，我的預設字體是 large，所以在首頁指定 small ，就會產生首頁的文章內容字體變小的效果。你可以依自己的需要，將粗體部份改成 small / medium / large / 80% / 14px ... 等。如果不需要此效果，整行刪掉即可。
the fourth line means "use small font size in post body text ." you can replace "small" with: medium / large / 80% / 14px ... or whatever you like. if you don't want this effect, just delete the whole line.
其中，body {background:#027abb url(http://www.etblue.idv.tw/blogs/ETBlueTheAlienNewBlogger.png) repeat-x scroll top center !important;} 的粗體黑字部份，要換成你自己的設定。
the bold black text have to be changed.
#027abb 是深藍色，也是我的背景底色。你的背景底色設定在 Template Designer 中可以找到。
http://www.etblue.idv.tw/blogs/ETBlueTheAlienNewBlogger.png 是我的首頁大圖的網址，把它改成你剛才上傳自己的大圖的網址。
"#027abb" is the blue background color in my template. you can find yours in Template Designer.
"http://www.etblue.idv.tw/blogs/ETBlueTheAlienNewBlogger.png" is the url of my big background image on homepage. paste the url that you just uploaded instead.
至於.header-outer {height:300px !important;}
.header-inner {padding-top:180px !important;}
.columns, .fauxcolumn-center-outer {padding: 0 250px !important;}
的粗黑字部份，300px 是首頁的 header 的高度，180px 是首頁的網誌標題上方的空間的高度，250px 是我的網誌的側邊欄的寬度。也把它們改成你自己的設定。
replace the bold black text "300px", "180px", and "250px" with your own setting. the first one is header height of homepage. the second one is the space upon blog title and blog description text. the last one is sidebar width.
儲存樣板，完成！
save your template and it's done.

用之前的 javascript 的話，有個缺點，因為一般的網誌多少會有安裝一些外掛，這些外掛也常常都會需要使用 javascript ，網頁中的 javascript 程式碼越多，跑起來就越沈重，開啟網頁的速度就越慢。眾所周知，網頁載入速度是各大搜尋引擎網頁排名的參考指標之一，因此，以 SEO 的角度來說，能夠盡量少用 javascript 是最好的，當然，除了 SEO 之外，也可以節省使用者的寶貴時間。

另外，由於 javascript 的運作原理，是在資料傳送給瀏覽器演算後，再命令瀏覽器依照 script 的指示，修改原本已經演算好的內容。所以，載入網頁的頭一兩秒鐘，使用者會先看到預設版型，然後等頁面載入完畢，才突然的變成我們用指令碼所製造的動態版型。這種視覺上的不連貫效果，會給人一種不太安心的感覺。這也是我對於之前的動態版型不太滿意的地方。

總而言之，大原則就是，能用 Blogger 系統的條件式解決，就盡量用條件式，真的走投無路，再來動用 javascript 。

這篇文章的動態版型作法，是不是比之前的簡單多了呢？