Header Tip : Hình ảnh bên trái và tiêu đề bên phải
IMAGE TO LEFT and TITLE TO RIGHT
[FD's BlOg] - Bài viết trước mình có đưa ra thủ thuật chia Header thành 2 cột. Hôm nay với thủ thuật khác cũng sẽ tạo phần header có dạng như 2 cột. Và với thủ thuật này ta sẽ đưa "ảnh logo" sang 1 bên và "Tiêu đề + Mô tả" sang 1 bên.Khi vào phần chỉnh sửa tiêu đề của blog, ta sẽ thấy có 2 phần. Phần tiêu đề (gồm tiêu đề blog và mô tả blog), phần thứ 2 là logo (banner). Và xuống dưới nữa là lựa chọn ảnh logo nằm sau tiêu đề hay thay thế tiêu đề. Để có thể hiển thị được ảnh sang phía bên trái và tiêu đề sang phải, trước tiên ta phải có 1 tấm hình có kích thước nhỏ hơn chiều rộng của Header.
Với thủ thuật này ta chỉ chỉnh sửa bên CSS mà thôi.
Ví dụ ta có đọan CSS của template Minima như bên dưới:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
- Ở đây chiều rộng là 660px, vậy ta sẽ chọn 1 tấm hình có kích thước khỏang 300px hoặc hỏ hơn. Và tải nó lên blog (trong phần tiêu đề blog), và chọn vị trí là nằm sau "Tiêu đề + Mô tả".
Bấy giờ ta bắt đầu chỉnh sửa CSS. (ở đây ta chỉ chú ý đến 3 class(id) là Header, header h1 và header .description)
1. Tìm đọan CSS sau:(hoặc tương tự)
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
sửa lại là:
#header-inner {
background-position: left;
width:650px;
}
2. Tìm đến CSS của header h1:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
và sửa lại thành:
#header h1 {
margin:0 5px 5px 300px;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
3. Tìm đến CSS của header.description
#header .description {
margin:0 5px 5px;
.........
}
và cũng thay đổi tương tự như của header h1
#header .description {
margin:0 5px 5px 500px;
.........
}
4. Save template lại.
Xem ảnh minh họa bên dưới:
Trước khi chỉnh sửa
Sau khi chỉnh sửa
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Tạo thumb cho bài đăng phổ biến
Comments[ 0 ]
Đăng nhận xét