Quan trọng
Đăng ngày: 17:08 17-05-2009
Hôm nay mình sẽ hướng dẫn "choa" bạn cách thiết kế cái module tâm trạng thiệt là đẹp nha !!!
Module tâm trạng là đây :
1.Làm trong suốt
A.Làm trong suốt đường viền ( boder )
Code:
#mod_lifeline .rc_bd .rc_bc .hd .titlebar .hd,
#mod_lifeline .rc_bd .rc_bc .hd .titlebar{background:transparent;}
#mod_lifeline .rc_bd .rc_bc .bd {background:transparent;}
#mod_lifeline .rc div,
#mod_lifeline .rc,
#mod_lifeline .rc_bd,
#mod_lifeline .rc_bd div.rc_bc,
#mod_lifeline .rc_ft,
#mod_lifeline .rc_ft div{background:transparent;color:none;}
|
B.Trong suốt nền tiêu đề
Code :
|
#mod_lifeline .rc_bd .rc_bc .bd {background:transparent;}
|
C.Trong suốt nền chính
Code:
|
#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}
|
Luư ý!!!
Khi bạn dùng code trên thì đường viền bên phải bị mất đi luôn @@!
Để khắc phục , bạn dùng cách sau :
- Lấy link hình của đường viền bên phải
(Bằng cách đưa chuột vào hình » nhấp chuột phải » view background image » copy link)
- Thay link hình vừa mới lấy được vào code sau :
|
#mod_lifeline div.rc_bc {background:transparent url(LINK) repeat-y right top!important;}
|
D. Làm mất tên module tâm trạng
Code:
|
#mod_lifeline h2{color:transparent}
|
2.Thay nền
A.Nền tiêu đề
Code:
|
#mod_lifeline .rc_bd .rc_bc .bd {background:transparent url(LINK ẢNH NỀN TIÊU ĐỀ);}
|
B.Thay nền chính
Code:
|
#mod_lifeline .bd {background:transparent url(LINK ẢNH NỀN CHÍNH) repeat-x;}
|
Jờ mìk thấy nhìu người thích cái nền này
Nếu thích thì pạn lấy code này nhá :
|
#mod_lifeline .bd {background:transparent
url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/Capture-12.png)
repeat-x;}
|
3.Thay đổi icon cảm xúc
Bạn xem lại bài NÀY nha ^^!
4.Thay mũi tên
Code thay nè :
|
#mod_lifeline .lifeline-prev{background:url(Back) no-repeat;}
#mod_lifeline .lifeline-next{background:url(Next) no-repeat;}
#mod_lifeline .lifeline-prev-off{background:url(Back) no-repeat;}
#mod_lifeline .lifeline-next-off{background:url(Next) no-repeat;}
|
Trong đó :
Back : link hình của mũi tên qua trái.
Next : link hình của mũi tên qua phải.
5.Pop Message
Cái zấn đề nềy ít blogger nào nói đến...
Cái
Pop Message là cái tự hiện ra khi mình đưa chuột vào mấy cái hình cảm
xúc . Nó hiện ra một vài câu đầu trong entry của bạn...
Hình minh hoạ :
Vấn đề ở đây là khi bạn làm trong suốt nền chính thì cái nền của Pop Message cũng bị trong suốt theo luôn !!!
Khi đó ... khó đọc chữ và xấu đi nữa >"<...
Để khắc phục vấn đề này kực kỳ đơn giản.
Bạn dùng code sau há :
|
#mod_lifeline .pop-msg .bd, #mod_lifeline .pop-msg .rc_bc,
#mod_lifeline .pop-msg-2 .rc_bc, #mod_lifeline .pop-msg-2 .bd
{background:#FFFFFF !important;}
|
Và đây là thành wả ^^ :
Fùuuu... tạm xong rùi đó ... ^^!
Trích: Akira Blog
