Hướng dẫn làm theme như Yahoo!360° cũ (1 ảnh nền)

Thư mục: ☆☆☆☆☆ |

Đăng ngày: 01:37 17-07-2009

Phù...bạn bè cứ buzz nick nhờ làm theme, nhưng cũng hay một điều là hầu hết chỉ thích theme thật đơn giản thôi, gần gũi như theme bên 360 cũ. Hôm nay tớ bê lên đây 1 cái theme sử dụng 1 ảnh nền bên dưới và trong suốt tất cả nền các mô-đun bên trên, ai thích thay banner hoặc thay ảnh nền thì chỉ việc copy và paste vào thay cái link màu đỏ trong đống codes bên dưới nhá! Mà female hay male đều dùng đống codes này được hết vì cái mã màu hồng kia (#F30082) nó không hiển thị đâu ạ, tại nó bắt phải khai mới cho save lại nên khai đại thế thôi hehe.

Còn #000000 là mã màu đen của chữ (cái này mới hiển thị), ai muốn thay đổi màu chữ thì chỉnh màu trong khung số thiết lập và paste xuống đống codes bên dưới nhé (ví dụ tìm trong codes những chỗ có ký hiệu #000000 ---> sửa thành #CD1212).

Muốn xem thử theme thì click vào hình hoặc click here!

body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list, body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery
{BACKGROUND:#FFFFFF url( http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2009/07/16/11/91701247762374.jpg ) center top repeat fixed;}

input, select{background:transparent url(http://img.photo.zing.vn/file_uploads/gallery/sources/q42008/2009/05/25/10/91821243265279.png) repeat top center;font-family:Verdana, Times;color:#000000;}#article_list_module .bd{background : transparent}.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;}.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;}.row-920 .rc_bd .rc_bc .hd .titlebar .hd,.row-920 .rc_bd .rc_bc .hd .titlebar{background:transparent;}.col-150 .rc_bd .rc_bc .bd {background:transparent;}.col-600 .rc_bd .rc_bc .bd {background:transparent;}.row-920 .rc_bd .rc_bc .bd {background:transparent;}.row-760 .rc_bd .rc_bc .hd .titlebar .hd,.row-760 .rc_bd .rc_bc .hd .titlebar{background:transparent;} .row-760 .rc_bd .rc_bc .bd {background:transparent;}.mod-alist-summary .pagination {background:transparent no-repeat center top;}.mod-alist-summary .pagination .total {font-size:14px;color:#000000;font-weight:bold;font-style:italic;}.mod-alist-summary .pagination a{font-size:13px;color:#000000;}.mod-alist-summary .pagination a:hover{font-style:normal;color:#000000;}body{color: #000000} #subscribe_highlight .rc_bc .bd p{color: #000000;} #subscribe_highlight .rc_bc .bd a{color: #000000;}#mod-tagged-frd-article .bd li ins a{color: #000000;} .mod-relatives-1 .bd li a{color: #000000;} .mod-relatives-1 .bd li ins{color: #000000;}.mod-alist-full .mod-alist-pagination {background:transparent;} .mod-alist-pagination .index {background:none;}#gallery_list .bd, #photo_enlarge .bd, #photo_enlarge .ft, #post_rte_create, #photo_comment .bd,#photo_enlarge .c_photo_enlarge .ft, #photo_enlarge .bd .c_photo_enlarge .bd, #gallery_list .ft .pagination .pagination, #gallery_list .ft .pagination, .gbmsg_btn, .slideshow_btn {background:transparent;}#photo_highlight .ft .more,#photo_highlight .ft, #gallery_list .ft{background:transparent}#gallery_list .bd .actionbar .hd,#gallery_list .bd .actionbar .bd,#gallery_list .bd .actionbar{background:transparent}#article_list_module .bd a{color:#000000 ;} #article_list_module .bd a:hover{color:#000000 ;}.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background:none;}.alist-comment #comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist #comments-listing .alist-comment {background:none;}#mod_lifeline div.bd, #mod_lifeline div.rc_bc {background:transparent!important;}#comment_container * .content {color:#000000;} #comments-listing * ins {color:#000000;}#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{background:transparent;} #blog_masshead .bd {background:transparent;} #blog_masshead{background:transparent;} #footer{background:transparent;border-top:0px;height:0px;}#footer .ft .provider p, #footer .ft .info p, #footer .ft .rights p, #footer .ft .privacy p, #footer .ft .disclaimer p, #footer .ft .provider h4, #footer a, .rights, #footer {font-size:0px;color:transparent;}{

Hướng dẫn cách cho codes CSS trên vào blog:

1. Chọn "Thiết kế" ---> "Theme"

2. "Chế độ tự chỉnh sửa" ---> "Tiếp"

3. Copy đống codes ở trên paste vào ô trống bên dưới. Chỗ link "Ảnh nền" thích thì paste cái link đỏ vào, ko thì cứ để kệ cũng chả sao. Nhớ chỉnh các thông số màu sắc chữ và màu nền như hình dưới (chỉ cần chỉnh chỗ màu đen thôi, còn chỗ màu hồng thì chỉnh màu gì cũng được vì nó không hiển thị - codes này là trong suốt nền mô-đun mà). Nhấn "Xong" thế là xong!

4. Muốn copy codes và dễ thay đổi thông số (mã màu & ảnh nền)? Soạn 1 entry (bài viết), copy rồi paste vào đó sẽ y hệt hình dưới đây --> dễ nhìn dễ thay đổi! Sau khi sửa theo ý thì lại copy và paste vào CSS trong blog của mình!

5. Chỉnh cái banner màu xanh xanh "xấu xí" kia?

Chọn "Thiết kế" ---> click chuột vào chữ "Sửa" ở Banner

Tích ô "Chọn ảnh từ máy tính" ---> Browse ảnh mình thích cho vào! ---> làm theo các bước trong hình!

Ta đã có Banner theo ý!

6. Chỉnh mô-đun Bài Viết (Entry) sang kiểu thu gọn (không bị hiển thị entry đầu tiên)?
Đây là hình lúc chưa change theme và chưa chỉnh sửa nên entry đầu tiên (mới nhất) bị hiển thị như trong ảnh.

Đầu tiên chọn "Thiết kế":

Kéo xuống click chuột vào chữ "Sửa" ở mô-đun Bài Viết:

Tích vào ô "Hiển thị tóm tắt". Muốn chọn hiển thị 5, 8 hay 10 entries thì tùy ý thích! ---> bỏ qua mấy ô kia (vì đã được chỉnh sửa trong codes), click luôn vào chữ "Lưu" là xong!

7. Muốn tắt bớt các mô-đun linh tinh không thích hoặc di chuyển vị trí?
Đầu tiên lại click vào "Thiết kế":

Click vào những dấu x trong hình là xong, có thể kéo di chuyển các mô-đun này đến các vị trí trong blog mình muốn bằng cách giữ chuột và kéo đến chỗ mình muốn để: