Tổng hợp code blog yahoo

03:13 11 thg 4 2012Công khai159 Lượt xem 6

Thời gian vừa qua có nhiều bạn bè ghé thăm blog của mình và có ngỏ lời yêu thích,muốn học hỏi cách trang trí  ,xây dựng nhà sao cho cũng đẹp như thế.

Bởi vậy dù không muốn „chuyển nghề“ nhưng mình vẫn đăng vài bài về Thủ thuật blog để sẻ chia với các bạn.

Phần lớn code mình xử dụng trong này là từ blog của bạn Huandrums và Blog Gió Lào

Để tiện cho việc xử dụng và sẻ chia với các bạn,hôm nay mình đã mạn phép các „cao thủ“ blogger ấy mang những bài viết hữu ích ấy về đây.

Hy vọng sẽ giúp đỡ mọi người được phần nào

Bài từ blog HuanDrums:

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

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(http://i1101.photobucket.com/albums/g434/huandrums/huandrums/ccccc.gif);}
</style>
Nếu kg thích kiểu hiệu ứng nầy thì thay link ảnh khác nhé.

Ai muốn tìm hiểu thêm,mời ghé thăm blog của bạn HUANDRUMS nhé!

Bài từ blog Gió Lào

1/ Chỉnh font chữ phần Comment Reply :

(Click vô hình xem kích thước lớn)

Hình trên thì font chữ của phần trả lời comment của Blog!Yahoo rất khó xem, gần cới màu nền.

Để thay đổi font chữ cho dễ nhìn thì bạn cần chèn code dưới :

<style>
#comment-list .reply-container textarea {color:#fff;}
</style>
Trong đó #FFF: là màu font chữ cần thay.

Sau khi thay xong ta sẽ có kết quả như hình dưới đây:

(Click vô hình xem kích thước lớn)

Chúc các bạn thành công với mẹo nhỏ này!

2/ Sửa kích thước ô  Comment Reply:

Ô Comment Reply có nhiều nhà bị lệch nhìn không được đẹp như hình dưới:

Đê chỉnh cho nó gọn hơn thì dùng code dưới đây:
<style>
.three-col #comment-list .reply-container textarea {
width:210px;}
</style>

Sau khi chỉnh ta có kết quả như hình dưới:

Tương tự để chỉnh sửa ô Comment bị lỗi như trên thì dùng code dưới:
<style>
#comment-form {width:350px;}
</style>

Kết quả thu được xem hình sau:

3/ Chỉnh màu nền cho Comment Reply:

Màu nền của comment Reply là phần trong ô màu đỏ ở hình dưới đây:

Để chỉnh màu nền theo sở thích, ta dùng code sau:

<style>
#comment-list .comment-reply {
background-color:#423D29;}
</style>


Lưu ý: Hướng dẫn chỉnh sửa kích thước này là cho theme 3 cột; Đồi s với theme 2 cột thì chiều rộng cần chỉnh sửa lần lượt 450 px và 610 px ; hoặc bạn phải  tự căn cho vừa ý thích.
Để thuận tiên cho bạn chọn mã màu mời các bạn XEM Ở ĐÂYChúc bạn thành công!
   Từ blog GIÓ LÀO

<style>
#comment-list .comment-reply {
background-color:#423D29;}
</style>