Làm sao đây khi mà bạn muốn thêm hiệu ứng mới vào blog mà cũng không muốn bỏ các code cũ đi. Thật là nan giải.

Nhưng mình có hướng giải quyết cho bạn : Rút gọn code.  Nghe thế bạn sẽ thắc mắc code thì có sẵn rồi làm sao mà rút gọn được, rút gọn thì code làm sao còn có tác dụng được nữa.  Câu trả lời là ta hoàn toàn có thể rút gọn code mà vẫn giữ nguyên tác dụng ban đầu.    Ta cùng xem qua các kiểu rút gọn mà mình đang áp dụng nhé :   

Ví dụ nếu bạn có code như sau :

#blast .rc div {background:transparent;}
#blast .rc {background:transparent;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}

thì bạn có thể rút gọn nó thành:

#blast .rc div, #blast .rc, #blast .rc_bd div.rc_bc, #blast .rc_bd, #blast .rc_ft, #blast .rc_ft div {background:transparent ;}

Tác dụng của code cũ không hề bị thay đổi mà code lại ngắn hơn. Để sử dụng cách này bạn chỉ cần gôm các phần cùng tính chất lại rồi viết liên tiếp phân tách nhau bởi dấu ",". Tương tự cho một ví dụ khác:

.privacy, #introduction_profile p, #footer .ft .rights, .mod-alist-folderbar , .tag_content , #article_list_module .mod-alist-tagsbar em, .total , #comment_new strong, #article_new a, #subscribe_highlight a, #folder a, #photo_highlight a, #mod-tagged-frd-article a, #update_date .date, #guestbook_entries a, #calendar td, #comments-listing * ins , .mod-relatives .bd li a , .mod-relatives .info {color:#F0F;}

Lấy blog olympia làm ví dụ, đây là bảng có sẵn của Plus được chỉnh sửa lại :




Màu chủ đạo là màu #0000FF. Khi để bảng như thế, phần lớn các màu chữ thanh tiêu đề sẽ là màu #0000FF. Nhờ thế khi dùng code áp dụng màu cho blog thì code đã được giảm bớt so với không dùng bảng có sẵn

#article_list_module a, #subscribe_highlight p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container * .content, #mod-tagged-frd-article ins a, #footer .ft .info a {color:#0000FF;}

Ngoài ra bạn cũng nên chọn một hay hai màu chủ đạo cho blog để khi sử dụng code áp dụng màu chữ cho các thành phần sẽ tiết kiệm hơn. Ví dụ code áp dụng màu các phần của olympia gồm hai màu #0000FF (màu xanh dương đậm) và #FF00FF (màu hồng).

.privacy, #introduction_profile p, #footer .ft .rights, .mod-alist-folderbar , .tag_content , #article_list_module .mod-alist-tagsbar em, .total , #comment_new strong, #article_new a, #subscribe_highlight a, #folder a, #photo_highlight a, #mod-tagged-frd-article a, #update_date .date, #guestbook_entries a, #calendar td, #comments-listing * ins , .mod-relatives .bd li a , .mod-relatives .info {color:#F0F;}

#article_list_module a, #subscribe_highlight p, #calendar .hd, #calendar .hd .titlebar .bd a, #comment_container * .content, #mod-tagged-frd-article ins a, #footer .ft .info a {color:#00F;}

Ví dụ đây là code trang trí khung tìm kiếm ở module bài viết

.mod-alist-searchbox input.ipt {background:transparent url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-top-color:#0000FF;border-left-color:#0000FF;border-right-color:#0000FF;border-bottom-color:#0000FF;}

có thể viết rút gọn lại thành

.mod-alist-searchbox input.ipt {background:transparent url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Hover/2.gif);border-color:#0000FF;}

Plus hiện giờ trong các code chia sẻ phần lớn sử dụng màu sắc dạng hex, ví dụ #FFFFFF(6 chữ số, ký tự). Có một cách rút gọn #FFFFFF có thể viết #FFF, hoặc #CC0066 viết thành #C06. Có nghĩa là chia 6 số, ký tự đó thành 3 nhóm từng 2 ký tự một, nếu cả 3 nhòm đó đều là từng nhóm hai số hay ký tự giống nhau ta có thể rút gọn được. #AAFF00 có thể rút gọn thành #AF0, nhưng #BC00DD không thể rút gọn được.

Ngoài ra các bạn cũng nên chú ý đến độ dài code CSS của mình và tiết kiệm dần dần.  Trước hết bạn copy code CSS vào word rồi chọn trên thanh menu tool >>> Word count. Bạn xem dòng Characters (no space) nhé, khoảng trên dưới 17000 là code bạn gần full rồi đó 

Đó là một số cách rút gọn mà olympia biết và áp dụng.  Còn một số cách rút gọn nữa nhưng hoặc là code chia sẻ trên Plus đã rút gọn sẵn (như code background), hoặc là việc trang trí không cần thiết dùng đến.

Theo thuthuatblog360plus

   "Tìm hiểu Vũ trụ mênh mông huyền bí"     www.bachkhoatrithuc.vn