Từ lúc blog yahoo cho chức năng edit custom theme (tháng 4/06 thì phải) cũng là lúc mình thực sự bắt tay vào việc nghịch ngợm và viết blog vì mình thích những cái có thể làm theo sở thích của mình, không thích sự gò bó của mấy cái theme default. Qua quãng thời gian khá dài, mình đã thấy và làm nhiều kiểu theme hay.

Ở bài trước, mình đã giới thiệu qua về cách nhìn nhận thế nào là 1 theme đẹp, và giải thích câu hỏi tại sao các theme default của blog Yahoo lại có kick cỡ ảnh là: 1500x mà mình tự đặt ra.

Entry này mình xin giới thiệu với mọi người cách làm theme mà mình mới nghĩ ra được cách đây một tháng. Mình thấy với cách làm theme này thì cái theme của chúng ta sẽ đẹp từ ngoài Top Page vào tận trong entry vẫn thấy đẹp. Đầu tiên các bạn hãy xem cái theme mà mình làm này:

Link review (nhớ vào trong entry nhé):

http://360.yahoo.com/theme_360_v18

Khi mới nhìn vào mọi người sẽ tưởng đây là theme làm từ một mảnh (full theme) nhưng thực chất theme này tớ làm từ hai mảnh với:

Top: 1000×4000 pixel với chiều cao là 4000 pixel thì khi vào trong entry thì chúng ta vẫn thấy được các họa tiết trang trí trên theme (các họa tiết này chỉ khi vào trong entry mới thấy vì ở ngoài top page thì các họa tiết ở bottom theme đã che kín toàn bộ theme).

Bottom: 1010×2000 pixel (với chiều cao là 2000 pixel là chiều cao đủ để kín toàn bộ theme).

Bây giờ chúng ta cùng phân tích cái theme này:

1. Trước tiên chúng ta cần lưu ý, blog của Yahoo ưu tiên cho pic của bottom theme nằm ở lớp (layer) trên còn pic của top theme thì nằm ở layer dưới. Chúng ta tưởng tưởng giống như 2 tờ giấy chồng lên nhau ý… Nhưng điểm quan trọng ở đây đó là nó vẫn cho cúng ta nhìn thấy một phần pic của top theme mặc dù chiều cao của bottom theme cao quá so với giới hạn của toàn theme…

VD: Toàn bộ theme có chiều cao là 2000 pixel và bottom theme có chiều cao là 2600 pixel chẳng hạn, với chiều cao là 2600 pixel và lại là layer trên cùng thì đáng nhẽ toàn bộ theme sẽ bị che kín bời bottem theme nhưng không. Nó chỉ cho 1800 pixel là chúng ta nhìn thấy thôi, còn lại là khoảng 200 pixel là cho chúng ta nhìn thấy pic của top theme..

2. Tại sao chiều cao của top theme là 4000 pixel mà trong khi đó chiều cao của bottom theme lại chỉ có là 2000 pixel thôi?

Với kích cỡ là 1000×4000 của top theme thì khi vào trong entry chúng ta vẫn thấy được các họa tiết trang trí trên theme – đây là điểm lợi và cũng là điểm hại… Lúc chúng ta thiết kế bằng photoshop với kích cỡ này khi chúng ta xuất ra một file ảnh .jpg thì size của nó chắc vào tầm khoảng độ hơn 1,5 Mb trở lên (tùy từng họa tiết trên pic có nhiều hay không)… và với kích cỡ quá to này thì việc size cho một pic làm top theme sẽ vượt quá mức 250Kb mà blog yahoo cho phép.

Có cách giải quyết đó là khi chúng ta save để suất ra file ảnh .jpg (khi thiết kế bằng photoshop) thì ở phần save chúng ta chọn là mức low hoặc medium thôi (hoặc kéo thanh trượt nhỏ lại sao khi vừa thấy nhỏ hơn 250 Kb thì thôi). Làm thế thì sẽ làm cho chất lượng ảnh làm theme bị kém đi do phải nén nhiều quá. Chính vì vậy khi thiết kế pic thì chúng ta nên chọn những họa tiết ít màu thôi. Hoặc là cho các họa tiết làm theme có độ transparency (giống pic làm top theme của tớ ấy).

Vì khi vào blog chúng ta sẽ chỉ nhìn thấy khoảng 200 pixel là của phần top theme nên ở vị trí 200pixel trên cùng của pic làm top theme thì chúng ta trang trí sao cho đẹp và hợp với pic ở bottom theme.

Nếu bottem theme có kích cỡ là: 1000 x 4000 như top theme thì độ fân dải của pic làm theme sẽ kém (mà pic của bottom lại là pic mà chúng ta thấy nhiều nhất khi vào một cái blog) vì vậy chúng ta chỉ làm với chiều cao là 2000 pixel thôi. Với việc trang trí họa tiết cho bottom theme thì chúng ta cứ trang trí sao cho kín giống full theme. Nhưng tốt nhất là trang trí họa tiết sao cho kín với chiều cao là 1800 pixel thôi nhé (để tránh trường hợp nhiều blog có chiều cao không đến 2000 pixel vì chiều cao các module không tối đa, ví dụ như module personal hoặc module quickcomment chẳng hạn).

Chả biết còn nói thiếu gì nữa không, chắc là đủ rồi nhỉ. Chúc các bạn làm được theme đẹp.

Antoniblue

Các bài viết khác:

• Lời tạ lỗi của Phamen
• Hãy nổi bật giữa đám đông bằng một Favicon
• Thay đổi kiểu chữ trong Dashboard của WordPress
• Các yếu tố xếp hạng website của Google
• Hãy tạo file robots.txt cho blog
• Đăng ký host và các bước chuẩn bị để cài blog Wordpress
• Google Bid Gap
• Làm Welcome Flash với Blog MyOpera
• Giải thích các thuật ngữ tiếng Anh dùng trong Onsidebet
• Adman
• Giới thiệu các tính năng của Yahoo!Mash
• Các “Sính ngoại Bộ”
• Đối xử thế nào với các ý kiến trái ngược trên blog
• Cách làm theme Yahoo! 360 pro và đẹp – phần 1
• Độ dài của bài viết và mức độ thường xuyên viết bài

Tải phần mềm miễn phí >> Click here!

Hãy theo Phamen trên Twitter!