目前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.
2007/07/29
改造雙欄blogger的版面為三欄式
42 comments:
寫的太好了，淺顯易懂！
謝謝 莊傳魚的鼓勵! XD
!!超讚的~可以自己改
我已經成功了~!謝謝你
不過站長~~這個方法要如何套用到其他範本呢
不同範本的語法是不是有些差異呢？
不同的範本, 所命名的 wrap 可能會有所不同, 不過, 應該還是可以猜得出. 可以先看一下裡面區段的程式碼, 看是屬於哪一種... :)
哈!~感謝站長
成功了
SS, 恭喜你改造成功啦! :)
Skyvee大大,
請問一下... 已經用了 FinalSense.com 的templates, 這樣可以改三欄嗎? 圖會不會被拉寬? 感謝!!
凱文你好,一般來說應該是不會影響, 除非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;}
凱文,
先調一下 #main, #sidebar, #newsidebar的長度總和, 不要超過 765px 看看?
Skyvee大大,
我想應該跟底圖有很大的關係, 這種套裝的template比較不好改囉.. 還是很謝謝你!!
凱文你好,
我想這個template要改的話, 可能要花大工夫了...不好意思, 沒能幫上忙!
Skyvee大大,
不要這麼說囉, 再來找看看有無適合的囉.. 甘溫蛤!!
凱文, 謝謝你啊! :)
Skyvee大大
在你這可以挖到許多寶呀
謝謝...我lag了
已完成加入貴站
還有一個問題想請較你的
我原本是用 rounder 2的三欄式版形
可是修改時不慎把版型弄亂
導致 footer變成縮在中間那欄
請問有解嗎??
或需提供啥訊息請您協助呢
感謝...
cyber runner 你好,
把div id='footer-wrapper'那段程式碼, 順序排在最後, 應該就可以了? 不過我剛看了您的網站, 好像已正常了?
謝謝skyvee大大回應
這就是詭異的地方
我在FireFox看是好的
但是IE全都亂了
Rounder 2 的版型我也跟之前比對過
好像那位創造的大大也改進過
因此頭痛呀
謝謝你的資訊
我會去試的
cyber runner, 呵..辛苦了..這種不同瀏覽器下的顯示問題, 就比較難解決呢! 我想那位原創者,應該可以找出辦法的. :)
這一篇真的很棒！
謝謝 Girvan , 希望有幫助! :)
請問skyvee大大，
是否可以讓Footer變成三欄式？
可否寫篇教學呢？
（感恩啊～）
謝謝skyvee大大，一系列的blogger改造教學文！受益良多～
蜻蜓, 其實 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
我有少寫什麼嘛？
蜻蜓, 看來不能直接改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的話，那行也不會顯示什麼吧！（？）這樣感覺也還不錯，多些組合選擇。
總之，謝謝你的幫忙。（大心）
我現在出現了另個問題。
中間的網頁元素，內容跟標題是無法切齊的。不曉得是怎麼回事......
蜻蜓,這可能是標籤雲內的CSS設定問題, 如padding, margin. 你可以調看看?
我的標籤雲是用無腦程式做的。
我現在反而不知道怎麼改（尷尬）
之前放在sidebar時，沒注意到它是不會切齊的。放到footer時，才注意到。
另個問題。
left-footer會跟center-footer緊接在一塊，怎麼讓它有欄寬，不會接在一塊？我已經是先把兩個欄寬減掉，才分給三個footer，為什麼還會緊接在一塊？
你可以加入margin-right, 從0 px ~ ?? px來調間距試看看.如 margin-right:5px;
其中句尾 ; 是必須要的.
我增加一欄後, 使用IE瀏覽器開啟時, 情況很不穩定, 狀況有1.開啟一半顯示錯誤 2.成功開啟後, 變成亂碼.......
可是使用Firefox開啟卻很正常.....
我找不出問題...可以請您幫忙看一下嗎?
http://lifemirror-tw.blogspot.com/
原版型是http://metamuse.blogspot.com/2007/01/blogger-template-gadget-10-aol-engadget.html
貓你好,
增加一欄只是調整CSS的部分, 應不至於出現你發現的狀況. 有可能是在於其他程式發生不穩定導致. 如果你擔心是這個問題, 建議你先移除這部分的程式.再觀察幾天看看.
剛用ie去試你的blog, 都沒發現問題呢!版型很好看, 不過在800X600解析度下, 寬度會過寬.
Skyvee您好：
我發現讓IE一定出錯的方法了....
這二種方法一定出現錯誤
1. 按重新整理
2. 按一篇文章後, 再按Blog標題連結回首頁
以下為二張出錯的圖示
因為留言版看不到完整網址, 所以我把URL裁斷了...@@
http://s228.photobucket.com/albums/ee42/
lifemirror/Blogger/lifemirror_blogger_IE_error/
終於抓出蟲蟲了....
原來是IE對UTF-8萬國碼的問題, 會對程式碼讀取錯誤,
解決方法是把
＜title>＜data:blog.pageTitle/>＜/title>
移到＜head>下第一排, 如果之後模版改寫後, 第一排被取代了..那麼IE就會讀取錯誤啦~~~
貓, title 一般應該是在head區間啊! :) 不過貓也很厲害, 自己就抓到蟲了.
版主你好:
我按照你這篇教學試做,
十分成功!
但是有個小問題不知怎麼解決.
我想把新邊欄放在左邊,
也把寬度都改了,
主內文480+邊欄200(*2),
全寬設定900.
但是出來的結果左邊欄卻被內文擠到左邊..
該怎麼修改?
我找不到問題出在哪裡??
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;
}
版主:
真是感謝你呀!
我解決了!!
感謝!
還有個額外問題想請教,
我以前使用了很久的banner圖片都能顯現,
(我是直接在html裡頭改的,沒有使用beta版)
但是今天無聊去後台改了一下"網頁元素"裡的"字型和顏色".
結果不知怎麼回事..我原來的banner圖片不見了!!
不曉得skyvee有遇過這種情形嗎?
~><~
這是因為有Skyvee的淺顯易懂的教學篇, 才能成功試出來的, 另外我設計了變化三欄型的版~ 發現如果往下再加第三層, 左右線條會不大對稱~ 怎麼弄都解決不了~~
所以我目前的Bogger是變化三欄二層型的....
Violet, 看起來你的問題已經解決囉!剛連過去看 你header的圖片在ie及firefox下都正常了. :)
貓, 玩部落格最大的成就感, 就是自己改造成功. 我也是一步步 trial and error 後, 深深體會這個中道理的. 能夠套用後, 又再加以變化, 那又更厲害了!
是呀...我搞半天搞不好,後來乾脆換一張新的圖去做banner,沒想到更新之後就OK了,這真是個奇怪的謎呀...
還是很感謝skyvee的熱心幫忙哦:D
不接受新意見。