Thứ Ba, 18 tháng 12, 2012

Tùy chỉnh Heading Style-Tiêu đề bài viết cho Blogger

Tùy biến Tiêu đề (Heading) Sử dụng CSS đơn giản - Dành cho Blogspot
Có sáu kiểu Heading cho các bạn chọn Demo chính là các tiêu đề:
☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin> (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ ]]></b:skin> (Ứng với mỗi một mẫu là tiêu đề minh họa ngay trên nó).
Kiểu Heading có một đường viền phía dưới:

.post h3{
color:#0080ff;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:2px;
}
Kiểu Heading có một đường viền phía trên và một phía phía dưới:
.post h3{
color:#0080ff;
border-top:1px solid #289728;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:3px;
}
Kiểu Heading có một đường viền bao xung quanh:
.post h3{
color:#0080ff;
border:1px solid #289728;
font-size: 12pt;
padding:2px;
}
Kiểu Heading có hiệu ứng khi dê chuột:

.post h3{
color:#0080ff;
border-top:1px dotted #289728;
border-bottom:1px dotted #289728;
font-size: 12pt;
}
.post h3:hover{ /*h4*/
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #289728;
color:#fff;
}
Kiểu Heading bao quanh bởi đường viền và nền:
.post h3 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h3 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 1px solid #289728;
background-color: #fff;
}
Kiểu Heading sử dụng một hình ảnh phụ và hiệu ứng khi dê chuột:
.post h3 {
background: #fff url(URL Picture) top left repeat-y;
font-size: 12pt;
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h3:hover {
color: #289728;
}
Thay thế URL Picture thành hình ảnh của bạn. Hình ảnh này có kích thước là 45 x 45pxhoặc nhỏ hơn
6- Lưu mẫu lại.
Tùy biến thuộc tính của mã CSS cho các tiêu đề (heading)
Tất cả các mã CSS ở trên tùy chỉnh đơn giản như hướng dẫn dưới đây,
1. Thay đổi chiều rộng đường viền, kiểu dáng và màu sắc chỉnh sửa mã như sau:,border:1px solid #0080ff
1px là độ dày/chiều rộng đường viền
solid là kiểu dáng đường viền dạng gạch liền. Bạn có thể thay đổi kiểu dáng đường viền gạch liền (solid) thành dạng chấm (dotted) hoặc gạch ngang liền (dashed)
#0080ff là màu sắc đường viền.
2. Để Thay đổi cỡ chữ, chỉnh sửa đoạn mã như sau: font-size: 12pt Nếu bạn muốn kích thước văn bản tăng hoặc giảm thì chỉnh sửa tăng hoặc giảm giá trị này 12pt
3. Thay đổi màu chữ, chỉnh sửa mã tương tự như thế này: color: #0080FF

Không có nhận xét nào:

Đăng nhận xét