Jump to content

Welcome to [ iT ] Forums
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!
Cộng đồng Âm nhạc Việt Nam

Hình ảnh

For new blogger!

* * * * - 1 Bình chọn

  • Please log in to reply
3 replies to this topic

#1
13lack

13lack

    Trung cấp CSTH

  • VIP
  • PipPipPip
  • 563 Bài Viết:

Một số điều cơ bản



I. Khái niệm về CSS:

- Đầu tiên bạn click Thiết Kế > Theme .
- Chọn Chế Độ Tự Chỉnh Sửa > Tiếp .

Posted Image


Xong nó hiện ra cái bảng này:

Posted Image

Bạn thấy "CSS" rồi chứ? Nó là nơi để chèn code, làm blog đẹp hơn, nói chung phần lớn các code đều nhét vào chỗ này!

II. Cài đặt theme:

-Cũng như 360 độ, 360 plus cũng có chế độ 1 theme mảnh và 2 theme (trên, dưới)!
1. Để cài đặt theme 1 mảnh, bạn dùng code sau:
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:#ma_mau url(Link Anh Nen) repeat  fixed center;}
*Để hiểu thêm, bạn chịu khó kéo xuống xem cách cài đặt theme đứng yên!
2. Theme 2 mảnh dùng code sau:

body{background:#ma_mau;}

#doc2, #doc{background:#ma_mau url(Link ảnh Top) no-repeat center top;}

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

Link ảnh phải là direct link!

III. Module:

-Trong blog, các phần được chia ra bằng các hình chữ nhật có viền... đó là module (theo cách hiểu của mình)!
*Các loại code làm module trở nên trong suốt:
1. Nền Các Module Chính và Phụ :
Code:
.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;}
2. Nền Tiêu Đề các Module :
-Trong 360 độ có khung friends list, thì bên plus ta có module friends list, mà cái module thường có tên bên trên, cái nền của phần tên của cái module đó là nền tiêu đề!
.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;}
3. Module tâm trạng:
Để làm trong suốt Module Tâm Trạng Bạn dùng Code này :
#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}
4.Module Friendlist :
a - Làm Trong Suốt :

- Nền Tiêu Đề :
#friendlist_module .rc_bd  .rc_bc .hd .titlebar .hd{background:transparent;}

- Nền Module :
#friendlist_module .rc_bd  .rc_bc .bd {background:transparent;}

b- Thay Nền : Thay Link Ảnh vào nhé

- Nền Tiêu Đề :
#friendlist_module .rc_bd  .rc_bc .hd .titlebar .hd{background:transparent url(Link Ảnh Nền);}

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

Lưu ý: bạn chèn code vào CSS thì chèn cho nó theo thứ tự hợp lý chút! Đừng xen lẫn các theme code, với module code; kẻo bị gì thì sửa mệt lắm!

IV. Thay ảnh nền module chính, phụ:

-Module trong suốt rồi có thêm hình nữa nhìn hay hay!
1. Đối với 2 Module phụ :
Bạn có thể thêm vào sau đọan transparent bằng dòng url(Link ảnh) với link ảnh nền :

.col-150 .rc_bd .rc_bc .bd {background:transparent url([b]Link ảnh nền[/b]);}

2. Đối với Module chính : Cũng thêm dòng url() :

.col-600 .rc_bd  .rc_bc .bd {background:transparent url(Link ảnh nền);}

3. Nền tiêu đề các Module : (col-150 là Module phụ, col-600 là module chính)

.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd  .rc_bc .hd .titlebar {background:transparent url(Link ảnh tiêu đề);}
.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd  .rc_bc .hd .titlebar{background:transparent url(Link ảnh tiêu đề);}

*Nếu muốn có hình nền với các module trong suốt đó thì bạn đọc kĩ phần IV, chỉ dùng code ở phần IV!
Còn nếu chỉ thích module trong suốt thì dùng code ở phần III!

V/ Cách thay nền cho một số module:

1. Module New Comment :
#comment_new .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
2. Module Bài Mới :
#article_new .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
3. Module Profile ( Nick Name) :
#profile_highlight .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
4. Module Search (Tìm Kiếm) :
#search_module .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
5. Module Thư Mục :
#folder .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
6. Module Cập Nhật Ngày ( Update) :
[Code]#update_date .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
7. Module Lịch:
#calendar .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}
8. Module Thống Kê :
#statistic .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

Bài viết này được chỉnh sửa bởi 13lack: 20 June 2009 - 08:53 AM


#2
13lack

13lack

    Trung cấp CSTH

  • VIP
  • PipPipPip
  • 563 Bài Viết:
1. Cài đặt theme đứng yên:

-Nói dể hiểu là khi ta kéo thanh trượt thì theme k bị kéo theo í!
Xài code sau:
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:#ma_mau url(Link Anh Nen) repeat  fixed center;}

*Note:
-#ma_mau: Đây là mã màu, mã màu của hình nền.
VD: Mã màu của bạn là bạn thích là màu trắng thì thay thế #ma_mau bằng #FFFFFF trong đoạn code trên!
-fixed: Giúp theme đứng yên khi di chuyển thanh trượt.
-repeat: Lặp lại ảnh nền (tràn khắp blog). Khuyến khích cho ảnh có kích thước nhỏ.
-no-repeat: Nếu đã có ảnh nền kích thước từ 1024x768 px trở lên, và không muốn ảnh sẽ lặp thì các bạn có thể thay repeat thành no-repeat nhé !
-center: vị trí đặt theme giữa blog, ngoài ra còn có top (trên) và bottom (dưới).

2. Làm nền cho entry:


-Xài code sau
#article_list_module .bd, .mod-alist-full .main-bd {background:transparent url(Link Ảnh Nền);}

-Link Ảnh Nền là HTML link! Khuyến khích các bạn host ảnh ở http://photobucket.com!

3. Vài cách post ảnh vào blog:

a. Post ảnh từ một trang web nào đó:
-Chỉ cần bôi đen rồi thực hiện thao tác copy-paste (ctrl + C, rồi ctrl +V í)!
Copy từ web rồi paste sang blog (Fire Fox mình làm được, còn IE thì mình chưa thử!).
b. Post ảnh trực tiếp:
B1: Lấy một tấm ảnh cần post.
B2: Vào phần viết Blog hoặc comment, click vào nút Insert Image (Posted Image) nhé.
B3: Nó hiện ra cái này:

Posted Image

Chọn "Tải hình từ máy" và click "Tiếp"
B4:Chọn Thư mục đặt ảnh, ghi tag cho ảnh, và click Browers để chọn ảnh nhé ! Bạn có thể chọn 10 tấm ảnh!

Posted Image

B5: Click "Xong" rồi ngồi đợi!

*Special thank to: 360plus đã xuất hiện cho em có cơ hội post bài này!
another to: Blogger [W].Dephia đã viết bài cho em edit và học hỏi!
(còn tiếp)!

Bài viết này được chỉnh sửa bởi 13lack: 17 June 2009 - 09:20 PM


#3
13lack

13lack

    Trung cấp CSTH

  • VIP
  • PipPipPip
  • 563 Bài Viết:

Thay đổi màu chữ và link cho toàn bộ blog



I. Màu chữ:
-Nếu bạn muốn thay đổi một lần toàn bộ chữ trong Blog thì dùng Code này nhé, nên đặt ở đầu CSS hoặc đâu cũng được. Nhưng nếu bạn đã sử dụng Code thay màu chữ một số phần khác thì những Code đó sẽ vẫn còn tác dụng đó.

body{color: #mã_màu}

II. Màu Link:
Khuyến khích đặt gần cuối CSS!
a{color: #mã_màu}

III. Màu chữ và Link cho Blast :
1. Chữ :
#blast .rc_bc .bd{color: #mã_màu}
2. Link :
#blast .rc_bc .bd a{color: #mã_màu}

IV - Blog Tôi Thích :
1. Màu chữ :
#subscribe_highlight .rc_bc .bd p{color: #mã_màu;}

2. Màu Link :
#subscribe_highlight .rc_bc .bd a{color: #mã_màu;}

V. Blog về Tôi :
1. Màu chữ :
#mod-tagged-frd-article .bd li ins a{color: #mã_màu;}
2. Màu Link :
#mod-tagged-frd-article .bd a{color: #mã_màu;}

VI. Màu chữ, link trong comment :
Để thay màu sắc chữ và link trong ô comment các bạn có thể dùng Code sau :

Code:#comment_container * a {color:#ma_mau;}
#comment_container * .content {color:#ma_mau;}
#comments-listing * ins {color:#ma_mau;}

* #ma_mau : là màu link.
* #ma_mau : là màu chữ
* #ma_mau : là màu của dòng : "cách đây... fút"

VII. Module "Bài viết về bạn hoặc Tag có tên bạn" :

1. Màu chữ :
.mod-relatives-1 .bd li a{color: #mã_màu;}
2. Màu Link :
.mod-relatives-1 .bd li ins{color: #mã_màu;}
VIII. Màu chữ Tiêu đề bài viết :
#article_list_module .rc_bd .rc_bc .bd .main-bd .mod-alist .mod-alist-titlebar-1 a{color: #mã_màu;}

*Special thank to: 360plus đã xuất hiện cho em có cơ hội post bài này!
another to: Blogger [W].Dephia đã viết bài cho em edit và học hỏi!

Bài viết này được chỉnh sửa bởi 13lack: 10 June 2009 - 04:36 PM


#4
13lack

13lack

    Trung cấp CSTH

  • VIP
  • PipPipPip
  • 563 Bài Viết:

Làm trong suốt blog



Nếu các bạn muốn blog trở nên trong suốt hoàn toàn thì chèn tất cả các code sau vào css
Code:
#blog_masshead .rc{background:transparent;}#blog_masshead .rc div{background:transparent;}#blog_masshead .rc_bd{background:transparent;}#blog_masshead .rc_bc{background:transparent;}#blog_masshead .rc_ft{background:transparent;}#blog_masshead .rc_ft div{background:transparent;}#blog_masshead .bd{background:transparent;}#blog_masshead{background:transparent;}
#article_list_module .bd{background:transparent;}
ode:
.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;}
.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;}
#friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent;}
#friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent;}
#friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent;}
#friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent;}
#friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent;}
#friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent;}
.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;}
#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}
#photo_highlight .ft {background:transparent;}
#blog_title .rc_bd .rc_bc .bd , #blog_title .bd{background:transparent;}
#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 repeat left top;}
#photo_highlight .ft .more {background:transparent;}
#photo_highlight .ft .more a {font-size:110%;font-style:italic;font-weight:bold;color:#ffffff;}
#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;}

Khi paste vào css, bạn nên space vài dòng xuống rồi paste, để dễ phân biệt code xài cho trường hợp nào, nhỡ mai này cần chình sửa thì tiện hơn!






Perfumista - Thong tin nuoc hoa

Stars Counter Game

Balloon vs. Thorns

MU Phuc Hung

Làm Việc Tài Nhà

Mu Da Nang

Tuyển Nhân Viên Bán Hàng

Tư vấn sức khỏe trực tuyến

Close [X]