2011年1月25日 星期二

-步驟-新作法!Blogger 動態版型,讓左/右側邊欄消失,以文章區塊填滿側邊欄(使用 b:if 條件式,無 javascript)
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

* 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

如果你很不幸的已經按照之前的作法修改樣板的話,請回到那篇文章,按照相反順序復原,然後改而採用本文所描述的方法。因為我的遜咖,給各位讀者帶來麻煩,真是不好意思 ^^b

Last month I wrote a tutorial about "conditional hide left/right sidebar and expand post width - 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



樣板功能:動態版型,在網站內頁,讓左/右側邊欄消失,以文章區塊填滿側邊欄

Template feature: conditional hide left/right sidebar and expand post width.

三欄式的首頁,有左、右側邊欄:
three-column home page:


文章頁面,將左側邊欄隱藏:
hide left sidebar in post page:

固定頁面,將右側邊欄隱藏:
hide right sidebar in static page:

實作的方式,同樣是利用 Blogger 的 b:if 系統標籤。步驟如下:
We are going to use b:if tags, just like previous post.
  1. 到 Blogger 後台的 Design > edit HTML 頁面。
    go to Design > edit HTML .
  2. 按 Ctrl + F 搜尋 <body ,可以找到這段文字:
    press Ctrl + F and search for "<body", you can find this:
      </head>
      <body expr:class='"loading" + data:blog.mobileClass'>
    ...
  3. 在 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'>

    <!-- Posts page except for home page Styling Start-->
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <style>
    .columns, .fauxcolumn-center-outer {padding-left: 0 !important;}
    .fauxcolumn-left-outer, .column-left-outer { display:none !important;}
    </style>
    </b:if>
    </b:if>
    <!-- http://etblue.blogspot.com -->
    <!-- Posts page except for home page Styling End-->

    <!-- Static page styling Start-->
    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    .columns, .fauxcolumn-center-outer {padding-right: 0 !important;}
    .column-right-outer, .fauxcolumn-right-outer { display:none !important;}
    </style>
    </b:if>
    <!-- http://www.bloggersentral.com -->
    <!-- Static page styling End -->
  4. 儲存樣板,完成!
    save your template and it's done. 

上面插入的程式碼總共有兩段,第一段的意思是「當目前頁面的網址,不等於部落格首頁的網址,而且,頁面類型也不是固定頁面的話,就把中央直欄的左側,設定成不留空白,同時把左側邊欄設定成不顯示。」
there are two parts in the code. the first part means "if current url do not equal to home page url, and current page type is not static_page, then set left space of the central column to zero, and do not display left sidebar."

第二段的意思是「當目前頁面的頁面類型,是固定頁面的話,就就把中央直欄的右側,設定成不留空白,同時把右側邊欄設定成不顯示。」
the second part means "if current page type is static_page, then set right space of the central column to zero, and do not display right sidebar."

跟之前的作法相比,是不是簡單很多呢?