♀♂♥ღஐ:._ (Lê Tấn Bê secondary school) _.:ღஐ♥♀♂

Cùng nhau tâm sự mọi ngừơi nhé , hãy trải nghiệm mình vào cuộc sống quanh ta có biết bao nhiêu điều tươi đẹp đang chờ ta phía trứơc.Góc nhỏ này sẽ giúp cho ta hiểu nhau hơn cũng nhau thăt chặt tình thương giữa bạn bè thầy cô trừơng thcs Lê Tấn Bê...
 
Trang ChínhCalendarGalleryTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập
Liên hệ với Admin

Admin
Similar topics
Latest topics
Top posters
•Kan <3
 
nuoc1982
 
wardoom
 
danggialong96
 
zkofd8
 
Candy
 
jekY.cold
 
nuocxanh1982
 
♥BunBun
 
Princelove
 
Chế độ điểm thưởng
Mon Mar 07, 2011 9:14 pm by Admin
Từ ngày hôm nay 4rum sẽ bắt đầu có chế độ điểm thưởng Smile Smile
Đầu tiên điểm thưởng để làm gì Smile khi có điểm thưởng bạn sẽ có thể dùng nó để mua tài sản cho mình (khoảng vài ngày nữa sẽ có shop bán tài sản trong 4rum) nhớ là mua vừa phải mà đủ để người ta …

Comments: 3
Navigation
 Portal
 Diễn Đàn
 Thành viên
 Lý lịch
 Trợ giúp
 Tìm kiếm
Tìm kiếm
 
 

Display results as :
 
Rechercher Advanced Search
Affiliates
free forum

September 2018
MonTueWedThuFriSatSun
     12
3456789
10111213141516
17181920212223
24252627282930
CalendarCalendar

Share | 
 

 CSS WORK SHOP

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
zkofd8

avatar

Tổng số bài gửi : 166
Reputation : 3
Join date : 11/02/2011

Bài gửiTiêu đề: CSS WORK SHOP   Tue Feb 15, 2011 6:34 pm



Phần I: Trong suốt toàn tập
1.Phần Hearder (top)
1.1 Code transparent
#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{background:transparent;}
#blog_masshead .bd{background:transparent;} #blog_masshead{background:transparent}
1.2 Code trang trí
Ví dụ:
#blog_masshead .bd form .btn{height:25px;background:url(https://redcdn.net/ihimizer/img362/3119/timyz8.jpg) no-repeat 0 0;cursor:pointer;}
#blog_masshead .rc,
#blog_masshead .rc div,
#blog_masshead .rc_bd,
#blog_masshead .rc_bc,
#blog_masshead .rc_ft{background:transparent;}
#blog_masshead .rc_ft div{height:4px;background:transparent;}
#blog_masshead .bd{height:30px;background:transparent;}
#blog_masshead .menu.mr a {background-image:url(https://redcdn.net/ihimizer/img245/7409/mlbsk9.png);}
#blog_masshead .menu .rc_w,
#blog_masshead .menu .rc_e,
#blog_masshead .menu.ml a {background-image:url(https://redcdn.net/ihimizer/img355/5724/nocnha2zr3.png);}
#blog_masshead{font-size:12px;color:#AD8F77;background:transparent url(https://redcdn.net/ihimizer/img246/2296/nocnha1xn6.jpg) repeat-x 0 5px;height:72px;}
#blog_masshead a{color:#AD8F77;}
2.Module (150-600-920)
2.1 Code transparent
.col-150 .rc_bd .rc_bc .bd {background:transparent;}
.col-600 .rc_bd .rc_bc .bd {background:transparent;}
.row-920 .rc_bd .rc_bc .bd {background:transparent;}

2.2 Thay nền Module

.col-150 .rc_bd .rc_bc .bd {background:transparent url(Link ảnh nền);}
.col-600 .rc_bd .rc_bc .bd {background:transparent url(Link ảnh nền);}

#user_mod_100X .rc_bd .rc_bc .bd {background:transparent;}
(X từ 01-10)

-Nền riêng theo từng Module
a-Module New Comment :

Code:
#comment_new .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

b-Module Bài Mới :

Code:
#article_new .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

c-Module Profile ( Nick Name) :

Code:
#profile_highlight .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

d-Module Search (Tìm Kiếm) :

Code:
#search_module .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

e- Module Thư Mục :

Code:
#folder .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

f-Module Cập Nhật Ngày ( Update) :

Code:
#update_date .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

g-Module Lịch:

Code:
#calendar .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

h-Module Thống Kê :

Code:
#statistic .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh);}

i-Module danh sách
#friendlist_module .rc_bd .rc_bc .bd {background:transparent url(Link Ảnh Nền);}

Lưu ý: Các Module khác làm tương tự
#Tên_Module.rc_bd.rc_bc.bd{background:transparent url (Link ảnh nền); }

-Cách thiết kế Module:
http://vn.myblog.yahoo.com/sim-plex/article?mid=446\


3.Tiêu đề Module
3.1 Code transparent
.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
.row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;}
3.2 Thay nền cho titlebar
.col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar {background:transparent url(Link ảnh tiêu đề);}
.col-600 .rc_bd .rc_bc .hd .titlebar .hd,
.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent url(Link ảnh tiêu đề);}

#user_mod_100X .rc_bd .rc_bc .hd .titlebar .hd,
#user_mod_100X .rc_bd .rc_bc .hd .titlebar{background:transparent;}

-Theo tên từng module:
Ví dụ:
#friendlist_module .rc_bd .rc_bc .hd .titlebar .hd{background:transparent url(Link Ảnh Nền);}

4.Border (Đường viền Module)
4.1 Code Transparent
#friend-list .rc div,
#friendlist_module .rc div, .rc div,
.col-150 .rc div {background:transparent ;}
#friend-list .rc,
#friendlist_module .rc, .rc,
.col-150 .rc {background:transparent ;}
#friend-list .rc_bd div.rc_bc,
#friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc,
.col-150 .rc_bd {background:transparent ;}
#friend-list .rc_bd,
#friendlist_module .rc_bd, .rc_bd,
.col-150 .rc_bd div.rc_bc {background:transparent ;}
#friend-list .rc_ft div,
#friendlist_module .rc_ft div, .rc_ft div,
.col-150 .rc_ft div {background:transparent ;}
#friend-list .rc_ft,
#friendlist_module .rc_ft, .rc_ft,
.col-150 .rc_ft {background:transparent ;}

Module tự tạo
#user_mod_100X .rc div,
#user_mod_100X .rc,
#user_mod_100X .rc_bd,
#user_mod_100X .rc_bd div.rc_bc,
#user_mod_100X .rc_ft,
#user_mod_100X .rc_ft div{background:transparent;color:none;}

Thay X bằng số thứ tự Mod từ 01-10
Ví dụ : Mod 1 trở thành
#user_mod_10001

4.2 Hướng dẫn
http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=2767
http://vn.myblog.yahoo.com/w-dephia/article?mid=1529

4.3 Temp
Ví dụ:
#friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent url(https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/shareborder/8.gif) repeat-x right bottom;}
#friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/shareborder/8.gif) no-repeat left bottom;}
#friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent url(https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/shareborder/8.gif) repeat-y right top;}/*Bản quyền thuộc về W.Dephia'sBlog*/
#friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/shareborder/8.gif) repeat-y ;}
#friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/shareborder/8.gif) repeat-x right top;}
#friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(https://2img.net/h/i286.photobucket.com/albums/ll107/wdephia/Blog/Post/shareborder/8.gif) no-repeat left top;}
5.Blast
5.1 Code Transparent
#blast .rc_bc .bd{background:transparent;}
#blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;}
#blast .rc div {background:transparent ;}
#blast .rc {background:transparent ;}
#blast .rc_bd div.rc_bc {background:transparent ;}
#blast .rc_bd {background:transparent ;}
#blast .rc_ft {background:transparent ;}
#blast .rc_ft div {background:transparent ;}
5.2 Hướng dẫn
-Thay nền Blast
#blast .rc_bc .bd{background-color:transparent;background-image:url(Link Ảnh);}
-Ví dụ:
#blast .rc_bc .bd{background-color:transparent;background-image:url(https://2img.net/h/i514.photobucket.com/albums/t342/wdephia1/Post/nenblast/2.png);}

-Xem một số mẫu:
http://vn.myblog.yahoo.com/w-dephia/article?mid=4442

-Thay Đổi màu chữ, font chữ, kích thước cho chữ và Link của Blast :

a - Đối với Blast không kèm Link :

Code :
#blast .rc_bc .bd{font-weight:bold;font-style:italic;color:#0099FF;font-size:16px;text-decoration:blink}

b- Đối với Blast Có Kèm Link :

Các bạn nên copy cả 2 đọan Code dành cho chữ và link

Code :
#blast .rc_bc .bd a{font-weight:bold;font-style:italic;color:#0099FF;font-size:16px;text-decoration:blink}

Các tùy chọn :

* font-weight:bold : chữ in đậm.
* font-style:italic : Chữ in nghiêng.
* color:#0099FF : Mã màu xanh dương, các bạn có thể thay mã màu khác nếu muốn !
* font-size:16px : Kích Thước Chữ. Có thể thay thành 13, 14 hay 17, 18 px tùy ý .
* text-decoration:blink : Chữ nhấp nháy
Mã màu:
http://www.echip.com.vn/echiproot/javascript/ColorCheck.html

5.3 Xoá Module Blast
#blast{height:0px;font-size:0px;}
#blast .bd {height:0px;font-size:0px;color:#FFFFFF;}
#blast .rc div {background:transparent;}
#blast .rc {background:transparent;}
#blast .rc_bd div.rc_bc {background:transparent;}
#blast .rc_bd {background:transparent;}
#blast .rc_ft {background:transparent;}
#blast .rc_ft div {background:transparent;}
#blast .rc_bc .bd{background:transparent;}


6.Allbum,List,Enlarger
#gallery_list .bd {background:none;}
#photo_enlarge .bd,
#photo_enlarge .ft {background:none;}
#photo_enlarge .ft
#post_rte_create,
#photo_comment .bd {background:none;}
#photo_enlarge .c_photo_enlarge .ft {background:none;}
#photo_enlarge .bd .c_photo_enlarge .bd {background:none;}
#gallery_list .ft .pagination .pagination {background:none;}
#gallery_list .ft .pagination {background:transparent url(Link Ảnh) repeat left top;}/*Thanh hiển thị số trang*/
#photo_highlight .ft .more {background:transparent ;}
#photo_highlight .ft .more a {font-size:110%;font-style:italic;font-weight:bold;color:#ffffff;}

7.Module tâm trạng
7.1 Trong suốt
#mod_lifeline div.bd,
#mod_lifeline div.rc_bc {background:transparent!important;}

8.Module Comments trong entry
8.1 Trong suốt
.cmt-mod-alist
#comments-listing .extend-hd,
.cmt-mod-alist
#comments-listing .extend-bd
.alist-comment {background:none;}
.alist-comment
#comment_container *,
.cmt-mod-alist
#comments-listing ,
.cmt-mod-alist
#comments-listing
.alist-comment {background:none;}

8.2 Trang trí
.mod-alist-full .alist-comment li {background:#ffffff url(Link ảnh) no-repeat top left; border-top:2px inset #ffffff; border-left:2px inset #ffffff; border-right:2px inset #ffffff;} .mod-alist-full .alist-comment .comment-ctnr {background:url(Link ảnh) repeat-y top right;}

-Cái link ảnh đâu tiên là ảnh bên trái,link ảnh dưới cùng là ảnh bên phải.

-Ở đây có một vài thuộc tính hiển thị mà các bạn lên chú ý để tuỳ biến cho hợp lý:

repeat: lặp lại hình ảnh

no-repeat: không lặp lại

repeat-y : lặp lại hình ảnh theo chiều thẳng đứng

top:hiện thị trên cùng | left: bên trái | right: bên phải | bottom: phía dưới

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=4282
http://vn.myblog.yahoo.com/w-dephia/article?mid=5292

-Màu chữ,link trong comments
#comment_container * a {color:#ma_mau;} #comment_container * .content {color:#ma_mau;} #comments-listing * ins {color:#ma_mau;}

• #ma_mau : là màu link.
• #ma_mau : là màu chữ
• #ma_mau : là màu của dòng : "cách đây... fút"



9.Phần Profile Info
#profile_info ,
#profile_info .bd
#blog_profile .bd,
#profile_info .bd
#personal_profile .bd,
#profile_info .bd
#introduction_profile .bd,
#profile_info .bd
#personal_profile .bd th ,
#profile_info th {background:none;}

10.Tên Blog
#blog_title .bd{background:transparent}

11.Tổng số trang
.mod-alist-summary .pagination,
.mod-alist-full .pagination{background:transparent}
12.Hình nên bảng tin nhắn
#feature_link_gb .rc_bd .rc_bc .hd .titlebar .hd
{background:transparent url(Link);}


Phần II: Theme
1.Một ảnh
1.1 Dạng cố định Fixed
1.2 Dạng lặp lại Repeat
2.Theme Top-Bottom
3.Một số thuộc tính
Màu link và màu khi di chuột đến link:
a{color:#6F5F06;}
a:hover{color:#FF0000;}
.rc, .rc div : dùng để tạo đường viền trên đỉnh
.rc_bd, .rc_bd .rc_bc : dùng để tạo đường viền 2 bên trái phải
.rc_ft, .rc_ft div : dùng để tạo đường viền dưới đáy
font-family:PAPYRUS -Phông chữ
font-size:14px -Cỡ chữ
font-weight:bold -Chữ in đậm
font-style:italic -Chữ nghiêng
color:#FFHDFS -mã màu
height:200px -Chiều cao của modun
height:auto -Chiều dài tự động
border -Đường viền, đường biên
border-left:5px dotted #fff -Đường viền trái 5px dotted, màu #fff
text-align:right -Căn chữ sang phải
no-repeat center top -Có nghĩa là ảnh được hiện thị 1 lần (no-reapeat), ko lặp lại, ảnh được ở giữa (center) tiêu đề hay nền modun, ảnh được hiện thị từ trên xuống dưới (top)
bottom -Ảnh được hiện thị từ dưới lên
right -Căn phải
left -Căn trái
repeat -Lặp từ trái qua phải, từ trên xuống dưới
no-repeat -Không lặp
repeat-x -Lặp theo chiều ngang
repeat-y -Lặp theo chiều học
background:transparent -Dùng làm trong suốt hoàn toàn
background:#FHJDFH -Chèn màu vào
background:URL(Link ảnh) -Chèn ảnh vào
background:transparent url(link ảnh) viết giản lược thành background:URL(Link ảnh)
!important -Khi qui định thuộc tính nào !important, thuộc tính đó sẽ không bị khi đè

Ví dụ:
body.blog_my_index,
body.comment_listing,
body.trackback_listing,
body.blog_archives_folder,
body.blog_archives_date,
body.blog_archives_all,
body.post_rte,
body.post_doodle,
body.guestbook,
body.comment_list,
body.subscribe_list,
body.post_gb,
body.profile_view,
body.gallery,
body.photo_big,
body.slideshow,
body.photo_upload_pc,
body.photo_upload_gallery
{background:url(https://2img.net/h/i537.photobucket.com/albums/ff332/trieu_ho/bg313.jpg)repeat fixed;}

BODY.blog_my {BACKGROUND:url(https://2img.net/h/i537.photobucket.com/albums/ff332/trieu_ho/bg313.jpg) #000000 fixed;}

Vi du 2:

body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date,
body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list,
body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery
{background:#FFCC00 url(http://files.myopera.com/co0l.l0ve/Plus/cool_theme1.jpg) repeat-y center fixed;}

body{background:#5A701D;}

#doc2, #doc{background:#FFFFFF url(https://redcdn.net/ihimizer/img98/7121/topffffffnt3wi1.jpg) no-repeat center top;}

#bd{background:transparent url(https://redcdn.net/ihimizer/img396/5305/360themesuw6mn6.jpg) no-repeat center bottom;}

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=4819
Phần III: Other Code
1. Ảnh nền cho mỗi entry:

.mod-alist-full .main-bd{background:#FFFFFF url(http://xxxx.jpg);}


2. Ảnh nền tiêu đề mỗi entry

.mod-alist-full.mail-hd{background:#FFFFFF url(http:xxx.jpg)}

-Vi du:
.mod-alist-full .main-hd{background:#FFFFFF url(http://i4.glitter-graphics.org/pub/1027/1027794dltvym6kv1.gif) fixed 50% 30%;}

3. Ảnh nền Module bài viết

#article_list_module .bd, .mod-alist-full .main-bd {background:transparent;}

4. Thay Icon tiêu đề các module
#statistic h2{background:transparent url(Link) no-repeat left;height:18px;}
#article_new h2{background:transparent url(Link) no-repeat left top;}
#photo_highlight h2{background:transparent url(Link) no-repeat left top;}
#folder h2{background:transparent url(Link) no-repeat left;}
#rss_output .bd a{height:25px;background:transparent url(Link) no-repeat left;height:20px;text-align:center;}
#search_module h2{background:transparent url(Link) no-repeat left top;}
#comment_new .titlebar .hd h2 {background:transparent url(Link) no-repeat left bottom;height:40px;}

/* Mod tu tao : #user_mod_1000x */
5. Thay Icon trong nội dung Module
-Thư mục riêng:
#folder .bd ul li {background:transparent url(URL ảnh) no-repeat left top;}
-Bình luận mới nhất:
#comment_new .bd ul li {background:transparent url(URL ảnh) no-repeat left top;}
-Bài viết mới nhất:
#article_new .bd ul li {background:transparent url(URL ảnh) no-repeat left top;}
-Blog tôi thích
#subscribe_highlight ul.blog-list li
.mod-subscription-list {background:transparent url(URL ảnh) no-repeat left top;}

V í d ụ:

#comment_new .bd ul li {background:transparent url(http://files.myopera.com/co0l.l0ve/Plus/SAOWX3.GIF) no-repeat left top;}
#subscribe_highlight ul.blog-list li .mod-subscription-list {background:transparent url(http://files.myopera.com/co0l.l0ve/Ohayqua/RSS.GIF) no-repeat left top;}
#folder .bd ul li {background:transparent url(http://files.myopera.com/co0l.l0ve/Plus/nghe_het.gif) no-repeat left top;}
#article_new .bd ul li {background:transparent url(http://files.myopera.com/co0l.l0ve/Ohayqua/RSS.GIF) no-repeat left top;}
6. Thay Nút Home Page
div.backhomtbtn a.backtomyblog {background:url( Thay Link Ảnh Homepage của bạn vào nhé ) no-repeat;}

Vi du:

div.backhomtbtn a.backtomyblog {background:url(http://files.myopera.com/co0l.l0ve/files/home.gif) no-repeat;height:25px;}

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=3241


7. Hiệu ứng chữ cho nick name

#profile_highlight .nickname a {color:#0066CC;font-family:Comic Sans MS;font-size:130%;font-weight:bold;font-style:italic;text-decoration:blink;}

8. Bỏ viền một module
#user_mod_10010 .rc_bd .rc_bc .hd {height:0px;}
#user_mod_10010 .rc div,
#user_mod_10010 .rc,
#user_mod_10010 .rc_bd,
#user_mod_10010 .rc_bd div.rc_bc,
#user_mod_10010 .rc_ft,
#user_mod_10010 .rc_ft div
#user_mod_10010 .rc_bd .rc_bc .bd {background:transparent;}
9. Xoá và chèn footer
-Code xoá:
#footer .ft .provider p,
#footer .ft .info p,
#footer .ft .rights p,
#footer .ft .privacy p,
#footer .ft .disclaimer p,
#footer .ft .provider h4,
#footer a, .rights,
#footer {font-size:0px;color:transparent;}
-Chèn Footer:
#footer{background:transparent url(Link) no-repeat center;border-top:0px;height:A px;}

http://vn.myblog.yahoo.com/n2-k/article?mid=1574
-Ví dụ:

#footer{background:transparent url(http://files.myopera.com/c4-classical/cool/footer.png) no-repeat center;border-top:0px;height:192px;}
#footer .ft .info a {border-right:none;}
#footer .ft .provider p, #footer .ft .info p, #footer .ft .rights p, #footer .ft .privacy p, #footer .ft .disclaimer p, #footer .ft .provider h4, #footer a, .rights, #footer {font-size:0px;color:transparent;}
10. Thay đổi phần tools bar comments
.rte_toolbar {
background:#d7d7d7 url(link Hinh) repeat-x top;
border-left:1px solid #0448f6;
border-top:1px solid #0448f6;
border-right:1px solid #0448f6;
height:89px;}/*chieu cao cua hinh*/
11. Thay đổi nền cho phần Tag bài viết
.mod-alist-tagsbar {background:url(link hình) no-repeat center;height:Apx;}

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=5206

12. Chỉnh độ cao banner
#blog_title{height:220px;}
13. Code Zoom *
14. Code Local Link *
15. Canh trái nội dung văn bản
16. Thay nền cho bài viết dạng HTML
17. Code làm trái tim,mưa tuyết xuất hiện khi di chuột vào link
a:hover
{text-decoration:none;
color:#D570EE;
text-decoration:none;
font-weight:bold;
background-image:url(http://i3.glitter-graphics.org/pub/707/707623ndqm8nohtx.gif);}

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=239

18. Thay đổi Icon Tâm trạng
-Code mẫu
#mod_lifeline .list td a.blog_emo_25_1{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_25_2{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -25px;}
#mod_lifeline .list td a.blog_emo_25_3{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_25_4{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -75px;}
#mod_lifeline .list td a.blog_emo_25_5{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_25_6{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -125px;}
#mod_lifeline .list td a.blog_emo_25_7{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_25_8{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -175px;}
#mod_lifeline .list td a.blog_emo_25_9{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_25_10{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -225px;}
#mod_lifeline .list td a.blog_emo_25_11{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_25_12{background:url(URL ảnh tâm trang nhỏ) no-repeat 0 -275px;}
#mod_lifeline .list td a.blog_emo_50_1{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_50_2{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_50_3{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_50_4{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_50_5{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_50_6{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_50_7{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -300px;}
#mod_lifeline .list td a.blog_emo_50_8{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -350px;}
#mod_lifeline .list td a.blog_emo_50_9{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -400px;}
#mod_lifeline .list td a.blog_emo_50_10{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -450px;}
#mod_lifeline .list td a.blog_emo_50_11{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -500px;}
#mod_lifeline .list td a.blog_emo_50_12{background:url(URL ảnh tâm trang cỡ to) no-repeat 0 -550px;}

.mod-alist-full .main-hd h1 em,
.mod-alist-titlebar-1 h2 a em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose
#mood li em{background:transparent url(URL ảnh tâm trang nhỏ) no-repeat;}

http://vn.myblog.yahoo.com/cyvp_perfectlad200304/article?mid=4126

-Cách làm:

1 hình nhỏ cỡ 25x300 để hiện thị khi tâm trang bình thường.
1 hình to cỡ 50x600 để hiển thị bài viết quan trọng.

-Cách thiết kế:
Bạn chỉ cần thiết kế một cái ảnh tâm trạng hình to (50x600),gồm 12 hình tâm trạng khác nhau,mỗi hình cỡ 50x50 rồi sau đó
gộp lại thành một hình to dài cỡ (50x600)
-Sau khi có được ảnh tâm trạng hình to rồi,các bạn chỉ việc resize nó nhỏ đi một nửa để được cái hình nhỏ cỡ (25x300)

-Đổi màu nền:
-Một số mẫu:
Ví dụ: Tâm trạng lợn hồng
#mod_lifeline .list td a.blog_emo_25_1{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_25_2{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -25px;}
#mod_lifeline .list td a.blog_emo_25_3{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_25_4{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -75px;}
#mod_lifeline .list td a.blog_emo_25_5{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_25_6{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -125px;}
#mod_lifeline .list td a.blog_emo_25_7{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_25_8{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -175px;}
#mod_lifeline .list td a.blog_emo_25_9{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_25_10{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -225px;}
#mod_lifeline .list td a.blog_emo_25_11{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_25_12{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat 0 -275px;}
#mod_lifeline .list td a.blog_emo_50_1{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 0;}
#mod_lifeline .list td a.blog_emo_50_2{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -50px;}
#mod_lifeline .list td a.blog_emo_50_3{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -100px;}
#mod_lifeline .list td a.blog_emo_50_4{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -150px;}
#mod_lifeline .list td a.blog_emo_50_5{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -200px;}
#mod_lifeline .list td a.blog_emo_50_6{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -250px;}
#mod_lifeline .list td a.blog_emo_50_7{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -300px;}
#mod_lifeline .list td a.blog_emo_50_8{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -350px;}
#mod_lifeline .list td a.blog_emo_50_9{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -400px;}
#mod_lifeline .list td a.blog_emo_50_10{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -450px;}
#mod_lifeline .list td a.blog_emo_50_11{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -500px;}
#mod_lifeline .list td a.blog_emo_50_12{background:url(http://files.myopera.com/co0l.l0ve/Plus/xongto.jpg) no-repeat 0 -550px;}


.mod-alist-full .main-hd h1 em, .mod-alist-titlebar-1 h2 a em, .mod-alist-titlebar h2 a em, .mod-alist-brief table a em, #myblog-article-compose #mood li em{background:transparent url(http://files.myopera.com/co0l.l0ve/Plus/xongnho.jpg) no-repeat;}

14.Hiệu ứng nhấp nháy
http://vn.myblog.yahoo.com/w-dephia/article?mid=2891

15.Làm biến mất tên Module
#Tên Module h2{color:transparent}
Ví dụ:
#profile_hightlight h2{color:transparent}
Có tác dụng ẩn các text tiêu đề.Bôi đen vẫn nhìn thấy.
-Để triệt để dùng code sau:
#comment_new h2 , #article_new h2 , #profile_highlight h2, #search_module h2, #update_date h2, #calendar h2, #statistic h2, #friendlist_module h2 , #feature_link h2, #rss_output h2 , #mod-tagged-frd-article h2, article_list_module h2{color:transparent;font-size:0px;}
#photo_highlight .titlebar .hd h2, #mod_lifeline .titlebar .hd h2, #subscribe_highlight .titlebar .hd h2 , .mod-more-blogs .titlebar .hd h2, #gb_msg .titlebar .hd h2, #user_mod_10006 .hd h2 , #user_mod_10010 .hd h2, #user_mod_10009 .hd h2, .mod-relatives-1 .hd h2 , .mod-relatives-2 .hd h2 {color:transparent;font-size:0px;}
#folder .hd h2{color:transparent;font-size:0px;}
#comment_new .titlebar .hd h2 , #mod-tagged-frd-article .titlebar .hd h2, #rss_output .titlebar .hd h2, #subscribe_highlight .titlebar .hd h2 , .mod-relatives-1 .titlebar .hd h2 , .mod-relatives-2 .titlebar .hd h2 {background:transparent;}
.mod-alist-searchbox form strong {font-size:0px;color:transparent;}
-Code trên có font chữ bằng 0px nên bôi đen cũng không thấy

16.Module tên Blog
#blog_title{height:0px;}
• Code chỉnh sửa phông và màu chữ:
#blog_title .bd h2{ text-align:left;font-size:16px;color:#FFFFFF;}
/*Chỉnh tên blog*/
#blog_title .rc_bc .bd{text-align:center;font-size:14px;color:#FFFFFF;}
/*Chỉnh nội dung mô tả blog*/
• Code xóa đường viền modun tên blog:
#blog_title .rc div,
#blog_title .rc,
#blog_title .rc_bd,
#blog_title .rc_bd div.rc_bc,
#blog_title .rc_ft,
#blog_title .rc_ft div {background:transparent;}



Phần IV: Name of Modules
1. Tên chung
.col-150
.col-600
.col-920
2. Tên riêng
#comment_new –Comment mới nhất
#profile_highlight –Module Nick Name Avatar
#profile_info
#profile_card : Hồ sơ Blog
#search_module –Module tìm kiếm
#folder –Module thư mục
#article_new – Bài mới nhất
#update_date –Ngày cập nhật
#calendar –Module Lịch
#statistic –Module Thống kê
#friendlist_module – Module danh sách bạn bè
#rss_output -
#mod_lifeline – Code Tâm trạng
#subscribe_highlight –Blog tôi thích
#user_mod_1000X –Module tự tạo (X từ 1-10)
#blog_title – Tên Blog
#blast
#feature_link
#galerry_list:Module hình ảnh
#mod-tagged-frd-article
#update_date
#mod_lifeline – Module tâm trạng
#friendlist_module
.mod-relatives : Phần bài viết về bạn hoặc có tag tên bạn
.mod-alist-full .main : Module bài viết
.rte_toolbar : Phần toolbar,thanh soạn thảo
#user_mod_100X: Module tự tạo ( X từ 01-10)




Editing…
Editor by co0l.l0ve
Thanks to W.Dephia,Vunguyen,Noa,Sim-Plex,nhockhi,Kem,changtraiyeudoi…




Tài Sản của zkofd8
Tài sản
Tài sản:

Về Đầu Trang Go down
Xem lý lịch thành viên
 

CSS WORK SHOP

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 

 Similar topics

-
» [Shop Avatar Động] Pucca X Garu ~♥~
» [Shop] Móc khóa, móc điện thoại CHIBI THẦN TƯỢNG bằng vải nỉ
» [Shop]Bán các mặt hàng K-pop .
» [HN] Kwon shop - Nhận order Hoodie, T-shirt, túi, Album, PTB, Kpop goodies... (ver 2)
» •.:.-‘๑’_ Shop Designer •.:.-‘๑’_ Nuna aka Sữa
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
♀♂♥ღஐ:._ (Lê Tấn Bê secondary school) _.:ღஐ♥♀♂ :: NỐI VÒNG TAY LỚN :: CHUYỆN TRƯỜNG – CHUYỆN LỚP :: Giải trí :: Thủ thuật blog-
Chuyển đến