香港新浪網 MySinaBlog
« 上一篇 | 下一篇 »
軒爸湊仔公 | 26th Jan 2007 | Blog事 | (1373 Reads)
一直覺得, 二直行設計看起來太狹窄. 小弟已將本Blog改成三直行面版設計, 方法在這裡跟大家分享一下:

1. 修改自訂項目
Picture
加入一個自訂項目, 「自定名稱」一欄為一個空隔. (不能甚麼也不給)
自訂項目的內文為:</div></div><div id="sidebar2"><div>

Picture
把該項目加入Sidebar.
把第一直行(column)的項目, 放到該自訂項目之上. 第二直行的, 放到自訂項目之下. 以圖中例子, 「軒軒相集」和「新聞交換」將會放到第二直行.

2. 修改CSS
Picture
找出.sidebar區段
整段複製, 並將所有.sidebar改成.sidebar2
在.sidebar區段內, 加上float: left;屬性.
在.sidebar2區段內, 加上float: right;屬性.
在.sidebar區段內, 加上width: 140px;屬性. (140px為建議大小, 可改)
在.sidebar2區段內, 加上width: 140px;屬性. (140px為建議大小, 可改)

Picture
在#document區段內, 把width屬性加大. 但加大多少, 就得自己試試. 以我的Blog來說, 原本是760px, 改成900px.

Picture
在#main_sidebar區段內, 把width屬性加大. 基本上, #document加大多少, #main_sidebar就加大多少.
其實, 在.sidebar, .sidebar2, #document 和 #main_sidebar的width是互相影響的, 若不是CSS專家, 自己得反覆調試才能達到最佳效果.

好囉好囉, 騰出的空間, 可以有位放Google AdSense, 討點奶粉錢囉!
不過, 經Google Analytics分析, 讀者當中, 有大約7%的人在使用800x600解析度.
三直行設計, 有多少是犧牲了800x600的用家成就出來的, 所以, 我可要向那7%的朋友致歉!

[16] Pauline Smith

Bump birthday buy testosterone suspension online he'll pin. Shoot harmful steroids other whine... Her turkey truth about steroids 9gag cover moist. Always name buy testosterone powder bundle.


[引用] | 作者 british dragon durabol | 14th May 2016 | [舉報垃圾留言]

[15] Re:
Lamji :
勁呀~真係要偷下師先得~
不過三直行似乎應用唔到嚮我個blog添~
haha~

蓄錢買個16比9既LCD啦!~~


[引用] | 作者 大塚日月 | 5th Feb 2007 | [舉報垃圾留言]

[14] Re:

對, 應該是列.
不過「列」讓人看起來不太能夠意會, 「行」又如你說的不正確, 所以煞有介事地用了「直行」囉.

cow :
我覺得,應該叫列,而不叫行
不過這是技術之外的事

[引用] | 作者 軒爸 | 30th Jan 2007 | [舉報垃圾留言]

[13] Re:

別客氣, 你都試下吖.

團長‧K~ :
實用實用~~~ thx for share

[引用] | 作者 軒爸 | 30th Jan 2007 | [舉報垃圾留言]

[12]

我覺得,應該叫列,而不叫行
不過這是技術之外的事


[引用] | 作者 cow | 30th Jan 2007 | [舉報垃圾留言]

[11]

實用實用~~~ thx for share


[引用] | 作者 團長‧K~ | 29th Jan 2007 | [舉報垃圾留言]

[10] Re:

此技巧只適用於700多呎(px)的單位.
你屋企有成千呎, 的確唔太適用.

Lamji :
勁呀~真係要偷下師先得~
不過三直行似乎應用唔到嚮我個blog添~
haha~

[引用] | 作者 軒爸 | 29th Jan 2007 | [舉報垃圾留言]

[9]

勁呀~真係要偷下師先得~
不過三直行似乎應用唔到嚮我個blog添~
haha~


[引用] | 作者 Lamji | 29th Jan 2007 | [舉報垃圾留言]

[8] Re:

已改, THX.

輝太郎 :
發現少許筆誤: 在.sidebar區段內, 加上width: 140px;屬性. (140px為建議大小, 可改)咁快手整完@@~仲出埋tutorial!勁!

[引用] | 作者 軒爸 | 27th Jan 2007 | [舉報垃圾留言]

[7] Re:

八直行? 呵呵, 四直行已經好核突囉.

二氧化碳 CO2 :
呵,原來可以咁玩架?!
第日有人玩八直行,真係唔知點算咯,哈~
CO2

[引用] | 作者 軒爸 | 27th Jan 2007 | [舉報垃圾留言]

[6] Re:

你都試下吖. 有唔明隨便問. :)

貝兒 :
多謝分享!,三行就唔洗令個sidebar太長喇~

[引用] | 作者 軒爸 | 27th Jan 2007 | [舉報垃圾留言]

[5] Re:

哈哈, 別客氣.

kitB :
好勁呀!多謝分享!


[引用] | 作者 軒爸 | 27th Jan 2007 | [舉報垃圾留言]

[4]

發現少許筆誤: 

在.sidebar區段內, 加上width: 140px;屬性. (140px為建議大, 可改)

咁快手整完@@~仲出埋tutorial!勁!


[引用] | 作者 輝太郎 | 26th Jan 2007 | [舉報垃圾留言]

[3]

呵,原來可以咁玩架?!

第日有人玩八直行,真係唔知點算咯,哈~

CO2


[引用] | 作者 二氧化碳 CO2 | 26th Jan 2007 | [舉報垃圾留言]

[2]

多謝分享!,三行就唔洗令個sidebar太長喇~


[引用] | 作者 貝兒 | 26th Jan 2007 | [舉報垃圾留言]

[1]

好勁呀!多謝分享!


[引用] | 作者 kitB | 26th Jan 2007 | [舉報垃圾留言]

 

軒軒相集
軒軒 in Flickr
>>進入<<

This is a Flickr badge showing public photos from jessemok. Make your own badge here.
Google廣告
最新留言
新聞交換
MySinaBlog 精選文章