2007/07/29

改造雙欄blogger的版面為三欄式




目前blogger提供的範本為雙欄式, 如果想把雙欄變三欄, 該怎麼做呢?

首先要先了解blogger對欄位的定義. 新增一個側邊欄, 就不會那麼困難了.



備分template後, 把 展開小裝置範本 打勾.

1.在blogger template 中, 基本上應有三種widget. 在<head> </head>區, 應可以看到如, outer-wrapper(整頁), main-wrapper(文章區), side-wrapper(側邊欄)這三種.

程式碼大致是長這樣, 如下圖.


如果想新增一個側邊欄, 可以在這程式碼之後, 新增一個newsidebar-wrapper.

程式碼如下,
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


2. outer-wrapper 的 width, 記得要放大哦!在此例中, 可以放大到 width: 750px;

3. 如果想新增一個側邊欄在最左邊, 中間是文章, 右邊是原來的側邊欄. 那麼就要在這段程式碼之前(如下)



<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='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='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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


所以, 想把新增sidebar 放哪個位置, 就在這邊調順序吧!

如果希望網頁上呈現的順序, 由左到右, 依次是sidebar --> newsidebar --> main, 就在這步驟, 把sidebar-wrapper , 其次放 newsidebar-wrapper , 再來是main-wrapper.



相關文章 :

42 comments:

莊傳魚 提到...

寫的太好了,淺顯易懂!

skyvee 提到...

謝謝 莊傳魚的鼓勵! XD

ss 提到...

!!超讚的~可以自己改
我已經成功了~!謝謝你
不過站長~~這個方法要如何套用到其他範本呢
不同範本的語法是不是有些差異呢?

Skyvee 提到...

不同的範本, 所命名的 wrap 可能會有所不同, 不過, 應該還是可以猜得出. 可以先看一下裡面區段的程式碼, 看是屬於哪一種... :)

ss 提到...

哈!~感謝站長
成功了

Skyvee 提到...

SS, 恭喜你改造成功啦! :)

蔡凱文 提到...

Skyvee大大,

請問一下... 已經用了 FinalSense.com 的templates, 這樣可以改三欄嗎? 圖會不會被拉寬? 感謝!!

Skyvee 提到...

凱文你好,一般來說應該是不會影響, 除非sidebar 的背景圖有另外設定. :)

蔡凱文 提到...

不知有什設定.. 一直無法改 XD
有空再幫我看一下囉 ~ 感謝!!


/* ---( layout structure )---*/
#outer-wrapper { width: 798px; margin: 0px auto 0; text-align: justify; font: normal normal 100% Verdana, sans-serif; }
#content-wrapper { margin-left: 7px; /* to avoid the border image */ width: 765px; }
#main { float: right; width: 480px; margin: 0px; padding: 0px 0px 0px 15px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
#sidebar { float: left; width: 250px; padding: 0px; font-size: 85%; color: #cccccc; line-height: 1.4em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#center {background: #ffffff url('http://lh6.google.com/image/jvdmds/RfYXKksJ2eI/AAAAAAAAAK0/KeTRQWBy-es/C%3A%5CDocuments%20and%20Settings%5CAdministrator%5CMy%20Documents%5CMy%20Pictures%5Cnew%5Cr8-2.jpg') repeat-y top center;}

Skyvee 提到...

凱文,

先調一下 #main, #sidebar, #newsidebar的長度總和, 不要超過 765px 看看?

蔡凱文 提到...

Skyvee大大,

我想應該跟底圖有很大的關係, 這種套裝的template比較不好改囉.. 還是很謝謝你!!

skyvee 提到...

凱文你好,

我想這個template要改的話, 可能要花大工夫了...不好意思, 沒能幫上忙!

蔡凱文 提到...

Skyvee大大,

不要這麼說囉, 再來找看看有無適合的囉.. 甘溫蛤!!

Skyvee 提到...

凱文, 謝謝你啊! :)

cyber runner 提到...

Skyvee大大
在你這可以挖到許多寶呀
謝謝...我lag了
已完成加入貴站

還有一個問題想請較你的
我原本是用 rounder 2的三欄式版形
可是修改時不慎把版型弄亂
導致 footer變成縮在中間那欄
請問有解嗎??
或需提供啥訊息請您協助呢
感謝...

Skyvee 提到...

cyber runner 你好,
把div id='footer-wrapper'那段程式碼, 順序排在最後, 應該就可以了? 不過我剛看了您的網站, 好像已正常了?

cyber runner 提到...

謝謝skyvee大大回應
這就是詭異的地方
我在FireFox看是好的
但是IE全都亂了
Rounder 2 的版型我也跟之前比對過
好像那位創造的大大也改進過
因此頭痛呀
謝謝你的資訊
我會去試的

Skyvee 提到...

cyber runner, 呵..辛苦了..這種不同瀏覽器下的顯示問題, 就比較難解決呢! 我想那位原創者,應該可以找出辦法的. :)

Girvan資訊邦 提到...

這一篇真的很棒!

Skyvee 提到...

謝謝 Girvan , 希望有幫助! :)

蜻蜓 提到...

請問skyvee大大,
是否可以讓Footer變成三欄式?
可否寫篇教學呢?
(感恩啊~)

謝謝skyvee大大,一系列的blogger改造教學文!受益良多~

Skyvee 提到...

蜻蜓, 其實 Footer變成三欄式, 也是相同作法呢!
只是要先算好footer 區域的寬度, 如

#footer-wrapper {
width: 450px;
margin: 0px 0 0px 0;
padding: 0 0 10px 0;
}

#rightfooter-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#leftfooter-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

然後, 一樣照文章的步驟,找出 <div id='footer-wrapper'>位置, 依序放進leftfooter, rightfooter程式碼看看. :)

蜻蜓 提到...

skyvee大大~
我有成功的將footer變成三份。
但排列卻變成兩行。

原本應該是要 footer|rightfooter|leftfooter

卻變成
footer
rightfooter|leftfooter

我有少寫什麼嘛?

Skyvee 提到...

蜻蜓, 看來不能直接改footer, 必須在footer上面加三欄. 抱歉, 剛花了一段時間測試,才發現要換個方法.

1. 原先的#footer-wrapper, 請先把width值改到你原本的設定(或設成與header-wrapper相同)

2. 然後在#footer-warpper後加入以下程式

#leftfooter {
width: 250px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#rightfooter {
width: 250px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#centerfooter {
width: 250px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

在 div id='footer-wrapper’ 前面, 加入以下這些程式碼

<div id='content-wrapper'>
<b:section class='leftfooter' id='leftfooter' preferred='yes'/>
<b:section class='rightfooter' id='rightfooter' preferred='yes'/>
<b:section class='centerfooter' id='centerfooter' preferred='yes'/>
</div>

記得把上述程式碼中的 全形< 改成半形 <

出來的模樣, 參考http://blogweb20.blogspot.com/2007/09/footer.html

蜻蜓 提到...

skyvee大大:

經過這次修改後,我的footer變成

footer
leftfooter|rightfooter|centerfooter

我所使用的範本裡並沒有#footer-wrapper
有footer的地方是接在profile後面。

而div id='footer-wrapper’之前要加的程式碼,如果加上去,會變成跟在文章後面。加在這之後,就變成現在的樣子。

如果我不使用footer的話,那行也不會顯示什麼吧!(?)這樣感覺也還不錯,多些組合選擇。

總之,謝謝你的幫忙。(大心)

蜻蜓 提到...

我現在出現了另個問題。

中間的網頁元素,內容跟標題是無法切齊的。不曉得是怎麼回事......

Skyvee 提到...

蜻蜓,這可能是標籤雲內的CSS設定問題, 如padding, margin. 你可以調看看?

蜻蜓 提到...

我的標籤雲是用無腦程式做的。
我現在反而不知道怎麼改(尷尬)
之前放在sidebar時,沒注意到它是不會切齊的。放到footer時,才注意到。

另個問題。
left-footer會跟center-footer緊接在一塊,怎麼讓它有欄寬,不會接在一塊?我已經是先把兩個欄寬減掉,才分給三個footer,為什麼還會緊接在一塊?

Skyvee 提到...

你可以加入margin-right, 從0 px ~ ?? px來調間距試看看.如 margin-right:5px;

其中句尾 ; 是必須要的.

lifemirror (笨貓) 提到...
作者已經移除這則留言。
lifemirror (笨貓) 提到...

我增加一欄後, 使用IE瀏覽器開啟時, 情況很不穩定, 狀況有1.開啟一半顯示錯誤 2.成功開啟後, 變成亂碼.......
可是使用Firefox開啟卻很正常.....
我找不出問題...可以請您幫忙看一下嗎?
http://lifemirror-tw.blogspot.com/
原版型是http://metamuse.blogspot.com/2007/01/blogger-template-gadget-10-aol-engadget.html

Skyvee 提到...

貓你好,
增加一欄只是調整CSS的部分, 應不至於出現你發現的狀況. 有可能是在於其他程式發生不穩定導致. 如果你擔心是這個問題, 建議你先移除這部分的程式.再觀察幾天看看.
剛用ie去試你的blog, 都沒發現問題呢!版型很好看, 不過在800X600解析度下, 寬度會過寬.

lifemirror (笨貓) 提到...

Skyvee您好:
我發現讓IE一定出錯的方法了....
這二種方法一定出現錯誤
1. 按重新整理
2. 按一篇文章後, 再按Blog標題連結回首頁

以下為二張出錯的圖示

因為留言版看不到完整網址, 所以我把URL裁斷了...@@

http://s228.photobucket.com/albums/ee42/
lifemirror/Blogger/lifemirror_blogger_IE_error/

lifemirror (笨貓) 提到...

終於抓出蟲蟲了....
原來是IE對UTF-8萬國碼的問題, 會對程式碼讀取錯誤,
解決方法是把
<title><data:blog.pageTitle/></title>
移到<head>下第一排, 如果之後模版改寫後, 第一排被取代了..那麼IE就會讀取錯誤啦~~~

Skyvee 提到...

貓, title 一般應該是在head區間啊! :) 不過貓也很厲害, 自己就抓到蟲了.

Violet 提到...

版主你好:

我按照你這篇教學試做,
十分成功!
但是有個小問題不知怎麼解決.
我想把新邊欄放在左邊,
也把寬度都改了,
主內文480+邊欄200(*2),
全寬設定900.
但是出來的結果左邊欄卻被內文擠到左邊..
該怎麼修改?
我找不到問題出在哪裡??

Skyvee 提到...

violet, 請調整 .sidebar .widget, .main .widget 內容試看看.(如下,其中padding :0 10px 的10px可再自行調看看.)

.sidebar .widget, .main .widget {
border-bottom:1px dotted #cccccc;
margin:0 0 1.5em;
padding:0 10px;
}

Violet 提到...

版主:

真是感謝你呀!
我解決了!!
感謝!

還有個額外問題想請教,
我以前使用了很久的banner圖片都能顯現,
(我是直接在html裡頭改的,沒有使用beta版)
但是今天無聊去後台改了一下"網頁元素"裡的"字型和顏色".
結果不知怎麼回事..我原來的banner圖片不見了!!
不曉得skyvee有遇過這種情形嗎?
~><~

lifemirror (笨貓) 提到...

這是因為有Skyvee的淺顯易懂的教學篇, 才能成功試出來的, 另外我設計了變化三欄型的版~ 發現如果往下再加第三層, 左右線條會不大對稱~ 怎麼弄都解決不了~~

所以我目前的Bogger是變化三欄二層型的....

Skyvee 提到...

Violet, 看起來你的問題已經解決囉!剛連過去看 你header的圖片在ie及firefox下都正常了. :)

Skyvee 提到...

貓, 玩部落格最大的成就感, 就是自己改造成功. 我也是一步步 trial and error 後, 深深體會這個中道理的. 能夠套用後, 又再加以變化, 那又更厲害了!

Violet 提到...

是呀...我搞半天搞不好,後來乾脆換一張新的圖去做banner,沒想到更新之後就OK了,這真是個奇怪的謎呀...
還是很感謝skyvee的熱心幫忙哦:D