24/06/2009 THỦ THUẬT DÙNG CSS CODE ĐỂ DESIGN BLOG

Ngày 13/07 tới đây, Yahoo!360 blog sẽ chính thức đóng cửa. Những blogger đang tìm cho mình 1 căn nhà mới ưng ý nhất, đó có thể là Facebook, Worldpress, Yahoo!360 Plus, Yume, Opera,.... Có rất nhiều sự lựa chọn, tất cả đều có những ưu nhược điểm riêng tùy theo sở thích và nhu cầu của từng blogger.

Phần lớn bạn bè trong 360 cũ of w đã chuyển wa xài blog Plus vì thế w cũng đã chuyển sang Plus. Sau đây là một số thủ thuật để design lại plus nhờ vào CSS code, làm cho blog of mình đẹp hơn.

Các bạn click vào chữ “Thiết kế” -> “Theme” và copy đoạn các đoạn code dưới đây vào ô CSS.

I. Theme cho toàn trang

Là hình nền cho toàn bộ trang màn hình blog của bạn, có thể dùng ảnh động hoặc ảnh kích cỡ nhỏ.

BODY.blog_my {BACKGROUND:url(link ảnh) #mã màufixed;}

”Fixed” là để themes đứng yên, không bị cuốn theo khi các bạn di chuyển. Nếu không có “fixed” thì ảnh nền của bạn sẽ bị cuốn theo và lặp lại nhiều lần.

II. Theme gồm top và bottom

Theme này sẽ đc chia làm 2 fần gồm có top và bottom.

Top code:
#head {background:transparent url(link ảnh) no-repeat center top;height:Apx;}

Bottom code:
#bd {background:transparent url(link ảnh) no-repeat center bottom;}

III. Theme cho modules

Ở phần này, các bạn có thể lựa chọn giữa 2 cách làm là chèn hình nền cho module hoặc là thiết kế module theo ý bạn.

1. Chèn hình nền cho module:

Các đoạn code này là để chèn hình nền cho module còn nếu các bạn muốn thêm hình nền cho thanh tiêu đề module thì thay “.bd” bằng “.hd .titlebar .hd”.

“Link ảnh” các bạn up ảnh of mình lên các trang web và lấy “Direct link” of nó để copy vào.

Ảnh nền cho module profiles:

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

Ảnh nền cho module bài mới nhất:

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

Ảnh nền cho module tìm:

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

Ảnh nền cho module cập nhật ngày:

#update_date .rc_bd .rc_bc .bd {background:transparent url(link ảnh);}

Ảnh nền cho module danh sách bạn bè:

#friendlist_module .rc_bd .rc_bc .bd {background:transparent url(link ảnh);}

Ảnh nền cho bảng tin nhắn:

BODY.guestbook {BACKGROUND:url(link ảnh) #000000 fixed;}

Ảnh nền cho module thống kê:

#statistic .bd {background:#FFFFFF url(link ảnh);}

Ảnh nền cho module bình luận:

#comment_new .bd {background:#FFFFFF url(link ảnh);}

Ảnh nền cho module thư mục riêng:

#folder .bd {background:#FFFFFF url(link ảnh);}

Ảnh nền cho module lịch:

#calendar .bd {background:#FFFFFF url(link ảnh);}

Ảnh nền cho trang profiles:

BODY.profile_view {BACKGROUND:url (link ảnh) #000000 fixed;}

Ảnh nền cho module blog yêu thích:

#subscribe_highlight .bd {background:#FFFFFF url(link ảnh);}

2. Thiết kế module:

Các cách thiết kế thông dụng là chia thành 3 hoặc 4 phần
Sau đây mình sẽ hướng dẫn các bạn sử dụng code chia thành 3 phần

• Phần trên
• Phần giữa
• Phần cuối

Code cho phần trên:

.col-150 .rc,
#article_new .rc ,
#search_module .rc ,
#calendar .rc,
#folder .rc ,
#update_date .rc,
#statistic .rc ,
#friendlist_module .rc ,
#comment_new .rc ,
#subscribe_highlight .rc ,
#user_mod_10001 .rc {background:transparent url(link ảnh) no-repeat center bottom;height:59px;}

Code cho phần giữa:

.col-150 .rc_bd,
#friendlist_module .rc_bd ,
#statistic .rc_bd,
#update_date .rc_bd ,
#folder .rc_bd ,
#calendar .rc_bd ,
#search_module .rc_bd ,
#article_new .rc_bd ,
#subscribe_highlight .rc_bd ,
#comment_new .rc_bd {background:transparent url(link ảnh) repeat-y top center;}

Code cho phần cuối:

.col-150 .rc_ft,
#friendlist_module .rc_ft ,
#statistic .rc_ft,
#update_date .rc_ft ,
#folder .rc_ft ,
#calendar .rc_ft ,
#search_module .rc_ft ,
#article_new .rc_ft ,
#subscribe_highlight .rc_ft ,
#comment_new .rc_ft {background:transparent url(link ảnh) no-repeat center top;height:17px;}

V. Ảnh nền cho module chính phụ

Chính là hình nền cho module chứa các entry đó.

Code cho module chính:
.col-600 .rc_bd .rc_bc .bd {background:transparent url(link ảnh);}

Code cho module phụ:
.col-150 .rc_bd .rc_bc .bd {background:transparent url(link ảnh);}

VI. Ảnh nền cho module tự tạo

Code cho nền module:
#user_mod_1000X .rc_bd .rc_bc .bd {background:transparent;}

X: Các bạn thay bằng số thứ tự của các module đó

V. Code làm trong suốt nền và tiêu đề các module chính và module phụ:

1. Đoạn code sau sẽ làm trong suốt nền cho các module chính và phụ ở blog of bạn:

.col-150 .rc_bd .rc_bc .bd {background:transparent;}
.col-600 .rc_bd .rc_bc .bd {background:transparent;}
.row-920 .rc_bd .rc_bc .bd {background:transparent;}

Thông số 150 là cho module nhỏ, 600 là module chính to (mục bài viết của bạn), và 920 là module to nhất trong blog bạn, nếu bạn ko muốn module nào trong suốt thì bỏ cái dòng làm trong suốt của module đó đi.

2. Còn đây là code làm nền tiêu đề module trong suốt:

.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
.row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;}

VII. Đối với module tự tạo

1. Code làm trong suốt nền tiêu đề:

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

2. Code làm trong suốt nền module:

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

VIII. Code làm trong suốt một số module khác

1. Module tâm trạng:

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

2. Module danh sách bạn bè:

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

3. Làm trong suốt blast:

#blast .rc_bc .bd{background:transparent;}
#blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;} #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 ;}

4. Làm trong module tên blog:

#blog_title .bd{background:transparent}

5. Làm trong suốt tổng số trang (dưới entry):

.mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent}

6. Làm trong suốt nền bình luận:

.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. Làm trong suốt viền các module:

#friend-list .rc div, #friendlist_module .rc div, .rc div,.col-150 .rc div {background:transparent ;}
#friend-list .rc, #friendlist_module .rc, .rc,.col-150 .rc {background:transparent ;}
#friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc,.col-150 .rc_bd {background:transparent ;}
#friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd,.col-150 .rc_bd div.rc_bc {background:transparent ;}
#friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, .col-150 .rc_ft div {background:transparent ;}
#friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, .col-150 .rc_ft {background:transparent ;

IX. Tạo module thông báo số người đang xem blog of bạn:

Các bạn chỉ cần copy nguyên đoạn code này vào, ko cần chình sửa nữa. Nhớ là tạo module mới rồi copy đoạn code này vào phần nội dung nha. Thay " bằng 2 dấu <> nha.

“a href="http://whos.amung.us/stats/vhhd05tr0404/">”

X. Tạo module status thông báo cho người xem tình trạng online hay offline of chủ blog:

"img src="http://opi.yahoo.com/online?u=futureitgame&m=g&t=16&1=us">

Các bạn thay “futureitgame” bằng nick of mình và thay " bằng < nha.

XI. Tạo module nhạc:

Trước tiên các bạn fải tạo 1 module mới.

Mình lấy nhạc từ nguồn http://www.nhaccuatui.com để post nên mình sẽ giới thiệu các bạn các post nhạc từ trang này.

Các bạn vào http://www.nhaccuatui.com để đăng ký tài khoản và tạo cho mình 1 album nhạc ưng ý trong đó.

Sau khi tạo xong album, các bạn click vào để nghe thử, ở bên dưới sẽ xuất hiện 3 đường link, các bạn chú ý rằng chúng ta sẽ copy đường link thứ 3, nhớ là thứ 3 chứ ko fải thứ 2 nha.

Copy đường link thứ 3 đó và dán vào trình duyệt, các bạn sẽ bỏ 2 “[FLASH]” ở đầu và ở cuối nha. Đoạn link giống như z đây: [FLASH]http://www.nhaccuatui.com/l/24JKmiWYvFtD[/FLASH]

Chỉ copy dòng màu đỏ và cho vào trình duyệt, lúc đó trình duyệt sẽ dẫn các bạn tới 1 trang khác.

Ở trang này, đoạn link đó sẽ biến thành: http://img1.nhaccuatui.com/Flash/NCTplayer11_L.swf?file=http://www.nhaccuatui.com/GetMusic.ashx?list=007c0077001e0003002c003d0019001a0022000e00350010

Các bạn copy phần link đỏ ở trên và thay thế vào fần link đỏ of đoạn code sau và thay 2 dấu “ bằng < >.

“embed type="application/x-shockwave-flash" AllowScriptAccess='never'  src="http://img10.imageshack.us/img10/7058/flvplayer.swf?file=http://www.nhaccuatui.com/GetMusic.ashx?list=007c0077001e0003002c003d0019001a0022000e00350010&width=500&height=290&displaywidth=250&displayheight=270&backcolor=0xffffff&frontcolor=0x027ab6&lightcol r=0x027ab6&overstretch=none&autostart=true&repeat=true&shuffle=false&volume=100&thumbsinplaylist=true" width="500" height="290" align="center"”

Khá dài fải ko, hihi. Copy và paste cả đoạn code này vào này vào fần nội dung of module mới vừa tạo.

Chú ý rằng các đường link ở trên là album do mình tạo, chỉ mang tính minh họa, các bạn đương “sao y bản chính nha”. Hihi