Cách làm Blog trong suốt

Vấn đề làm Blog trong suốt có rất nhiều thắc mắc,vì vậy mình sẽ chỉnh sửa bài này chi tiết hơn cho các bạn tham khảo 1.Làm trong suốt Black Box,phần trên cùng của Blog.. -Phần này không

Vấn đề làm Blog trong suốt có rất nhiều thắc mắc,vì vậy mình sẽ chỉnh sửa bài này chi tiết hơn cho các bạn tham khảo

1.Làm trong suốt Black Box,phần trên cùng của Blog.

-Phần này không cần thiết lắm.Nhưng ai thích làm thì sử dụng code dưới nhé

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}

2.Chỉ làm trong suốt Module bài viết ở chính giữa.

-Nhấn "Thiết kế" rồi kéo xuống phía dưới tới Module bài viết,nhấn "Sửa"

Nó hiện ra một cái bảng như sau:

Tại đây nếu bạn muốn module bài viết trong suốt thì bạn cần xoá cái màu nền(theo mũi tên-xoá cái mã #E93131 đi)

(Nếu bạn muốn nó mờ mờ thì kéo thanh trong suốt đến vị trí thích hợp,tuy nhiên có một vấn

đề là nếu bạn làm như vậy thì màu chữ và ảnh trong entry sẽ bị mờ theo,trông không được rõ

cách khắc phục là tạo một ảnh nền trong suốt chèn vào module này.Sẽ được hướng dẫn trong phần nâng cao)

-Bạn cũng có thể xoá (để trống) ô màu nền này

Kết quả: Nền bài viết ở giữa sẽ trong suốt

3.Làm trong suốt thêm Module (Module chính là module phụ)

a,Nền Module

Nhấn vào thiết kế,chọn mục Theme,chọn chế độ tự sửa,nó sẽ hiện ra cái bảng sau:

Mô-đun chính :(vị trí:xem vòng tròn chú thích trong hình)

Tiêu đề màu (vị trí 1 trong hình) :Là nền của tiêu đề module chính

Chữ màu (vị trí 2 trong hình): Là màu nền của module chính

Mô-đun phụ

-Tiêu đề màu2: Là màu nền của tiêu đề (vị trí 3)

-Chữ màu: Màu nền của Mô đun (vị trí 4)

Như vậy muốn nền và tiêu đề của module phụ và module chính trong suốt

bạn chị cần xoá màu tại 4 vị trí như trong hình

(Thực tế thì bạn nên giữ lại màu của tieu đề module chính và module phụ sẽ đẹp hơn)

Cách 2: Sử dụng code:

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;}

Nếu muốn chỉ làm trong suốt một số Module nào đó, bạn tham khảo thêm Bài Viết Nàynhé ! b,Tiêu đề module

Code:

.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;}

Kết quả: Nền bài viết trong suốt,nền module và tiêu đề module trong suốt,viền của

module thì có màu trắng

Chú ý: Nếu cách set màu nền trống nếu các bạn gặp lỗi thì xem thêm bài này nhé:

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=3391">Khắc phục lỗi khi làm trong suốt Blog

4.Làm trong suốt thêm viền Module:

Có 2 cách: Vì cái viền của module thực chất là ảnh,ta có thể thay bằng ảnh trong suốt,hoặc xoá cái viền này đi

3.1 Thay bằng ảnh trong suốt

3.2 Xoá viền Module

Quote:

/* No Border cho cac 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 ;} /* Ket Thuc*/

5.Đến đây thì Blog gần như trong suốt hoàn toàn,còn cái Blast ai muốn trong suốt nữa thì chèn code sau

Quote:

#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 ;}

6.Lúc này Blog ta gần như trong suốt hoàn toàn,vần còn một số vấn đề như sau:

-Viền Module Blog yêu thích không trong suốt

-Nền comments

(Sẽ được hướng dẫn trong phần hướng dẫn nâng cao)

Update:

7.Làm trong suốt nền comments (khung bình luận của bài viết)

.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;}

8.Tổng số trang

Ai muốn làm trong suốt cả phần này thì dùng Code :

Code:

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

9.Trong suốt Module Tâm trạng

Code:

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

10.Phần xem thêm,module hình ảnh

Code:

#photo_highlight ft {background:transparent}

11.Module tên Blog

Code:

#blog_title bd{background:transparent}

Trên đây là toàn bộ hướng dẫn làm Blog trong suốt,tuỳ theo nhu cầu của bạn,mà áp dụng từng bước một cách hợp lý

Ví dụ: Bạn muốn làm blog trong suốt hoàn toàn,nhưng muốn tiêu đề của các module có màu đỏ,thì ở bước 2

mục nền tiêu đề module chính và phụ bạn để nó màu đỏ

Bonus:

1.Theme một ảnh cố định đứng im khi kéo xuống (giống Blog mình)

Quote:

BODY.blog_my {BACKGROUND:url(Địa chỉ ảnh) #000000 fixed;}

Thay cái địa chỉ ảnh bằng link ảnh bạn lấy làm theme,kích thước chiều rộng nên là 1004px 2.Theme gồm 2 hình Top-Bottom giống 360Yahoo

Quote:

/* Khu Vuc Top-Bottom Theme Code CSS*/

body{background:#225ce1;}

/* mau nen cua theme thay doi theo dung mau da thiet ke se lam tang tinh my thuat cho theme

*/

#doc2, #doc{background:#225ce1

url(http://i292.photobucket.com/albums/mm19/themesplus2000/blue-sky-top.jpg) no-repeat center top;}

/* mau nen cua theme va link hinh top-theme nay thay doi duoc*/

#bd{background:transparent

url(http://i292.photobucket.com/albums/mm19/themesplus2000/blue-sky-bot.jpg) no-repeat center bottom;}

/* mau nen cua theme va link hinh bottom-theme nay thay doi duoc*/

/* Luu y: mau nen cua 2 hang tren phai dong nhat mot ma mau voi nhau theo mau nen cua code theme */

/* Ket Thuc Khu Vuc Top-Bottom Theme Code CSS*/

Thay 2 cái hình kia gồm Top và Bottom bằng link ảnh của bạn

Thay mã màu bằng mã màu phù hợp với 2 hình (màu nền ở giữa)

Chú ý: Với những đoạn code có ảnh đuôi png,một số trình duyệt không hỗ trợ (IE6) vì vậy các bạn đừng thắc mắc nha

Copyright by co0l.l0ve'sblog