Code toolbar phần comment, Ảnh nền tổng số trang, cuả modun bài viết, Làm hình nền trang comment, Làm ảnh nền phần tiêu đề bài viết và nick comment, Thay đổi tag bài viết, Thay đổi "thanh công cụ comment", Ngăn dòng bài viết, Xóa đường viền các modun trong blog, Tạo đường viền trong suốt, Thiết kế Modun Profile
* Code toolbar phần comment
.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;}
* Ảnh nền tổng số trang, cuối modun bài viết
.mod-comment-new .pagination, .mod-alist-summary .pagination, .mod-alist-full .pagination{background:transparent url(Link ảnh);}
* Làm hình nền trang comment
.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;}
.mod-alist-full .alist-comment li {background:#ffffee url(http://i289.photobucket.com/albums/ll215/rainnysunday/background.jpg) 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:repeat-y top right;}
Các bạn nhớ chỉnh sửa size hình để toàn comment có được theme đồng nhất nhé.
* Làm ảnh nền phần tiêu đề bài viết và nick comment
#article_list_module .rc_bd .rc_bc h2{background:url(http://i282.photobucket.com/albums/kk263/uyenmy_plus/591400hxt8p0qdcj.gif) repeat left top;}
* Thay đổi tag bài viết
.mod-alist-tagsbar {background:url(link hình) no-repeat center;height:Apx;}
A: thay đổi height = chiều cao của ảnh..(nên thay đúg height để hình đc đẹp hơn)
* Thay đổi "thanh công cụ comment"
Code css:
Việc đầu tiên cần làm là - chèn đọan code này vào fần CSS của bạn!
.rte_btn img {height:22px; background-image:url(thay link hình ảnh vào đây) no-repeat; cursor:hand;cursor:pointer;border-left:none;border-top:none;border-right:none;height:31px;}
Dạng cổ điển!
Còn đây là biến tấu!
* Ngăn dòng bài viếtXoá đường ngăn dòng
.mod-alist-summary .main-bd li{border-top:none}
Thay đường ngăn dòng bằng Hình Ảnh
.mod-alist-summary .main-bd li{border-top:none;background:url(Link Ảnh) no-repeat bottom;}
Hình ảnh ngăn dòng này chỉ suốt hiện khi bạn không để hiện thị bài viết đầu tiên, tức để hiện thị tên bài viết hoặc hiện thị nội dung tóm tắt bài viết.
* Xóa đường viền các modun trong blog
#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;}
Vào thiết kế chọn Theme, chế độ tự sửa,copy đoạn code này vào CSS
Lưu ý: Bạn cần kiểm tra xem trong CSS của bạn có sử dụng đoạn code nào liên quan đến viền của module không để tránh gây xung đột và trồng chéo lên nhau.
* Tạo đường viên trong suốt
#friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_ne-2.png) no-repeat right bottom;}
#friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_nw.png) 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:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_e.png) repeat-y right top;}
#friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_w.png) 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:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_se-2.png) no-repeat right top;}
#friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:url(http://i461.photobucket.com/albums/qq334/changtraiiudoiblog/mini%20pro/rc_sw.png) no-repeat left top;}
#blast .rc_ft {background:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/DataBlog/blast-sw.png) no-repeat left bottom;}
#blast .rc_ft div {background:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/DataBlog/blast-se.png) no-repeat right bottom;}#blast .rc_bc .bd{background-color:transparent;background-image:url(http://i306.photobucket.com/albums/nn275/changtraiiudoi/042112transparent_bg.png);}
#blast .rc_bc .bd {font-style:italic;color:#000000;}
* Thiết kế Modun Profile1 -
Code cho Module Profile :Đầu tiên là Code cho Mod này :
#profile_highlight .rc {background:url(Link ảnh Trên) no-repeat left bottom;height:X px}
#profile_highlight .rc_ft {background:url(Link Ảnh Dưới) no-repeat left top;height: Y px}
#profile_highlight .rc_bd {background:url(Link ảnh Giữa) repeat-y top;}
#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;}
Các đọan Link ảnh trên, dưới và ở giữa các bạn phải thay ảnh đúng vị trí vào cho phù hợp nhé.
Còn Height: ở đây, muốn hiện chiều cao của ảnh 100% bạn phải thay X px, Y px bằng đúng kích thước chiều cao của ảnh .
Muốn xem chiều cao của ảnh, chỉ việc Right Click vào ảnh chọn Properties, chuyển sang thẻ Sumary, nhìn vào dòng Height là có thể thấy được ảnh cao bao nhiêu.
2 -
Ảnh :
Ở đây, mình chia sẻ một số cách làm ảnh như sau :
Bước 1 : Đầu tiên bạn thiết kế một ảnh với kích thước 150 x 300 px.
Bước 2 : Sau đó cắt ảnh đó ra làm 3 phần (Dùng Photoshop hoặc PhotoScape cũng được)
- Phần đầu : Cắt với kích thuớc 150 x (50-60 px) .
- Phần giữa : Phần này các bạn nên làm sao mà có thể lặp lại được, vì vậy chỉ nên cắt từ 150 x 5 px thôi.
- Phần cuối : Cắt phần này tùy ý, đây là phần phía dưới cùng
Bước 3 : Sau khi đã cắt xong ảnh, việc cuối cùng là up ảnh lên host, và thay link ảnh vào đọan Code đã cho.
Cuối cùng là wăng code vào CSS thôi .
phanboi_50446 12:15 24-10-2009
a uj se0 e copy ma~ code o tren zo^ blog goy` muk` seo hem thay^' co' j` hjt' zj?
co' fai copy zo^ css o fan THIET KE hem a?
a chj jum` e kj~ them chut' xj nha a!
e cho` a hoj` am
thank a truoc nhen!
^^!