[Blogger筆記]三欄式版面配置(一)

　 解構Blogger範本網頁元素

　　經過前面幾個步驟，Blogger的統一化格式被我們移除得差不多了（Blogger的OS：你在亂搞什麼？！），在拆版再造的過程中，「拆」的部分已經完成，接下來，就是屬於「重新打造」的重要階段，可以依造自己的需求規劃與美化。

　　E-Snowball 的三欄式配置是將工具欄位安排在兩邊，上方有自製的橫幅，中間為文章區塊，下方則放置最新留言，這是雪球媽在參考很多版型和評估需求後所做的決定， 在範本修改的過程中， 先在左方與上方增加可加入網頁元素位置，再去除下方的Footer 欄位，並以 CSS 調整欄位到固定的位置，雪球媽在這篇會提供如何增加左方欄位的教學，上方欄位請有興趣的Blogger 友們可以依循嘗試看看。

　　Blogger 範本的配置僅提供左右兩欄，變更為三欄式可以分為三個步驟 ： 增加可加入網頁元素位置、加入測試網頁元素、CSS定位，以下將分為三篇逐一進行教學，歡迎Blogger友們一起討論發問喔！

by雪球媽

• 增加可加入網頁元素位置

　　登入帳號→版面配置(管理)→挑選新範本→選擇Minima→儲存範本→修改HTML→展開小裝置範本→Crl+F尋找畫面資料→尋找目標：<div id='sidebar-wrapper'>→在</div>的下一行貼上下方HTML →預覽確認→儲存範本。（下方為加入前後的說明圖片）

<!-- left sidebar -->
<div id='left-sidebar-wrapper'>
　<b:section class='left-sidebar' id='left-sidebar' preferred='yes'>
　</b:section>
</div>

原先的網頁元素頁面


加入HTML後的網頁元素頁面