Bài mới nhất

Sửa Đóng




Bài trước : [360Plus Medium] Chèn theme hai mảnh dạng top-bot cho Plus



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.

Ngoài ra trong bài viết này khái niệm trong suốt và làm biến mất đôi khi không phân biệt, các bạn nên xét kỹ trước khi sử dụng


1. Module BlackBox



Nếu muốn trong suốt nền cho module này thì sử dụng code :

#blog_masshead .rc, #blog_masshead .rc div, #blog_masshead .rc_bd, #blog_masshead .rc_bc, #blog_masshead .rc_ft, #blog_masshead .rc_ft div, #blog_masshead .bd, #blog_masshead{background:transparent;}/*olympia41124*/


Còn nếu muốn trong suốt một cách triệt để đến mức biến mất thì dùng code sau :

#blog_masshead .rc, #blog_masshead .rc div, #blog_masshead .rc_bd, #blog_masshead .rc_bc, #blog_masshead .rc_ft, #blog_masshead .rc_ft div, #blog_masshead .bd, #blog_masshead,#blog_masshead .menu .rc_w, #blog_masshead .menu .rc_e, #blog_masshead .menu.ml a, #blog_masshead .menu.mr a{background:transparent;}/*olympia41124*/

#blog_masshead .bd form input.ipt, #blog_masshead .bd form .btn, .blog_dummyselect .hd, .blog_dummyselect .hd span {background:transparent;border-style:none;}/*olympia41124*/

.blog_dummyselect .hd span {color:transparent;font-size:0px !important;}/*olympia41124*/

.blog_dummyselect img, #blog_masshead div.mhlogo a img {height:0px !important;}/*olympia41124*/

#blog_masshead{background:transparent;color:transparent;font-size:0px;}/*olympia41124*/




2. Module Tên Blog



Code :

#blog_title .rc, #blog_title .rc div, #blog_title .rc_bd, #blog_title .rc_bc, #blog_title .rc_ft, #blog_title .rc_ft div, #blog_title .bd{background:transparent;}/*olympia41124*/




3. Module Blast



Code :

#blast .rc, #blast .rc div, #blast .rc_bd, #blast .rc_bc, #blast .rc_ft, #blast .rc_ft div, #blast .rc_bc .bd{background:transparent;}/*olympia41124*/




4. Module Profile



Code :

#profile_highlight .rc, #profile_highlight .rc 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;}/*olympia41124*/




5. Module Tâm Trạng



Code:

#mod_lifeline .rc_bd .rc_bc .hd .titlebar .hd, #mod_lifeline .rc_bd .rc_bc .hd .titlebar, #mod_lifeline .rc, #mod_lifeline .rc div, #mod_lifeline .rc_bd, #mod_lifeline .rc_ft, #mod_lifeline .rc_ft div, #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;}/*olympia41124*/

#mod_lifeline .rc_bc, #mod_lifeline .bd{background:transparent !important;}/*olympia41124*/




6. Module Bình Luận Mới Nhất



Code :

#comment_new .rc_bd .rc_bc .hd .titlebar .hd, #comment_new .rc_bd .rc_bc .hd .titlebar,#comment_new .rc, #comment_new .rc 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;}/*olympia41124*/




7. Module Bài Mới Nhất



Code :

#article_new .rc_bd .rc_bc .hd .titlebar .hd, #article_new .rc_bd .rc_bc .hd .titlebar,#article_new .rc, #article_new .rc 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;}/*olympia41124*/




8. Module Thư Mục Riêng



Code :

#folder .rc_bd .rc_bc .hd .titlebar .hd, #folder .rc_bd .rc_bc .hd .titlebar,#folder .rc, #folder .rc div, #folder .rc_bd, #folder .rc_bc, #folder .rc_ft, #folder .rc_ft div, #folder .rc_bc .bd{background:transparent;}/*olympia41124*/




9. Module Lịch



Code :

#calendar .rc_bd .rc_bc .hd .titlebar .hd, #calendar .rc_bd .rc_bc .hd .titlebar,#calendar .rc, #calendar .rc div, #calendar .rc_bd, #calendar .rc_bc, #calendar .rc_ft, #calendar .rc_ft div, #calendar .rc_bc .bd{background:transparent;}/*olympia41124*/




10. Module Cập Nhật Ngày



Code :

#update_date .rc_bd .rc_bc .hd .titlebar .hd, #update_date .rc_bd .rc_bc .hd .titlebar,#update_date .rc, #update_date .rc 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;}/*olympia41124*/




11. Module Thống Kê



Code :

#statistic .rc_bd .rc_bc .hd .titlebar .hd, #statistic .rc_bd .rc_bc .hd .titlebar,#statistic .rc, #statistic .rc div, #statistic .rc_bd, #statistic .rc_bc, #statistic .rc_ft, #statistic .rc_ft div, #statistic .rc_bc .bd{background:transparent;}/*olympia41124*/




12. Module Danh Sách Bạn Bè



Code :

#friendlist_module .rc_bd .rc_bc .hd .titlebar .hd, #friendlist_module .rc_bd .rc_bc .hd .titlebar,#friendlist_module .rc, #friendlist_module .rc 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;}/*olympia41124*/




13. Module RSS



Code :

#rss_output .rc_bd .rc_bc .hd .titlebar .hd, #rss_output .rc_bd .rc_bc .hd .titlebar,#rss_output .rc, #rss_output .rc div, #rss_output .rc_bd, #rss_output .rc_bc, #rss_output .rc_ft, #rss_output .rc_ft div{background:transparent;}/*olympia41124*/




14. Module Bài Viết



Code :

#article_list_module .rc_bd .rc_bc .hd .titlebar .hd, #article_list_module .rc_bd .rc_bc .hd .titlebar,#article_list_module .rc, #article_list_module .rc 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.ipt, #article_list_module .mod-alist-searchbox input.btn, #article_list_module .pagination{background:transparent;}/*olympia41124*/




15. Module Blog Tôi Thích



Code :

#subscribe_highlight .rc_bd .rc_bc .hd .titlebar .hd, #subscribe_highlight .rc_bd .rc_bc .hd .titlebar,#subscribe_highlight .rc, #subscribe_highlight .rc 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;}/*olympia41124*/




16. Module Tìm



Code :

#search_module .rc_bd .rc_bc .hd .titlebar .hd, #search_module .rc_bd .rc_bc .hd .titlebar,#search_module .rc, #search_module .rc div, #search_module .rc_bd, #search_module .rc_bc, #search_module .rc_ft, #search_module .rc_ft div, #search_module .rc_bc .bd{background:transparent;}/*olympia41124*/

#search_module input.textfield{background:transparent;}/*olympia41124*/

#search_module input.submit{background:transparent;border-style:none;}/*olympia41124*/




17. Module Blog Về Tôi



Code :

#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, #mod-tagged-frd-article .rc 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;}/*olympia41124*/




18. Module Hình Ảnh Trong Blog



Code :

#photo_highlight .rc_bd .rc_bc .hd .titlebar .hd, #photo_highlight .rc_bd .rc_bc .hd .titlebar,#photo_highlight .rc, #photo_highlight .rc 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;}/*olympia41124*/




19. Module Bình Luận Nhanh



Code :

#guestbook_entries .rc_bd .rc_bc .hd .titlebar .hd, #guestbook_entries .rc_bd .rc_bc .hd .titlebar,#guestbook_entries .rc, #guestbook_entries .rc 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;}/*olympia41124*/




20. Module Hồ Sơ Blog



Code :

#profile_card .rc_bd .rc_bc .hd .titlebar .hd, #profile_card .rc_bd .rc_bc .hd .titlebar,#profile_card .rc, #profile_card .rc 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;}/*olympia41124*/




21. Module Tự Thiết Kế



Module Tự Thiết Kế 1 :

#user_mod_10001 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10001 .rc_bd .rc_bc .hd .titlebar, #user_mod_10001 .rc, #user_mod_10001 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 2 :

#user_mod_10002 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10002 .rc_bd .rc_bc .hd .titlebar, #user_mod_10002 .rc, #user_mod_10001 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 3 :

#user_mod_10003 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10003 .rc_bd .rc_bc .hd .titlebar, #user_mod_10003 .rc, #user_mod_10003 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 4 :

#user_mod_10004 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10004 .rc_bd .rc_bc .hd .titlebar, #user_mod_10004 .rc, #user_mod_10004 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 5 :

#user_mod_10005 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10005 .rc_bd .rc_bc .hd .titlebar, #user_mod_10005 .rc, #user_mod_10005 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 6 :

#user_mod_10006 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10006 .rc_bd .rc_bc .hd .titlebar, #user_mod_10006 .rc, #user_mod_10006 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 7 :

#user_mod_10007 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10007 .rc_bd .rc_bc .hd .titlebar, #user_mod_10007 .rc, #user_mod_10007 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 8 :

#user_mod_10008 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10008 .rc_bd .rc_bc .hd .titlebar, #user_mod_10008 .rc, #user_mod_10008 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 9 :

#user_mod_10009 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10009 .rc_bd .rc_bc .hd .titlebar, #user_mod_10009 .rc, #user_mod_10009 .rc 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;}/*olympia41124*/


Module Tự Thiết Kế 10 :

#user_mod_10010 .rc_bd .rc_bc .hd .titlebar .hd, #user_mod_10010 .rc_bd .rc_bc .hd .titlebar, #user_mod_10010 .rc, #user_mod_10010 .rc 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;}/*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.


22. Module Album, Bảng Tin Nhắn



Code :

Module Album :

#feature_album .rc_bd .rc_bc .hd .titlebar .hd, #feature_album .rc_bd .rc_bc .hd .titlebar,#feature_album .rc, #feature_album .rc div, #feature_album .rc_bd, #feature_album .rc_bc, #feature_album .rc_ft, #feature_album .rc_ft div{background:transparent;}/*olympia41124*/


Module Bảng Tin Nhắn

#feature_mb .rc_bd .rc_bc .hd .titlebar .hd, #feature_mb .rc_bd .rc_bc .hd .titlebar,#feature_mb .rc, #feature_mb .rc div, #feature_mb .rc_bd, #feature_mb .rc_bc, #feature_mb .rc_ft, #feature_mb .rc_ft div{background:transparent;}/*olympia41124*/




23. Module Web Yêu Thích



Code :

#mod_bookmark .rc_1, #mod_bookmark .rc_1 div {background:transparent;}/*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ụ ở hai bên blog



Code :

.col-150 .rc_bd .rc_bc .bd{background:transparent;}/*olympi41124*/




25. Module chính ở giữa blog



Code :

.col-600 .rc_bd .rc_bc .bd{background:transparent;}/*olympia41124*/




26. Module dài ở đầu và cuối blog

Code :

.row-920 .rc_bd .rc_bc .bd{background:transparent;}/*olympia41124*/


27. Module dài của kiểu dàn trang hai cột

Code :

.row-760 .rc_bd .rc_bc .bd{background:transparent;}/*olympia41124*/


28. Thanh tiêu đề các module

Code :

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




29. Đường viền các module

Code :

.rc, #friendlist_module .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc,
.rc div, #friendlist_module .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div,
.rc_bd, #friendlist_module .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd,
.rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc,
.rc_ft, #friendlist_module .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft,
.rc_ft div, #friendlist_module .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent;}/*olympia41124*/


Đến bây giờ chúng ta có thể xem lại toàn bộ blog đã được trong suốt hoàn toàn




Ở dưới cùng blog còn phần chữ bản quyền



30. Thông Tin Bản Quyền Blog


Code :

#footer, #footer .ft .info a, #footer .ft .provider p, #footer .ft .info p, #footer .ft .rights p, #footer .ft .privacy p, #footer .ft .disclaimer p, #footer .ft .provider h4, #footer a, .rights, #footer {background:transparent;border-top:none;height:0px; font-size:0px;color:transparent; border-style:none;}/*olympia41124*/




Có một điều cần lưu ý là các code trong suốt trên chỉ có tác dụng tốt nhất trên Mozilla Firefox. Để có thể hoạt động tốt trên các trình duyệt khác như IE thì ta cần có code sửa lỗi trong suốt


31. Sửa Lỗi trong suốt trên IE

Code :

mod-alist-full .pagination{background:transparent;


Ở 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.


32. Code rút gọn trong suốt toàn blog - trang chính

Code :


#blog_title .rc, #blog_title .rc div, #blog_title .rc_bd, #blog_title .rc_bc, #blog_title .rc_ft, #blog_title .rc_ft div, #blog_title .bd,
#blast .rc, #blast .rc div, #blast .rc_bd, #blast .rc_bc, #blast .rc_ft, #blast .rc_ft div, #blast .rc_bc .bd,
.col-150 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .bd,
#article_list_module .pagination, #photo_highlight .ft, #search_module input.textfield, #article_list_module .mod-alist-searchbox input.ipt, #article_list_module .mod-alist-searchbox input.btn, #mod_bookmark .rc_1, #mod_bookmark .rc_1 div,
#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,
.rc, #friendlist_module .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc,
.rc div, #friendlist_module .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div,
.rc_bd, #friendlist_module .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd,
.rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc,
.rc_ft, #friendlist_module .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft,
.rc_ft div, #friendlist_module .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div,
.col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar, .col-600 .rc_bd .rc_bc .hd .titlebar .hd, .col-600 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_bd .rc_bc .hd .titlebar .hd, .row-920 .rc_bd .rc_bc .hd .titlebar, .row-760 .rc_bd .rc_bc .hd .titlebar .hd, .row-760 .rc_bd .rc_bc .hd .titlebar {background:transparent;}/*olympia41124*/

#mod_lifeline .rc_bc, #mod_lifeline .bd{background:transparent !important;}/*olympia41124*/

#search_module input.submit{background:transparent;border-style:none;}/*olympia41124*/

#footer, #footer .ft .info a, #footer .ft .provider p, #footer .ft .info p, #footer .ft .rights p, #footer .ft .privacy p, #footer .ft .disclaimer p, #footer .ft .provider h4, #footer a, .rights, #footer {background:transparent;border-top:none;height:0px; font-size:0px;color:transparent; border-style:none;}/*olympia41124*/

mod-alist-full .pagination{background:transparent;



Bài tiếp theo : [360Plus Medium] Trong suốt toàn bộ blog - Các trang phụ


Bài viết về bạn hoặc có tag tên bạn:

  • Chưa có bài nào có liên quan.

Người đăng ký yêu thích blog này cũng đồng thời thích:

  • Chưa có blog yêu thích nào có liên quan.