Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com 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 về CSS và cách chèn code css Ý nghĩa của các code trong việc viết code css Ảnh nền tất cả các trang Theme 2 mảnh Top - Bottom Modun tên blog Modun blast Chỉnh sửa chữ và phông trong tiêu đề Đặt ảnh nền cho tiều đề Thay và thêm icon cho tiều đề modun Ảnh nền cho modun Tạo nút Home Thay icon tâm trạng Hình nền tiêu đề bài viết Hình nền Modun bài viết Code toolbar phần coment Ảnh nền tổng số trang, cuối modun bài viết Làm hình nền trang comment Làm ảnh nền phần tiêu đề bài viết và nick comment Thay đổi tag bài viết Ngăn dòng bài viết Xóa đường viền Tạo đường viên trong suốt Thiết kế Modun Profile Trang trí nóc nhà Yahoo! 360plus Thêm hoặc thay đổi icon trong các modun có sẵn và tạo đường viền ngăn cách Hiệu ứng thu nhỏ, tự động kéo dài modun tự tạo khi để chuôt vào Hiệu ứng tạo nút ấn trong modun Làm trái tim,mưa,tuyết rơi,bướm bay khi di chuột vào các link Blog Tìm hiểu thiết kế CSS 360plus của Yahoo! Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Code sửa lỗi phông chữ, blog bị đen khi làm trong suốt. 01. Về Ebook CSS 360plus ver.1.0 Yahoo! 360plus là một sản phẩm Blog với nhiều tính năng hấp dẫn người dung như sử dụng CSS, hỗ trợ kéo thả khi 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ý và trình bài bài viết theo thư mục, giao diện trực quan, ngôn ngữ tiếng Việt…Vì thế, ngay sau khi ra đời nó đã tạo nên cơn sốt cho làng Blogger Việt Nam. Nhưng lại có nhiều bạn vẫn không tránh khỏi lúng túng khi muốn tạo cho mình một trang blog đẹp, mang phong cách, cá tính của chính mình. Và để giúp các bạn điều này, cũng như đỡ mất thời gian tìm kiếm hướng dẫn thiết kế trên mạng, changtraiiudoi@ymail.com và hatim87uyennhi@yahoo.com đã biên tập ebook này - bao gồm tất cả những code css cho 360plus, từ code tạo ảnh nền đơn giản đến những code tạo hiệu ứng phức tạp. Trong đây có nhiều bài viết chúng mình sưu tầm từ nhiều nguồn trên mạng, thấy những code đó có trên nhiều địa chỉ và không phân biệt được đâu là nguồn thật ! Mong nhận được các ý kiến đóng góp cũng như các phát hiện thiếu xót trong ebook về css đầu tiên này. Welcome to Changtraiiudoi’s Blog & HaTim’s Blog Hỏi đáp – Đóng góp Check for updatas 02. Giới thiệu về CSS và cách chèn code css CSS là một loại ngôn ngữ dàn trang, định kiểu cho các thành phần của trang Web hay Blog. Nói vậy chung chung quá, nôm na CSS như là người đi mua kiểu bàn ghế, kiểu đồ đạc trong nhà theo ý của chủ nhà và sắp xếp chúng cũng theo ý ông chủ luôn. Cụ thể là nó 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 nền các loại), xác định vị trí cho các khối… CSS từ viết tắt của Cascading Style Sheet tạm dịch là 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 ra cái khung có bảng màu, kéo xuống dưới thấy chữ CSS, bên cạnh đó có cái khung cho điền text. Đó là phần điền CSS. Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com 03. Ý nghĩa của các code trong việc viết code css Trang trí các Khung kiểu liệt kê : Khung Thống kê (#statistic), Bài viết mới (#article_new), Lời bình mới (#comment_new), Thư mục (#folder) Ở các khung này ngoài lớp để đặt ảnh của nền ra (.bd), chúng ta còn 2 lớp để đặt ảnh nữa là (ul -lớp bao gồm 1 khối liệt kê) và (li - lớp bao gồm từng dòng liệt kê). Lớp (li) thường đã được dùng để tạo 1 icon đầu dòng cho mỗi 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 1 hình quyển sách nhỏ trước mỗi tiêu đề bài viết mới) Ở các khung Bài viết mới, Thư mục, Bạn bè chỉ có 1 lớp (ul), riêng ở khung Lời bình mới có thể có nhiều hơn 1 lớp (bằng số bài có lời bình mới được hiện ra). Ảnh đặt tại lớp (ul) sẽ ở trên ảnh đặt tại lớp (.bd) do vậy nếu muốn nhìn thấy ảnh của lớp (.bd) thì không được tô màu lớp (ul). Ở đây, lệnh HEIGHT được sử dụng để tăng chiều cao của khung cho thích hợp với ảnh đặt thêm vào. Ví dụ code CSS trang trí khung Thống Kê của tôi: #statistic .rc_bd .rc_bc .bd {background:#ffffee url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/Background/05bgc.gif);} Lệnh trên là chọn màu nền và ảnh nền của lớp .bd (trong ví dụ này ảnh nền đã 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 tiếp theo này là để thay đổi chiều cao của phần liệt kê (cũng là của khung) và chọn 1 ảnh để ở phần phía dưới của khung. Trang trí cho khung Giới thiệu bản thân (#profile_highlight) Các bạn đã từng trang trí 360 plus bằng CSS hẳn biết rằng 360 plus bổ ra hẳn 6 lớp ảnh để trang trí đường viền cho mỗi khung lần lượt là: .rc, .rc div : dùng để tạo đường viền trên đỉnh; .rc_bd, .rc_bd .rc_bc: dùng để tạo đường viền 2 bên trái phải; .rc_ft, .rc_ft div: dùng để tạo đường viền dưới đáy; Nếu bạn không dùng viền cho các khung, hoặc có thể trang trí đường viền bằng lệnh BORDER thì bạn sẽ có 6 lớp thêm để đặt ảnh cho khung của mình. (quá nhiều, ai mà dùng hết được cơ chứ!) Nếu bạn dùng viền cho khung Giới thiệu bản thân rồi, bạn vẫn có thể đặt thêm một hình vào để trang trí Khung này đẹp thêm bằng cách sử dụng #profile_highlight_module đặt trùng và ở dưới #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ụ dưới đây: #profile_highlight .hd, #profile_highlight .ft {height:0px;} Lệnh trên để đảm bảo rằng tiêu đề và phần đáy của khung Tự giới thiệu có chiều cao bằng 0 #profile_highlight .bd {font-family:PAPYRUS;font-size:21px;font- weight: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 trên chọn hình đặt ở phía dưới của khung và 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 trên là để chọn màu nền, hình nền và chỉnh chiều cao nền của khung để nó không vượt quá đường viền. Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com Theo hienhoang74@yahoo.com .col-150 Chỉ 2 modun nhỏ tự tạo, nằm ở 2 bên blog. .col-600 Chỉ modun lớn nằm giữa blog. .row-920 Chỉ modun dài nhất, nằm ở trên cùng và dưới cùng blog Danh sách các trang có thể đặ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 và màu khi di chuột đến link: a{color:#6F5F06;} a:hover{color:#FF0000;} .rc, .rc div : dùng để tạo đường viền trên đỉnh .rc_bd, .rc_bd .rc_bc: dùng để tạo đường viền 2 bên trái phải .rc_ft, .rc_ft div: dùng để tạo đường viền dưới đá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 của 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 Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com text-align:right -Căn chữ sang phải no-repeat center top - Có nghĩa là ảnh được hiện thị 1 lần (no-reapeat), ko lặp lại, ảnh được ở giữa (center) tiêu đề hay nền modun, ảnh được hiện thị từ trên xuống dưới (top) bottom Ảnh được hiện thị từ dưới lên right -Căn phải left -Căn trái repeat -Lặp từ trái qua phải, từ trên xuống dưới 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 trong 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 nào !important, thuộc tính đó sẽ không bị khi đè 04. Ảnh nền tất cả các trang Code trên đặt ảnh nền trên tất cả các 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à lặp ảnh từ trái qua phải, từ trên xuống dưới. Ta có thể 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 thì ảnh sẽ được lặp từ trái qua phải, right thì ảnh lặp từ bên phải qua trái. Them top để ảnh được hiện thị từ trên xuống, thay top bằng bottom để ảnh hiện thị từ dưới lên. Thêm fixed để anh ko chuyển động (đứng im) khi ta kép trang (cuôn trang) blog. Các bạn có thể tách từ code viết giản lược, viết gộp trên để mỗi trang có một ảnh nền riêng. Ví dụ như ảnh nền trang chính blog thì dùng code này: Body.blog_my { background:url(Link ảnh) repeat top fixed;} theo 360themes.com 05. Theme 2 mảnh Top – Bottom body{background:#cc99ff;} /* Màu nền của theme, nên thay đổi trùng với màu ảnh nền để 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 nay thay doi duoc*/ #bd{background:url(Link ảnh Bottom) no-repeat center bottom;} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com người viết Vũ Nguyễn 06. Modun tên blog Code xóa modun tên bài viết: #blog_title{height:0px;} Code chỉnh sửa phông và 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 và paste code này vào để trong suốt nền Tên Blog và Blast : /* Lam Trong Suot Nen Module Ten Blog va Module Blast */ #blog_title .bd, #blast .rc_bc .bd{background-color:transparent;background- image:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rce-blue.png);} /* link hinh nen cua blast nay co the thay doi*/ 1.2 Tiếp theo là đoạn Code cho Blast biến thành màu xanh trong suốt: /* Border cua Blast trong suot*/ #blast .rc div {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcne-blue.png) no- repeat right bottom;} #blast .rc {background:url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcnw- blue.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) repeat- y;} #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 dưới một 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 dưới một chút không bị chồng lên Khung tiêu đề (module Blog_title). Để làm như vậy, bạn có thể 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} Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #blast .rc div{height:10px} Ảnh trước khi dùng code Ảnh sau khi dùng code Ps: Khuyến cáo nên dùng đủ 5 code trên, phòng trường hợp gây lỗi khi ta dùng một số code khác. người viết hienhoang74@yahoo.com 2.2 Thêm ảnh, tạo ảnh động trong Khung Blast Đây là code thêm ảnh, tạo ảnh động trong 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) no- repeat 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/4pypso n_th-1.gif) no-repeat right bottom;} Ảnh sản phẩm của code Ps: Các bạn thay 2 link ảnh cuối cùng trong code (2 đoạn code cuối), tức là code in nghiêng dưới đây bằng những bức ảnh khác, lưu ý đến font-size:16px; border-top:none; height: Chiều cao, độ dài ảnh, tính bằng px; Ebook CSS 360plus ver 1.0 hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com #blast .rc_bd .rc_bc {background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/5807a4tbnh2qdv.gif) no- repeat 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ữ trong tiêu đề Làm mất chữ trên tiêu đề và làm mất 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 nếu muốn mất chữ trên tiêu đề Với 1 tiêu đề, các bạn có thể đặt phông chữ, chỉnh cỡ chữ, căn lề: #user_mod_1000X .rc_bd .rc_bc .hd .titlebar .hd h2{font-size:13px;font-style:italic;color:#3395c8;text- align:center;} Căn chứ trên tiêu đề: .hd .titlebar .hd h2{text-align:center;} Thay center bằng right hoặc left để căn phải, căn trái chữ. người viết Changtraiiudoi@ymail.com 09. Đặt ảnh nền cho tiều đề modun /*Ảnh nền của 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 nền của Tiêu đề mỗi 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 . Tìm hiểu thiết kế CSS 36 0plus của Yahoo! Ebook CSS 36 0plus ver 1. 0 hatim87uyennhi @yahoo. com & changtraiiudoi@ymail.com Code sửa lỗi phông chữ, blog bị đen khi làm trong suốt. 01. . for updatas Code css cho Yahoo! 36 0plus Về Ebook CSS 36 0plus ver 1. 0 Giới thiệu về CSS và cách chèn code css Ý nghĩa của các code trong việc viết code css Ảnh nền tất cả các trang Theme. dưới thấy chữ CSS, bên cạnh đó có cái khung cho điền text. Đó là phần điền CSS. Ebook CSS 36 0plus ver 1. 0 hatim87uyennhi @yahoo. com & changtraiiudoi@ymail.com 03. Ý nghĩa của các code