Skip navigation.

Trang trí SideBar cho blog Opera

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

Thay đổi bố cục SIDEBARThêm chương trình nghe nhạc vào Blog

Comments

Ngo's 25. March 2007, 10:46

chi minh cach thay CSS di,minh thay cai CSS cua U dep lam do

.•´´¯`••._.• P&C`•.¸¸.•´´¯`•• 26. March 2007, 04:36

chi minh cach thay CSS di,minh thay cai CSS cua U dep lam do


- 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 P:
Nếu bạn thích mình sẽ hướng dẫn cụ thể hơn cho

Anonymous 4. June 2007, 06:09

Anonymous writes:

hhhhuuuuuuuuu

văn lộc 19. September 2007, 03:56

ban vao lam dum minh blog dc hEm

văn lộc 19. September 2007, 03:58

blog cua minh ne` my.opera.com/cochieu
pas la iloveyou

child2606 27. October 2007, 13:44

(xin loi vi khong co bo go)

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 3. June 2008, 04:32

Netpatidu writes:

ban oi chi cho minh cach nao tao ra : TAGS giong nhu cua ban di
roi con cac link o duoi TAGS khi click vao thi no hien vo trong
minh co tim hiu nhung khong biet cach nao de tao ca
mong ban chi giup
hihihi

Anonymous 25. April 2009, 12:47

Anonymous writes:

dfghfdgdfg

yugi 15. May 2009, 12:40

Ban co cai them nao` ve tinh yeu ma`..mau` chu? dao la` Toi' ti'..Nhu den voi trang ko..!!

Forever love 10A1 9. June 2009, 03:37

lam` sao de them cai' phan` nhu nhac truc tuyen hay show games vao` day ban oi!!! pm minh` voi'

nguyễn thanh linh 24. June 2009, 10:58

main.css
mình vào chổ nào vậy bạn

thief9x 25. June 2009, 01:38

Tui gà lắm, mún nhờ bạn làm giùm cái blog mà hok bít có được hem ?
Cảm ơn trước nhé !

singerboy 24. July 2009, 08:28

mình mới tham gia blog thôi huy vọng được sự giúp đỡ của các bạn nhiều

Nguyễn Văn Hòa 8. August 2009, 11:53

bạn có thể dậy mình cách làm các tags xếp thành từng dòng như của bạn được không ? một số mục ở bên trái trông giống như một trang web vậy !!!
Hướng dẫn cho mình nhé !!
đây là blog của mình hoamai.forever.as
thanks

Nguyễn Văn Hòa 8. August 2009, 12:20

mà sao mình không có khung photo như của bạn nhỉ ?
làm slide ảnh chạy ở box photo như thế nào vậy ?

Anonymous 5. September 2009, 03:53

heokon ~ luv ~ tet writes:

minh moi tham gia vao thiet ke blog thui a. mong dc su chi giao cuna~ toan the? cac' huynh de! hehe

Anonymous 5. September 2009, 03:54

heokon ~ luv ~ tet writes:

minh moi tham gia vao thiet ke blog thui a. mong dc su chi giao cuna~ toan the? cac' huynh de! hehe

singerboy 5. September 2009, 23:12

blog dep do chu
chung minh lam ban nhau duoc ko

singerboy 5. September 2009, 23:13

huy vong lan sau se noi nhieu hon

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

January 2010
S M T W T F S
December 2009February 2010
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30