Bài 5: THÊM BỘ ĐẾM VÀ CHAT VÀO BLOG

1. Bộ đếm cho bạn biết có bao nhiêu người truy cập vào blog của bạn
Để thêm bộ đếm bạn vào Trang này đăng ký một tài khoản
- Tạo một bộ đếm theo ý thích
- Tạo HTML
- Chèn đoạn Code vào blog
2. Thêm CHAT
- Các bạn thêm đoạn code vào blog

[IMG=http://opi.yahoo.com/online?u= nick chat của bạn &m=g&t=2&l=us]

- OK, bây giờ chỉ việc view thành quả của mình

Desgin by: 360blog.kiss.vn

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

Bài 1: Trang trí bài viết đẹp
1) Dùng IE (6 trở lên) để truy cập vào trang http://atlantisboy.hostrocket.com/skinmsg/

Trang này sẽ tự động nạp các dữ liệu cần thiết vào các mục "Dịch vụ Blog", "Các site skin"...

2) Paste bài viết ở dạng mã HTML của bạn vào trường "Your HTML Code"

3) Ở phần Dịch vụ Blog, bạn chọn "OPERA"

3) Trong mục "Các site skin", bạn chọn "Atlantisboy_Hostrocket" hoặc những site skin khác, những skin hiện có trên host này sẽ hiện ra tất cả trong "Danh sách skin"

4) Chọn skin để xem mẫu.

5) Nếu skin đã load thành công, trang web sẽ thông báo "Click nut tao ma HTML de xem ket qua".

6) Click nút "Tạo mã HTML", một cửa sổ sẽ bung ra, trong đó có chứa PREVIEW và đoạn code HTML.

7) Copy đoạn code HTML đó, paste vào Opera Editor. Bạn có thể trang trí thêm nếu bạn hiểu mã HTML.

Nguồn: Sưu tập từ một số trang web, blog