Bài mới nhất

Sửa Đóng
Thư mục: Yahoo!360plus |
Quan trọng
Đăng ngày: 10:26 10-12-2008
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à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::

blog Vic.World




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:
body{color: #mã_màu}


Bạn nên đặt gần cuối CSS nhé !!

Code:
a{color: #mã_màu}

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 :

Phần này có lẽ nhiều bạn thắc mắc lắm nhỉ ?

a - Màu 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é !

Cách làm cho Blog trong suốt toàn tập[Update]


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

Quote:
/* Khu Vuc Top-Bottom Theme Code CSS*/
body{background:#225ce1;}
/* mau nen cua theme thay doi theo dung mau da thiet ke se lam tang tinh my thuat cho theme */

#doc2, #doc{background:#225ce1 url(http://i292.photobucket.com/albums/mm19/themesplus2000/blue-sky-top.jpg) no-repeat center top;}
/* mau nen cua theme va link hinh top-theme nay thay doi duoc*/

#bd{background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/blue-sky-bot.jpg) no-repeat center bottom;}
/* mau nen cua theme va link hinh bottom-theme nay thay doi duoc*/
/* Luu y: mau nen cua 2 hang tren phai dong nhat mot ma mau voi nhau theo mau nen cua code theme */
/* Ket Thuc Khu Vuc Top-Bottom Theme Code CSS*/

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.


http://thatlongyeuem.somee.com/blog/uploads/200810/11_204108_hayl986187.jpg

 

Copyright by Tam Thiếu Hiệp'sblog

  • Báo cáo

    I'm_Hannah 11:53 12-08-2009

  • Báo cáo

    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

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

     

  • Báo cáo

    Thachsadia 04:20 26-06-2009

    Thanks bạn nhé
  • Báo cáo

    nhoxtjna 12:46 16-06-2009

    thix lam chu~ homepage nua~ nhiu` cai thix lam ma sao lam hum dc huhu
    Pé đọc và làm giống ý như đó là ok àh.Không đươc Online anh chỉ chi add nick : tamthieuhiep.missyou
  • Báo cáo

    nhoxtjna 12:45 16-06-2009

    em thix cai theme tuyet giong anh i' dzi fai lam tseo a?
  • Báo cáo

    yennje 00:05 12-06-2009

    hjx khó wá a uj hum bjk làm hjhj

    Cái nào không Piết Pé Hỏi. uploads/200812/21_081600_minhhalngcopy.gif
  • Báo cáo

    …ßo szYx 15:11 11-06-2009

    nhâầ ...làm cho tuyêế rơi chứ...em đợi
  • Báo cáo

    …ßo szYx 15:10 11-06-2009

    anh cho em cái link laà cho them mé trong suốt hêế đi...huuh
  • Báo cáo

    …ßo szYx 15:05 11-06-2009

    em hôk biêế lấy lick ãnh ỡ đaâ nữa....anh bày cho em vơớ
  • Báo cáo

    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!

    Cảm ơn bạn đã ghé thăm heeeeeeeeee
  • Báo cáo

    thangquynho12360 17:09 10-05-2009

    Cảm ơn anh nhiều....hihihi

Bài viết về bạn hoặc có tag tên bạn:

  • Chưa có bài nào có liên quan.

Người đăng ký yêu thích blog này cũng đồng thời thích:

  • Chưa có blog yêu thích nào có liên quan.