BloggerAds

2008年8月11日 星期一

[教學] 我的Blogger 有三個欄位了!! Blogspot 三欄式的改法

From: Polin Wei

  看到別人的網頁都有三個欄,今天也來讓自己的網頁也改成三欄式吧,以下三欄式的改法:

1. 第一個是決定你網頁的總寬度,我是用 99% ﹐50%(#main-wrapper )+20%(#sidebar-wrapper )+22%(#newsidebar-wrapper )+各margin=99% 這部份你自己可以先計算一下
PS: 當然你也可以用 px 來作設計, 但因為我懶得作計算, 所以用 % 比較方便

2. 新增一個 sidebar (#newsidebar-wrapper )下面紅色標識的,就是新增的第二個sidebar
PS: 你可以複製 #sidebar-wrapper 的 css 樣式, 然後改名為 #newsidebar-wrapper , 注意: 不能同時有兩個 #sidebar-wrapper , 不然會出錯的




#outer-wrapper {
width: 50%;
...
}
#main-wrapper {
width: 50%;
margin-$startSide: 1%;
...
}
#sidebar-wrapper {
width: 20%;
margin-$endSide: 0.5%;
...
}
#newsidebar-wrapper {
width: 22%;
margin-$endSide: 0.5%;
...
}



3.在 <div id="main-wrapper"> 與 <div id="sidebar-wrapper"> 中間加入<div id="newsidebar-wrapper"> 就像下面


<div id="main-wrapper">
...
...
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id="sidebar-wrapper">
...
...
</div>




接下來你到Page element就可以看到第三欄出來了﹐若把各顏色變數字形變數也新增的話﹐以後你在這Fonts & Colors 就可以直接調整。


參考文獻:
Aqua , A-V and BSD Blogger - Blogspot 三欄的改法
Hackosphere三欄式Beta

5 則留言:

  1. 对不起~

    我不会哦~
    可以教教我吗?

    回覆刪除
  2. 在 版面配置-> 修改 HTML 然後依文章的說明作修改就可以了.

    回覆刪除
  3. 您好我在修改第3項出現了點問題

    錯誤訊息顯示如下:
    「我們無法預覽您的範本
    請修正下列錯誤,再重新提交您的範本。
    新的小工具 ID「NewProfile」對類型「Profile」而言無效」

    想請問,可能是出現什麼問題呢?
    謝謝

    回覆刪除
  4. 出現這個問題, 有時是電腦內的 Cache 問題, 不妨可以刪除 IE 的暫存檔, 然後再存檔一次看看

    回覆刪除
  5. 新的小工具 ID「NewProfile」對類型「Profile」而言無效」
    NewProfile那行整行刪除就可以了 不知道甚麼原因耶
    我也出現這個問題

    回覆刪除