Bo-blog là một mã nguồn blog rất chuyên nghiệp và có nhiều tính năng vượt trội. Với mã nguồn này, bạn dễ dàn tìm được cho mình một skin ưng ý trong số hàng chục skin được share trên mạng. Tuy vậy, không ít người trong số chúng ta muốn tự edit một skin mang phong cách riêng của mình. Vậy bạn phải làm gì?


*Về phần hình ảnh trong skin của bạn:
1. Trước khi bắt tay vào edit, bạn nên có một phác thảo nhất định về cấu trúc của skin, màu sắc, độ rộng hẹp...
2. Bạn cũng nên chú trọng vào tương quan màu sắc giữa các mục. Ví dụ, menu bạn design màu đỏ mà textbox lại màu xanh thì e rằng sẽ rất khó coi.
3. Bạn không nên để dung lượng file hình ảnh quá lớn, khiến cho việc load site sẽ rất chậm chạp. Khuyến cáo nên sử dụng định dạng .jpg, độ phân giải 72 pixels/inch, save file với quality = 8...

*Bắt đầu edit file .css. bạn hãy mở file styles.css của mình bằng UltraEdit

1. Phần body: (quy định nền cho blog, màu sắc cơ bản cho text)
Trích dẫn
body {
font-size: 13px; (Kích thước font chữ mặc định cho toàn site)
font-family: Tahoma, Arial; (Font chữ có thể hiển thị)
background: url('images/bg.png') #2a3725; (nền của blog, có thể ko dùng ảnh mà dùng mã màu)
background-attachment: fixed;
margin: 0px;
padding: 0px;
color: #b5c0d7;
text-align: center;
}


2. Chữ và mầu chữ cho các link. (ở đây bạn tạm hiểu là tất cả các phần có link, ví dụ như phân loịa bài viết, các menu khác hay lick trong các bài viết.
Trích dẫn
a {
text-decoration: none;
color: #269C08; (Màu chữ hiển thị thông thường)
}
a:hover {
text-decoration: none;
color: #FF9024; (Màu chữ hiển thị khi ta rê chuột lên link)
}



3. Khung nhập liệu. Bạn có một số vị trí hiện thị khung nhập liệu như: nhập comment, nhập ký tự mã kiểm tra...
Trích dẫn
input.text {
height: 20px;
padding: 1px;
border: 1px solid #CFB88C;
color: #000;
background-color: #F0F3DE;
}
input.button {
height: 20px;
border: 1px solid #CFB88C;
border-left: 4px solid #CFB88C;
color: #000000; (Màu chữ hiển thị khi ta rê chuột lên link)
font-weight: bold;
background-color: #F0F3DE; (Màu nền hiển thị của nút bấm, chẳng hạn như nút Gửi đi, Làm lại, bạn cũng có thể thay màu nền bằng hình ảnh)
textarea {
border: 1px solid #CFB88C;
background: #d5eafe;(Màu nền hiển thị trong ô nhập liệu, bạn cũng có thể thay màu nền bằng hình ảnh)
font-family: Tahoma, Arial;
font-size: 12px;
color: #000;
}

}



4. Phần quy định độ rộng của site.
Trích dẫn
#wrapper {
margin:0 auto;
width: 776px; (Kích thước này áp dụng khi bạn design site ở độ phân giải 1024x768)
position: relative;
text-align: left;
}
#innerWrapper {
background: #1e1e1e; (màu nền của toàn bộ site)
width: 100%;
border: 0px solid #444; (Đường bao quanh)
}


5. Mục quy định đầu trang.
Trích dẫn
#header {}
#innerHeader {
background: #1e1e1e url('images/bg_header.jpg') no-repeat;
padding-left: 10px;
padding-right: 10px;
height: 270px;
}



6. Chân trang
Trích dẫn
#footer {
margin-top: 20px;
clear: both;
background: #1e1e1e url('images/bg_footer.jpg') no-repeat;
height: 165px;
}
#innerFooter {
padding: 16px;
padding-top: 12px;
font-size: 12px;
text-align: right;
color: #0c06fb;
}
#innerFooter a{
color: #FF9024;
font-weight: bold;
}

Bài viết được đăng bởi: thanhcanpro
Đăng trên: BạnTôiclub.info - Kết nối tình bạn - Tình Yêu - Câu chuyện cuộc sống - Blog Công nghệ thông tin

BanToiClub.Info - ThanhCanPro chia sẽ cùng bạn tất cả
Cùng chung niềm vui, kết nối bạn bè!

Đánh Giá Cho Bài Viết

Hãy cùng chia sẻ với bạn bè bằng cách
Copy đường link dưới đây gửi đến nick yahoo bạn bè!

--> http://bantoiclub.info/blog/Cach-edit-skin-cho-Bo-Blog-phan-1.htm Bài viết này hay lắm, bạn đọc xem nha!

Mọi thông tin phát hành lại từ BạnTôiclub.info - Kết nối tình bạn - Tình Yêu - Câu chuyện cuộc sống - Blog Công nghệ thông tin xin vui lòng ghĩ rõ nguồn