♀♂♥ღஐ:._ (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
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

December 2018
MonTueWedThuFriSatSun
     12
3456789
10111213141516
17181920212223
24252627282930
31      
CalendarCalendar

Share | 
 

 TỔNG HỢP CSS CHO BLOG

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 đề: TỔNG HỢP CSS CHO BLOG   Tue Feb 15, 2011 6:33 pm


<img src="địa chỉ ảnh ">

BODY.blog_my {BACKGROUND:url(Địa chỉ ảnh) #000000 fixed;}

Ảnh nền Bảng tin nhắn
Code:
BODY.guestbook {BACKGROUND:url(URL ảnh) #000000 fixed;}
Ảnh nền của bộ đếm Statistic
Code:
#statistic .bd {background:#FFFFFF url(URL ảnh);}
Ảnh nền của phần comments
Code:
#comment_new .bd {background:#FFFFFF url(URL ảnh);}
Ảnh nền của phần Thư mục
Code:
#folder .bd {background:#FFFFFF url(URL ảnh);}
Ảnh nền của phần lịch
Code:
#calendar .bd {background:#FFFFFF url(URL ảnh);}
Ảnh nền của trang Profiles
Code:
BODY.profile_view {BACKGROUND:url (URL ảnh) #000000 fixed;}
.:co0l.l0ve'sBlog::.
Đoạn code dưới đây là trang trí nền cho module,nó hơi khác code ở phía trên một chút,gồm 1 ảnh Top ở trên, một ảnh Bottom ở dưới và màu ở giữa ( ở ví dụ này màu ở giữa có mã màu: #653e16 )
/* Hình nền cho blog (theme) hiện tại chỉ làm được 1 mãnh và cho tràn khắp màn hình, cuộn */
BODY.blog_my {BACKGROUND:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/themenen07.jpg) #000000 fixed;}
/* Chèn hình nền cho cái module thông tin cá nhân bao gồm avartar */
#profile_highlight_module .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#profile_highlight_module .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module fiendlist */
#friendlist_module .rc_bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#friendlist_module .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Bài Mới */
#article_new .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#article_new .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Thư Mục Riêng*/
#folder .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#folder .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Comment mới*/
#comment_new .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#comment_new .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Thống Kê của plus*/
#statistic .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#statistic .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
/* Chèn hình nền cho module Blog yêu thích*/
#subscribe_highlight .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#subscribe_highlight .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}

/* Chèn hình nền cho module Lịch*/
#calendar .rc_bd .rc_bc {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#calendar .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
Chèn hình nền vào Module tự tạo
-Các Module tự tạo sẽ có số từ 10001->10010,tuỳ theo đó là Module thứ mấy mà các bạn điền số thích hợp
/* Chèn hình nền cho module Online (cái module tự tạo thêm có số 10001 -> 10010)*/
#user_mod_10001 .rc_bd .rc_bc{background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay02.gif) #653e16 top right repeat;}
#user_mod_10001 .bd {background:url(https://2img.net/h/i259.photobucket.com/albums/hh318/darkknight2403/theme/bantay03.gif) #653e16 bottom right no-repeat;}
Lưu ý: Các bạn thay cái URL ảnh bằng ảnh của bạn

Code:
.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*/
-Thay cái link Hinh bằng link ảnh làm nền của bạn nha.
-Chèn vào trong mục "Thiết kế/Theme/Chế độ tự sửa/CSS
Để có 1 module profile ấn tượng mang phong cách riêng và lạ mắt tô điểm cho ngôi nhà blog của bạn thì bạn có thể xem tại đây
Hôm nay rảnh rỗi, quylocvn share cho các bạn mấy mẫu profile ấn tượng mà những hót bloger đang sử dụng
• Mẫu 1 :
Code CSS:
#profile_highlight .rc {background:transparent url(http://thietkeblog.webng.com/profile/top1.gif) no-repeat left bottom;height:61px;}#profile_highlight .rc_ft {background:transparent url(http://thietkeblog.webng.com/profile/bottom1.gif) no-repeat left top;height:248px;} #profile_highlight .rc_bd {background:transparent url(http://thietkeblog.webng.com/profile/center1.gif) repeat-x top;height:auto;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;}
• Profile này thiết kế nó phù hợp với theme màu Xanh đậm màu Đen v.v...

• Mẫu 2:
Code CSS:
#profile_highlight .rc {background:transparent url(http://thietkeblog.webng.com/profile/top2.png) no-repeat left bottom;height:72px;}#profile_highlight .rc_ft {background:transparent url(http://thietkeblog.webng.com/profile/bottom2.png) no-repeat left top;height:73px;} #profile_highlight .rc_bd {background:transparent url(http://thietkeblog.webng.com/profile/center2.png) repeat-x top;height:auto;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;}
• Profile này thiết kế nó phù hợp với theme màu Xanh nhạt, màu Trắng và với tất cảc các theme màu sáng v.v...cũng là 1 profile rất là sáng tạo trong thiết kế được thiết kế trên 1 phần mềm edit PNG


• Mẫu 3
Code CSS:
#profile_highlight .rc {background:transparent no-repeat left bottom;height:0px;}#profile_highlight .rc_ft {background:transparent url(http://thietkeblog.webng.com/profile/bottom3.png) no-repeat left top;height:33px;} #profile_highlight .rc_bd {background:transparent url(http://thietkeblog.webng.com/profile/center3.png) repeat-x top;height:308px;} #profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;}
• Profile này thiết kế phù hợp với theme màu Tím màu Xám và với tất cảc các theme màu đậm v.v...cũng là 1 profile rất là sáng tạo trong thiết kế được thiết kế trên 1 phần mềm edit PNG


.Cách làm như sau :
- Đầu tiên bạn kiếm 1 ảnh Homepage ( Size chừng 100 x 25 ). Sau đó up lên 1 Host nào đó ( photobucket.com chẳng hạn).

- Copy đoạn Code này vào CSS và thay link ảnh vào là xong.

div.backhomtbtn a.backtomyblog {background:url( Thay Link Ảnh Homepage của bạn vào nhé ) no-repeat;}

Nguồn CSS : Blog Vũ Nguyễn

[Share] 1 số Button Homepage !
Keke hôm nay rãnh ngồi làm thêm vài cái Button Homepage để share cho mọi người ... dạo gần đây cái này cũng có nhiều người cần wá nhỉ ?
Sau đây là các nút Homepage mới làm nè ( xấu đừng chê nhé Razz ) :











Button for Banoj's Blog :
Cách sử dụng:
• Đầu tiên các bạn chọn 1 trong các hình phía trên. Sau đó Click chuột phải vào hình, chọn Save Image As ( đối với FireFox hoặc Save Pictures As ( đối với IE) sau đó chọn đường dẫn ... để Save file ảnh đó nhé !
• Tiếp theo là up ảnh Button đó lên 1 host ảnh như photobucket.com, hoặc imageshack.us... rồi lấy link Direct . ( Ai ko biết lấy cách up ảnh hoặc lấy link thì Xem Tại Đây )
• Và cuối cùng là bạn thay link image vào dòng chữ màu đỏ trong đọan Code sau rồi Paste vào CSS nhé ! ( Ai ko biết CSS nằm đâu thì Xem Tại Đây) :
Code :
div.backhomtbtn a.backtomyblog {background:url( Thay Link Ảnh Homepage của bạn vào nhé ) no-repeat;}

Thế là xong, bạn đã có 1 nút Homepage ko đụng hàng rồi đó ( tất nhiên nếu cái đó ko có người khác sử dụng Razz )! Have Fun !

Bản quyền bài viết thuộc về W.Dephia's Blog


• 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.



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


Code:

#blog_masshead .menu.mr a {background-image: url(https://redcdn.net/ihimizer/img182/9565/mlbex3.jpg);}
#blog_masshead .menu .rc_w {height:27px;background-image: url(https://redcdn.net/ihimizer/img232/5426/trangchinhqz6.jpg) no-repeat 0 0;}
#blog_masshead .menu .rc_e {height:27px;background-image: url(https://redcdn.net/ihimizer/img232/5426/trangchinhqz6.jpg) no-repeat right top;}
#blog_masshead .menu.ml a {background-image: url(https://redcdn.net/ihimizer/img232/5426/trangchinhqz6.jpg) 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.



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.
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
 

TỔNG HỢP CSS CHO BLOG

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
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