[ Yahoo! Blog ] Hướng dẫn thiết kế/customise giao diện/skin/theme (P1)


Trong platform mới của Yahoo! 360plus ( Yahoo! Asia Blog ) để đơn giản hóa và thuận tiện hơn cho người dùng, Yahoo! đã bỏ đi phần tùy chỉnh giao diện (skin/theme) của blog qua việc sử dụng mã CSS tùy chỉnh của người dùng (custom user css) trực tiếp trên blog. Tuy nhiên, chúng ta vẫn có thể chỉnh sửa được giao diện của blog thông qua mã CSS bằng cách nhúng mã CSS vào trong các phần mở rộng (tiện ích widget).

*Hướng dẫn:

Đầu tiên các bạn vào Bàng điều khiển: Tại mục Bề ngoài các bạn chọn Tiện ích WIDGET > chọn mộtnguồn bên ngoài bất kì.

Hướng dẫn thiết kế/customise giao diện/skin/theme trang BÀI VIẾT/POST
Tút lại giao diện Yahoo! Asia Blog thông qua các tiện ích WIDGET

Click vào nút Cài đặt > Tick nút HTML (được mặc định) > Đặt tiêu đề cho phần mở rộng là Code CSS (hoặc bất kì – tùy bạn) sau đó các bạn nhúng phần CSS của mình vào trong khung Nội dung các bạn. Bởi vì chúng ta chèn CSS độc lập (bên ngoài các file css) vì vậy nên trước mã CSS chúng ta phải khai báo thuộc tính bằng thẻ <style> và đóng bằng thẻ tương ứng </style> khi kết thúc.

Ví dụ:

Hướng dẫn thiết kế/customise giao diện/skin/theme trang BÀI VIẾT/POST 

*Một số lưu ý khi sử dụng:

1/ Đối với những trình duyệt cũ, không thể nhận ra thẻ <style>. Theo mặc định, thì khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa trong thẻ. Điều này thực sự tệ hại bởi vì như vậy các nội dung trên trang của chúng ta sẽ rối tung lên. Để tránh tình trạng này, bạn nên đưa vào thêm dấu <!– ở trước và –> ở sau khối code CSS. Như vậy, chúng ta sẽ viết mã CSS tùy chỉnh với mẫu sau:

Hướng dẫn thiết kế/customise giao diện/skin/theme trang BÀI VIẾT/POST

2/ Để ẩn/xóa bỏ tiêu đề của WIDGET – Nguồn bên ngoài chúng ta sử dụng CSS:

#widget-externalSource .hd h3{font-size:0px;}/*Code ẩn phần tiêu đề */

hoặc

#widget-externalSource .hd h3{display:none;} /*Code xóa bỏ phần tiêu đề*/

Tổng kết bài viết: Về cơ bản thì việc sử dụng cách thiết kế tùy chỉnh này trên Yahoo! Blog sẽ không có nhiều sự khác biệt so với sử dụng cách tùy chỉnh bên Yahoo! 360plus. Chỉ có một khác biệt lớn nhất là vì CSS được đặt trong một widget/phần mở rộng nằm độc lập bên trong phần trang bài viết/post vậy nên chỉ có trang bài viết/post mới chịu tác động của CSS của chúng ta.

–> Tạm thời chúng ta chưa thể tùy chỉnh giao diện/skin/theme/background của trang bìa và trang hình ảnh bằng code CSS được 

Mọi thắc mắc và các câu hỏi các bạn có thể gửi về địa chỉ e-mail: info@yeuxa.com hoặc để lại ở phần bình luận phía dưới.

Chúc các bạn cuối tuần nhiều niềm vui và hạnh phúc!

Nguồn: http://blog.yahoo.com/cauamthongay