Hôm nay chúng ta sẽ học một phần khá thú vị, đầy rắc rối và là thắc mắc lớn nhất của các blogger : làm trong suốt blog. Để làm trong suốt blog thì có thể dùng bảng có sẵn của Plus nhưng bảng đó thường bị lỗi. Vì vậy bài viết sẽ giới thiệu phương pháp trong suốt hoàn toàn bằng code CSS.
Ở cuối bài viết có code rút gọn tổng hợp trong suốt toàn bộ blog - trang chính
1. Module BlackBox - ygma (nóc nhà)
Quote:
#ygmatop,#ygmabot,.ysearch,.ysearch #ygmasrchfrm,#ygmasrchfrm fieldset,.yuimenubar .hd,.yuimenubarnav .yuimenubaritem,.yuimenubaritemlabel,#blogsearch form,#blogsearch .hd b,#blogsearch .hd u,#blogsearch .hd i{background:transparent;border-style:none;}/*olympia41124*/
.yuimenubar{border-style:none;}/*vietnam360plus*/
#ygmasrchfrm input,#blogsearch input{background:transparent;}/*olympia41124*/ |
2. Module Tên Blog
Quote:
| #blog_title .rc_hd, #blog_title .rc_hd div, #blog_title .rc_bd, #blog_title .rc_bc, #blog_title .rc_ft, #blog_title .rc_ft div, #blog_title .rc_bd .rc_bc .bd{background:transparent;border-style:none}/*olympia41124*/ |
3. Module Blast
Quote:
| #blast .rc_hd, #blast .rc_hd div, #blast .rc_bd, #blast .rc_bc, #blast .rc_ft, #blast .rc_ft div, #blast .rc_bc .bd, #blast .tail{background:transparent;border-style:none;}/*olympia41124*/ |
4. Module Profile
Quote:
| #profile_highlight .rc_hd, #profile_highlight .rc_hd div, #profile_highlight .rc_bd, #profile_highlight .rc_bc, #profile_highlight .rc_ft, #profile_highlight .rc_ft div, #profile_highlight .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
5. Module Tâm Trạng
Quote:
| #mod_lifeline .rc_bd .rc_bc .hd .titlebar .hd, #mod_lifeline .rc_bd .rc_bc .hd .titlebar, #mod_lifeline .rc_hd, #mod_lifeline .rc_hd div, #mod_lifeline .rc_bd, #mod_lifeline .rc_bc, #mod_lifeline .rc_ft, #mod_lifeline .rc_ft div, #mod_lifeline .bd {background:transparent;border-style:none;}/*olympia41124*/ |
hoặc
Quote:
| #mod_lifeline .rc_bd .rc_bc .hd .titlebar .hd, #mod_lifeline .rc_bd .rc_bc .hd .titlebar, #mod_lifeline .rc_hd, #mod_lifeline .rc_hd div, #mod_lifeline .rc_bd, #mod_lifeline .rc_bc, #mod_lifeline .rc_ft, #mod_lifeline .rc_ft div, #mod_lifeline .bd, #mod_lifeline .lifeline-prev, #mod_lifeline .lifeline-next, #mod_lifeline .lifeline-prev-off, #mod_lifeline .lifeline-next-off, #mod_lifeline .lifeline-prev-loading, #mod_lifeline .lifeline-next-loading{background:transparent;border-style:none;}/*olympia41124*/ |
6. Module Bình Luận Mới Nhất
Quote:
| #comment_new .rc_bd .rc_bc .hd .titlebar .hd, #comment_new .rc_bd .rc_bc .hd .titlebar, #comment_new .rc_hd, #comment_new .rc_hd div, #comment_new .rc_bd, #comment_new .rc_bc, #comment_new .rc_ft, #comment_new .rc_ft div, #comment_new .rc_bc .bd{background:transparent;border-style:none}/*olympia41124*/ |
7. Module Bài Mới Nhất
Quote:
| #article_new .rc_bd .rc_bc .hd .titlebar .hd, #article_new .rc_bd .rc_bc .hd .titlebar, #article_new .rc_hd, #article_new .rc_hd div, #article_new .rc_bd, #article_new .rc_bc, #article_new .rc_ft, #article_new .rc_ft div, #article_new .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
8. Module Thư Mục Riêng
Quote:
| #folder .rc_bd .rc_bc .hd .titlebar .hd, #folder .rc_bd .rc_bc .hd .titlebar, #folder .rc_hd, #folder .rc_hd div, #folder .rc_bd, #folder .rc_bc, #folder .rc_ft, #folder .rc_ft div, #folder .rc_bc .bd{background:transparent;border-style:none}/*olympia41124*/ |
9. Module Lịch
Quote:
| #calendar .rc_bd .rc_bc .hd .titlebar .hd, #calendar .rc_bd .rc_bc .hd .titlebar, #calendar .rc_hd, #calendar .rc_hd div, #calendar .rc_bd, #calendar .rc_bc, #calendar .rc_ft, #calendar .rc_ft div, #calendar .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
10. Module Cập Nhật Ngày
Quote:
| #update_date .rc_bd .rc_bc .hd .titlebar .hd, #update_date .rc_bd .rc_bc .hd .titlebar, #update_date .rc_hd, #update_date .rc_hd div, #update_date .rc_bd, #update_date .rc_bc, #update_date .rc_ft, #update_date .rc_ft div, #update_date .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
11. Module Thống Kê
Quote:
| #statistic .rc_bd .rc_bc .hd .titlebar .hd, #statistic .rc_bd .rc_bc .hd .titlebar, #statistic .rc_hd, #statistic .rc_hd div, #statistic .rc_bd, #statistic .rc_bc, #statistic .rc_ft, #statistic .rc_ft div, #statistic .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
12. Module Danh Sách Bạn Bè
Quote:
| #friendlist_module .rc_bd .rc_bc .hd .titlebar .hd, #friendlist_module .rc_bd .rc_bc .hd .titlebar, #friendlist_module .rc_hd, #friendlist_module .rc_hd div, #friendlist_module .rc_bd, #friendlist_module .rc_bc, #friendlist_module .rc_ft, #friendlist_module .rc_ft div, #friendlist_module .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
13. Module RSS
Quote:
| #rss_output .rc_bd .rc_bc .hd .titlebar .hd, #rss_output .rc_bd .rc_bc .hd .titlebar, #rss_output .rc_hd, #rss_output .rc_hd div, #rss_output .rc_bd, #rss_output .rc_bc, #rss_output .rc_ft, #rss_output .rc_ft div{background:transparent;border-style:none;}/*olympia41124*/ |
14. Module Bài Viết
Quote:
#article_list_module .rc_bd .rc_bc .hd .titlebar .hd,#article_list_module .rc_bd .rc_bc .hd .titlebar, #article_list_module .rc_hd, #article_list_module .rc_hd div, #article_list_module .rc_bd, #article_list_module .rc_bc, #article_list_module .rc_ft, #article_list_module .rc_ft div, #article_list_module .rc_bc .bd, #article_list_module .mod-alist-searchbox input.btn, .cmt-mod-alist .comments-listing .hd, #comment_container li, #bd .rte_toolbar, .mod-trackback #trackback-listing, .mod-trackback ul, #article_list_module .pagination, #yui-main table.data thead th{background:transparent;border-style:none;}/*olympia41124*/
#article_list_module .mod-alist-searchbox input.ipt{background:transparent;}/*vietnam360plus.com*/
.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}/*olympia41124*/ |
15. Module Blog Tôi Thích
Quote:
#subscribe_highlight .rc_bd .rc_bc .hd .titlebar .hd, #subscribe_highlight .rc_bd .rc_bc .hd .titlebar, #subscribe_highlight .rc_hd, #subscribe_highlight .rc_hd div, #subscribe_highlight .rc_bd, #subscribe_highlight .rc_bc, #subscribe_highlight .rc_ft, #subscribe_highlight .rc_ft div, #subscribe_highlight .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/
.mod_all .rc_bd .bd ul.folder{border-bottom-width:0;}/*vietnam360plus*/ |
16. Module Tìm
Quote:
#search_module .rc_bd .rc_bc .hd .titlebar .hd, #search_module .rc_bd .rc_bc .hd .titlebar, #search_module .rc_hd, #search_module .rc_hd div, #search_module .rc_bd, #search_module .rc_bc, #search_module .rc_ft, #search_module .rc_ft div, #search_module .rc_bc .bd, #search_module input.submit {background:transparent;border-style:none;}/*olympia41124*/
#search_module input.textfield{background:transparent;}/*vietnam360plus.com*/ |
17. Module Blog Về Tôi
Quote:
| #mod-tagged-frd-article .rc_bd .rc_bc .hd .titlebar .hd, #mod-tagged-frd-article .rc_bd .rc_bc .hd .titlebar, #mod-tagged-frd-article .rc_hd, #mod-tagged-frd-article .rc_hd div, #mod-tagged-frd-article .rc_bd, #mod-tagged-frd-article .rc_bc, #mod-tagged-frd-article .rc_ft, #mod-tagged-frd-article .rc_ft div, #mod-tagged-frd-article .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
18. Module Hình Ảnh Trong Blog
Quote:
| #photo_highlight .rc_bd .rc_bc .hd .titlebar .hd, #photo_highlight .rc_bd .rc_bc .hd .titlebar, #photo_highlight .rc_hd, #photo_highlight .rc_hd div, #photo_highlight .rc_bd, #photo_highlight .rc_bc, #photo_highlight .rc_ft, #photo_highlight .rc_ft div, #photo_highlight .rc_bc .bd, #photo_highlight .ft{background:transparent;border-style:none;}/*olympia41124*/ |
19. Module Bình Luận Nhanh
Quote:
| #guestbook_entries .rc_bd .rc_bc .hd .titlebar .hd, #guestbook_entries .rc_bd .rc_bc .hd .titlebar, #guestbook_entries .rc_hd, #guestbook_entries .rc_hd div, #guestbook_entries .rc_bd, #guestbook_entries .rc_bc, #guestbook_entries .rc_ft, #guestbook_entries .rc_ft div, #guestbook_entries .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
20. Module Hồ Sơ Blog - Thông Tin Cá Nhân
Quote:
| #profile_card .rc_bd .rc_bc .hd .titlebar .hd, #profile_card .rc_bd .rc_bc .hd .titlebar, #profile_card .rc_hd, #profile_card .rc_hd div, #profile_card .rc_bd, #profile_card .rc_bc, #profile_card .rc_ft, #profile_card .rc_ft div, #profile_card .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
21. Module Album
Quote:
| #feature_link .rc_bd .rc_bc .hd .titlebar .hd, #feature_link .rc_bd .rc_bc .hd .titlebar, #feature_link .rc_hd, #feature_link .rc_hd div, #feature_link .rc_bd, #feature_link .rc_bc, #feature_link .rc_ft, #feature_link .rc_ft div, #feature_link .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
22. Module Web Yêu Thích
Quote:
| .col-150 .bookmark .rc_1, .col-150 .bookmark .rc_2, .col-150 .bookmark .rc_4, .col-150 .bookmark .new_rc_bd, .col-150 .bookmark .new_rc_bc, .col-600 .bookmark .rc_1, .col-600 .bookmark .rc_2, .col-600 .bookmark .rc_3, .col-600 .bookmark .rc_4, .col-600 .bookmark .rc_6, .col-600 .bookmark .new_rc_bd, .col-600 .bookmark .new_rc_bc, .row-760 .bookmark .rc_1, .row-760 .bookmark .rc_2, .row-760 .bookmark .rc_3, .row-760 .bookmark .rc_4, .row-760 .bookmark .rc_6, .row-760 .bookmark .new_rc_bd, .row-760 .bookmark .new_rc_bc, .row-920 .bookmark .rc_1, .row-920 .bookmark .rc_2, .row-920 .bookmark .rc_3, .row-920 .bookmark .rc_4, .row-920 .bookmark .rc_6, .row-920 .bookmark .new_rc_bd, .row-920 .bookmark .new_rc_bc{background:transparent!important;}/*olympia41124*/ |
23. Module Tự Thiết Kế
Module Tự Thiết Kế 1 :
Quote:
| #user_mod_10001 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10001 .rc_bd .rc_bc .hd .titlebar, #user_mod_10001 .rc_hd, #user_mod_10001 .rc_hd div, #user_mod_10001 .rc_bd, #user_mod_10001 .rc_bc, #user_mod_10001 .rc_ft, #user_mod_10001 .rc_ft div, #user_mod_10001 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 2 :
Quote:
| #user_mod_10002 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10002 .rc_bd .rc_bc .hd .titlebar, #user_mod_10002 .rc_hd, #user_mod_10002 .rc_hd div, #user_mod_10002 .rc_bd, #user_mod_10002 .rc_bc, #user_mod_10002 .rc_ft, #user_mod_10002 .rc_ft div, #user_mod_10002 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 3 :
Quote:
| #user_mod_10003 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10003 .rc_bd .rc_bc .hd .titlebar, #user_mod_10003 .rc_hd, #user_mod_10003 .rc_hd div, #user_mod_10003 .rc_bd, #user_mod_10003 .rc_bc, #user_mod_10003 .rc_ft, #user_mod_10003 .rc_ft div, #user_mod_10003 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 4 :
Quote:
| #user_mod_10004 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10004 .rc_bd .rc_bc .hd .titlebar, #user_mod_10004 .rc_hd, #user_mod_10004 .rc_hd div, #user_mod_10004 .rc_bd, #user_mod_10004 .rc_bc, #user_mod_10004 .rc_ft, #user_mod_10004 .rc_ft div, #user_mod_10004 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 5 :
Quote:
| #user_mod_10005 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10005 .rc_bd .rc_bc .hd .titlebar, #user_mod_10005 .rc_hd, #user_mod_10005 .rc_hd div, #user_mod_10005 .rc_bd, #user_mod_10005 .rc_bc, #user_mod_10005 .rc_ft, #user_mod_10005 .rc_ft div, #user_mod_10005 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 6 :
Quote:
| #user_mod_10006 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10006 .rc_bd .rc_bc .hd .titlebar, #user_mod_10006 .rc_hd, #user_mod_10006 .rc_hd div, #user_mod_10006 .rc_bd, #user_mod_10006 .rc_bc, #user_mod_10006 .rc_ft, #user_mod_10006 .rc_ft div, #user_mod_10006 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 7 :
Quote:
| #user_mod_10007 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10007 .rc_bd .rc_bc .hd .titlebar, #user_mod_10007 .rc_hd, #user_mod_10007 .rc_hd div, #user_mod_10007 .rc_bd, #user_mod_10007 .rc_bc, #user_mod_10007 .rc_ft, #user_mod_10007 .rc_ft div, #user_mod_10007 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 8 :
Quote:
| #user_mod_10008 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10008 .rc_bd .rc_bc .hd .titlebar, #user_mod_10008 .rc_hd, #user_mod_10008 .rc_hd div, #user_mod_10008 .rc_bd, #user_mod_10008 .rc_bc, #user_mod_10008 .rc_ft, #user_mod_10008 .rc_ft div, #user_mod_10008 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 9 :
Quote:
| #user_mod_10009 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10009 .rc_bd .rc_bc .hd .titlebar, #user_mod_10009 .rc_hd, #user_mod_10009 .rc_hd div, #user_mod_10009 .rc_bd, #user_mod_10009 .rc_bc, #user_mod_10009 .rc_ft, #user_mod_10009 .rc_ft div, #user_mod_10009 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Module Tự Thiết Kế 10 :
Quote:
| #user_mod_10010 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10010 .rc_bd .rc_bc .hd .titlebar, #user_mod_10010 .rc_hd, #user_mod_10010 .rc_hd div, #user_mod_10010 .rc_bd, #user_mod_10010 .rc_bc, #user_mod_10010 .rc_ft, #user_mod_10010 .rc_ft div, #user_mod_10010 .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
Như vậy là chúng ta đã trong suốt tất cả các module ở trang chính blog. Ngoài cách trong suốt từng module ta còn có thể trong suốt theo vị trí module.
24. Module phụ hẹp
Quote:
| .col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_hd, .col-150 .rc_hd div, .col-150 .rc_bd, .col-150 .rc_bc, .col-150 .rc_ft, .col-150 .rc_ft div, .col-150 .rc_bd .rc_bc .bd{background:transparent;border-style:none;}/*olympia41124*/ |
25. Module chính rộng
Quote:
| .col-600 .rc_bd .rc_bc .hd .titlebar .hd, .col-600 .rc_bd .rc_bc .hd .titlebar, .col-600 .rc_hd, .col-600 .rc_hd div, .col-600 .rc_bd, .col-600 .rc_bc, .col-600 .rc_ft, .col-600 .rc_ft div, .col-600 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft{background:transparent;border-style:none;}/*olympia41124*/ |
26. Module dài ở đầu và cuối blog kiểu dàn trang 2 cột
Quote:
| .row-760 .rc_bd .rc_bc .hd .titlebar .hd, .row-760 .rc_bd .rc_bc .hd .titlebar, .row-760 .rc_hd, .row-760 .rc_hd div, .row-760 .rc_bd, .row-760 .rc_bc, .row-760 .rc_ft, .row-760 .rc_ft div, .row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft{background:transparent;border-style:none;}/*olympia41124*/ |
27. Module dài ở đầu và cuối blog kiểu dàn trang 3 cột
Quote:
| .row-920 .rc_bd .rc_bc .hd .titlebar .hd, .row-920 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_hd, .row-920 .rc_hd div, .row-920 .rc_bd, .row-920 .rc_bc, .row-920 .rc_ft, .row-920 .rc_ft div, .row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft{background:transparent;border-style:none;}/*olympia41124*/ |
28. Phần tổng cộng lời bình và comment
Quote:
.cmt-mod-alist .comments-listing .hd, #comment_container li, #bd .rte_toolbar, .mod-trackback #trackback-listing, .mod-trackback ul {background:transparent;border-style:none;}/*olympia41124*/
.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}/*vietnam360plus.com*/ |
29. Phần tổng số trang
Quote:
| .pagination{background:transparent;}/*olympia41124*/ |
30. Đường viền các module
Quote:
| .rc_hd, .rc_hd div, .rc_bd, .rc_bd .rc_bc, .rc_ft, .rc_ft div{background:transparent;border-style:none;}/*olympia41124*/ |
31. Thông Tin Bản Quyền Blog
Quote:
| #ft{background:transparent;}/*olympia41124*/ |
Hoặc
Quote:
#ft{background:transparent;}/*olympia41124*/
#ft .info, #ft .rights{background:transparent;font-size:0;}/*vietnam360plus.com*/ |
32. Phần nhập mã Capcha
Quote:
| .captchaContentBox{background:transparent; border-style:none;}/*olympia41124*/ |
33. Phần thêm bạn và "Thao tác khác"
Quote:
| #profile_highlight #profile_nav{background:transparent;}/*olympia41124*/ |
34. Phần mở rộng của "Thao tác khác"
Quote:
| #profile_highlight .yui3-menu-corner,#profile_highlight .yui3-menu-corner div,#profile_highlight .yui3-menu-corner-bl,#profile_highlight .yui3-menu-corner .yui3-menu-corner-tr,#profile_highlight .yui3-menu-corner-br,#profile_highlight #profilemorelinks .yui3-menu-content{background:transparent;border-style:none;}/*olympia41124*/ |
Ở trên là code trong suốt từng phần cho blog. Nếu bạn muốn trong suốt toàn bộ blog và nhận thấy có quá nhiều code phải sử dụng thì hãy dùng code rút gọn trong suốt toàn blog. Lưu ý phần code rút gọn này chưa bao gồm code trong suốt nóc nhà và module web yêu thích.
35. Code rút gọn trong suốt toàn blog - trang chính
Quote:
.col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar, .col-150 .rc_bd .rc_bc .bd,
.col-600 .rc_bd .rc_bc .hd .titlebar .hd, .col-600 .rc_bd .rc_bc .hd .titlebar, .col-600 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft,
.row-760 .rc_bd .rc_bc .hd .titlebar .hd, .row-760 .rc_bd .rc_bc .hd .titlebar, .row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft,
.row-920 .rc_bd .rc_bc .hd .titlebar .hd, .row-920 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft,
.cmt-mod-alist .comments-listing .hd, #comment_container li, #bd .rte_toolbar, .mod-trackback #trackback-listing, .mod-trackback ul,
#blog_title .rc_bd .rc_bc .bd, #blast .rc_bc .bd, #blast .tail, .pagination, #ft, #article_list_module .mod-alist-searchbox input.ipt, #search_module input.textfield
{background:transparent;}/*olympia41124*/
.rc_hd, .rc_hd div, .rc_bd, .rc_bd .rc_bc, .rc_ft, .rc_ft div,.captchaContentBox{background:transparent;border-style:none;}/*vietnam360plus.com*/
.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}/*olympia41124*/ |
