Tài liệu CSS 360plus ver 1.0 doc

Ebook CSS 360plus ver 1.0 Welcome to Changtraiiudoi’s Blog & HaTim’s Blog Hỏi đáp – Đóng góp Check for updatas Code css cho Yahoo! 360plus Về Ebook CSS 360plus ver 1.0 Giới thiệu CSS cách chèn code css Ý nghĩa code việc viết code css Ảnh tất trang Theme mảnh Top - Bottom Modun tên blog Modun blast Chỉnh sửa chữ phông tiêu đề Đặt ảnh cho tiều đề Thay thêm icon cho tiều đề modun Ảnh cho modun Tạo nút Home Thay icon tâm trạng Hình tiêu đề viết Hình Modun viết Code toolbar phần coment Ảnh tổng số trang, cuối modun viết Làm hình trang comment Làm ảnh phần tiêu đề viết nick comment Thay đổi tag viết Ngăn dịng viết Xóa đường viền Tạo đường viên suốt Thiết kế Modun Profile Trang trí nhà Yahoo! 360plus Thêm thay đổi icon modun có sẵn tạo đường viền ngăn cách Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo để chuôt vào Hiệu ứng tạo nút ấn modun Làm trái tim,mưa,tuyết rơi,bướm bay di chuột vào link Blog hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Code sửa lỗi phông chữ, blog bị đen làm suốt 01 Về Ebook CSS 360plus ver.1.0 Yahoo! 360plus sản phẩm Blog với nhiều tính hấp dẫn người dung sử dụng CSS, hỗ trợ kéo thả thiết kế, upload ảnh trực tiếp lên Blog, không giới hạn dung lượng lưu trữ, quản lý trình bài viết theo thư mục, giao diện trực quan, ngơn ngữ tiếng Việt…Vì thế, sau đời tạo nên sốt cho làng Blogger Việt Nam Nhưng lại có nhiều bạn không tránh khỏi lúng túng muốn tạo cho trang blog đẹp, mang phong cách, cá tính Và để giúp bạn điều này, đỡ thời gian tìm kiếm hướng dẫn thiết kế mạng, changtraiiudoi@ymail.com hatim87uyennhi@yahoo.com biên tập ebook - bao gồm tất code css cho 360plus, từ code tạo ảnh đơn giản đến code tạo hiệu ứng phức tạp Trong có nhiều viết sưu tầm từ nhiều nguồn mạng, thấy code có nhiều địa không phân biệt đâu nguồn thật ! Mong nhận ý kiến đóng góp phát thiếu xót ebook css Welcome to Changtraiiudoi’s Blog & HaTim’s Blog Hỏi đáp – Đóng góp Check for updatas 02 Giới thiệu CSS cách chèn code css CSS loại ngôn ngữ dàn trang, định kiểu cho thành phần trang Web hay Blog Nói chung chung q, nơm na CSS người mua kiểu bàn ghế, kiểu đồ đạc nhà theo ý chủ nhà xếp chúng theo ý ơng chủ ln Cụ thể làm nhiệm vụ biểu diễn fonts (phông chữ), colours (màu sắc), margins (canh lề), lines (các loại đường, nét), height (chiều cao), width (độ rộng), background images (ảnh loại), xác định vị trí cho khối… CSS từ viết tắt Cascading Style Sheet tạm dịch bảng kiểu xếp chồng Đầu tiên bạn vô phần Thiết Kế ~~> Theme ~~> Chế độ tự chỉnh sửa ~~> Click nút Tiếp ~~> Hiện khung có bảng màu, kéo xuống thấy chữ CSS, bên cạnh có khung cho điền text Đó phần điền CSS hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 03 Ý nghĩa code việc viết code css Trang trí Khung kiểu liệt kê : Khung Thống kê (#statistic), Bài viết (#article_new), Lời bình (#comment_new), Thư mục (#folder) Ở khung lớp để đặt ảnh (.bd), lớp để đặt ảnh (ul -lớp bao gồm khối liệt kê) (li - lớp bao gồm dòng liệt kê) Lớp (li) thường dùng để tạo icon đầu dòng cho liệt kê (Ví dụ lệnh: #article_new bd ul li {background:transparent url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_open.gif) no-repeat center left;} dùng để tạo hình sách nhỏ trước tiêu đề viết mới) Ở khung Bài viết mới, Thư mục, Bạn bè có lớp (ul), riêng khung Lời bình có nhiều lớp (bằng số có lời bình ra) Ảnh đặt lớp (ul) ảnh đặt lớp (.bd) muốn nhìn thấy ảnh lớp (.bd) khơng tô màu lớp (ul) Ở đây, lệnh HEIGHT sử dụng để tăng chiều cao khung cho thích hợp với ảnh đặt thêm vào Ví dụ code CSS trang trí khung Thống Kê tơi: #statistic rc_bd rc_bc bd {background:#ffffee url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/Background/05bgc.gif);} Lệnh chọn màu ảnh lớp bd (trong ví dụ ảnh che hết màu nền, đưa vào chi để minh họa) #statistic rc_bd rc_bc bd ul {height:400px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/5.gif) no-repeat bottom left;} Lệnh để thay đổi chiều cao phần liệt kê (cũng khung) chọn ảnh để phần phía khung Trang trí cho khung Giới thiệu thân (#profile_highlight) Các bạn trang trí 360 plus CSS hẳn biết 360 plus bổ hẳn lớp ảnh để trang trí đường viền cho khung là: rc, rc div : dùng để tạo đường viền đỉnh; rc_bd, rc_bd rc_bc: dùng để tạo đường viền bên trái phải; rc_ft, rc_ft div: dùng để tạo đường viền đáy; Nếu bạn không dùng viền cho khung, trang trí đường viền lệnh BORDER bạn có lớp thêm để đặt ảnh cho khung (quá nhiều, mà dùng hết chứ!) Nếu bạn dùng viền cho khung Giới thiệu thân rồi, bạn đặt thêm hình vào để trang trí Khung đẹp thêm cách sử dụng #profile_highlight_module đặt trùng #profile_highlight Lúc này, bạn phải nhiều lần sử dụng lệnh HEIGHT Tham khảo ví dụ đây: #profile_highlight hd, #profile_highlight ft {height:0px;} Lệnh để đảm bảo tiêu đề phần đáy khung Tự giới thiệu có chiều cao #profile_highlight bd {font-family:PAPYRUS;font-size:21px;fontweight:bold;color:#000000;height:400px;background:url(http://i266.photobucket.com/albums/ii277/babybao_ilove u/flower/695072k2m8tfrqy2.gif) no-repeat bottom center;} Lệnh chọn hình đặt phía khung chỉnh chiều cao khung cho hợp lý với ảnh đặt vào; #profile_highlight_module {height:400px;background:#FFFFFF url(http://i266.photobucket.com/albums/ii277/babybao_iloveu/background%201/070307hnc204_m_cola71a.gif);} Lệnh để chọn màu nền, hình chỉnh chiều cao khung để khơng vượt q đường viền hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Theo hienhoang74@yahoo.com col-150 Chỉ modun nhỏ tự tạo, nằm bên blog .col-600 Chỉ modun lớn nằm blog .row-920 Chỉ modun dài nhất, nằm blog Danh sách trang đặt hình nền: body.blog_my body.profile_view body.comment_list 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.subscribe_list body.post_gb body.gallery body.photo_big body.slideshow body.photo_upload_pc body.photo_upload_gallery Màu link màu di chuột đến link: a{color:#6F5F06;} a:hover{color:#FF0000;} rc, rc div : dùng để tạo đường viền đỉnh rc_bd, rc_bd rc_bc: dùng để tạo đường viền bên trái phải rc_ft, rc_ft div: dùng để tạo đường viền đáy font-family:PAPYRUS -Phông chữ font-size:21px -Cỡ chữ font-weight:bold -Chữ in đậm font-style:italic -Chữ nghiêng color:#FFHDFS -mã màu height:400px -Chiều cao modun height:auto -Chiều dài tự động border -Đường viền, đường biên border-left:5px dotted #fff -Đường viền trái 5px dotted, màu #fff hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 text-align:right -Căn chữ sang phải no-repeat center top - Có nghĩa ảnh thị lần (no-reapeat), ko lặp lại, ảnh (center) tiêu đề hay modun, ảnh thị từ xuống (top) bottom Ảnh thị từ lên right -Căn phải left -Căn trái repeat -Lặp từ trái qua phải, từ xuống no-repeat -Không lặp repeat-x lặp theo chiều ngang repeat-y -Lặp theo chiều học background:transparent -Dùng làm suốt hoàn toàn background:#FHJDFH -Chèn màu vào background:URL(Link ảnh) -Chèn ảnh vào background:transparent url(link ảnh) viết giản lược thành background:URL(Link ảnh) !important -Khi qui định thuộc tính !important, thuộc tính khơng bị đè 04 Ảnh tất trang Code đặt ảnh tất trang mà blog360plus cho phép đặt ảnh nền: Body.profile_view, body.blog_my, body.guestbook, body.comment_list, body.comment_list, body.blog_my_index, body.slideshow, body.blog_archives_folder, body.comment_listing, body.trackback_listing, body.post_doodle, body.guestbook, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.subscribe_list, body.post_gb, body.gallery, body.photo_big, body.photo_upload_pc, body.photo_upload_gallery {background:url(Link ảnh) repeat top fixed;} Lưu ý: Repeat lặp ảnh từ trái qua phải, từ xuống Ta thay thành repeat-x để lặp từ trái qua phải, lặp theo chiều ngang Thay thành repeat-y để lặp theo chiều dọc, từ trái qua phải Khi ta thêm: left ảnh lặp từ trái qua phải, right ảnh lặp từ bên phải qua trái Them top để ảnh thị từ xuống, thay top bottom để ảnh thị từ lên Thêm fixed để anh ko chuyển động (đứng im) ta kép trang (cn trang) blog Các bạn tách từ code viết giản lược, viết gộp để trang có ảnh riêng Ví dụ ảnh trang blog dùng code này: Body.blog_my { background:url(Link ảnh) repeat top fixed;} theo 360themes.com 05 Theme mảnh Top – Bottom body{background:#cc99ff;} /* Màu theme, nên thay đổi trùng với màu ảnh để tăng tính thẩm mỹ cho theme*/ #doc2, #doc{background:#cc99ff url(Link ảnh Top) no-repeat center top;} /* mau nen cua theme va link hinh top-theme thay doi duoc*/ #bd{background:url(Link ảnh Bottom) no-repeat center bottom;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 người viết Vũ Nguyễn 06 Modun tên blog Code xóa modun tên viết: #blog_title{height:0px;} Code chỉnh sửa phông màu chữ: #blog_title bd h2{ text-align:left;font-size:16px;color:#FFFFFF;} /*Chỉnh tên blog*/ #blog_title rc_bc bd{text-align:center;font-size:14px;color:#FFFFFF;} /*Chỉnh nội dung mô tả blog*/ người viết Changtraiiudoi@ymail.com 07 Modun blast 1.1 Đầu tiên bạn copy paste code vào để suốt Tên Blog Blast : /* Lam Trong Suot Nen Module Ten Blog va Module Blast */ #blog_title bd, #blast rc_bc bd{background-color:transparent;backgroundimage:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rce-blue.png);} /* link hinh nen cua blast co the thay doi*/ 1.2 Tiếp theo đoạn Code cho Blast biến thành màu xanh suốt: /* Border cua Blast suot*/ #blast rc div {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcne-blue.png) norepeat right bottom;} #blast rc {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcnwblue.png) no-repeat left bottom;} #blast rc_bd div.rc_bc {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rce-blue.png) repeat-y right top;} #blast rc_bd {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcwe-blue.png) repeaty;} #blast rc_ft {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/blastsw-blue.png) no-repeat left bottom;} #blast rc_ft div {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/blastse-blue.png) no-repeat right bottom;} /* Ket Thuc*/ người viết Vũ Nguyễn 2.1 Đẩy Khung lời chào (modul Blast) dịch xuống chút không bị chồng lên Khung tiêu đề (module Blog_title) Đẩy Khung lời chào (modul Blast) dịch xuống chút không bị chồng lên Khung tiêu đề (module Blog_title) Để làm vậy, bạn sử dụng code sau: #blog_title ft {height:10px;background:transparent} #blog_title rc_ft {height:10px} #blog_title rc_ft div{height: 10px} #blast rc{height:10px} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #blast rc div{height:10px} Ảnh trước dùng code Ảnh sau dùng code Ps: Khuyến cáo nên dùng đủ code trên, phòng trường hợp gây lỗi ta dùng số code khác người viết hienhoang74@yahoo.com 2.2 Thêm ảnh, tạo ảnh động Khung Blast Đây code thêm ảnh, tạo ảnh động Khung Blast: #blast rc {background:transparent url(http://sg.yimg.com/i/vn/blog/i/blog/rc_nw.gif) left bottom no-repeat;} #blast rc div {height:20px; background:url(http://sg.yimg.com/i/vn/blog/i/blog/rc_ne.gif) right bottom no-repeat;} #blast rc_bd {background:#ffffff url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/background2/bg_2a.jpg);} #blast rc_bd rc_bc {background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/5807a4tbnh2qdv.gif) norepeat bottom left;} #blast rc_bd rc_bc bd {font-size:18px;bordertop:none;height:65px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images/4pypso n_th-1.gif) no-repeat right bottom;} Ảnh sản phẩm code Ps: Các bạn thay link ảnh cuối code (2 đoạn code cuối), tức code in nghiêng ảnh khác, lưu ý đến font-size:16px; border-top:none; height: Chiều cao, độ dài ảnh, tính px; hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #blast rc_bd rc_bc {background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/5807a4tbnh2qdv.gif) norepeat bottom left;} #blast rc_bd rc_bc bd {font-size:18px; border-top:none; height:65px; background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/images/4pypson_th-1.gif) no-repeat right bottom;} người viết hienhoang74@yahoo.com 08 Chỉnh sửa chữ tiêu đề Làm chữ tiêu đề làm tiêu đề #user_mod_1000X rc_bd rc_bc hd titlebar, #user_mod_1000X rc_bd rc_bc hd titlebar h2{ height:0;font-size:0;} Chỉ sử dụng font-size:0 muốn chữ tiêu đề Với tiêu đề, bạn đặt phông chữ, chỉnh cỡ chữ, lề: #user_mod_1000X rc_bd rc_bc hd titlebar hd h2{font-size:13px;font-style:italic;color:#3395c8;textalign:center;} Căn tiêu đề: hd titlebar hd h2{text-align:center;} Thay center right left để phải, trái chữ người viết Changtraiiudoi@ymail.com 09 Đặt ảnh cho tiều đề modun /*Ảnh tiêu đề 10 modun tự tạo*/ #user_mod_10001 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10002 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10003 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10004 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10005 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10006 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10007 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10008 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10009 rc_bd rc_bc hd, hd titlebar hd, #user_mod_10010 rc_bd rc_bc hd, hd titlebar hd {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/12-10-200810-03-57CH.png) repeat-x left top;height:28px;} /*Ảnh Tiêu đề modun có sẵn */ #mod-alist-fullDrag rc_bd rc_bc hd titlebar, #mod-edit-bar rc_bd rc_bc hd titlebar, #mod-alist-searchbox rc_bd rc_bc hd titlebar, #mod-alist-pagination rc_bd rc_bc hd titlebar, #rss_output rc_bd rc_bc hd titlebar, #mod-tagged-frd-article rc_bd rc_bc hd titlebar, #feature_link rc_bd rc_bc hd titlebar, #gallery_list rc_bd rc_bc hd titlebar, #gb_msg rc_bd rc_bc hd titlebar, #mod-friend-list-all rc_bd rc_bc hd titlebar, #profile_info rc_bd rc_bc hd titlebar hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/12-10-200810-03-57CH.png) repeat-x left top;height:28px;} Các bạn thay height chiều cao ảnh người viết Vũ Nguyễn 10 Thay thêm icon cho tiều đề modun /* Bảng thống kê */ #statistic titlebar hd {background:url(Link ảnh) no-repeat left top;} /* Bài đăng */ #article_new titlebar hd {background:url(Link ảnh) no-repeat left top;} /* Ảnh blog */ #photo_highlight titlebar hd {background:url(Link ảnh) no-repeat left top;} /* Ảnh bình luận nhất*/ mod-comment-new titlebar hd {background:url(Link ảnh) no-repeat left top;} /* Thư mục riêng */ #folder titlebar hd {background:url(Link ảnh) no-repeat left top;} /* Chèn hình cho module hình ảnh*/ #gallery_list titlebar hd h2{background:url(Link ảnh) no-repeat left top;} /*Blog iu thích*/ #subscribe_highlight titlebar hd h2{background:url(Link ảnh) no-repeat left top;} /*Blog tôi*/ #mod-tagged-frd-article titlebar hd h2{background:url(Link ảnh) no-repeat left top;} /* Cập nhật ngày */ #update_date titlebar hd {background:url(Link ảnh) no-repeat left top;} /* RSS */ #rss_output titlebar bd a{height:25px;background:url(Link ảnh) no-repeat left top;} /* Tìm kiếm */ #search_module titlebar hd {background:url(Link ảnh) no-repeat left top;} /* Modun tự tạo*/ #user_mod_1000X titlebar hd {background:url(Link ảnh) no-repeat left top;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Các bạn thay x từ đến 10, x tên thứ tự modun Chiều cao link ảnh 26px, bạn thêm height:28px để chỉnh sửa lại chiều cao tiêu đề, ví dụ ta code sau #search_module titlebar hd {background:url(Link ảnh) no-repeat left top;height:28px;} người viết Changtraiiudoi@ymail.com 11 Ảnh cho modun /* Chèn hình cho module thơng tin cá nhân bao gồm avartar */ #profile_highlight_module rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} /* Modun tâm trạng*/ #mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:url(Link ảnh) !important;} /* Chèn hình cho module fiendlist */ #friendlist_module rc_bd bd {background:url(Link ảnh) top right repeat;} /* Chèn hình cho module Bài Mới */ #article_new rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} /* Chèn hình cho module Thư Mục Riêng*/ #folder rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} /* Chèn hình cho module Comment mới*/ #comment_new rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} /* Chèn hình cho module Thống Kê plus*/ #statistic rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} /* Chèn hình cho module Blog yêu thích*/ #subscribe_highlight rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} /* Modun hình ảnh*/ #gallery_list rc_bd rc_bc bd {background:url(Link ảnh) top right repeat;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #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 viết Code: mod-alist-tagsbar {background:url(link hình) no-repeat center;height:Apx;} A: thay đổi height = chiều cao ả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 viết Xố đường ngăn dịng mod-alist-summary main-bd li{border-top:none} Thay đường ngăn dịng Hình Ảnh mod-alist-summary main-bd li{border-top:none;background:url(Link Ảnh) no-repeat bottom;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Hình ảnh ngăn dịng suốt bạn không để thị viết đầu tiên, tức để thị tên viết thị nội dung tóm tắt 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*/ hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Vào thiết kế chọn Theme, chế độ tự sửa,copy đoạn code vào CSS Lưu ý: Bạn cần kiểm tra xem CSS bạn có sử dụng đoạn code liên quan đến viền module không để tránh gây xung đột trồng chéo lên người viết co0l.l0ve'sblog 23 Tạo đường viên 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) norepeat 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-frdarticle rc_ft div {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_se2.png) no-repeat right top;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #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;backgroundimage: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 Code cho Mod : 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;} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Các đọan Link ảnh trên, bạn phải thay ảnh vị trí vào cho phù hợp Còn Height: đây, muốn chiều cao ảnh 100% bạn phải thay X px, Y px kích thước chiều cao ảnh Muốn xem chiều cao ảnh, việc Right Click vào ảnh chọn Properties, chuyển sang thẻ Sumary, nhìn vào dịng Height thấy ảnh cao 2> Ảnh : Ở đây, chia sẻ số cách làm ảnh sau : Bước : Đầu tiên bạn thiết kế ảnh với kích thước 150 x 300 px Bước : Sau cắt ảnh làm phần (Dùng Photoshop PhotoScape được) Phần đầu : Cắt với kích thuớc 150 x (50-60 px) Phần : Phần bạn nên mà lặp lại được, nên cắt từ 150 x px Phần cuối : Cắt phần tùy ý, phần phía Bước : Sau cắt xong ảnh, việc cuối up ảnh lên host, thay link ảnh vào đọan Code cho Cuối wăng code vào CSS người viết w-dephia 25 Trang trí nhà Yahoo! 360plus Trước người trọng đến thay đổi vật dụng nhà 360 plus bạn để ý đến "mái nhà" trang trí theo phong cách riêng người Cũng ko có ji cao siêu có số đoạn code làm suốt hình "mái nhà" (tạm gọi mái nhà nhá ^^ ko bik gọi ji ) thui tùy theo phong cách người mà trang trí cho đẹp đc ùi Phần 1: Làm Trong Suốt Các Đường Viền Code 1: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #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 5px;height:30px; margin:3px 2px 2px !important;*margin:0px 2px 2px;background:transparent;} Đoạn code để làm cho viền suốt .(ở Khỉ cho trng suốt cịn bạn muốn chèn ảnh khác zô đc ^^ 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-menu2.png);} #blog_masshead menu rc_w{float:left;width:5px;height:27px;background:url(http://files.myopera.com/n2k/360plus/masshead-menu-1.png) no-repeat 0;} #blog_masshead menu rc_e{float:left;width:5px;height:27px;background:url(http://files.myopera.com/n2k/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) norepeat;} Ở Khỉ giảm Opacity cơng cụ xuống suốt mờ mờ ^^ ( bạn tự vẽ cơng cụ cho riêng ) ====================================== 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;cursor:pointer;} Sau tìm đc button tìm kiếm vừa ý thay link bạn nhớ thay kick thước width + height với link button nha ========================================= Phần 4: Thay Đổi Background làm chữ nhấp nháy Code 4: #blog_masshead{font-size:12px;color:#ccc;background:url(link hình) repeat-x 5px;height:Xpx;} #blog_masshead a{color:A;text-decoration:blink;} X : Chiều cao ảnh A: Mã Màu Chữ Lưu Ý : bạn nên xếp code theo thứ tự viết nhá cơng bị đè hình lên tùm lum người viết Uyen My hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 26 Thêm thay đổi icon modun có sẵn tạo đường viền ngăn cách Thêm thay đổi icon modun có sẵn 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 nhất*/ hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #comment_new rc_bd rc_bc bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /* Modun bạn bè*/ #friendlist_module rc_bd rc_bc bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /*Bài viết nhất*/ #article_new rc_bd rc_bc bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} /* Thống kê */ #statistic rc_bd rc_bc bd ul li {background:url(Link ảnh) no-repeat center left;} /*Blog tôi*/ #mod-tagged-frd-article rc_bd rc_bc bd ul li {background:url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} ảnh biểu diễn minh họa cho mod-relatives, code : mod-relatives bd ul li {background:transparent url(Link ảnh) no-repeat center left;border-top:1px dotted #D1CFCF;} người viết Changtraiiudoi@ymail.com 27 Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo để chuôt vào Code giúp bạn thu ngắn modun tự tạo để chiều dài định, di chuột vào modun đó, tự động kéo dài modun Chúng ta thấy ứng dụng hay, tạo list nhạc dài modun tự tạo, để chiều dài định, người nghe để chuột vào modun đó, tự động kép dài thị đầy đủ nội modun Code css: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 #user_mod_1000X rc_bd rc_bc bd user-mod-holder {height:200px;} #user_mod_1000X rc_bd rc_bc bd user-mod-holder:hover {height:auto;} X giá trị modun tự tạo từ đến 10 200px giá trị bạn muốn thị, tùy ý thay đổi người viết Changtraiiudoi@ymail.com Code giúp thu nhỏ chữ ảnh Khi di chuột đến, chữ ảnh tự động chở kích cỡ Để làm vậy, bước đầu tiên, ta copy code này, dán vào css Code dán vào css: #blog_quote{font-size:5px;font-style:italic;color:#FF99FF;background:#000066;}#blog_quote:hover {fontsize:12px;font-weight:bold;font-style:normal;color:#CC99AA;background:transparent;}#blog_img img {height:100px;}#blog_img img:hover {height:100%;} Sau muốn sử dụng phần viết thêm vào thẻ div để sử dụng lại Style ID (code bên chế độ HTML): Code: Nội dung đoạn text muốn sử dụng hiệu ứng Để sử dụng hiệu ứng cho ảnh ta dùng code: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 người viết NoA 28 Hiệu ứng tạo nút ấn modun Hiệu ứng tạo nút ấn vào đường link modun /*Modun bình luận nhất*/ #comment_new rc_bd rc_bc hd{height:auto;} #comment_new rc_bd rc_bc bd ul li:hover{background:url(Link ảnh - Ảnh tự động để chuột vào link modun);} /*Modun bạn bè*/ #friendlist_module rc_bd rc_bc hd{height:auto;} #friendlist_module rc_bd rc_bc bd ul li:hover{background:transparent url(Link ảnh - Ảnh tự động để chuột vào link modun);} hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 /*Thư mục*/ #folder rc_bd rc_bc hd{height:auto;} #folder rc_bd rc_bc bd ul li:hover{background:url(Link ảnh - Ảnh tự động để chuột vào link modun );} /*Bài viết nhất*/ #article_new rc_bd rc_bc hd{height:auto;} #article_new rc_bd rc_bc bd ul li:hover{background:url(Link ảnh - Ảnh tự động để chuột vào link modun);} /*Ảnh biểu diễn cho mod-relatives, code*/ mod-relatives rc_bd rc_bc hd{height:auto;} mod-relatives rc_bd rc_bc bd ul li:hover{background:url(Link ảnh - Ảnh tự động để chuột vào link modun);} người viết changtraiiudoi@ymail.com 29 Làm trái tim,mưa,tuyết rơi,bướm bay di chuột vào link Blog a:hover {text-decoration:none;color:#EE4949;text-decoration:none;background-image:url(link ảnh);} người viết co0l.l0ve'sblog 30 Code sửa lỗi phông chữ, blog bị đen làm suốt Hôm iu đời nên post code "sửa lỗi phông chữ" ( - tức nét chữ ko đẹp mịn blog 360 yahoo cũ, nét chữ có viền đen bao quan viết hoa, trông lem nhem ) lỗi làm suốt blog phần lớn blog bị đen viền, viết ^^! lỗi gặp máy tính sửa dụng trình duyệt hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Internet Explorer ( IE ), ko gặp trình duyệt khác, nhiên trình duyệt IE có đến 75% máy tính sử dụng, VN số cịn lớn nhiều nữa, hơm chia sẻ với bạn code sửa lỗi Mình khuyên bạn nên sử dụng trình duyệt IE để xem thiết kế blog, gần 90% website thiết kế để thị thị chạy ổn định tốt IE Đây ảnh minh họa lỗi phông chữ: Blog chưa dùng code sửa lỗi có nét ko đẹp mịn Chữ in đậm có viền đen bao quanh: Blog sau dùng code sủa lỗi, nét chữ mịn, ko có viền đen bao quanh chữ: Ảnh minh họa, blog ko dùng code sửa lỗi, blog suốt bị biến thành màu đen: hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Ảnh minh họa, blog sau dùng code sửa lỗi, blog thị hoàn toàn bình thường: Các bạn có biết blog bạn nhiều người khác bị lỗi ko ? hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Câu trả lời đơn giản, với blog 360 plus sửa dụng trượt 100% để làm suốt viết bạn bị suốt lỗi theo ngun nhân làm suốt lỗi trên, bạn để mức suốt trược ban đầu blog bạn mắc lỗi Nói tóm lại, lỗi suốt ko biết mất, lỗi suốt lần bạn dùng trượt Và cách để sửa dùng code Hình minh họa, dùng trượt suốt lỗi ngay: Và code sửa lỗi: mod-alist-full pagination{background:transparent; Các bạn lưu ý mod-alist-full pagination{background:transparent; ko phải mod-alist-full pagination{background:transparent;} Khơng có ký tự "}" dấu chấm "." code thông thường Khuyến cáo: Nên để code cuối bảng mã css Ảnh minh họa: người viết Changtraiiudoi@ymail.com hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com ...Ebook CSS 360plus ver 1.0 Code sửa lỗi phông chữ, blog bị đen làm suốt 01 Về Ebook CSS 360plus ver. 1.0 Yahoo! 360plus sản phẩm Blog với nhiều tính hấp dẫn người dung sử dụng CSS, hỗ trợ... xuống thấy chữ CSS, bên cạnh có khung cho điền text Đó phần điền CSS hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 03 Ý nghĩa code việc viết code css Trang trí... hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Ebook CSS 360plus ver 1.0 Vào thiết kế chọn Theme, chế độ tự sửa,copy đoạn code vào CSS Lưu ý: Bạn cần kiểm tra xem CSS bạn có sử dụng đoạn code liên quan đến