Các cách thiết kế module Bài Viết

Tiêu đề: Các cách thiết kế module Bài Viết 28/10/2010, 8:57 pm

Nguồn : Truongton.net
p/s : Nội dung sa0 chép hoàn toàn từ Akj ...keke:D..

Như theme, module bài viết (article_list_module) cũng có nhiều sự lựa chọn trong thiết kế. Tuy nhiên ở bản beta mới khj ta click vào xem 1 bài viết xem chi tiết, thì nó sẽ kéo giãn độ rộng từ 620px đến 790px, điều này gây khó khăn trong cách thiết kế của bản cũ.sau đây là 1 vài cách làm đẹp module bài viết cho bạn. Nhưng trước tiên ta dùng code của Olympia làm trong suốt nó trước đã.

Code trong suốt module bài viết
Trích:

Trích dẫn :

#article_list_module .rc_bd .rc_bc .hd .titlebar .hd,#article_list_module .rc_bd .rc_bc .hd .titlebar, #article_list_module .rc_hd, #article_list_module .rc_hd div, #article_list_module .rc_bd, #article_list_module .rc_bc, #article_list_module .rc_ft, #article_list_module .rc_ft div, #article_list_module .rc_bc .bd, #article_list_module .mod-alist-searchbox input.btn, .cmt-mod-alist .comments-listing .hd, #comment_container li, #bd .rte_toolbar, .mod-trackback #trackback-listing, .mod-trackback ul, #article_list_module .pagination, #yui-main table.data thead th{background:transparent;border-style:none;}

#article_list_module .mod-alist-searchbox input.ipt{background:transparent;}

.cmt-mod-alist .comments-listing .bd, .mod-trackback .bd{background:transparent !important;}

Sau khi làm trong suốt module bài viết ta bắt đầu thiết kế:
[You must be registered and logged in to see this image.]
1 : Phần ảnh trên
2 : Phần ảnh tiêu đề
3 : Phần ảnh nội dung
4 : Phần ảnh dưới

Trên hình là các phần ảnh chính, ta dựa vào thiết kế. Ở đây Phần 2, Phần 3 ta đặt chung link hình phần giữa như hướng dẫn dưới đây.
Cách 1: Thiết kế 3 mảnh rộng 790px - dàn trang 2 cột hẹp-rộng hoặc rộng hẹp.

* - Bạn cần thiết kế 1 hình size 790 x 600px

* - Cắt hình đó thành 3 mảnh, mảnh ở giữa phải có dạng lặp lại được, như hình dưới đây

[You must be registered and logged in to see this image.]
* -Sau khi có 3 mảnh ghép như trên ta up lên trang host ảnh rồi lấy link thay thế vào code dưới đây rồi post vào khung css là ok.

Trích:

Trích dẫn :

#article_list_module .rc_hd {background:url(link ảnh phần trên) no-repeat center top;HEIGHT:Apx;}
#article_list_module .rc_bd {background:url(link ảnh phần giữa) repeat-y center;}
#article_list_module .rc_ft {background:url(link ảnh phần dưới) no-repeat center top;HEIGHT:Bpx;}

* -Thay link ảnh theo đúng từng phần, A là chiều cao ảnh phần trên, B là chiều cao ảnh phần dưới

_________Tobe c0ntinue!!!!__________

» Cách gõ dấu tiếng Việt trên 4r
» Ôi Việt Nam....!!!
» Nút chia sẻ bài viết với các Mạng xã hội
» [Code] Chia sẽ bài viết qua yahoo
» [Hướng dẫn] hiện chữ ký trong bài viết