[Blogger] 在樣版裡新增左右兩欄並列的區塊
以 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
推
08/07 10:49, , 1F
08/07 10:49, 1F
→
08/07 10:49, , 2F
08/07 10:49, 2F
推
08/07 14:27, , 3F
08/07 14:27, 3F
→
08/07 14:29, , 4F
08/07 14:29, 4F
→
08/07 15:00, , 5F
08/07 15:00, 5F
推
08/07 19:39, , 6F
08/07 19:39, 6F
推
08/07 19:53, , 7F
08/07 19:53, 7F
→
08/07 19:54, , 8F
08/07 19:54, 8F
推
08/07 19:56, , 9F
08/07 19:56, 9F
→
08/07 19:57, , 10F
08/07 19:57, 10F
→
08/07 19:57, , 11F
08/07 19:57, 11F
→
08/07 19:57, , 12F
08/07 19:57, 12F
→
08/07 19:59, , 13F
08/07 19:59, 13F
→
08/07 19:59, , 14F
08/07 19:59, 14F
→
08/07 20:01, , 15F
08/07 20:01, 15F
→
08/07 20:02, , 16F
08/07 20:02, 16F