You are on page 1of 32

Ebook CSS 360plus ver 1.

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

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

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.

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

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.

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

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

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 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;}

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 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}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

#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;

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) 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

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 có thể thay height là chiều cao của ảnh

người viết Vũ Nguyễn

10. Thay và 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 mới đăng */


#article_new .titlebar .hd {background:url(Link ảnh) no-repeat left top;}

/* Ảnh trong blog */


#photo_highlight .titlebar .hd {background:url(Link ảnh) no-repeat left top;}

/* Ảnh trong bình luận mới 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 nền 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 về 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ừ 1 đến 10, x là tên thứ tự của modun. Chiều cao của link ảnh là 26px, bạn có thể thêm
height:28px để chỉnh sửa lại chiều cao của tiêu đề, ví dụ như ta được 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 nền cho modun

/* Chèn hình nền cho cái 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 nền cho module fiendlist */

#friendlist_module .rc_bd .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Bài Mới */

#article_new .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Thư Mục Riêng*/

#folder .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Comment mới*/

#comment_new .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền cho module Thống Kê của plus*/

#statistic .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/* Chèn hình nền 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

/* Chèn hình nền cho module Lịch*/

#calendar .rc_bd .rc_bc .bd {background:url(Link ảnh) top right repeat;}

/*Ảnh biểu diễn cho .mod-relatives, và đây là code*/

.mod-relatives .bd {background:transparent


url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/trongsuot/ppppppppppp-1.png) repeat left
!important;}

người viết Changtraiiudoi@ymail.com

12. Tạo nút Home

div.backhomtbtn a.backtomyblog
{background:url(http://i280.photobucket.com/albums/kk193/datablog/210738home_icon_-1.png) no-repeat
center;height:48px;}

Thay height là chiều cao của ảnh

người viết NoA

13. Thay icon tâm trạng

Cách thay đổi Icons trong Module Tâm trạng:

Như mọi người đã biết Icons tâm trạng trong 360 plus thực ra là 2 files ảnh ( kích thước ảnh lớn 50x600, ảnh
nhỏ: 25x300) được đặt ở các vị trí có độ cao khác nhau để làm nền cho các khung tâm trạng. Ảnh nhỏ làm nền
khung tâm trạng trong bài viết và trên module Tâm trạng khi bài viết không được đánh dấu là "Quan trọng". Ảnh
lớn làm nền khung tâm trạng trên module Tâm trạng khi bài viết được đánh dấu là "Quan trọng". Kích thước
khung tâm trạng của ảnh nhỏ là 25x25, của ảnh lớn là 50x50 (đơn vị pixels). Nếu các bạn đã từng viết code
CSS để trang trí lại trang 360 plus thì chắc hẳn biết rằng một số lệnh bị hạn chế không dùng được ở đây, một

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

trong những lệnh đó là WIDTH dùng để thay đổi chiều rộng, may mắn là lệnh HEIGHT dùng để thay đổi chiều
cao vẫn dùng được.

Dựa trên những đặc điểm trên, chúng ta có thể thay đổi được như sau:

- Thay đổi 2 file ảnh để có những hình khác nhau (như mọi người vẫn làm)

- Thay đổi chiều cao của khung nền để ảnh tâm trạng có thể cao hơn không bị hạn chế là 50 px nữa. Điều này
cho phép bạn chọn được nhiều ảnh đẹp hơn và dễ dàng hơn trong việc thiết kế file ảnh. (Ví dụ minh họa: trang
blog hoa hậu Bạc Liêu)

- Không nhất thiết phải dùng 2 files ảnh có kích thước cố định 25x300 và 50x600; bạn có thể dùng 12 file ảnh
cho 12 icons tâm trạng khác nhau (có chiều rộng không quá 50, chiều cao thoải mái). Điều này cho phép bạn
không mất công thiết kế file ảnh nếu bạn không thạo, ngoài ra bạn có thể chọn file ảnh động cho Icons tâm trạng
của mình (ví dụ minh họa: trang blog của tôi).

Dưới đây là code CSS minh họa cho từng phần:

- Thay đổi chiều cao:

#mod_lifeline .list td
a.blog_emo_25_1{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3s.gif) no-repeat 0 0;}

#mod_lifeline .list td
a.blog_emo_25_2{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3s.gif) no-repeat -25px 0;}

#mod_lifeline .list td
a.blog_emo_25_3{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3s.gif) no-repeat -50px 0;}

#mod_lifeline .list td
a.blog_emo_25_4{height:45px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3s.gif) no-repeat -75px 0;}

... (tương tự cho các khung tâm trạng nhỏ "không Quan trọng" còn lại)

#mod_lifeline .list td
a.blog_emo_50_1{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3copy.gif) no-repeat 0 0;}

#mod_lifeline .list td
a.blog_emo_50_2{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3copy.gif) no-repeat -50px 0;}

#mod_lifeline .list td
a.blog_emo_50_3{height:85px;background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/emotio
nicons3copy.gif) no-repeat -100px 0;}

... tương tự cho các khung tâm trạng lớn "Quan trọng" còn lại.

#mod_lifeline .list table {height:90px;}

-Dùng từng file ảnh cho từng tâm trạng:

#mod_lifeline .list td
a.blog_emo_50_1{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4-
emoticon-0027.gif) no-repeat 0 0;}

#mod_lifeline .list td
a.blog_emo_50_2{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4-
emoticon-0037.gif) no-repeat 0 0;}

#mod_lifeline .list td
a.blog_emo_50_3{background:url(http://i241.photobucket.com/albums/ff182/hienhoang_2007/icons/yenta4-
emoticon-0046.gif) no-repeat 0 0;}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

... tương tự cho các khung còn lại. Chú ý trình tự các khung tâm trạng là:

1. Hớn hở; 2. Ngạc nhiên; 3. Hài lòng; 4. Buồn lắm; 5. Cô đơn; 6. Giả nai; 7. Bệnh; 8. Vui vẻ; 9. Khoái chí; 10.
Mệt mỏi; 11. Thất vọng; 12. Giận dữ;

Người viết hienhoang74@yahoo.com

/* Code thay đổi icon tâm trạng, changtraiiudoi@ymail.com lấy từ blog: Simplex, các bạn có thể copy và dán
luôn*/

#mod_lifeline .list td
a.blog_emo_25_1{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 0;}

#mod_lifeline .list td
a.blog_emo_25_2{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -25px;}

#mod_lifeline .list td
a.blog_emo_25_3{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -50px;}

#mod_lifeline .list td
a.blog_emo_25_4{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -75px;}

#mod_lifeline .list td
a.blog_emo_25_5{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -100px;}

#mod_lifeline .list td
a.blog_emo_25_6{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -125px;}

#mod_lifeline .list td
a.blog_emo_25_7{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -150px;}

#mod_lifeline .list td
a.blog_emo_25_8{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -175px;}

#mod_lifeline .list td
a.blog_emo_25_9{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
.png) no-repeat 0 -200px;}

#mod_lifeline .list td
a.blog_emo_25_10{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0
9.png) no-repeat 0 -225px;}

#mod_lifeline .list td
a.blog_emo_25_11{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0
9.png) no-repeat 0 -250px;}

#mod_lifeline .list td
a.blog_emo_25_12{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0
9.png) no-repeat 0 -275px;}

#mod_lifeline .list td
a.blog_emo_50_1{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 0;}

#mod_lifeline .list td
a.blog_emo_50_2{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -50px;}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

#mod_lifeline .list td
a.blog_emo_50_3{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -100px;}

#mod_lifeline .list td
a.blog_emo_50_4{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -150px;}

#mod_lifeline .list td
a.blog_emo_50_5{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -200px;}

#mod_lifeline .list td
a.blog_emo_50_6{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -250px;}

#mod_lifeline .list td
a.blog_emo_50_7{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -300px;}

#mod_lifeline .list td
a.blog_emo_50_8{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -350px;}

#mod_lifeline .list td
a.blog_emo_50_9{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09
-50.png) no-repeat 0 -400px;}

#mod_lifeline .list td
a.blog_emo_50_10{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0
9-50.png) no-repeat 0 -450px;}

#mod_lifeline .list td
a.blog_emo_50_11{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0
9-50.png) no-repeat 0 -500px;}

#mod_lifeline .list td
a.blog_emo_50_12{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang0
9-50.png) no-repeat 0 -550px;}

.mod-alist-full .main-hd h1 em, .mod-alist-titlebar-1 h2 a em, .mod-alist-titlebar h2 a em, .mod-alist-brief table a


em, #myblog-article-compose, #mood li
em{background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/beta/tamtrang09.png) no-
repeat;}

/* hết*/

14. Hình nền tiêu đề bài viết

Code:

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

.mod-alist-full .main-hd{background:url(http://i289.photobucket.com/albums/ll215/rainnysunday/sexy35.jpg) fixed


50% 30%;}

người viết Uyen My

15. Hình nền Modun bài viết

Code:

.hd .titlebar .hd h2{text-align:center;}

.mod-alist-full .main-bd{background:url(LINK HINH);}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

người viết Uyen My

16. Code toolbar phần comment

.rte_toolbar {background:#d7d7d7 url(link Hinh) repeat-x top;border-left:1px solid #0448f6;border-top:1px solid


#0448f6;border-right:1px solid #0448f6;height:89px;}

/*chieu cao cua hinh*/

người viết Nhóc khỉ blog

17. Ảnh nền tổng số trang, cuối modun bài viết

.mod-comment-new .pagination, .mod-alist-summary .pagination, .mod-alist-full


.pagination{background:transparent url(Link ảnh);}

người viết Changtraiiudoi@ymail.com

18. Code làm hình nền trang comment

.cmt-mod-alist #comments-listing .extend-hd {background:transparent;}

.cmt-mod-alist #comments-listing .extend-bd .alist-comment,

.mod-alist-full .alist-comment ul {background:transparent;}

.mod-alist-full .alist-comment li {background:#ffffee


url(http://i289.photobucket.com/albums/ll215/rainnysunday/background.jpg) no-repeat top left;border-top:2px
inset #ffffff;border-left:2px inset #ffffff;border-right:2px inset #ffffff;}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

.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

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 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;}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

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*/

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 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;}

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;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;}

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

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:

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

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

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*/

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 mới 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 về 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 trên biểu diễn minh họa cho .mod-relatives, code là :

.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 khi để chuôt vào

Code này sẽ giúp bạn thu ngắn modun tự tạo chỉ để nó hiện ra 1 chiều dài nhất định, khi di chuột vào modun đó,
nó sẽ tự động kéo dài modun đó ra. Chúng ta có thể thấy ngay một ứng dụng rất hay, đó là tạo 1 list nhạc rất dài
ở modun tự tạo, nhưng chúng ta chỉ để nó hiện ra 1 chiều dài nhất định, khi người nghe để chuột vào modun đó,
nó sẽ tự động kép dài và hiện 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 là giá trị của modun tự tạo từ 1 đến 10.

200px là giá trị bạn muốn nó hiện thị, chúng ta có thể tùy ý thay đổi.

người viết Changtraiiudoi@ymail.com

Code giúp thu nhỏ chữ và ảnh. Khi di chuột đến, chữ và ảnh sẽ tự động chở về đúng kích cỡ.

Để làm được như vậy, bước đầu tiên, ta copy code này, dán vào css

Code này dán vào css:

#blog_quote{font-size:5px;font-style:italic;color:#FF99FF;background:#000066;}#blog_quote:hover {font-
size:12px;font-weight:bold;font-style:normal;color:#CC99AA;background:transparent;}#blog_img img
{height:100px;}#blog_img img:hover {height:100%;}

Sau đấy nếu muốn sử dụng thì trong phần bài viết thêm vào thẻ div để sử dụng lại Style ID này (code bên chế
độ HTML):

Code:

<DIV id=blog_quote>Nội dung đoạn text muốn sử dụng hiệu ứng</DIV>

Để sử dụng hiệu ứng này cho bức ảnh ta dùng code:

<DIV id=blog_img><IMG
src="http://i306.photobucket.com/albums/nn275/changtraiiudoi/182612anime_kiss.jpg"></DIV>

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 trong modun

Hiệu ứng khi tạo nút khi ấn vào đường link trong modun

/*Modun bình luận mới 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 sẽ tự động hiện khi để chuột vào link
trong 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 sẽ tự động hiện khi để
chuột vào link trong 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 sẽ tự động hiện khi để chuột vào link trong
modun );}

/*Bài viết mới 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 sẽ tự động hiện khi để chuột vào link
trong modun);}

/*Ảnh biểu diễn cho .mod-relatives, và đây là 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 sẽ tự động hiện khi để chuột vào link
trong modun);}

người viết changtraiiudoi@ymail.com

29. Làm trái tim,mưa,tuyết rơi,bướm bay...khi di chuột vào các 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 khi làm trong suốt.

Hôm nay rất là iu đời nên sẽ post code "sửa lỗi phông chữ" ( - tức là nét chữ ko được đẹp và mịn nhưng blog
360 yahoo cũ, nét chữ có viền đen bao quan khi viết hoa, trông lem nhem...) và lỗi khi làm trong suốt blog nhưng
phần lớn blog đều bị đen ở viền, ở nền bài viết. ^^! 2 lỗi trên chỉ gặp ở trên 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, tuy nhiên trình duyệt IE có đến 75% máy tính sử dụng, và ở
VN con số này còn lớn hơn nhiều nữa, vì vậy hôm nay mình chia sẻ với các bạn code sửa các lỗi trên. Mình
khuyên các bạn nên sử dụng trình duyệt IE để xem và thiết kế blog, gần như 90% các website được thiết kế để
hiện thị hiện thị và chạy ổn định tốt trên IE.

Đây là ảnh minh họa lỗi phông chữ:

Blog khi chưa dùng code sửa lỗi có nét chứ ko được đẹp và mịn. Chữ in đậm có viền đen bao quanh:

Blog sau khi đã 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 của mình khi ko dùng code sửa lỗi, blog trong 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 của mình sau khi dùng code sửa lỗi, blog hiện thị hoàn toàn bình thường:

Các bạn có biết vì sao blog của bạn và rất nhiều người khác bị lỗi như trên ko ?

hatim87uyennhi@yahoo.com & changtraiiudoi@ymail.com


Ebook CSS 360plus ver 1.0

Câu trả lời rất đơn giản, với blog 360 plus khi sửa dụng thanh trượt 100% để làm trong suốt nền bài viết bạn
sẽ bị suốt hiện lỗi trên và theo mình đó là nguyên nhân duy nhất làm suốt hiện những lỗi trên, nếu các bạn để
mức trong suốt của thanh trược như ban đầu thì blog của các bạn vẫn mắc lỗi trên. Nói tóm lại, lỗi trên sẽ suốt
hiện và ko biết mất, lỗi suốt hiện ngay lần đầu tiên các bạn dùng thanh trượt. Và cách duy nhất để sửa là dùng
code của mình

Hình minh họa, khi dùng thanh trượt này sẽ suốt hiện những lỗi trên ngay:

Và đây là code sửa lỗi:

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

Các bạn lưu ý là mod-alist-full .pagination{background:transparent; chứ ko phải là mod-alist-full


.pagination{background:transparent;}

Không có ký tự "}" và dấu chấm "." như những code thông thường.

Khuyến cáo: Nên để code trên ở 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

You might also like