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

http://i474.photobucket.com/albums/rr106/simplexshare/body/body1.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body10.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body11.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body12.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body13.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body14.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body15.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body16.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body17.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body2.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body3.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body4.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body5.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body6.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body7.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body8.png


http://i474.photobucket.com/albums/rr106/simplexshare/body/body9.png

Code của phần dưới (bottom)


.col-150 .rc_ft,
#friendlist_module .rc_ft ,
#statistic .rc_ft,
#update_date .rc_ft ,
#folder .rc_ft ,
#calendar .rc_ft ,
#search_module .rc_ft ,
#article_new .rc_ft ,
#subscribe_highlight .rc_ft ,
#comment_new .rc_ft {background:transparent url(Link Hình) no-repeat center top;height:17px;}




Các mẫu BOTTOM để bạn lựa chọn : (copy và thay vào phần Link Hình)
(bạn nên chọn phần body và phần bottom giống màu nhau)

http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom1.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom10.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom11.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom12.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom13.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom14.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom15.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom16.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom17.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom2.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom3.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom4.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom5.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom6.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom7.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom8.png


http://i474.photobucket.com/albums/rr106/simplexshare/Bottom/bottom9.png

Code của phần Head (Tên tiêu đề)


.col-150 .rc_bd  .rc_bc .hd .titlebar .hd ,
#friendlist_module .hd .titlebar .hd   ,
#statistic .hd .titlebar .hd  ,
#update_date .hd .titlebar .hd   ,
#folder .hd .titlebar .hd   ,
#calendar .hd .titlebar,
#search_module .hd .titlebar .hd   ,
#article_new .hd .titlebar .hd   ,
#subscribe_highlight .hd .titlebar .hd {background:transparent url(Link Hình Head Nhỏ);}

/* Head Lớn (Bình Luận Mới Nhất) */
#comment_new .hd .titlebar .hd {background:transparent url(Link Hình Head Lớn);}


Các mẫu HEAD để bạn lựa chọn : (copy và thay vào phần Link Hình)
- Bởi vì Head và phần Top phải tương ứng với nhau nên trước mắt mình chỉ có 1 mẫu Head. Bạn thay link vào head lớn và head nhỏ. Head lớn dành cho các module nào có tên dài đến 2 hàng.

http://i474.photobucket.com/albums/rr106/simplexshare/head/head.png



http://i474.photobucket.com/albums/rr106/simplexshare/head/head_H.png

Code của phần TOP (Phần Trên Cùng)

.col-150 .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#article_new .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#search_module .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#calendar .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#folder .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#update_date .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#statistic .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#friendlist_module .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#comment_new .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#subscribe_highlight .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}
#user_mod_10001 .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}


Code áp dụng chung (lấy phần này hoặc lấy phần trên, không được lấy cả 2)


.col-150 .rc,
#article_new .rc ,
#search_module .rc ,
#calendar .rc,
#folder .rc ,
#update_date .rc,
#statistic .rc ,
#friendlist_module .rc ,
#comment_new .rc ,
#subscribe_highlight .rc ,
#user_mod_10001 .rc {background:transparent url(Link Hình) no-repeat center bottom;height:59px;}



Các mẫu TOP để bạn lựa chọn : (copy và thay vào phần Link Hình)
- Các bạn có thể chọn bất cứ mẫu TOP nào mình thích, miễn sao nó hợp lý là được.
- Ở phần code dùng chung, chỉ cần sử dụng 1 link duy nhất, tất cả các module trong cột nhỏ đều được áp dụng.

http://i474.photobucket.com/albums/rr106/simplexshare/Top/search1.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/search6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic10.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic11.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic7.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic8.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/statistic9.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/thongtin.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/time.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/update_date5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/aminal2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal1.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal7.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal8.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/animal9.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/book.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/book2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/calendar5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/camera.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/camera2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/carlendar1.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/clock.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/clock2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/comment_new_top.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/commpass.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/download_browser_top.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/favorite.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/favorite2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/favorite3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder10.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder11.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder12.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder13.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder14.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder15.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder16.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder17.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder18.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder19.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder2.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder3.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder4.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder5.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder6.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder7.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder8.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/folder9.png



http://i474.photobucket.com/albums/rr106/simplexshare/Top/photo.png



Code chỉnh sửa
- Phần code này bắt buộc phải có
- Code này sẽ làm cho các module ở cột nhỏ phù hợp với cách thiết kế hiện tại
- Bạn đừng thay đổi bất cứ cái gì trong phần này, chỉ việc copy và Paste


.col-150 .rc_bd div.rc_bc,
.col-150 .rc_ft div,
.col-150 .hd .titlebar,
.col-150 .rc div,
.col-150 .rc_bd  .rc_bc .bd  {background:transparent;}

#comment_new .rc_bd div.rc_bc,
#comment_new .rc_ft div,
#comment_new .hd .titlebar,
#comment_new .rc div,
#comment_new .rc_bd  .rc_bc .bd  {background:transparent;}

#subscribe_highlight .rc_bd div.rc_bc,
#subscribe_highlight .rc_ft div,
#subscribe_highlight .hd .titlebar,
#subscribe_highlight .rc div,
#subscribe_highlight .rc_bd  .rc_bc .bd  {background:transparent;}
#subscribe_highlight .hd .titlebar .hd   {height:27px;}

#article_new .rc_bd div.rc_bc,
#article_new .rc_ft div,
#article_new .hd .titlebar,
#article_new .rc div,
#article_new .rc_bd  .rc_bc .bd  {background:transparent;}

#search_module .rc_bd div.rc_bc,
#search_module .rc_ft div,
#search_module .hd .titlebar,
#search_module .rc div,
#search_module .rc_bd  .rc_bc .bd  {background:transparent;}

#calendar .rc_bd div.rc_bc,
#calendar .rc_ft div,
#calendar .rc div,
#calendar .hd .titlebar .hd  ,
#calendar .rc_bd  .rc_bc .bd  {background:transparent;}

#folder .rc_bd div.rc_bc,
#folder .rc_ft div,
#folder .hd .titlebar,
#folder .rc div,
#folder .rc_bd  .rc_bc .bd  {background:transparent;}

#update_date .rc_bd div.rc_bc,
#update_date .rc_ft div,
#update_date .hd .titlebar,
#update_date .rc div,
#update_date .rc_bd  .rc_bc .bd  {background:transparent;}

#statistic .rc_bd div.rc_bc,
#statistic .rc_ft div,
#statistic .hd .titlebar,
#statistic .rc div,
#statistic .rc_bd  .rc_bc .bd  {background:transparent;}

#friendlist_module .rc_bd div.rc_bc,
#friendlist_module .rc_ft div,
#friendlist_module .hd .titlebar,
#friendlist_module .rc div,
#friendlist_module .rc_bd  .rc_bc .bd  {background:transparent;}

#user_mod_10003 .rc_bd div.rc_bc,
#user_mod_10003 .rc_ft div,
#user_mod_10003 .hd .titlebar,
#user_mod_10003 .rc div,
#user_mod_10003 .rc_bd  .rc_bc .bd  {background:transparent;}

#user_mod_10002 .rc_bd div.rc_bc,
#user_mod_10002 .rc_ft div,
#user_mod_10002 .hd .titlebar,
#user_mod_10002 .rc div,
#user_mod_10002 .rc_bd  .rc_bc .bd  {background:transparent;}

#user_mod_10001 .rc_bd div.rc_bc,
#user_mod_10001 .rc_ft div,
#user_mod_10001 .hd .titlebar,
#user_mod_10001 .rc div,
#user_mod_10001 .rc_bd  .rc_bc .bd  {background:transparent;}

#calendar .hd .titlebar .hd h2 {font-size:15px;color:#FFFFFF;}
#calendar .bd table {height:118px;background:transparent;}
#calendar .titlebar,
#calendar .titlebar .bd a:hover{color:#FFFFD0;}
#calendar .hd,
#calendar .titlebar .bd a {background:transparent;font-weight:bold;font-size:12px;color:#FF0000;}




Xong .... Bạn có thể download mẫu CSS tại đây  (mở ra, copy và paste ... xem trước coi nó ra sao)


Nếu có vấn đề gì thì mong các bạn góp ý.
Bạn có quyền sử dụng bài viết này post lại .... Vui lòng ghi rõ nguồn và link đến blog Simplex

CosVn7299's Blog theo SIMPLEX

Bài Viết Liên Quan
Code CSS đổi nền cho phần Tag của bài viết
Làm bảng trắc nghiệm tình yêu cho Blog bạn
Tạo Một Module Hiển Thị Các Bài Cũ
Cách tạo Feed cho blog 360 plus
Các kĩ thuật chèn nhạc vào Yahoo Plus
Các Tool hỗ trợ cho blog
Thiết kế Module Profile ấn tượng !
Hướng dẫn làm blog Plus - Tổng hợp các thủ thuật Plus [ Mục Lục]
Bộ sưu tập ảnh động background tuyệt đẹp cho Y!Plus
Theme Plus và các vấn đề liên quan
Bộ sưu tập ảnh động background tuyệt đẹp cho Y!Plus
Hướng dẫn chèn nhạc,phim từ Nhaccuatui.com và Clip.vn
Thay đổi nền khung bình luận trong bài viết