[TruyệnPro8x] [Beta] Bộ Code Trang trí Blog Beta Plus Full

**Admin** Wed Mar 17, 2010 7:30 am

Dưới đây là CSS code ở phần tự thiết kế của mình(theme củ), Truyện viết ra đây để các bạn tham khảo, góp ý để cùng nhau thiết kế trang blog đẹp hơn. Phần text chữ đỏ là để chỉ dẫn, giải thích.

Trang trí chung cho trang (nền màn hình, nền khung,...)

Nền màn hình:

body.blog_my,
body.gallery,
body.guestbook,
body.profile_view
{BACKGROUND:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/a800.jpg);
font-family:Times New Roman;}

Nền cột nhỏ (khung tiêu đề, khung bài viết):

.col-150 .rc_bd .rc_bc .hd .titlebar
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/marb085.jpg);}

.col-150 .rc_bd .rc_bc .bd
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/marb108.jpg);
border-top:3px double #334466;}

Nền cột to:

.col-600 .rc_bd .rc_bc .hd .titlebar
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/marb010.jpg);}

.col-600 .rc_bd .rc_bc .bd
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/marb009.jpg);
border-top:3px double #334466;}

Trang trí cho khung tiêu đề titlebar ở đầu trang

#blog_title .rc_bd .rc_bc .bd
{background:#d2dde7 url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/brownbar.gif) repeat-x top right;}

#blog_title .rc_bd .rc_bc .bd h2
{font-size:23px;
font-family:papyrus;
color:#ffffee;}

#blog_title .rc_bd .rc_bc .bd .blog_titlebar .hd
{height:80px;
font-size:16px;
color:#2288ee;
background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/007.gif) no-repeat bottom center;}

Trang trí riêng cho khung Profile (nơi có tên và hình ảnh giới thiệu về mình): Ở đây dùng 2 hình nền lồng vào nhau cho thêm đẹp.

#profile_highlight .bd
{font-family:PAPYRUS;
font-size:21px;
font-weight:bold;
color:#000000;
height:380px;
border-top:none;
background:url(https://2img.net/h/i236.photobucket.com/albums/ff178/diemhang09032806/Dividers/105e.gif) no-repeat bottom center;}

#profile_highlight_module
{background:#ffffee url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/090821_1626009561_gxanrlor.gif);}

div.backhomtbtn a.backtomyblog
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/MAINPAGEBUTTONx.jpg) no-repeat center center;}

Nếu bạn thấy phần hình nền vượt ra ngoài khung có sẵn trông không vừa mắt thì có thể lược bỏ phần ngoài này như sau:
#profile_highlight .hd, #profile_highlight .rc_ft, #profile_highlight .ft, {height:0px;}

Bỏ đi đường gạch phía trên ở phần blast do các lệnh trên tạo ra:

#blast .rc_bc .bd {border-top:none;}

Cho biểu tượng nhỏ vào đầu mỗi dòng mới ở các mục Bài viết mới, Lời bình và Thư mục riêng:

#article_new .bd ul li
{background:transparent url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_open.gif) no-repeat center left;}

#folder .bd ul li
{background:transparent url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/images03/orange_book_closed.gif) no-repeat center left;}

#comment_new .bd ul li
{background:transparent url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/images03/edit.png) no-repeat center left;}

Phần trang trí cho khung Thống kê:

#statistic .rc_bd .rc_bc .hd .titlebar .hd h2
{height:60px;
background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/image05/644758-8440_2iqmryb-1.gif);
font-size:20px;}

#statistic .rc_bd .rc_bc .bd
{background:#ffffee url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/05bgc.gif);}

#statistic .rc_bd .rc_bc .bd ul
{height:400px;
background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/5.gif) no-repeat bottom left;}

#statistic .rc_bd .rc_bc .bd ul li
{text-align:right;
background:url(http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif) no-repeat center left;}

Phần trang trí cho khung Bạn bè:

#friendlist_module .rc_bd .rc_bc .hd
{height:65px;
background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/banners/042359_909462764_vwnfmodg.gif) no-repeat bottom center;}

#friendlist_module .rc_bd .rc_bc .hd .titlebar .hd h2
{font-size:42px;
height:50px;
color:#ff69b4;
text-align:center;}

#friendlist_module .rc_bd .rc_bc .bd ul
{height:430px;
background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/images/722215gmow4kzhww.gif) no-repeat center bottom;}

#friendlist_module .rc_bd .rc_bc .bd
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/094137_1476536859_ifadofrj.gif);
border-top:3px ridge #5b6e7f;}

#friendlist_module .rc_bd .rc_bc .bd ul li
{border-top:3px dotted #ffffff;
border-left:3px dotted #ffffff;
border-right:3px dotted #ffffff;}

#friendlist_module .rc_bd .rc_bc .bd ul li:hover
{border-top:1px inset #ffffff;
border-left:1px inset #ffffff;
border-right:1px inset #ffffff;
background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/Background/094132_2041798846_vyujknxf.gif);}

Phần trang trí cho khung lời bình:

Bỏ đi màu nền bên ngoài của khung lời bình
.cmt-mod-alist #comments-listing .extend-hd
{background:transparent;}
.cmt-mod-alist #comments-listing .extend-bd .alist-comment,
.mod-alist-full .alist-comment ul
{background:transparent;}

Hình nền màu nền và đường viền cho khung lời bình

.mod-alist-full .alist-comment li
{background:#ffffee url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/194513_541176981_gjfwdakc.gif) 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(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/dividers/201038_27712868_dfmmkvpq.gif) repeat-y top right;}

Ngoài ra, bạn có thể thêm một hình nền nữa cho khung lời bình bằng lệnh sau:

Sửa lại khung Các bài viết liên quan ở cuối mỗi bài viết

.col-600 .mod-relatives .rc_bd .rc_bc .bd
{border-top:none;background:#fffeee;}
.col-600 .mod-relatives .rc_bd .rc_bc .bd .mod-relatives-1 .bd,
.col-600 .mod-relatives .rc_bd .rc_bc .bd .mod-relatives-2 .bd
{border-top:3px double #334466;}

Chỉnh chiều cao của Khung bài viết này

#user_mod_10001 .rc_bd .rc_bc .bd .user-mod-holder {height:300px;}

#user_mod_10001 .rc_bd .rc_bc .bd .user-mod-holder:hover {height:auto;}

Phần tiếp dưới là dùng để thay thế các biểu tượng tâm trạng bằng biểu tượng khác theo ý mình

Trước tiên phải tạo ra 2 file ảnh có đủ mặt của 12 tâm trạng để thay thế file ảnh có sẵn của Yahoo (ảnh to kích thước 50 x 600 còn ảnh nhỏ kích thước 25 x 300):
Ảnh nhỏ
Ảnh to

Bước thứ hai là viết thêm code CSS(thay đường dẫn đến file ảnh tương ứng):

.mod-alist-titlebar-1 h2 a em,
.mod-alist-full .main-hd h1 em,
.mod-alist-titlebar h2 a em,
.mod-alist-brief table a em,
#myblog-article-compose #mood li em,
{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif);}

#mod_lifeline .list td a.blog_emo_25_1{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 0;}

#mod_lifeline .list td a.blog_emo_25_2{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -25px;}

#mod_lifeline .list td a.blog_emo_25_3{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -50px;}

#mod_lifeline .list td a.blog_emo_25_4{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -75px;}

#mod_lifeline .list td a.blog_emo_25_5{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -100px;}

#mod_lifeline .list td a.blog_emo_25_6{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -125px;}

#mod_lifeline .list td a.blog_emo_25_7{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -150px;}

#mod_lifeline .list td a.blog_emo_25_8{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -175px;}

#mod_lifeline .list td a.blog_emo_25_9{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -200px;}

#mod_lifeline .list td a.blog_emo_25_10{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -225px;}

#mod_lifeline .list td a.blog_emo_25_11{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -250px;}

#mod_lifeline .list td a.blog_emo_25_12{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotion2.gif) no-repeat 0 -275px;}

#mod_lifeline .list td a.blog_emo_50_1{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 0;}

#mod_lifeline .list td a.blog_emo_50_2{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -50px;}

#mod_lifeline .list td a.blog_emo_50_3{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -100px;}

#mod_lifeline .list td a.blog_emo_50_4{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -150px;}

#mod_lifeline .list td a.blog_emo_50_5{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -200px;}

#mod_lifeline .list td a.blog_emo_50_6{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -250px;}

#mod_lifeline .list td a.blog_emo_50_7{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -300px;}

#mod_lifeline .list td a.blog_emo_50_8{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -350px;}

#mod_lifeline .list td a.blog_emo_50_9{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -400px;}

#mod_lifeline .list td a.blog_emo_50_10{background:url(https://2img.net/h/i241.photobucket.com/albums/ff182/hienhoang_2007/emotions.gif) no-repeat 0 -450px;}

----------------o 0 o-------------

Ghi rõ nguồn gốc khi sử dụng lại bài viết nhé!

Lee-Nguy Wed Mar 17, 2010 9:41 pm

Thank

[TruyệnPro8x] [Beta] Bộ Code Trang trí Blog Beta Plus Full

[TruyệnPro8x] [Beta] Bộ Code Trang trí Blog Beta Plus Full

Re: [TruyệnPro8x] [Beta] Bộ Code Trang trí Blog Beta Plus Full