My OperaTrang trí SideBar cho blog Opera
Sunday, January 28, 2007 4:41:10 AM
Bài 3: Tùy biến Sidebar
Các bạn có thể thay đổi màu của SideBar bằng hình ảnh hoặc một màu nào đó cho phù hợp. Cách thức thay đổi như sau: Vào main. css tìm đoạn code
side H2 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
BACKGROUND: #356ca2;
PADDING-BOTTOM: 2px;
MARGIN: 0px 0px 1px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
TEXT-ALIGN: left
}
.sidebox {
BACKGROUND: #f5f5f5;
MARGIN-BOTTOM: 15px;
BORDER-BOTTOM: #dbdbd5 1px solid
}
.sidebox .pad {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px
}
- side H2 là phần hiển thị tiêu đề của từng box, e.g. About, Tags, Countdowns,...
- sidebox là khoảng cách giữa tiêu đề và nội dung của từng box (bạn thấy có 1 khe rất nhỏ như sợi chỉ ở giữa);
- sidebox.pad là phần hiển thị nội dung của từng box.
Bạn chỉ cần thay đường dẫn của background bằng ảnh nền hoặc màu nền. Nếu bạn muốn tạo khung cho box thì bạn thêm code border (xem lại phần thay đổi background).
Khi thay đổi background, có thể màu của text và hyperlink sẽ không phù hợp nữa.
Bạn có thể thay đổi màu text của tiêu đề ở đoạn code color được in nghiêng. Màu text của nội dung hiển thị trong box nằm trong đoạn code sidewrap. Nếu không được xác định (như ở trên) thì có nghĩa là theo code của cả trang Blog của bạn (nằm trong đoạn code body (xem lại phần thay đổi background). Nếu bạn muốn màu text khác, thì bạn thêm code color: #000000 (thay bằng màu mà bạn muốn) vào đoạn code sidewrap hoặc sidebox.
Màu của hyperlink được xác định trong đoạn code sau
#side A:link { (liên kết)
COLOR: #000
}
#side A:visited { (liên kết đã được xem)
COLOR: #000
}
#side A:active { (liên kết đang hoạt động)
COLOR: #000
}
Lưu ý, những đoạn code này sẽ không áp dụng cho lịch và box download trình duyệt Opera. Muốn thay đổi cách trang trí của hai box này, bạn cần tìm đoạn code sau:
#side CAPTION { (phần hiển thị tiêu đề của lịch, i.e. chữ Calendar)
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
BACKGROUND: #356ca2;
PADDING-BOTTOM: 2px;
MARGIN: 0px 0px 1px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
TEXT-ALIGN: left
}
#calendar { (phần hiển thị lịch)
CLEAR: both;
FONT-SIZE: 10px;
BACKGROUND: url(/community/graphics/users/2/calendar.gif) #efefed;
MARGIN-BOTTOM: 15px;
WIDTH: 190px;
BORDER-BOTTOM: #dbdbd5 1px solid;
border-spacing: 1px
}
#side #getopera H2 { (phần hiển thị tiêu đề box download trình duyệt Opera)
BACKGROUND: #356ca2;
COLOR: #fff
}
#getopera .pad { (phần hiển thị nội dung quảng cáo)
BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top;
COLOR: #fff
}
(Mẹo nhỏ)
Nếu bạn không muốn hiển thị box download trình duyệt Opera, thì bạn chỉ cần viết đoạn code sau vào phần enter CSS:
#side #getopera {
display: none
}
Nguồn : Sưu tập từ một số trang web, blog
Các bạn có thể thay đổi màu của SideBar bằng hình ảnh hoặc một màu nào đó cho phù hợp. Cách thức thay đổi như sau: Vào main. css tìm đoạn code
side H2 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
BACKGROUND: #356ca2;
PADDING-BOTTOM: 2px;
MARGIN: 0px 0px 1px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
TEXT-ALIGN: left
}
.sidebox {
BACKGROUND: #f5f5f5;
MARGIN-BOTTOM: 15px;
BORDER-BOTTOM: #dbdbd5 1px solid
}
.sidebox .pad {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px
}
- side H2 là phần hiển thị tiêu đề của từng box, e.g. About, Tags, Countdowns,...
- sidebox là khoảng cách giữa tiêu đề và nội dung của từng box (bạn thấy có 1 khe rất nhỏ như sợi chỉ ở giữa);
- sidebox.pad là phần hiển thị nội dung của từng box.
Bạn chỉ cần thay đường dẫn của background bằng ảnh nền hoặc màu nền. Nếu bạn muốn tạo khung cho box thì bạn thêm code border (xem lại phần thay đổi background).
Khi thay đổi background, có thể màu của text và hyperlink sẽ không phù hợp nữa.
Bạn có thể thay đổi màu text của tiêu đề ở đoạn code color được in nghiêng. Màu text của nội dung hiển thị trong box nằm trong đoạn code sidewrap. Nếu không được xác định (như ở trên) thì có nghĩa là theo code của cả trang Blog của bạn (nằm trong đoạn code body (xem lại phần thay đổi background). Nếu bạn muốn màu text khác, thì bạn thêm code color: #000000 (thay bằng màu mà bạn muốn) vào đoạn code sidewrap hoặc sidebox.
Màu của hyperlink được xác định trong đoạn code sau
#side A:link { (liên kết)
COLOR: #000
}
#side A:visited { (liên kết đã được xem)
COLOR: #000
}
#side A:active { (liên kết đang hoạt động)
COLOR: #000
}
Lưu ý, những đoạn code này sẽ không áp dụng cho lịch và box download trình duyệt Opera. Muốn thay đổi cách trang trí của hai box này, bạn cần tìm đoạn code sau:
#side CAPTION { (phần hiển thị tiêu đề của lịch, i.e. chữ Calendar)
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
BACKGROUND: #356ca2;
PADDING-BOTTOM: 2px;
MARGIN: 0px 0px 1px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
TEXT-ALIGN: left
}
#calendar { (phần hiển thị lịch)
CLEAR: both;
FONT-SIZE: 10px;
BACKGROUND: url(/community/graphics/users/2/calendar.gif) #efefed;
MARGIN-BOTTOM: 15px;
WIDTH: 190px;
BORDER-BOTTOM: #dbdbd5 1px solid;
border-spacing: 1px
}
#side #getopera H2 { (phần hiển thị tiêu đề box download trình duyệt Opera)
BACKGROUND: #356ca2;
COLOR: #fff
}
#getopera .pad { (phần hiển thị nội dung quảng cáo)
BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top;
COLOR: #fff
}
(Mẹo nhỏ)
Nếu bạn không muốn hiển thị box download trình duyệt Opera, thì bạn chỉ cần viết đoạn code sau vào phần enter CSS:
#side #getopera {
display: none
}
Nguồn : Sưu tập từ một số trang web, blog
(38%)
Ngo'sngongovn # Sunday, March 25, 2007 10:46:07 AM
.•´´¯`••._.• P&C`•.¸¸.•´´¯`••xuancuongyb # Monday, March 26, 2007 4:36:54 AM
- Thay Css thì bạn có thể tham khảo ở trang phamlam.info
- Chủ yếu bạn tập trung vào phần head, foot, banned là ok
Nếu bạn thích mình sẽ hướng dẫn cụ thể hơn cho
Anonymous # Monday, June 4, 2007 6:09:59 AM
văn lộcVăn Lộc # Wednesday, September 19, 2007 3:56:35 AM
văn lộcVăn Lộc # Wednesday, September 19, 2007 3:58:13 AM
pas la iloveyou
child2606 # Saturday, October 27, 2007 1:44:51 PM
Minh thay blog ban dep qua
minh cung muon tao nhu vay, lam theo huong dan cua ban. Nhung ma cai main.css minh tim hoai khong biet no na`m dau ca.
vao sustom stle sheet cung chang thay
chi minh cach tim ra no di
Thanks nhieu lam!!!!
Anonymous # Tuesday, June 3, 2008 4:32:57 AM
Anonymous # Saturday, April 25, 2009 12:47:00 PM
yugiForMyLoVe0610 # Friday, May 15, 2009 12:40:09 PM
Forever love 10A1forever10a1 # Tuesday, June 9, 2009 3:37:09 AM
nguyễn thanh linh Arc-ThanhLinh # Wednesday, June 24, 2009 10:58:03 AM
mình vào chổ nào vậy bạn
thief9x # Thursday, June 25, 2009 1:38:14 AM
Cảm ơn trước nhé !
singerboy # Friday, July 24, 2009 8:28:56 AM
Nguyễn Văn Hòahoangbachhai22591 # Saturday, August 8, 2009 11:53:52 AM
Hướng dẫn cho mình nhé !!
đây là blog của mình hoamai.forever.as
thanks
Nguyễn Văn Hòahoangbachhai22591 # Saturday, August 8, 2009 12:20:14 PM
làm slide ảnh chạy ở box photo như thế nào vậy ?
Anonymous # Saturday, September 5, 2009 3:53:43 AM
Anonymous # Saturday, September 5, 2009 3:54:35 AM
singerboy # Saturday, September 5, 2009 11:12:33 PM
chung minh lam ban nhau duoc ko
singerboy # Saturday, September 5, 2009 11:13:08 PM
NGUYỄN NHẬT TRUNGnhadatcuchi # Friday, April 16, 2010 5:07:56 AM
Thanks.
NT
Đặng Lê HuySaphiraCK # Saturday, June 5, 2010 10:10:39 AM
otroblog # Friday, June 18, 2010 2:45:29 PM
have a nice day
i'm nh0kimnhok # Saturday, June 19, 2010 3:53:04 AM
i'm nh0kimnhok # Saturday, June 19, 2010 3:55:03 AM
Mun Nguyenngoclan2010 # Friday, September 24, 2010 5:26:41 AM