Chúc bạn một ngày tốt lành

Thứ Hai, ngày 26 tháng 4 năm 2010

Làm header cho blogspot

VnTim™  ^-^ Trước đây Blogger.com chưa cho phép chúng ta làm header bằng hình ảnh riêng nếu bạn không tác động đến mã nguồn. Bây giờ thì mọi thứ đã dễ dàng hơn rất nhiều. Bạn chỉ cần có một header được thiết kế sẳn bằng các ứng dụng đồ họa như Adobe Photoshop, Google Picasa,…

Có hai điều lưu ý ở đây:

  • Kích thước của header là bao nhiêu?
  • Header bao gồm cả tiêu đề (title), miêu tả (description)  hay chỉ là ảnh nền cho blog
Về kích thước: Kích thước header phụ thuộc vào mẫu (template) mà bạn chọn. Nói chung các mẫu cho sẵn của blogger.com đều có giao diện cho màn hình 800×600 pixels, vì vậy các kích thước về header luôn nhỏ hơn con số này. Để biết chính xác kích thước header là bao nhiêu bạn vào Template->Edit HTML, kéo thanh trược xuống để tìm đoạn mã như hình bên dưới.

Hình 1.
Bạn thấy đấy, kích thước mẫu của tôi là 750px (mặc định của mẫu Minima là 660px, tôi đã sửa lại và thêm một cột bên trái). Vì vậy bây giờ tôi sẽ làm một cái header chiều rộng (width) 740 x cao (height) 120 (trừ đi phần hai ở hai bên margin 5 + 5 = 10px). Nếu description (miêu tả, nằm dưới title) của bạn nhiều thông tin, thì bạn thiết kế chiều cao nhiều hơn một chút nữa. Tôi chỉ thiết cao 120 px nên bạn thấy còn thiếu một tí!
Sau khi làm xong, vào Template | Add and Arrange Page Elements, chọn edit trên Header, cửa sổ hiện ra như hình.
Làm header cho blogspot

Hình 2.
Tiêu đề và miêu tả cho blog đều có ở đây, điều này đồng nghĩa với việc bạn có thể thay đổi nó, không nhất thiết phải thay đổi từ Setting->Basic.
Hãy chọn đường dẫn đến file hình ảnh header lưu trên máy. Bây giờ thì click Browse để chọn ảnh hoặc paste liên kết đến ảnh vào From the web nếu bạn đã đưa ảnh lên các trang chia sẻ ảnh như bài hướng dẫn về chèn ảnh cho bài viết đã đề cập. Click Save Changes để lưu lại.
Nếu bạn chỉ làm ảnh nền cho header như tôi thì tới đây bạn đã thực hiện xong, còn bạn đã làm một header kiểu nội dung gồm tiêu đề và miêu tả thì bạn vẫn còn việc để làm. Hãy click vào View Blog để xem kết quả, bạn sẽ thấy điều mà tôi vừa nói. Nghĩa là tiêu đề và thông tin miêu tả blog của bạn nằm đè lên header của bạn. Trông xấu xí gớm! Đừng bận tâm, bây giờ hãy trở lại Template | Edit Header, chọn Instead of title and description như hình dưới rồi save bạn sẽ có kết quả như ý.
Làm header cho blogspot

Hình 3.

Chúc bạn có một header đẹp mắt!

3 Comments:

Viet Dung said...

cám ơn nhiều mình làm được rồi nhưng chẳng có cai ảnh nào đẹp cả.
chào mừng bạn ghé thăm web của mình

http://www.cuasotintuc.com/

TRƯƠNG VĂN TÂM said...

không hiểu sao mà mình tìm mãi đoạn code trong html mà khôgn thấy, không phải là mình tìm ẩu hay thế nào đâu, mình đã tìm rất kỹ 4-5 lượt rồi, chỉ thấy mỗi như thế này thôi:

/* Header
----------------------------------------------- */
.header-inner {
padding: 27px 0 3px;
}

.header-inner .section {
margin: 0 35px;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: 115%;
color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}

có gì bạn chỉ giáo giúp
cảm ơn bạn rất nhiều

VnTim™ said...

Đó là do mình hướng dẫn cho mẫu cũ
còn của bạn là mẫu mới bạn tìm đoạn code "tương tự"
"


"

Trong đó 930px là độ rộng của toàn trang cũng như header
360px là độ rộng của sidebar bên phải
nếu bạn muốn thay đổi ko thì thôi

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam