Saturday, June 25, 2011

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: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-leftheader-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.

Tham gia Cộng đồng sử dụng Blogger Việt Nam trên Facebook, giải đáp thắc mắc, mẹo vặt, chia sẻ kinh nghiệm sử dụng Blogger (BlogSpot)...