Monday, June 4, 2007

Làm header cho blog

Đăng ký dịch vụ lưu trữ đám mây: Dropbox, Mediafire, OneDrive. Sau khi đăng ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng điện thoại - máy tính bảng để đồng bộ dữ liệu.

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) (ví dụ trang http://giangdaytructuyen.blogspot.com) hay chỉ là ảnh nền cho blog (ví dụ blog của tôi đây)?

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 800x600 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.



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ư ý.



Hình 3.

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

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)...

10 comments:

  1. Blog của mình cũng viết về thủ thuật Blogger.
    Link 2 blog với nhau nhé
    http://gman-blog.blogspot.com/

    ReplyDelete
  2. OK, bạn add link đến trang của mình rồi thông báo cho mình biết nhé!

    ReplyDelete
  3. Anh Nhân chỉ em cách làm cái thanh ngang giống như thế này với, em cám ơn trước:

    Thanks to 0gian.com for Free image hosting
    http://0gian.com/ditch@iok/images/368h17386e78cvtc64.png

    ReplyDelete
  4. #sidebar-wrapper { background-image: url( http://www.google.com.vn/imglanding?q=hinh%20anh%20blog%20dep&imgurl=http://img.tamtay.vn/files/photo2/2009/9/16/20/666094/4ab0e23f_0d84ea2d_hinh-nen-cho-blog-1_resize.jpg&imgrefurl=http://photo.tamtay.vn/photo/view/188912__4&usg=__YHGctwCeLnXDssCtVboOOmwwMdk=&h=700&w=700&sz=231&hl=vi&itbs=1&tbnid=1pvpJIPCSrv3xM:&tbnh=140&tbnw=140&prev=/images%3Fq%3Dhinh%2Banh%2Bblog%2Bdep%26hl%3Dvi%26gbv%3D2%26tbs%3Disch:1&gbv=2&tbs=isch:1&start=6#tbnid=1pvpJIPCSrv3xM&start=10 );

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Header với banner có khác nhau không ạ?

    ReplyDelete
  7. bạn ơi, giúp mình chút!
    Sao mình vào Template rồi không nhấn vào Edit HTML được, chỉ nhấn vào custom được thôi

    ReplyDelete
  8. Bài viết hay!
    http://ptconlinevn.blogspot.com/

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!

Do gần đây nhận rất nhiều spam bán thuốc từ nước ngoài, tạm thời để bình luận bạn bắt buộc phải có tài khoản OpenID hoặc Google. Chức năng này sẽ được khôi phục khi trình trạng spam được cải thiện. Xin lỗi về sự bất tiện này.