Trong phiên bản 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ột nguồn bên ngoài bất kì.
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ụ:
*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:
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
0 nhận xét:
Đăng nhận xét