Trích dẫn Báo cáo Tổng hợp CSS dành cho new blogger

Thư mục: 360 Plus |

Đăng ngày: 10:43 09-04-2009

Chào các bạn, hôm nay Kim tổng hợp mo^t số kĩ thuật cơ bản dành cho các bạn mới tạo blog, nhìn thì đơn giản nhưng nếu thiếu nó thì không được đấy các bạn ạ!! Một số kĩ thuật rất đơn giản như tạo khung hình cho bài viết, các làm biến mất tên module.... Kim cũng ko biết bắt đầu từ chỗ nào nữa vì nếu đơn giản quá thì sẽ khiến các bạn chán mà khó quá thì lại có bạn ko biết làm và cũng ko biết bắt đầu từ đâu.... Thôi thì Kim cứ post lên để mọi người tham khảo thêm vậy nhé. Các code CSS Kim sử dụng trong bài này có tham khảo một số code từ bạn W.Dephia (cảm ơn bạn nhiều lắm!!) và các blog khác cũng như một số từ code Kim sưu tầm được từ khi lập blog đến nay. Mong rằng bài viết sẽ hữu ích với các bạn và Kim chu'c blog của cac bạn sẽ đẹp hơn nữa nhé.................

* CSS là gì???

CSS là một loại ngôn ngữ dàn trang, định kiểu cho các thành phần của trang Web hay Blog. Nói vậy chung chung quá, nôm na CSS như là người đi mua kiểu bàn ghế, kiểu đồ đạc trong nhà theo ý của chủ nhà và sắp xếp chúng cũng theo ý ông chủ luôn. Cụ thể là nó làm nhiệm vụ biểu diễn fonts (phông chữ), colours (màu sắc), margins (canh lề), lines (các loại đường, nét), height (chiều cao), width (độ rộng), background images (ảnh nền các loại), xác định vị trí cho các khối… CSS từ viết tắt của Cascading Style Sheet tạm dịch là bảng kiểu xếp chồng.

* Cách chèn CSS

Đầu tiên bạn zô fần Thiết Kế ~~> Theme ~~> Check zô Chế độ tự chỉnh sửa ~~> Click nút Tiếp ~~> Hiện ra cái khung có bảng màu, kéo xuống dưới thấy chữ CSS, bên cạnh đó có cái khung cho điền text. Đó là fần điền CSS.

* Tổng hợp CSS cơ bản

1) Code hình nền trang tin nhắn

BODY.guestbook {BACKGROUND:url(http://nhanh.vinaanh.com/ph/437d7d14895b916b61b3.jpg) #000000 fixed;}

2) Code tạo theme 2 mảnh top - bottom

body{background:#cc99ff;} /* Màu nền của theme, nên thay đổi trùng với màu ảnh nền để tăng tính thẩm mỹ cho theme*/ #doc2, #doc{background:#cc99ff url(Link ảnh Top) no-repeat center top;} /* mau nen cua theme va link hinh top-theme nay thay doi duoc*/ #bd{background:transparent url(Link ảnh Bottom) no-repeat center bottom;}

3) Code thay hình nền cho các module chính và module tự tạo

Module Profile

#profile_highlight_module .bd {background:#FFFFFF url(Link hình);}

Module bài mới nhất

#article_new .bd {background:#FFFFFF url(Link hình);}

Module Calendar (lịch)

#calendar .bd {background:#FFFFFF url(Link hình);

Module Folder (Mục lục)

#folder .bd {background:#FFFFFF url(Link hình);}

Module Bình luận mới nhất

#comment_new .bd {background:#FFFFFF url(Link hình);}

Module friendlist

#friendlist_module .bd {background:#FFFFFF url(Link hình);}

Module Thống kê

#statistic .bd {background:#FFFFFF url(Link Hình);}

Module blog yêu thích

#subscribe_highlight .rc_bd .rc_bc {background:url(Link hình) #653e16 top right repeat;}

Module hình ảnh trên blog

#photo_highlight .bd {background:#FFFFFF url(http://xxx.gif);}

Ảnh nền module tự tạo + Nền tiêu đề module tự tạo

#user_mod_1000X .rc_bd .rc_bc .hd .titlebar .hd,#user_mod_1000X .rc_bd .rc_bc .hd .titlebar{background:transparent url(Link Ảnh Nền);}

+ Nền module tự tạo

#user_mod_1000X .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh Nền);}

Ghi chú: Thay chữ X bằng số thứ tự Module (Module 1, Module 2 ..)

4) Code ảnh nền cho entry (Bài viết)

Ảnh nền mỗi entry

.mod-alist-full .main-bd{background:#FFFFFF url(Link Ảnh Nền);}

Ảnh tiêu đề mỗi entry

.mod-alist-full.mail-hd{background:#FFFFFF url(Link Ảnh Nền)}

Ảnh nền bài viết (bao gồm cả tiêu đề lẫn entry bài viết)

col-600 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft, .row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft, .row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft {background:url(Link Hình) repeat;color:#666666;}

5)Thay màu cho chữ cho các module

a- Thay màu chữ cho comment

div.comment-ctnr{color: #0055FF;}div.content{color #0055FF;}

b- Thay màu chữ cho Blog yêu thích

#subscribe_highlight .rc_bc .bd p{color:#ma_mau;}

6) Code làm trong suốt các module trong blog

a - Code làm trong suốt entry và module

.col-150 .rc_bd .rc_bc .bd {background:transparent url(Link hình);} .col-600 .rc_bd .rc_bc .bd {background:transparent url(Link hình);} .row-920 .rc_bd .rc_bc .bd {background:transparent url(Link hình);}

Ghi chú: Giữ nguyên code trên nếu các bạn muốn entry và các module trong suốt

Có thể thay hình nền cho cho cả entry và module vào link hình, các link hình đều là một

b- Code làm trong suốt module tâm trạng

#mod_lifeline div.bd,#mod_lifeline div.rc_bc {background:transparent ) !important;}

c- Code làm trong suốt module hình ảnh

#gallery_list .bd {background:none;}#photo_enlarge .bd, #photo_enlarge .ft {background:none;} #photo_enlarge .ft #post_rte_create, #photo_comment .bd {background:none;}#photo_enlarge .c_photo_enlarge .ft {background:none;} #photo_enlarge .bd .c_photo_enlarge .bd {background:none;}#gallery_list .ft .pagination .pagination {background:none;} #gallery_list .ft .pagination {background:transparent url(Link Ảnh) repeat left top;}/*Thanh hiển thị số trang*/ #photo_highlight .ft .more {background:transparent ;} #photo_highlight .ft .more a {font-size:110%;font-style:italic;font-weight:bold;color:#ffffff;}

d- Code làm trong suốt trang thông tin cá nhân

#profile_info , #profile_info .bd #blog_profile .bd, #profile_info .bd #personal_profile .bd, #profile_info .bd #introduction_profile .bd, #profile_info .bd #personal_profile .bd th , #profile_info th {background:none;}

e- Code làm trong suốt module friendlist

+ Trong suốt nền tiêu đề

#friendlist_module .rc_bd .rc_bc .hd .titlebar .hd{background:transparent;}

+ Trong suốt nền module

#friendlist_module .rc_bd .rc_bc .bd {background:transparent;}

f- Code làm trong suốt module tự tạo

+ Nền tiêu đề module tự tạo

#user_mod_1000X .rc_bd .rc_bc .hd .titlebar .hd,#user_mod_1000X .rc_bd .rc_bc .hd .titlebar{background:transparent;}

+ Nền module tự tạo

#user_mod_1000X .rc_bd .rc_bc .bd {background:transparent;}

Ghi chú: Thay chữ X bằng số thứ tự Module (Module 1, Module 2 ..) g- Code làm trong suốt toàn comment

.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background:none;} .alist-comment #comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist #comments-listing .alist-comment {background:none;}

7) Code CSS thay nền tiêu đề cho các module

Module comment

#comment_new .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Module bài mới

#article_new .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Module profile

#profile_highlight .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Module tìm kiếm

#search_module .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Module Thư mục

#folder .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Module Calendar (Lịch)

#calendar .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Module thống kê

#statistic .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

8) Thay đồi Icon tâm trạng

a- Thay đổi Icon cho Module thư mục riêng

#folder .bd ul li {background:transparent url(Link icon) no-repeat 5px top;}

b- Thay đồi icon cho Module bài viết mới

#article_new .bd ul li {background:transparent url(Link icon) no-repeat 5px top;

c- Thay Icon cho Module bình luận mới nhất

#comment_new .bd ul li {background:transparent url(URL ảnh) no-repeat left top;}

9) Thay đổi Icon cho module tâm trạng (Copy từ bạn Cool.Love)

#mod_lifeline .list td a.blog_emo_25_1{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_25_2{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -25px;} #mod_lifeline .list td a.blog_emo_25_3{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -50px;} #mod_lifeline .list td a.blog_emo_25_4{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -75px;} #mod_lifeline .list td a.blog_emo_25_5{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -100px;} #mod_lifeline .list td a.blog_emo_25_6{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -125px;} #mod_lifeline .list td a.blog_emo_25_7{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -150px;} #mod_lifeline .list td a.blog_emo_25_8{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -175px;} #mod_lifeline .list td a.blog_emo_25_9{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -200px;} #mod_lifeline .list td a.blog_emo_25_10{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -225px;} #mod_lifeline .list td a.blog_emo_25_11{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -250px;} #mod_lifeline .list td a.blog_emo_25_12{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -275px;} #mod_lifeline .list td a.blog_emo_50_1{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 0;} #mod_lifeline .list td a.blog_emo_50_2{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -50px;} #mod_lifeline .list td a.blog_emo_50_3{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -100px;} #mod_lifeline .list td a.blog_emo_50_4{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -150px;} #mod_lifeline .list td a.blog_emo_50_5{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -200px;} #mod_lifeline .list td a.blog_emo_50_6{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -250px;} #mod_lifeline .list td a.blog_emo_50_7{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -300px;} #mod_lifeline .list td a.blog_emo_50_8{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -350px;} #mod_lifeline .list td a.blog_emo_50_9{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -400px;} #mod_lifeline .list td a.blog_emo_50_10{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -450px;} #mod_lifeline .list td a.blog_emo_50_11{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -500px;} #mod_lifeline .list td a.blog_emo_50_12{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -550px;} .mod-alist-full .main-hd h1 em, .mod-alist-titlebar-1 h2 a em, .mod-alist-titlebar h2 a em, .mod-alist-brief table a em, #myblog-article-compose #mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}

Ghi chú:

• 1 hình nhỏ cỡ 25x300 để hiện thị khi tâm trạng bình thường.
• 1 hình to cỡ 50x600 để hiển thị bài viết quan trọng.

Xem phần thiết kế Icon tâm trạng tại đây

10) Code làm biến mất tiêu đề module

a- Module Profile

#profile_hightlight h2{color:transparent}

b- Module Blog yêu thích

#subscribe_hightlight h2{color:transparent}

c- Module tin nhắn mới nhất

#feature_link_gb h2{color:transparent}

d- Module Thư mục riêng

#folder h2{color:transparent}

e- Module tự tạo

#user_mod_1000x{color:transparent}

Ghi chú:

• Đối với Module tự tạo, đầu tiên các bạn phải xác định xem số thứ tự Module ( Module tự tạo 1, module tự tạo 2 ...)
• Sau đó thay vào tên Module tự tạo là : #user_mod_1000x ( x là số thứ tự Module đó).