Bài mới nhất

Sửa Đóng
Thư mục: Yahoo! 360Plus |
Quan trọng
Đăng ngày: 22:29 14-08-2009



Bài trước : [360Plus Medium] Khái niệm theme và một số khái niệm khác


Ở bài trước chúng ta đã biết cách chọn theme có sẵn của Plus. Những có vẻ như những theme có sẵn đó không được đẹp cho lắm và số lượng để lựa chọn lại ít ỏi. Vì vậy hôm nay chúng ta sẽ học cách chèn một hình khác làm theme cho Plus


Đầu tiên ta cần có link direct của hình ta muốn làm hình nền. Nếu muốn lấy hình trong máy tính làm hình nền thì trước hết bạn cần up hình đó lên các host hình ảnh. Tham khảo thêm ở đây >>> [360Plus Ready] Đăng ký và sử dụng tài khoản ở Photobucket và ImageShack. Hoặc bạn thấy một tấm hình trên mạng mà muốn làm hình nền thì nhấp chuột phải chọn Copy Image Lication. Chức năng này chỉ có ở Mozilla Firefox. Để cài đặt và sử dụng Mozilla Firefox thì tham khảo bài viết sau >>> [360Plus Ready] Cài đặt và sử dụng trình duyệt web Mozilla Firefox



Sau đó ở module BlackBox ấn nút Thiết kế chọn chữ Theme



Đánh dấu chọn ở chế độ tự chỉnh sửa rồi ấn nút Tiếp



Bảng chỉnh theme hiển thị. Chú ý đến khung Ảnh nền, hiện tại khung đó đang chứa link của hình theme ta chọn từ theme có sẵn ở bài viết trước



Xóa link có sẵn ở trong khung Ảnh nền. Lấy link direct mà ta đã lấy ở trang photobucket, ImageShack hoặc copy image location cho vào khung ấy rồi ấn nút Xong



Theme đã được áp dụng cho blog



Hình nền này được áp dụng không chỉ cho trang chính của blog mà còn áp dụng cho nhiều trang khác của blog, ví dụ trang profile



Bảng chỉnh theme nói ở trên giúp ta chèn hình nền cho blog mà không cần biết đến code CSS. Thực ra bảng đó đã giúp ta "viết" code sau và đưa vào blog

body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list, body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery{background:url(http://vectorwallpapers.net/walls/vector_world-1280x1024.jpg) repeat;}

Phần đầu của code là các trang được áp dụng code

body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list, body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery

Mỗi thành phần được ngăn cách nhau bởi dấu "," là tên của mỗi trang được áp dụng. Nhưng olympia nhận ra quá nửa trong số đó là tên trang "không có thât" hoặc là olympia không tìm thấy tên trang đó, hoặc là BQT Plus để dành cho sự xuất hiện các trang mới. Sau khi kiểm tra thì olympia xác định được danh tính của một số trang sau:

body.blog_my - trang chính >>> http://vn.myblog.yahoo.com/olympia41124

body.comment_listing - Gồm các trang : kiểm soát lời bình, blog yêu thích, blog về tôi >>> http://vn.myblog.yahoo.com/olympia41124/comment_centrehttp://vn.myblog.yahoo.com/olympia41124/subscription - http://vn.myblog.yahoo.com/olympia41124/who_tag_me

body.guestbook - trang bảng tin nhắn >>> http://vn.myblog.yahoo.com/olympia41124/guestbook

body.comment_list - trang mạng lưới blog (bạn bè, ai kết mình, ai mới vào, sổ đen ...) >>> http://vn.myblog.yahoo.com/olympia41124/buddy_list

body.post_gb - trang trả lời bản tin nhắn >>> http://vn.myblog.yahoo.com/olympia41124/gbpost

body.profile_view - trang hồ sơ cá nhân (profile) >>> http://vn.myblog.yahoo.com/olympia41124/profile

body.gallery - trang tất cả hình ảnh trong album >>> http://vn.myblog.yahoo.com/olympia41124/gallery

body.photo_big - trang xem từng ảnh trong album >>> http://vn.myblog.yahoo.com/olympia41124/updates

body.vitality_updates - trang cập nhật >>> http://vn.myblog.yahoo.com/olympia41124/updates


Như vậy code CSS để chèn theme dạng một mảnh vào Plus đã được rút gọn lại. Code mẫu :

body.blog_my, body.comment_listing, body.guestbook, body.comment_list, body.post_gb, body.profile_view, body.gallery, body.photo_big, body.vitality_updates  {background:#FFFFFF url(http://vectorwallpapers.net/walls/vector_world-1280x1024.jpg) repeat fixed top center;}/*olympia41124*/

Phần sau của code

{background:#FFFFFF url(http://vectorwallpapers.net/walls/vector_world-1280x1024.jpg) repeat fixed top center;}

có thể thay đổi theo ý muốn của bạn

#FFFFFF : mã màu của nền trang, thông thường khi hình nền chưa kịp load vì một lý do nào đó (mạng chậm, lag...) thì nền sẽ mang màu quy định này. Bạn có thể thay đổi mã màu này theo ý muốn, nhưng lời j=khuyên được đưa ra là nên lấy màu tương tự với màu của ảnh làm hình nền. Ngoài ra thay vì dùng mã màu chúng ta có thể sử dụng chữ transparent để thay thế cho #FFFFFF.

url(http://vectorwallpapers.net/walls/vector_world-1280x1024.jpg) : quy định link hình sẽ được làm hình nền. Có thể thay đổi http://vectorwallpapers.net/walls/vector_world-1280x1024.jpg bằng link hình mà bạn muốn.

repeat : quy định tính lặp hay không lặp của hình. Khi hình làm nền nhỏ hơn màn hình thì mặc định nó sẽ được lặp cả về chiều ngang và chiều dọc để tràn hết màn hình. Có thể thay thế repeat bằng các giá trị khác :
no-repeat : không lặp lại
repeat-x : lặp lại theo chiều ngang
repeat-y : lặp lại theo chiều dọc

fixed : quy định tính cố định hình khi di chuột cuộn trang. Có thể thay fixed bằng scroll nhưng vì scroll là mặc định nên không cần ghi scroll mà chỉ cần đơn giản xóa đi fixed cũng được.

top center : quy định hình sẽ được chèn ở vị trí nào của blog. Bạn không cần hiểu ý nghĩa phần này nhiều lắm. Chỉ cần thay đổi top center bằng một trong những kiểu sau cho đến khi bạn thấy đẹp và vừa ý :
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Ở trên là cách chèn code CSS để chèn theme một mảnh cho Plus. Ngoài ra ta cũng có thể sử dụng code sau để chèn theme một mảnh cho blog, thay link hình bằng link bạn muốn

html {background:transparent url(http://vectorwallpapers.net/walls/vector_world-1280x1024.jpg) repeat fixed top center;} /*olympia41124*/
body.blog_my, body.comment_listing, body.guestbook, body.profile_view, body.gallery, body.vitality_updates, body.photo_big, body.comment_list, body.post_gb {background:transparent;}



Bài tiếp theo : [360Plus Medium] Ảnh hưởng của độ phân giải và trình duyệt web

Bài viết về bạn hoặc có tag tên bạn:

  • Chưa có bài nào có liên quan.

Người đăng ký yêu thích blog này cũng đồng thời thích:

  • Chưa có blog yêu thích nào có liên quan.