Chia header thành 2 phần
Đăng ký dịch vụ lưu
trữ đám mây: Dropbox (2GB miễn phí, có thể
thêm 20 GB nếu mời thêm bạn bè, kích hoạt Camera Upload...) hỗ trợ hot link
dùng lưu file .css, .js đặt trực tiếp lên website băng thông lên đến 20
GB/ngày. OneDrive của Microsoft (tên cũ là SkyDrive, 7GB miễn phí, có thể thêm 8GB
nếu mời thêm bạn bè, kích hoạt Camera Roll...) không hỗ trợ hot link tương tự
các dịch vụ đám mây khác như Google Drive, Box, SugarSync, Mega... Sau khi đăng
ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng dành cho điện thoại, máy
tính bảng để đồng bộ dữ liệu giữa các thiết bị. Khi bạn đăng ký theo link giới
thiệu ở đây, bạn sẽ được cộng thêm 500MB với OneDrive ngoài dung lượng miễn phí
ở trên.
Kể từ khi đưa vào sử
dụng Template Designer mã nguồn mẫu do Blogger đề xuất đã thay đổi rất nhiều so
với những mẫu được sử dụng trước đó. 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à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.
Hãy cùng chia sẻ với Thủ Thuật Blog cách làm của bạn.
0 nhận xét:
Đăng nhận xét