Tìm hiểu CSS 360 Plus của yahoo phần 3 docx

Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com .mod-alist-full .alist-comment .comment-ctnr {background:repeat-y top right;} Các bạn nhớ chỉnh sửa size hình để toàn comment có được theme đồng nhất nhé người viết Uyen My 19. Ảnh nền phần tiêu đề bài viết và nick comment Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #article_list_module .rc_bd .rc_bc h2{background:url(http://i282.photobucket.com/albums/kk263/uyenmy_plus/591400hxt8p0qdcj.gif) repeat left top;} người viết Uyen My 20. Thay đổi tag bài viết Code: .mod-alist-tagsbar {background:url(link hình) no-repeat center;height:Apx;} A: thay đổi height = chiều cao của ảnh (nên thay đúg height để hình đc đẹp hơn) người viết Nhóc khỉ blog 21. Ngăn dòng bài viết Xoá đường ngăn dòng .mod-alist-summary .main-bd li{border-top:none} Thay đường ngăn dòng bằng Hình Ảnh .mod-alist-summary .main-bd li{border-top:none;background:url(Link Ảnh) no-repeat bottom;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Hình ảnh ngăn dòng này chỉ suốt hiện khi bạn không để hiện thị bài viết đầu tiên, tức để hiện thị tên bài viết hoặc hiện thị nội dung tóm tắt bài viết. người viết w-dephia 22. Xóa đường viền /* 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*/ Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Vào thiết kế chọn Theme, chế độ tự sửa,copy đoạn code này vào CSS Lưu ý: Bạn cần kiểm tra xem trong CSS của bạn có sử dụng đoạn code nào liên quan đến viền của module không để tránh gây xung đột và trồng chéo lên nhau. người viết co0l.l0ve'sblog 23. Tạo đường viên trong suốt #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_ne-2.png) no- repeat right bottom;} #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_nw.png) no-repeat left bottom;} #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:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_e.png) repeat-y right top;} #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_w.png) repeat-y;} #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:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_se- 2.png) no-repeat right top;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_sw.png) no-repeat left top;} #blast .rc_ft {background:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/DataBlog/blast-sw.png) no-repeat left bottom;} #blast .rc_ft div {background:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/DataBlog/blast-se.png) no-repeat right bottom;}#blast .rc_bc .bd{background-color:transparent;background- image:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/042112transparent_bg.png);} #blast .rc_bc .bd {font-style:italic;color:#000000;} theo 360themes.com 24. Thiết kế Modun Profile 1> Code cho Module Profile : Đầu tiên là Code cho Mod này : Code: #profile_highlight .rc {background:url(Link ảnh Trên) no-repeat left bottom;height:X px} #profile_highlight .rc_ft {background:url(Link Ảnh Dưới) no-repeat left top;height: Y px} #profile_highlight .rc_bd {background:url(Link ảnh Giữa) repeat-y top;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Các đọan Link ảnh trên, dưới và ở giữa các bạn phải thay ảnh đúng vị trí vào cho phù hợp nhé. Còn Height: ở đây, muốn hiện chiều cao của ảnh 100% bạn phải thay X px, Y px bằng đúng kích thước chiều cao của ảnh . Muốn xem chiều cao của ảnh, chỉ việc Right Click vào ảnh chọn Properties, chuyển sang thẻ Sumary, nhìn vào dòng Height là có thể thấy được ảnh cao bao nhiêu. 2> Ảnh : Ở đây, mình chia sẻ một số cách làm ảnh như sau : Bước 1 : Đầu tiên bạn thiết kế một ảnh với kích thước 150 x 300 px. Bước 2 : Sau đó cắt ảnh đó ra làm 3 phần (Dùng Photoshop hoặc PhotoScape cũng được) Phần đầu : Cắt với kích thuớc 150 x (50-60 px) . Phần giữa : Phần này các bạn nên làm sao mà có thể lặp lại được, vì vậy chỉ nên cắt từ 150 x 5 px thôi. Phần cuối : Cắt phần này tùy ý, đây là phần phía dưới cùng Bước 3 : Sau khi đã cắt xong ảnh, việc cuối cùng là up ảnh lên host, và thay link ảnh vào đọan Code đã cho. Cuối cùng là wăng code vào CSS thôi . người viết w-dephia 25. Trang trí nóc nhà Yahoo! 360plus Trước mọi người chỉ chú trọng đến thay đổi mọi vật dụng trong ngôi nhà 360 plus của chúng ta chắc ít bạn để ý đến là "mái nhà" cũng có thể trang trí theo phong cách riêng của mỗi người Cũng ko có ji là cao siêu ở đây chỉ có 1 số đoạn code làm trong suốt hình nền của "mái nhà" chúng ta (tạm gọi là mái nhà nhá ^^ ko bik gọi là ji nữa ) đây chỉ là cơ bản thui tùy theo phong cách mỗi người mà trang trí sao cho đẹp là đc ùi Phần 1: Làm Trong Suốt Các Đường Viền Code 1: Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #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{width:100%;height:4px;background:transparent;} #blog_masshead .bd{clear:both;padding:6px 0 0 5px;height:30px; margin:3px 2px 0 2px !important;*margin:0px 2px 0 2px;background:transparent;} Đoạn code trên để làm cho các viền trong suốt (ở đây Khỉ cho nó trng suốt còn bạn nào muốn chèn ảnh khác zô cũng đc ^^ càng hay ) ========================================= Phần 2:Thay Đổi Thanh Công Cụ Code 2: #blog_masshead .menu.mr a{background-image:url(http://files.myopera.com/n2-k/360plus/masshead-menu- 2.png);} #blog_masshead .menu .rc_w{float:left;width:5px;height:27px;background:url(http://files.myopera.com/n2- k/360plus/masshead-menu-1.png) no-repeat 0 0;} #blog_masshead .menu .rc_e{float:left;width:5px;height:27px;background:url(http://files.myopera.com/n2- k/360plus/masshead-menu-1.png) no-repeat right top;} #blog_masshead .menu.ml a{background:url(http://files.myopera.com/n2-k/360plus/masshead-menu-1.png) no- repeat;} Ở đây Khỉ đã giảm Opacity của thanh công cụ xuống để cho nó trong suốt mờ mờ ^^ ( bạn có thể tự vẽ 1 thanh công cụ cho riêng mình ) ====================================== Phần 3: Thay Đổi Button Tìm kiếm ^^ code3: #blog_masshead .bd form .btn{border:none;width:60px;height:77px;background:url(Link Button) no-repeat 0 0;cursor:pointer;} Sau khi tìm đc 1 button tìm kiếm vừa ý khi thay link các bạn nhớ thay luôn kick thước width + height đúng với link button nha ========================================= Phần 4: Thay Đổi Background và làm chữ nhấp nháy Code 4: #blog_masshead{font-size:12px;color:#ccc;background:url(link hình) repeat-x 0 5px;height:Xpx;} #blog_masshead a{color:A;text-decoration:blink;} X : Chiều cao của ảnh A: Mã Màu Chữ Lưu Ý : bạn nên xếp code theo thứ tự mình đã viết nhá mất công bị đè hình lên nhau tùm lum á người viết Uyen My Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com 26. Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách: /*Blog iu thích*/ #subscribe_highlight rc_bd .rc_bc .bd ul li {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/d71bec6e.jpg) no-repeat center left;border-top:1px dotted #D1CFCF;} /*Thư mục*/ #folder rc_bd .rc_bc .bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /*Bình luận mới nhất*/ . cùng là wăng code vào CSS thôi . người viết w-dephia 25. Trang trí nóc nhà Yahoo! 36 0plus Trước mọi người chỉ chú trọng đến thay đổi mọi vật dụng trong ngôi nhà 36 0 plus của chúng ta chắc ít. Ebook CSS 36 0plus ver 1.0 hatim87uyennhi @yahoo. com & changtraiiudoi@ymail.com Vào thiết kế chọn Theme, chế độ tự sửa,copy đoạn code này vào CSS Lưu ý: Bạn cần kiểm tra xem trong CSS của. {background:url(http://i461.photobucket.com/albums/qq 334 /changtraiiudoiblog/mini%20pro/rc_se- 2.png) no-repeat right top;} Ebook CSS 36 0plus ver 1.0 hatim87uyennhi @yahoo. com & changtraiiudoi@ymail.com