Blogger 版面配置

在 Blogger 的版面配置內，分割配置區塊空間 <b:section>，用來置放各種新增小工具 🛠

依據目前 Blogger 官方認定的網頁類型 pageType：有「item」、「archive」或「index」3種。
 可選擇小工具只會顯示在網誌中指定的網頁上 ..
Blogger 以為大家都是神人匿? 都會搞這些況且、每次要讓小工具在不同的場景粉墨豋場時，都要打開範本設定，還真厚工 蹓!! 
為了不要老是要到範本裡撈魚，咱們就來把4種場景，打包裝到側欄裡，包場演出一撈泳浴

下面這一段是 Blogger 說明中心 : 對 <b:section> 區段標籤的解說 

區段

主題中的每個區段都有一個開始和結束標記，如下所示：

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

<b:section> 標記屬性

id：(必要) 專屬的名稱，僅限字母和數字。
class：(選擇性) 常見 class 名稱為「navbar」、「header」、「main」、「sidebar」和「footer」。如果您日後變更主題，這些名稱有助於 Blogger 判斷如何轉移您的內容。
maxwidgets：(選擇性) 這個區段可容納的小工具數量上限；如不指定，則為無限。
showaddelement：(選擇性) 可以是「yes」或「no」，預設值為「yes」。這是用來決定 [網頁元素] 分頁是否會在這個區段顯示 [新增網頁元素] 連結。
growth：(選擇性) 可以是「horizontal」或「vertical」，預設值為「vertical」。這是用來決定這個區段中的小工具排列方式為並排或堆疊。

假如你想要了解 Blogger 更多的遊戲規則，可到 Blogger 說明中心 以及  blogger API

上工了 ~

步驟 1 : 後台管理 >> 版面配置，將側欄 Sidebar 裡的小工具暫時移到別的區塊，清空，Sidebar，儲存離開 ... 

步驟 2 : 進入 ~ 主題 >> 1按 、 自訂旁的3角型 >> 2 備份 (範本) >> 3 編輯HTML >>  編輯範本 

 複製 code 貼到 側欄標記<aside>之間</aside>

<aside ... >

<b:section id='main_page' class='sidebar' name="(Sidebar) 全域">

此段內容在所有的網頁顯示 </b:section>

<b:section id='home_page' cond='not data:view.isSingleItem or data:view.isLayoutMode' class='sidebar' name="(Sidebar) 首頁">

此段內容在網站的首頁以及非獨立頁面顯示 </b:section>

 <b:section id='item_page' cond='data:view.isSingleItem or data:view.isLayoutMode' class='sidebar' name="(Sidebar) 單篇文章">

此段內容在閱覽 item 的模式 顯示 </b:section>

<b:section id='hidden_page' class='sidebar' name="hidden 隱藏">

此段內容隱藏不顯示</b:section>

</aside>

點擊下面的 code 複製
<aside> <b:section id='main_page' class='sidebar' name="(Sidebar) 全域"> 此段內容在所有的網頁顯示 </b:section> <b:section id='home_page' cond='not data:view.isSingleItem or data:view.isLayoutMode' class='sidebar' name="(Sidebar) 首頁"> 此段內容在網站的首頁以及非獨立頁面顯示 </b:section> <b:section id='item_page' cond='data:view.isSingleItem or data:view.isLayoutMode' class='sidebar' name="(Sidebar) 單篇文章"> 此段內容在閱覽 item 的模式 顯示 </b:section> <b:section id='hidden_page' class='sidebar' name="hidden 隱藏"/> </aside>

PS : 以上 code 並不適用於 新的 PWD 佈景主題範本，本教程只是用來演繹如何排版。 


步驟 3 : 編輯範本搜尋側欄HTML標籤，將游標點按在範本編輯器內，同時按 Ctrl + F ，輸入<aside ，按下 Enter 鍵，找到 <aside 標籤之後，清空<aside>和</aside>之間的標記碼，貼上區段的 Code ，儲存後離開


 進入版面配置 : 假如成功就會看到如下畫面要讓頁面元素隱藏不顯示，有好幾種方法，其中一種是設定 CSS 樣式碼的屬性，Blogger 的 CSS 樣式碼，是放在範本裡的一對 <b:skin></b:skin> 標記之間，另一對標記<b:template-skin> ... </b:template-skin> 是放版面配置的CSS 樣式碼。

最後 ~ 再打開範本編輯器，同時按 Ctrl + F ，輸入 " ]]></b:skin>"  ，按下 Enter 鍵，找到標籤之後，在他的前面(上方)，貼上讓 hidden page 區段標籤 <b:section> 隱藏的 CSS 樣式碼

#hidden_page {width:0; height:0; position: absolute; left: -1000px; z-index: -10;}

儲存 ~ OK


可以、把之前離家出走的，都叫回去了 ~

---

在新的 PWD 佈景主題範本，可以這樣新增一個版面配置區塊。

在下面圖中的3個藍色區塊內，任一個區塊都可以插入以下代碼，新增了一個、可以新增小工具的 section 區段空間。

<b:section class='sidebar' id='sidebar_user' name='自訂欄位' preferred='yes'/>