Tổng hợp các Code dùng để thay đổi nền các Module cho Blog của bạn,bạn có thể thay URl ảnh kia bằng hình thích hợp
/* Hình nền cho blog (theme) hiện tại chỉ làm được 1 mãnh và cho tràn khắp màn hình, cuộn */
BODY.blog_my {BACKGROUND:url(http://i282.photobucket.com/albums/k...themenen07.jpg) #000000 fixed;}
/* Ảnh nền cho bảng entry Blog (bài viết):*/
#article_list_module .bd {background:#FFFFFF url(http://xxx.gif);
[FONT='Times New Roman','serif'][FONT='Times New Roman','serif'].hd .titlebar .hd h2{text-align:center;}
.mod-alist-full .main-bd{background:#FFFFFF url(LINK HINH);}
[/font][/font]
/* Code Thêm ảnh vào phần bottom của bài viết:*/ | Click vào đây để xem kích thước thật. |

.
.mod-alist-tagsbar {background:url(link hình) no-repeat center;height:Apx;}
A: thay đổi height = chiều cao của ảnh
/* 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 {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#profile_highlight_module .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/*Ảnh nền cho bảng Profile: */
#profile_highlight_module .rc_bd .rc_bc {background:url(http://xxx.gif) #653e16 top right repeat;}
#profile_highlight_module .bd {background:url(http://xxx.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module fiendlist */
#friendlist_module .bd {background:#FFFFFF url(xxx.gif);}
#friendlist_module .rc_bd {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#friendlist_module .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Bài Mới */
#article_new .bd {background:#FFFFFF url(http://xxx.gif);}
#article_new .rc_bd .rc_bc {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#article_new .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Thư Mục Riêng*/
#folder .bd {background:#FFFFFF url(http://xxx.gif);}
#folder .rc_bd .rc_bc {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#folder .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Comment mới*/
#comment_new .bd {background:#FFFFFF url(http://xxx.gif);}
#comment_new .rc_bd .rc_bc {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#comment_new .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Thống Kê của plus*/
#statistic .bd {background:#FFFFFF url(http://xxx.gif);}
#statistic .rc_bd .rc_bc {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#statistic .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Blog yêu thích*/
#subscribe_highlight .bd {background:#FFFFFF url(http://xxx.gif);}
#subscribe_highlight .rc_bd .rc_bc {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#subscribe_highlight .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Ảnh nền cho bảng Hình ảnh trên Blog::*/
#photo_highlight .bd {background:#FFFFFF url(http://xxx.gif);}
/* Ảnh nền cho module Tìm kiếm Search:*/
#search_module .bd {background:#FFFFFF url(http://xxx.gif);}
/* Chèn hình nền cho module Lịch*/
#calendar .bd {background:#FFFFFF url(http://xxx.gif);}
#calendar .rc_bd .rc_bc {background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#calendar .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
/* Phần tin nhắn*/
BODY.guestbook {BACKGROUND:transparent url(http://i227.photobucket.com/albums/d...pact-co-04.gif) fixed;}
#gb_msg .bd {background:#FFFFFF url(http://i227.photobucket.com/albums/dd81/vicq2/block_bg-2.jpg);}
/* Ảnh nền cho các module chung*/
Đầu tiên là làm nền cho tất cả các
module của hai cột phụ. Cái này hay hơn là làm từng cái cho calender,
thống kê,... vì nó làm đồng loạt các nền cho mọi modole nhanh gọn lẹ.
Bạn có thể thay đổi link hình ảnh để có hình nền của riêng mình:
.col-150 .rc_bd .rc_bc .bd /* JW */
{background:transparent url(http://xxx.gif);color:#FFFFFF;}
/* Làm trong suốt blog */
.rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent;}
.rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent;}
.rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:transparent;}
.rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent;}
.rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent;}
.rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent;}
.rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article .rc_bc .bd {background-color:transparent;}
#blast .rc_ft {background:transparent;}
#blast .rc_ft div {background:transparent;}
Chèn hình nền vào Module tự tạo
-Các Module tự tạo sẽ có số từ 10001->10010,tuỳ theo đó là Module thứ mấy mà các bạn điền số thích hợp.
VD:
/* Chèn hình nền cho module Online (cái module tự tạo thêm có số 10001 -> 10010)*/
#user_mod_10001 .rc_bd .rc_bc{background:url(http://i282.photobucket.com/albums/k...s/bantay02.gif) #653e16 top right repeat;}
#user_mod_10001 .bd {background:url(http://i282.photobucket.com/albums/k...s/bantay03.gif) #653e16 bottom right no-repeat;}
Đầu tiên là làm nền cho tất cả các module của hai cột phụ. Cái này khác cách trên
làm từng cái cho calender, thống kê,... vì nó làm đồng loạt các nền cho
mọi modole nhanh gọn lẹ. Bạn có thể thay đổi link hình ảnh để có hình
nền của riêng mình.
Code:
/* nền các module */
.col-150 .rc_bd .rc_bc .bd /* JW */
{background:transparent url(URL ảnh );color:#FFFFFF;}
Đã thay đổi các nền module thì phải thay đổi cả titlebar
(header) của module cho nó đủ đầy. Tương tụ bạn có thể thay link ảnh (
http://XXX.xxx).
/* nền header module */
Đây là đoạn code mình đang dùng, thay thế cho hầu hết tất cả các
phần titlebar, nếu ai muốn dùng thì thay phần link ảnh mình muốn vào:
Code: #article_list_module .rc_bd .rc_bc .hd, .hd .titlebar .hd,
#friendlist_module .hd, .mod-relatives .titlebar,
.col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar {
background:transparent url(http://img55.imageshack.us/img55/5072/modulehdxs6.png) repeat;}
Còn nếu muốn thay riêng từng phần thì ở đây có một số đoạn code dành
cho các phần cơ bản như các module nhỏ dọc hai bên, các module chính
nằm giữa bài viết, và cuối cùng là các module nằm ngang trên đầu và bên
dưới blog:
Code: .col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar {
background:transparent url(-image_link-) repeat;}
Code: .col-600 .rc_bd .rc_bc .hd .titlebar .hd,
.col-600 .rc_bd .rc_bc .hd .titlebar {
background:transparent url(-image_link-) repeat;}
Code: .row-920 .rc_bd .rc_bc .hd .titlebar .hd,
.row-920 .rc_bd .rc_bc .hd .titlebar {
background:transparent url(-image_link-) repeat;}
.col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar
{background:transparent url(http://XXX.xxx);}
.col-150 .rc_bd .rc_bc .hd .titlebar .hd h2, .col-150 .rc_bd .rc_bc .hd .titlebar .hd a
{color:#4E4E4E;}
.col-150 .hd .titlebar .hd a:hover
{text-decoration:underline;
HÌNH NỀN CHO TOÀN BLOG
Code:
BODY.blog_my {BACKGROUND:url(http://i20.photobucket.com/albums/b2...u/pattern2.jpg) #000000 fixed;}
thông số fixed là
để làm nền đứng yên không chuyển động theo thanh cuộn rất hợp với nền dạng partern. Nếu không thích bạn có thể loại bỏ thông số này!




































CANH PHẢI CÁC TIÊU ĐỀ
Code:
.hd .titlebar .hd h2{
text-align:right;}
Mục đích canh phải các tiêu đề là để thêm các icon vào bên trái mỗi module, khi đó tiêu đề sẽ không bị chồng lên icon.
THÊM ICON CHO MỖI MODULE (VỊ TRÍ BÊN PHẢI)
Code:
/* bảng thống kê */
#statistic h2{
background:transparent url(http://hanamibuu.com/thongke.png) no-repeat left top;}
/* Bài mới đăng */
#article_new h2{
background:transparent url(http://hanamibuu.com/baimoi.png) no-repeat left top;}
/* Ảnh trong blog */
#photo_highlight h2{
background:transparent url(http://hanamibuu.com/photo.png) no-repeat left top;}
.mod-comment-new .titlebar .hd h2{
background:transparent url(http://hanamibuu.com/coment.png) no-repeat left top;}
/* Thư mục riêng */
#folder h2{
background:transparent url(http://hanamibuu.com/folder.png) no-repeat left top;}
/* Cập nhật ngày */
#update_date h2{
background:transparent url(http://hanamibuu.com/capnhat.png) no-repeat left top;}
/* RSS */
#rss_output .bd a{
height:25px;background:transparent url(http://hanamibuu.com/rss.png) no-repeat left top;}
/* Tìm kiếm */
#search_module h2{
background:transparent url(http://hanamibuu.com/timkiem.png) no-repeat left top;}
Các link ảnh các bạn có thể thay đổi bằng cái icon khác.
Khuyên dùng định dạng .PNG với nề trong suốt cho đẹp (kích thước chuẩn
là 26x26)
Code làm đường viền cho các modules
Đầu tiên bạn phải làm trong suốt các đường viền module
Copy đoạn code này vào CSS:
.rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent url(http://nktpro.com/360plus/rc_ne.png) no-repeat right bottom;}
.rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(http://nktpro.com/360plus/rc_nw.png) no-repeat left bottom;}
.rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:transparent url(http://nktpro.com/360plus/rc_e.png) repeat-y right top;}
.rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(http://nktpro.com/360plus/rc_w.png) repeat-y 0% 50%;}
.rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(http://nktpro.com/360plus/rc_se.png) no-repeat right top;}
.rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(http://nktpro.com/360plus/rc_sw.png) no-repeat left top;}
.rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article
.rc_bc .bd {background-color:transparent;background-image:url(http://nktpro.com/360plus/transparent_bg.png);}
#blast .rc_ft {background:transparent url(http://nktpro.com/360plus/blast-sw.png) no-repeat left bottom;}
#blast .rc_ft div {background:transparent url(http://nktpro.com/360plus/blast-se.png) no-repeat right bottom;}
sau đó bạn copy code thay đổi hình đường viền các modules
Hình mẫu
các bạn có thể thay đổi đường dẫn để được hình mà bạn thích!
Code CSS:
.rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/21-1.gif) no-repeat right top;}
.rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/21-1.gif) no-repeat left top;}
.rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/25-2.gif) repeat-y right top;}
.rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/24-1.gif) repeat-y 0% 50%;}
.rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/23-1.gif) no-repeat right bottom;}
.rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/23-1.gif) no-repeat left top;}
.rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article .rc_bc .bd {background-image:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/24-1.gif);}
#blast .rc_ft {background:url(http://nktpro.com/360plus/blast-sw.png) no-repeat left bottom;}
#blast .rc_ft div {background:url(http://i240.photobucket.com/albums/ff40/tina88888888/003/23-1.gif) no-repeat right bottom;}
Tạo Top page (HomePage) giống 360Yahoo
Phía trên avatar của người đang xem có một phần để quay về
Top-page (trang chủ -Home page) của người đang xem. Nhưng lại để ở chế độ ẩn,chẳng có cái chữ nào cả,chẳng hiểu VNTeams có ý gì???
-Các bạn chèn thêm đoạn mã sau vào CSS (nếu bạn nào không biết CSS ở
chỗ nào thì đọc mấy bài cơ bản vể Plus nhé) để trông trực quan hơn,hihi
div.backhomtbtn a.backtomyblog { background: url(http://i227.photobucket.com/albums/d...cq2/bannet.jpg) no-repeat; height:25px; }
-Thay link image bằng ảnh nút Home của bạn.Ảnh của nút Home nên có
kích thước 100x25 px,nếu to quá nó sẽ bị tràn,nhỏ quá sẽ mất cân đối
![]()
[FONT='Times New Roman','serif'][FONT='Times New Roman','serif']
[/font][/font]
Thêm biểu tượng hỗ trợ online qua Yahoo! Messenger
Không một chatter (người tán gẫu trên mạng) Việt Nam nào mà không biết đến trình tin nhắn tức thời
Yahoo! Messenger.
Vậy làm thế nào để người đọc blog của bạn có thể biết bạn đang online
mà tán gẫu hay đơn giản là để họ nhắn cho bạn vài dòng offline? Hãy làm
tìm hiểu đoạn mã sau sẽ cho bạn một số lựa chọn khác nhau.

Ở đây chúng ta lưu ý YahooID là nickname của bạn tại Yahoo. Ví dụ
nickname của tôi là dv2n. ImageNo là một trong số: 0, 1, 2 tương ứng
lần lượt với các hình bên dưới từ trên xuống mà bạn chọn.
Quét virus trực tuyến


Bể cá cảnh
Copy vào module tự chọn dòng chữ sau::

Dự báo Thời Tiết
Hà Nội
img src="http://banners.wunderground.com/banner/gizmotimetemp_both/
language/www/global/stations/48820.gif"
alt="Du bao thoi tiet - Thu do Ha Noi" title="Dự báo thời tiết - Thủ đô Hà Nội" height="41" width="127">
Huế
img src="http://banners.wunderground.com/banner/gizmotimetemp_both/
language/www/global/stations/48852.gif"
alt="Du bao thoi tiet - Co do Hue" title="Dự báo thời tiết - Cố đô Huế" height="41" width="127">
Thành Phố Hồ Chí Minh
img src="http://banners.wunderground.com/banner/gizmotimetemp_both/
language/www/global/stations/48900.gif"
alt="Du bao thoi tiet - Thanh pho Ho Chi Minh" title="Dự báo thời tiết - Thành phố Hồ Chí Minh" height="41" width="127">
Đà Nẵng
img src="http://banners.wunderground.com/banner/gizmotimetemp_both/
language/www/global/stations/48855.gif"
alt="Du bao thoi tiet - Thanh pho Da Nang" title="Dự báo thời tiết - Thành phố Đà Nẵng" height=41 width=127>
/* Đoạn code này làm cho hình trái tim xuất hiện khi chuột rê vào các link trên toàn blog*/
a:hover
{text-decoration:none;
color:#D570EE;
text-decoration:none;
font-weight:bold;
background-image:url(http://i227.photobucket.com/albums/d...trotraitim.gif);}
/* Hiệu ứng nick name bên dưới Avatar*/
#profile_highlight .bd {
color: #mã_màu_chữ;
font-family: tên_font_chữ; /*có thể là: Tahoma hoặc Courier New, Arial ...*/
font-size: x pt; /*x: cỡ chữ*/
font-weight:bold; /*Chữ in đậm*/
font-style:italic; /*Chữ in nghiêng*/
text-decoration:blink; /*Chữ nhấp nháy*/
/*Hiệu ứng ảnh động trên tiêu đề bài viết -nick Comment*/
[FONT='Times New Roman','serif'] #article_list_module .rc_bd .rc_bc h2{
background:transparent url(http://i282.photobucket.com/albums/k...hxt8p0qdcj.gif) repeat left top;}
[/font]
/* Trang trí ảnh trong phần comment*/
 | Click vào đây để xem kích thước thật. |

[FONT='Times New Roman','serif'][FONT='Times New Roman','serif'][/font][/font]
[FONT='Times New Roman','serif'] .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/l...background.jpg) no-repeat top left;border-top:2px inset #ffffff;border-left:2px inset #ffffff;border-right:2px inset #ffffff;}
.mod-alist-full .alist-comment .comment-ctnr
{background:repeat-y top right;}
[FONT='Times New Roman','serif']Các bạn nhớ chỉnh sửa size hình để toàn comment có được theme đồng nhất nhé[/font]
[/font]
/* Chỉnh sửa blast*/
#blast .rc_bc .bd {
color: #mã_màu_chữ;
font-family: tên_font_chữ; /*có thể là: Tahoma hoặc Courier New, Arial ...*/
font-size: x pt; /*x: cỡ chữ*/
font-weight:bold; /*Chữ in đậm*/
font-style:italic; /*Chữ in nghiêng*/
text-decoration:blink; /*Chữ nhấp nháy*/ }
Nếu muốn chọn cả màu, cỡ chữ cho link trong blast thì chỉ việc thay #blast .rc_bc .bd bằng #blast .rc_bc .bd alà ok!
/*Hình nền blast*/ | Click vào đây để xem kích thước thật. |
#blast .rc_bc .bd{background-color:transparent;background-image:url(link hinh1);}
#blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;}
#blast .rc div {background:transparent url(link hinh 1) no-repeat right bottom;}
#blast .rc {background:transparent url(link hinh 1) no-repeat left bottom;}
#blast .rc_bd div.rc_bc {background:transparent url(link hinh 1) repeat-y right top;}
#blast .rc_bd {background:transparent url(link hinh 1) repeat-y;}
#blast .rc_ft {background:transparent url(link hinh 1) no-repeat left bottom;}
#blast .rc_ft div {background:transparent url(link hinh 1) no-repeat right bottom;}
/* Border cua Blast trong suot*/
#blast .rc_ft {background:transparent url(http://i292.photobucket.com/albums/m...astsw-vang.png) no-repeat left bottom;}
#blast .rc_ft div {background:transparent url(http://i292.photobucket.com/albums/m...astse-vang.png) no-repeat right bottom;}
/*Thay đổi kích thước các module tự tạo*/
#user_mod_1000X .rc_bd .rc_bc .bd {
height: Ypx;
Trong đó:
X là số thứ tự của module (01-10)
Ylà chiều dài của module (px)
Code làm trong suốt viền các Module<...>
Copy đoạn code này vào CSS:
.rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent url(http://nktpro.com/360plus/rc_ne.png) no-repeat right bottom;}
.rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(http://nktpro.com/360plus/rc_nw.png) no-repeat left bottom;}
.rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:transparent url(http://nktpro.com/360plus/rc_e.png) repeat-y right top;}
.rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(http://nktpro.com/360plus/rc_w.png) repeat-y 0% 50%;}
.rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(http://nktpro.com/360plus/rc_se.png) no-repeat right top;}
.rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(http://nktpro.com/360plus/rc_sw.png) no-repeat left top;}
.rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article
.rc_bc .bd {background-color:transparent;background-image:url(http://nktpro.com/360plus/transparent_bg.png);}
#blast .rc_ft {background:transparent url(http://nktpro.com/360plus/blast-sw.png) no-repeat left bottom;}
#blast .rc_ft div {background:transparent url(http://nktpro.com/360plus/blast-se.png) no-repeat right bottom;}
Code làm theme bằng 2 ảnh giống Blog cũ (CSS)
Đây là đoạn Code giúp bạn
làm theme của mình gồm 2 mảnh Top và Bottom giống 360Yahoo Blog cũ,các
bạn vào mục Bố trí,chọn Theme rồi chọn tự sửa, chèn đoạn CSS này
vào,thay URL ảnh bằng URL của bạn (Chú ý kích thước chiều rộng nên là
1004px
Xem trang - - Yahoo! 360plus
#blast A, #blast A:hover{COLOR:#ffffff;}
body{background:#000000;}
#doc2, #doc{background:#000000 url(URL ảnh Top) no-repeat center top;}
#bd{background:transparent url(URL ảnh Bottom) no-repeat center bottom;}
#article_list_module .rc_bd .rc_bc .hd, .hd .titlebar .hd, #friendlist_module .hd, .mod-relatives .titlebar{
background:transparent ;}
h2, .hd .titlebar .hd,
.hd .titlebar .hd h2,
.hd .titlebar .hd h2 a, .mod-alist-searchbox form strong, a, a:visited,
#blog_title .bd h2, #blog_title .hd p, .mod-alist-searchbox{
color:#1BB9D6;}
#blog_title .bd, #blast .rc_bc .bd {background-color:#EF0D60 solid 1px ;}
.rc div, .rc, .rc_bd, .rc_bd div.rc_bc, .rc_ft div, .rc_ft {background-color:#EF0D60 solid 1px ;}
#blast .rc_ft, #blast .rc_ft div{background:transparent ;}
#friendlist_module .rc div, #friendlist_module .rc_bd,
#friendlist_module .rc_bc, #friendlist_module .rc_ft,
#friendlist_module .rc_ft div, #friendlist_module .rc{
background:transparent ;}
#footer{}
#blog_title{height:160px;} /*
Cái h=? là tùy theo banner bạn thiết kế h=? nếu các bạn làm banner
h=240 mà trong code nay h=160 thì đương nhiên cái banner bị xấu vì
thiếu 1 phần*/
#blog_title .bd h2{font-weight:bold;font-size:150%;}
#blog_title .rc_bc .bd{text-align:right;}
Bài viết thường xuyên sử dụng đến phần
thay đổi mã màu, tức là
bạn sẽ phải thay dòng chữ #mã_màu thành mã màu HEX phù hợp, vì thế nếu bạn nào còn chưa biết thay mã màu phù hợp mình thích thì nên qua
Bài Này để lấy mã màu nhé !
1 - Thay đổi màu chữ và link cho toàn bộ Blog :Nếu
bạn muốn thay đổi một lần toàn bộ chữ trong Blog thì dùng Code này nhé,
nên đặt ở đầu CSS hoặc đâu cũng được. Nhưng nếu bạn đã sử dụng Code
thay màu chữ một số phần khác thì những Code đó sẽ vẫn còn tác dụng đó .
Code:
Bạn nên đặt gần cuối CSS nhé !!
Code:
2 - Màu chữ và Link cho Blast : Code:
#blast .rc_bc .bd{color: #mã_màu}
|
Code:
#blast .rc_bc .bd a{color: #mã_màu}
|
3 - Blog Tôi Thích :Code:
#subscribe_highlight .rc_bc .bd p{color: #mã_màu;}
|
Code:
#subscribe_highlight .rc_bc .bd a{color: #mã_màu;}
|
4 - Blog về Tôi : Đây cũng là Module được nhiều bạn thắc mắc

Code:
#mod-tagged-frd-article .bd li ins a{color: #mã_màu;}
|
Code:
#mod-tagged-frd-article .bd a{color: #mã_màu;}
|
5 - Màu chữ, link trong comment :Để thay màu sắc chữ và link trong ô comment các bạn có thể dùng Code sau :
Code
| #comment_container * a {color:#ma_mau;}
#comment_container * .content {color:#ma_mau;}
#comments-listing * ins {color:#ma_mau;} |
- #ma_mau : là màu link.
- #ma_mau : là màu chữ
- #ma_mau : là màu của dòng : "cách đây... fút"
6 - Module "Bài viết về bạn hoặc Tag có tên bạn" :Code:
.mod-relatives-1 .bd li a{color: #mã_màu;}
|
Code:
| .mod-relatives-1 .bd li ins{color: #mã_màu;} |
7 - Màu chữ Tiêu đề bài viết :Theo yêu cầu một số bạn nên mình cũng post thêm phần này :
Code:
| #article_list_module .rc_bd .rc_bc .bd .main-bd .mod-alist .mod-alist-titlebar-1 a{color: #mã_màu;} |
Đó là mộr số Module các bạn thường thắc mắc, còn bạn nào muốn thay thêm phần nào thì comment phía dưới nhé !
Vấn đề làm Blog trong suốt có rất nhiều thắc mắc,vì vậy mình sẽ chỉnh sửa bài này chi tiết hơn cho các bạn tham khảo
1.Làm trong suốt Black Box,phần trên cùng của Blog.
-Phần này không cần thiết lắm.Nhưng ai thích làm thì sử dụng code dưới nhé.
Code:
#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{background:transparent;} #blog_masshead
.bd{background:transparent;} #blog_masshead{background:transparent}
|
2.Chỉ làm trong suốt Module bài viết ở chính giữa.
-Nhấn "Thiết kế" rồi kéo xuống phía dưới tới Module bài viết,nhấn "Sửa"
Nó hiện ra một cái bảng như sau:

Tại đây nếu bạn muốn module bài viết trong suốt thì bạn cần xoá cái màu nền(theo mũi tên-xoá cái mã #E93131 đi)
(Nếu
bạn muốn nó mờ mờ thì kéo thanh trong suốt đến vị trí thích hợp,tuy
nhiên có một vấn đề là nếu bạn làm như vậy thì màu chữ và ảnh trong
entry sẽ bị mờ theo,trông không được rõ nữa
cách khắc phục là tạo một ảnh nền trong suốt chèn vào module này.Sẽ được hướng dẫn trong phần nâng cao)
-Bạn cũng có thể xoá (để trống) ô màu nền này
Kết quả: Nền bài viết ở giữa sẽ trong suốt
3.Làm trong suốt thêm Module (Module chính là module phụ)
a,Nền Module
Nhấn vào thiết kế,chọn mục Theme,chọn chế độ tự sửa,nó sẽ hiện ra cái bảng sau:

Mô-đun chính :(vị trí:xem vòng tròn chú thích trong hình)
Tiêu đề màu (vị trí 1 trong hình) :Là nền của tiêu đề module chính
Chữ màu (vị trí 2 trong hình): Là màu nền của module chính
Mô-đun phụ
-Tiêu đề màu2: Là màu nền của tiêu đề (vị trí 3)
-Chữ màu: Màu nền của Mô đun (vị trí 4)
Như vậy muốn nền và tiêu đề của module phụ và module chính trong suốt
bạn chị cần xoá màu tại 4 vị trí như trong hình.
(Thực tế thì bạn nên giữ lại màu của tieu đề module chính và module phụ sẽ đẹp hơn)
Cách 2: Sử dụng code:
Code:
.col-150 .rc_bd .rc_bc .bd {background:transparent;} .col-600 .rc_bd .rc_bc .bd {background:transparent;} .row-920 .rc_bd .rc_bc .bd {background:transparent;}
|
Nếu muốn chỉ làm trong suốt một số Module nào đó, bạn tham khảo thêm
Bài Viết Nàynhé !
b,Tiêu đề module
Code:
.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;} .col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;} .row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
|
Kết quả: Nền bài viết trong suốt,nền module và tiêu đề module trong suốt,viền của module thì có màu trắng
Chú ý: Nếu cách set màu nền trống nếu các bạn gặp lỗi thì xem thêm bài này nhé:
Khắc phục lỗi khi làm trong suốt Blog
4.Làm trong suốt thêm viền Module:
Có 2 cách: Vì cái viền của module thực chất là ảnh,ta có thể thay bằng ảnh trong suốt,hoặc xoá cái viền này đi
3.1 Thay bằng ảnh trong suốt
3.2 Xoá viền Module
Quote:
/* 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*/ |
5.Đến đây thì Blog gần như trong suốt hoàn toàn,còn cái Blast ai muốn trong suốt nữa thì chèn code sau
Quote:
|
#blast .rc_bc .bd{background:transparent;}
#blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;}
#blast .rc div {background:transparent ;}
#blast .rc {background:transparent ;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}
|

6.Lúc này Blog ta gần như trong suốt hoàn toàn,vần còn một số vấn đề như sau:
-Viền Module Blog yêu thích không trong suốt
-Nền comments
(Sẽ được hướng dẫn trong phần hướng dẫn nâng cao)
Update:
7.Làm trong suốt nền comments (khung bình luận của bài viết)
Code
.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background:none;} .alist-comment
#comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist
#comments-listing .alist-comment {background:none;} |
8.Tổng số trang
Ai muốn làm trong suốt cả phần này thì dùng Code :
Code:
| .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent} |
9.Trong suốt Module Tâm trạng
Code:
| #mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;} |
10.Phần xem thêm,module hình ảnh
Code:
| #photo_highlight .ft {background:transparent} |
11.Module tên Blog
Code:
#blog_title .bd{background:transparent}
|
Trên đây là toàn bộ hướng dẫn làm Blog trong suốt,tuỳ theo nhu cầu của bạn,mà áp dụng từng bước một cách hợp lý
Ví dụ: Bạn muốn làm blog trong suốt hoàn toàn,nhưng muốn tiêu đề của các module có màu đỏ,thì ở bước 2
mục nền tiêu đề module chính và phụ bạn để nó màu đỏ.
Bonus:
1.Theme một ảnh cố định đứng im khi kéo xuống (giống Blog mình)
Quote:
| BODY.blog_my {BACKGROUND:url(Địa chỉ ảnh) #000000 fixed;} |
Thay cái địa chỉ ảnh bằng link ảnh bạn lấy làm theme,kích thước chiều rộng nên là 1004px
2.Theme gồm 2 hình Top-Bottom giống 360Yahoo
Thay 2 cái hình kia gồm Top và Bottom bằng link ảnh của bạn
Thay mã màu bằng mã màu phù hợp với 2 hình (màu nền ở giữa)
Chú ý: Với những đoạn code có ảnh đuôi .png,một số trình duyệt không hỗ trợ (IE6) vì vậy các bạn đừng thắc mắc nha.

Copyright by
Tam Thiếu Hiệp'sblog
I'm_Hannah 11:53 12-08-2009
phuong_khanhvl 16:57 06-08-2009
bạn ui sao mình ko làm trong suốt blog dc, ".rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent;}
.rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent;}
.rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:transparent;}
.rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent;}
.rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent;}
.rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent;}
.rc_bc .bd, #subscribe_highlight .rc_bc .bd, #mod-tagged-frd-article .rc_bc .bd {background-color:transparent;}
#blast .rc_ft {background:transparent;}
#blast .rc_ft div {background:transparent;}"
có phải mình copy đoạn này rồi vô thiet ke/theme/tu chinh sua => chép đoạn code trên vô CSS. là blog trong suot ha ban???, sao mình làm ko dc, no cứ báo lỗi hoài ah hix
♂(¯`∙¶Pë·´¯).♥gäû♥. 08:43 06-07-2009
anh ơi sao em làm ko dc zậy?
em vào theme rùi chọn tự tạo seo đóa lick vô CSS rùi làm gì nữa anh
giúp em zới
muốn làm hình nền chuyển động như của anh làm seo zậy?
Thachsadia 04:20 26-06-2009
nhoxtjna 12:46 16-06-2009
Tam Thiếu Hiệp21:24 16-06-2009
nhoxtjna 12:45 16-06-2009
yennje 00:05 12-06-2009
hjx khó wá a uj hum bjk làm hjhj
Tam Thiếu Hiệp22:13 13-06-2009
…ßo szYx 15:11 11-06-2009
…ßo szYx 15:10 11-06-2009
…ßo szYx 15:05 11-06-2009
•°o.O †»♂ YoUnG—AnDrEy ♂»† O.o°• 09:14 02-06-2009
thuytienhp86 12:17 19-05-2009
Gửi lời cảm ơn chân thành nhất tới bạn nhé! Nhờ bài viết của bạn mà mình "trùng tu" được ngôi nhà của mình!Chúc một ngày mới vui vẻ, một tuần mới thành công và hạnh phúc!Good luck for you!
Tam Thiếu Hiệp22:21 22-05-2009
thangquynho12360 17:09 10-05-2009