Nhiều
thành phần mới được thêm vào và việc tùy biến giao diện đòi hỏi phải
công phu hơn nhưng không có nghĩa là không làm được.
Bài viết này hướng dẫn cách chia thành phần header (đầu) thành hai phần
khác nhau, giúp bạn có thể đặt chỗ cho một logo bên trái và treo thêm
một banner bên phải.
Mặc định phần đầu của Blogger chỉ chứa tên blog và miêu tả về blog nằm
ngang trên cùng. Công việc của chúng ta là "cắt" phần đầu này ra làm
hai.
Ở đây xin lấy mẫu SIMPLE đầu tiên làm ví dụ minh họa.
Bước 1. Đăng nhập Blogger, tại thẻ
Design (Thiết kế) |
Edit HTML (Chỉnh sửa HTML) tìm đoạn code sau đây:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thủ Thuật Blog (Header)' type='Header'/>
</b:section>
Và thay bằng:
<b:section class='header' id='header-left' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thủ Thuật Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>
Bước 2. Tiếp tục tìm
header-outer bạn sẽ nhìn thấy như thế này:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
Bây giờ chúng ta thay bằng:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
height: 100px;
overflow: hidden;
}
#header-left{
width: 350px;
float: $startSide;
overflow: hidden;
}
#header-right{
width: 468px;
float: $endSide;
overflow: hidden;
}
.tabs-outer{
clear: both;
}
Và tiến hành lưu lại.
Như bạn thấy trong đoạn CSS trên tôi đã đề nghị kích thước ngang
header-left và
header-right lần lượt là 350px và 468px. Tổng kích thước này không được vượt quá chiều ngang của template.
Tùy vào kích thước logo và banner mà muốn sử dụng cũng như kích thước
của template mẫu hãy điều chỉnh các con số trên cho cân xứng.
 |
| Chiều ngang của template |
 |
| Trước khi thay đổi |
 |
| Sau khi thay đổi và thêm tiện ích HTML/JavaScript (Nội dung là một banner 468x60) |
 |
| Hiển thị trên blog |
Sử dụng logo:
Bạn vừa thấy 350px là chiều ngang của logo, còn chiều cao thì bao nhiêu? Xin thưa chiều cao của logo chính là chiều cao của
header-outer, ở đây 100px. Như vậy bạn cần thiết kế logo có kích thước 350x100.
 |
| Chọn kiểu hiện thị logo |
Tất nhiên đây chỉ là những con số gợi ý, thực tế như thế nào còn tùy
thuộc vào bố cục template, margin, padding và kể cả quan điểm thẩm mỹ
của từng người.
|
cung cap standee
Ý kiến bạn đọc [ 0 ]
Ý kiến của bạn