Trang

"Những con đường anh đi rồi cũng đưa anh về bên em"

Thứ Sáu, 17 tháng 12, 2010

Code cho Bog


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(Một số code HUANDRUMS viết và một số do bạn bè chia sẻ)
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 nầy làm cho nền trong suốt.(Mình dùng link nầy: http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png )Nếu muốn dùng hình ảnh thì thay link ảnh nhé.(Muốn dùng nển màu các bạn thay url(Link ảnh)repeat bằng # mã màu nhé,hoặc  dùng Snagit chụp màu up lên & lấy link)
<style>

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

 {background:url(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png) repeat;}

</style>

<style>

#article-single.bd, #article-supplement, #article-top-nav, #article-bottom-nav{background:url(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png) repeat;}

</style>

 <style>
.yui-b .sidebar{background:url(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png) repeat;}
</style>

<style>
#comment-list .comment-reply {background:url(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png);}
</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).Cũng giống như các code trên mình đang dùng link làm trong suốt các bạn muốn dùng hình ảnh thì thay link ảnh vào(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(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png) no-repeat;}

</style>

Nếu các bạn không muốn trong suốt hay 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 ) no-repeat;height:Hpx;}

 </style>

<style>

 #emotion-carousel {background:url( Link ảnh ) 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(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/huandrumstrongsuot.png) 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)

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>

Đổ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(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/727101qh9d41021x.gif);}
</style>
Nếu kg thích kiểu hiệu ứng nầy thì thay link ảnh khác nhé. 
Ngoài ra các bạn có thể tự viết các code khác cho mình giống như khi viết code bên blog cũ nhưng theo cấu tạo như sau:
<style>Lệnh</style>


Không có nhận xét nào:

Đăng nhận xét