Đổi Menu có sẵn trên cùng của Blog

» Yahoo 360 plus!

Hướng dẫn thiết kế Theme Module cột nhỏ

Đổi màu chữ cái đầu dòng

Jul 16

admin

11:11

Lượt xem (2077)

Nhận xét (0)

Lớn | Vừa | Nhỏ

http://img146.imageshack.us/img146/1964/menumc0.jpg

• Làm trong suốt các đường viền.

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{width:100%;height:4px;background:transparent;}

#blog_masshead .bd{clear:both;padding:6px 0 0 5px;height:30px;
margin:3px 2px 0 2px !important;*margin:0px 2px 0 2px;background:transparent;}

Bạn nào không thích trong suốt thì cũng có thể chèn ảnh vào.

http://img402.imageshack.us/img402/7354/ngangiuaentrydx3.jpg

• Thay đổi thanh công cụ.

http://img525.imageshack.us/img525/1007/thanhcongcuvq4.jpg

Code:

#blog_masshead .menu.mr a {background-image: url(http://img182.imageshack.us/img182/9565/...);}
#blog_masshead .menu .rc_w {height:27px;background-image: url(http://img232.imageshack.us/img232/5426/...) no-repeat 0 0;}
#blog_masshead .menu .rc_e {height:27px;background-image: url(http://img232.imageshack.us/img232/5426/...) no-repeat right top;}
#blog_masshead .menu.ml a {background-image: url(http://img232.imageshack.us/img232/5426/...) no-repeat;}

Ở đây đã giảm Opacity của thanh công cụ xuống cho nó trong suốt.(các bạn có thể tự làm cho minhf một thanh công cụ mới).

• Thay đổi Button tìm kiếm.

http://img80.imageshack.us/img80/7779/buttontimkiemck0.jpg

Code:

#blog_masshead .bd form .btn{border:none;width:60px;height:77px;background:url(Link Button) no-repeat 0 0;cursor:pointer;}

Sau khi tìm đc 1 button tìm kiếm vừa ý khi thay link các bạn nhớ thay luôn kick thước width + height đúng với link button nha.

• Thay đổi Background và làm chữ nhấp nháy.

Code Background.

#blog_masshead{font-size:12px;color:#ccc;background:transparent url(link hình) repeat-x 0 5px;height:72px;}

Code chữ nhấp nháy.

#blog_masshead a{color:#ffffff;text-decoration:blink;}

P/s: nhớ sắp xếp code theo thứ tự trên để hình hiển thị đầy đủ không bị đè lên nhau.

co0l.l0ve'sBlog

Đánh giá bài viết