TỔNG HỢP CODE CSS CHO YAHOO! BLOG

Như các bạn biết với Yahoo! Blog ta vẫn dùng code CSS được,tuy nhiên nó không có ô CSS,vì vậy tất cả code ta đều paste vào nguồn bên ngoài.Dưới đây HUANDRUMS chia sẻ với các bạn một số code cần thiết cho ngôi nhà mới nầy.
Bài nầy được chia làm 2 phần(Tạm gọi là code cho nền và code cho chữ)1/CODE CHO NỀN
A/(Nền bài viết khi còn ở dạng danh sách bài,khi đã mở ra từng bài,nền module phụ,nền comment)HUANDRUMS soạn theo màu.
Các code dùng thay hình nền cho các phần đó:

<style>

#article-list, #pagination-bottom, #emotion-carousel

{background:url(Link ảnh nền) ;}

</style>

<style>

#article-single.bd, #article-supplement, #article-top-nav, #article-bottom-nav{background:url(Link ảnh nền) ;}

</style>

<style>
.yui-b .sidebar{background:url(Link ảnh nền);}
</style>

<style>
#comment-list .comment-reply {background:url(Link ảnh nền);}
</style>

Nếu muốn tùy chỉnh từng phần thì chú ý(HUANDRUMS soạn và chú thích theo màu,code trên màu gì thì chú thích dưới màu đó)
CODE màu đỏ :article-list(Nền bài viết khi còn ở dạng danh sách)CODE màu vàng : article-single(Nền bài viết khi đã mở ra xem)CODE màu xanh : yui-b .sideba(Nền module phụ)CODE màu tím : comment-list .comment-reply(Nền cmt và trả lởi cmt)
B/Nền status(Cái khung dưới avatar). (Nhớ resize ảnh đúng kích thước ô status trước khi up lấy link vì đây là thuộc tính no-repeat)

<style>

#w-profile-card .status {background:url(Link ảnh nền) no-repeat;}

</style>

Nếu các bạn không muốn chèn ảnh thì có thể đổi màu cho nó:

<style>

#w-profile-card .status {background: # mã màu ;}

</style>

C/Nền cho phần post top(Phần phía trên module bài viết):

<style>

#article-top-nav {background:url( Link ảnh nền ) no-repeat;height:Hpx;}

</style>

<style>

#emotion-carousel {background:url( Link ảnh nền) no-repeat;height:Hpx;}

</style>

H:Chiều cao.

Các bạn thay link ảnh vào nhé(Nhớ resize đúng kích thước trước khi up lấy link)Ở đây có 2 code : emotion-carousel(Nền top khi bài viết còn ở dạng danh sách) và article-top-nav(Nền top khi mở từng bài ra xem)Các bạn có thể dùng chung 1 link ảnh.Nếu muốn trong suốt nó thì thay link trong suốt vào và xóa chữ no và kích thước nhé(Lúc đó cuối code chỉ còn ....Link trong suốt) repeat;} </style> Nếu chỉ muốn đổi màu cho nó thôi thì các bạn có thể thay url( Link ảnh ) no-repeat;height:Hpx bằng # mã màu nhé.

D/Phần bảng quyền cuối blog:

<style>

#ft {font-size:0px;border-top:0px;padding:0 0 0 0;background:url(Link ảnh nền) repeat center;height:Hpx;width:Wpx;margin-top:30px;}

#ft p {margin-bottom:0px;}

#ft li .divider {display:none;}

</style>

H là chiều cao W là chiều rộng(Ở đây mình đang dùng link trong suốt để xóa dòng bảng quyền đó,các bạn có thể thay bằng link ảnh khác)

Nếu muốn trong suốt luôn thì các bạn thay url( Link ảnh nền) bằng transparent nhé.

Ví dụ: Muốn trong suốt phần module phụ các bạn lấy code thay hình nền module phụ nầy:

<style>
.yui-b .sidebar{background:url(Link ảnh nền);}
</style>

Sau đó thay url(Link ảnh nền) bằng transparent khi ấy code sẽ như sau:

<style>
.yui-b .sidebar{background: transparent;}
</style>

LƯU Ý: Khi đã trong suốt thì kg cần các thuộc tính kèm theo như no-repeat;height:Hpx gì đó các bạn cứ xóa bỏ các thuộc tính ấy đi.Phần nào muốn trong suốt thì chỉ {background: transparent;} là đủ các bạn nhé.

2/CODE CHO CHỮ:(Lưu ý là không nên dùng code thay đổi font và kích thước chữ trong module bài viết vì khi ấy sẽ làm thay đổi kích thước các module,chỉ dùng code đổi màu chữ thôi,thật ra khi viết bài đã có chức năng đổi font,kích thước và màu rồi,chỉ dùng code thay đổi cho chữ trong các module phụ và phần cmt thôi)

Để đổi màu chữ toàn blog dùng code nầy:

<style>
body{color:# mã màu;}
</style>

Nếu muốn chữ nghiêng các bạn thêm font-style:italic vào nhé,khi đó code sẽ là:

<style>
body{color:# mã màu;font-style:italic;}
</style>

Đổi màu và kích thước chữ cho tựa bài viết:

<style>
#article-single

.article .title{font-size: Xpx;color: # Mã màu ;text-decoration:blink;} </style>

Trong đó X là kích thước và text-decoration:blink là thuộc tính nhấp nháy nếu không muốn nhấp nháy thì xóa dòng text-decoration:blink đi.Nếu muốn đổi luôn font các bạn thêm lệnh font-family:Kiểu chữ. Các bạn dùng dấu ; giữa các lệnh nhé

Đổi màu,font và kích thước chữ trong module phụ(Module thống kê chẳng hạn):

<style>
.yui-b .sidebar{body(font-family:Tahoma;font-size:Xpx;color: # Mã màu;)}

</style>

Vẫn còn một sót lại vài nơi chữ chưa đổi màu trong module phụ,các bạn thêm code nầy nhé:

<style>

a {color:#Mã màu;}

</style>

Đổi màu,font và kích thước chữ trong phần comment:

<style>
#article-supplement{body(font-family:Tahoma;font-size:Xpx; color: # Mã màu;)}

</style>

Đổi màu,font và kích thước chữ trong phần trả lời comment:

<style>
#comment-list .comment-reply {body(font-family:Tahoma;font-size:Xpx; color: Mã màu;)}

</style>

X là kích thước chữ,Tahoma là font chữ , các bạn có thể thay bằng các font khác Vd: verdana ,comic sans,times,courier ......

Đổi màu chữ cho status:

<style>

#w-profile-card .status .text{color: # Mã màu ;}

</style>

Hiệu ứng rê chuột:
<style>
a:hover{background-image:url(Link hiệu ứng);}
</style>