[Blogger] 在樣版裡新增左右兩欄並列的區塊

[huanson (Friday)]

以 Douglas Bowman 的 Minima Dark 樣本為例. 本來是長這樣:

(sorry, 圖帶不進來.)

那我們要如何在最下面再加新的區塊, 而且是左右兩欄的區塊呢?


首先打開樣版 (Edit Template),

找到最下面那塊 div 的 id 是 footer-wrapper.

 <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
 </div>

緊跟後頭新增兩段程式碼:

 <div id='footer-wrapper-l'>
   <b:section class='footer-l' id='footer-l'/>
 </div>

 <div id='footer-wrapper-r'>
   <b:section class='footer-r' id='footer-r'/>
 </div>

 <br clear='all'/>

幾乎只要照抄, 把 name 改成不一樣的就好了. 重點:
1.是 class, 要跟下段的 css 對應到;
2.是 <br clear='all'/>, 如果下面還要再加新的區塊, 又沒有寫這行的話,
  從下面開始位置會亂跳.


接著回頭找 class footer 的 css.

#footer {
  width:660px;
  clear:both;
/*  margin:0 auto; 這行是我改掉的, 因為跟下面黏超緊的, 很醜. */
  margin: 8px;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

緊跟後頭新增兩段程式碼:

#footer-l {
  float:left;
  width:320px;
  margin:8 px;
  padding:8 px;
  border-right:1px dotted $bordercolor;
}

#footer-r {
  float:right;
  width:320px;
  margin:8 px;
  padding:8 px;
}

這邊不能照抄原來的, 要做些許變動, 重點:
1.是 clear:both; 一定要刪掉, 因為本次目的是要做成左右並列的兩欄.
2.是 float:left; float:right; 一定要加上, 理由同上,
  因為本次目的是要做成左右並列的兩欄.

趕快回去網頁元素 (Page Elements) 的地方看看:

(sorry, 圖帶不進來.)

下面兩個並列的區塊出來了! 打完收工, 就這麼簡單.


(其他參數就可以依實際需求再作調整, 我是只有先在中間畫一條線.)


如果需要完整 .xml 參考的鄉民, 麻煩請到:
http://disorder.ojisang.com/2009/08/google-blogger.html
留言索取.

*** 以上網址有廣告, 請慎重考慮是否點入. ***


--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 220.136.226.226
推 peter1:應該要加個</b:section>封起來...
→ peter1:我是要改main耶 用你的方法不行 冏"
推 a892245:單行結尾是 />的就不用再加相對的結束標籤囉
→ a892245:你要改main就放在<div id="main-wrapper"></div>的後面啊
→ huanson:謝謝樓上幫忙回答 (不知道批特先生懂了沒?)
推 peter1:我試過耶 不行...冏:
推 a892245:那如果只塞<b:section class='footer' id='footer'/>和
→ a892245:<b:section class='footer-r' id='footer-r'/>在
推 a892245:<div id='main-wrapper'>裡的</b:section>後面呢？
→ a892245:其他的css要跟著一起寫，這樣應該可行吧
→ a892245:啊 不對是塞<b:section class='footer-l' id='footer-l'/>
→ a892245:跟<b:section class='footer-r' id='footer-r'/>
→ a892245:css的寬度也要注意喔 兩個欄位加起來不能超過main
→ a892245:不然有一個會掉下去
→ huanson:謝謝樓上
→ huanson:其實不懂HTML語法的人不要怕啦 多try幾次就會啦