2011.01.25 update: please do not use the following steps. check this latest post instead: "new method! conditional hide left/right sidebar and expand post width (using b:if tag, no more javascript!) - my Blogger template tweak, using Picture Window."
--Blogger 預設的樣板版型，預設的情況下，不管瀏覽哪一頁，layout 都是一模一樣，當然，絕大多數的 blog 系統，也都是這樣子的。
不過，對於習慣自己用 Adobe Dreamweaver 從零開始打造 HTML 網站的人來說，一個網站的首頁跟內頁，有不同的表達重點，因此，也會有不同的 layout ，是很天經地義的事情。這種時候，用 Blogger 的樣板，難免會有點不能適應（或者說不太滿足）。
以我自己來說，我希望我的網誌樣板擁有的功能，除了之前提到的 -步驟-部落格改版之背景圖片，首頁使用大圖，內頁使用小圖並放大文字 之外，還能夠具備這些特徵：
- 三欄式的樣板中，左側邊欄放一些「關於作者」跟「關於本站」的小工具，像是站台統計、google friend connect、訂閱按鈕、作者介紹與相關連結等。右側邊欄則放一些跟「文章內容」有關的小工具，像是熱門文章、分類標籤、最新回應、著作權聲明等。
- 瀏覽首頁跟 pages 固定頁面的時候，只顯示左側邊欄。瀏覽文章內容、文章索引的時候，只顯示右側邊欄。首頁的時候，則是全部都顯示。
其中，第一項功能，只要在 page elements 頁面中，拖曳小工具的框框，就可以完成。但是，第二項功能，卻複雜的多，原本想到的實作方式有三種：
- 用一個 b:if 條件式，把側邊欄的東西包起來，一網打盡。
研究結果：由於，Blogger 系統的條件式，只能放在小工具內部，不能直接放在外部的 html 標籤中，如果要這樣做，就必須把左側邊欄的小工具統統收集到一個「父」小工具內，但是，Blogger 系統的小工具又不支援嵌套功能，總而言之，言而總之，就是不可行的意思。
- 用一段 javascript ，把側邊欄的 div 標籤整個設定為不顯示。
考量：這樣做的話，等於是要對使用者的瀏覽器做兩件事情，先是把側邊欄的全部的資料，統統都丟給人家，然後在大約半秒鐘到一秒鐘（視網路速度跟電腦性能而定）以後，再讓這些剛顯示出來的資料消失不見。這樣子，在視覺上，好像會有一種看到鬼的感覺，而且，有點浪費地球資源，對網路不順的人來說也蠻不體貼的。
- 用一堆 b:if 條件式，把側邊欄的每一個小工具，都設定條件式隱藏。
考量：可以確實的減少浪費頻寬的行為，缺點是要一個一個設定小工具很麻煩。
最後，我選擇使用第三種方法，也就是 Blogger 系統的 b:if 條件式，來隱藏側邊欄的內容，再用 javascript 小工具，把文章區塊的寬度變大，以便填滿側邊欄消失後的空白區域。結果像這樣：
在首頁時，三欄全部顯示（並且使用大張的部落格背景圖片，實作方法請見這篇 -步驟-部落格改版之背景圖片，首頁使用大圖，內頁使用小圖並放大文字 ）
在文章頁面，隱藏左側邊欄，並且用文章區塊填滿
在固定頁面，隱藏右側邊欄，並且用文章區塊填滿
樣板功能：在首頁之外的頁面，隱藏左/右側邊欄，並且用文章區塊填滿
- 首先，為了等一下修改樣板的工作，預先準備一下，到 Blogger 後台的 design 的 page elements 頁面中，把左側邊欄的小工具，按「編輯」，在小工具的 title 中加入一串怪怪文字，每個小工具都要加，比方說 keroro1 ，keroro2 ，keroro3 ... 等。
- 切換到 edit html 的頁面，將 Expand Widget Templates 打勾，展開樣板中的小工具程式碼，然後按 Ctrl + F 搜尋 keroro，會找到類似這樣的東西：
<b:section-contents id='sidebar-left-1'>
<b:widget id='Profile1' locked='false' title='About Me keroro1' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/>
- 在 <b:includable id='main'> 的前一行，插入這段條件式的程式碼：（紅色字為插入的部份）
<b:section-contents id='sidebar-left-1'>
<b:widget id='Profile1' locked='false' title='About Me keroro1' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:include name='content'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include name='content'/>
</b:if></b:includable>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/>
第一段紅字的意思是「當目前的網址等於部落格首頁時，顯示小工具的內容」。第二段的意思則是「當目前頁面的類型屬於 static_page 也就是固定頁面的時候，顯示小工具的內容」。
兩個加起來，就是「在首頁跟固定頁面才會顯示，其他的地方都不會顯示」的意思。
- 接著，把原本的 main 外掛的識別身份，改成 content，然後記得把剛才暫時加入的 keroro 刪掉，變成這樣：（紅字是修改的部份）
<b:section-contents id='sidebar-left-1'>
<b:widget id='Profile1' locked='false' title='About Mekeroro1' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:include name='content'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include name='content'/>
</b:if>
</b:includable>
<b:includable id='content'>
<b:if cond='data:title != ""'>
<h2><data:title/>
- 到這邊，第一個小工具的條件式隱藏，就處理完成了。
接下來重複步驟 2 到步驟 4 ，把左側邊欄的其他小工具也做同樣的設定。
完成後，在首頁跟固定頁面之外的地方，左側邊欄會消失，留下一塊空空如也的區域，當然不能浪費這個空間啦，所以接著要實作出「當左側邊欄消失時，用文章區塊填滿測邊欄所留下的空白區域」。
- 回到 Blogger 後台的 Design 的 Page Elements 頁面，在頁尾 footer 的區段，按「新增小工具」，然後選擇 html / javascript 小工具。
- 小工具的 title 一樣先設定一串怪怪文字，例如 giroro ，內容則貼上這段程式碼：
<script type="text/javascript">
$(".columns").css("padding-left","0");
$(".column-left-outer").css("width","0");
</script>
這段 javascript 的意思是，讓 css 的類別 class 屬於 columns 的 html 元素，左側的內距設定為 0 。同時，類別是 column-left-outer 的元素，寬度也跟著歸零。
在 Blogger 預設的樣板中，中間的直欄的 css 類別，就是設定為 columns，而這個 .columns 的框框，原本寬度就是 100%，也就是會佔滿整個版面百分之百的寬度。所以，左右側邊欄的位置，其實是藉著將 .columns 的左、右內距加寬，而讓出位置來。現在，既然左側邊欄的內容都藏起來了，當然也沒有必要繼續為它們留下空位，於是，就大大方方的把左邊的內距 padding-left 設定為 0 ，讓文章內容可以佔據更多的空間。
而 .column-left-outer 則是原本裝著左側邊欄小工具的容器，既然已經沒有東西要放在裡面，容器的寬度也可以歸零了（不然有時後會跑出一些靈異的效果來）。
- 切到 edit html ，勾選 Expand Widget Templates ，Ctrl + F 搜尋 giroro，找到類似像這樣的一段文字：
<b:widget id='HTML3' locked='false' title='giroro' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
... ... ...
- 在 <b:includable id='main'>的前一行，插入這些紅色的字：
<b:widget id='HTML3' locked='false' title='giroro' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='content'/>
</b:if>
</b:if>
</b:includable>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
... ... ...
注意到了嗎？這邊的條件式，跟前面的讓左側邊欄顯示的條件式「恰恰相反」，同樣的 if 句子， == 等於 卻換成了 != 不等於。也就是說，左側邊欄「沒有顯示」的時候，這個小工具「才會」啟動，用 javascript 將中間直欄的版面區塊往左擴張。
- 將暫時取名的 giroro 刪除，原本的 main 外掛改名：
<b:widget id='HTML3' locked='false' title='giroro' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='content'/>
</b:if>
</b:if>
</b:includable>
<b:includable id='content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
... ... ...
- 到這裡，「左側邊欄在內頁隱藏、並且文章的版面擴張」的功能，就差不多完成了，但是，讓版面擴張的 javascript 還不會起作用，因為這是使用 jQuery 懶人框架所撰寫的 javascript，程式碼中的 $ 錢記號，就是 jQuery 的縮寫。所以，最後就來加上 jQuery 的框架功能。
- 在 page elements 的頁尾 footer 區段，再次按下新增小工具，也是選 html / javascript ，內容貼上：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
注意這個 jQuery 小工具，一定要放在其他有使用到 jQuery 的 javascript 小工具的「上面」，才會發生作用。
- 到這邊，左側邊欄的部份就大功告成了！
- 右側邊欄的部份，我是設定成「在固定頁面，隱藏右側邊欄，並且將文章區域向右擴大」，實作的方式跟左側邊欄一樣，請針對右側邊欄，進行步驟 1 到步驟 10 的操作。其中，有幾個不一樣的小地方：
- 步驟 3 插入的文字，改成：
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='content'/>
</b:if>
</b:includable>
- 步驟 7 的程式碼，則改成：
<script type="text/javascript">
$(".columns").css("padding-right","0");
$(".column-right-outer").css("width","0");
</script>
- 步驟 9 插入的文字，改成：
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='content'/>
</b:if>
</b:includable>
- 步驟 3 插入的文字，改成：
- 就這樣，雖然辛苦，但是總算也完成囉！有沒有覺得從 Blogger 的 template 中學到許多東西呢？ ^_^
好久不見~~
回覆刪除剛來到blogspot...
剛好可以邊看妳的文來玩XD
你來啦!
回覆刪除舉雙手歡迎～～
抓到bug記得告訴我唷 ^o^