THIẾT KẾ THEME DÀNH CHO BLOG PLUS

Chia sẻ: Dao Huy | Ngày: | Loại File: DOC | Số trang:14

Thêm vào BST

Báo xấu

447
lượt xem 110
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Theme riêng do chính mỗi blogger tạo ra sẽ mang phong cách riêng của blogger đó, chính lý do này mà vấn đề designed theme đã trở thành mối quan tâm nhiều nhất của các new logger khi vừa khởi đầu xong 1 blog, và họ không hài lòng dùng theme sẵn có của Plus, nếu bạn là 1 trong những blogger mà Ruby vừa đề cập đến thì entry này mong sẽ giúp các bạn tự thíêt kế cho mình 1 theme thật độc đáo !

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: THIẾT KẾ THEME DÀNH CHO BLOG PLUS

THIẾT KẾ THEME DÀNH CHO BLOG PLUS Theme riêng do chính mỗi blogger tạo ra sẽ mang phong cách riêng của blogger đó, chính lý do này mà vấn đề designed theme đã trở thành mối quan tâm nhiều nhất của các new logger khi vừa khởi đầu xong 1 blog, và họ không hài lòng dùng theme sẵn có của Plus, nếu bạn là 1 trong những blogger mà Ruby vừa đề cập đến thì entry này mong sẽ giúp các bạn tự thíêt kế cho mình 1 theme thật độc đáo ! (Lưu ý: Bài víêt này sẽ không đúng nếu Plus tiếp tục xuất hiện lỗi mới – lúc đó Ruby sẽ cố gắng tìm hiểu thêm thông tin để cập nhật lại^^) Entry này đã được post rất lâu, nhưng thời gian gần đây, Yahoo Plus lại xuất hiện lỗi về thiết kế theme (nền trong suốt), nên Ruby sẽ cập nhật lại thông tin và code, cách khắc phục lỗi trong phạm vi hiểu bíêt của mình! Trước hết, xin trình bày về thao tác cơ bản up t heme: click vào thang ngang trên cùng mục: “Thiết kế”-->“Theme”““ “Tự chỉnh sửa thiết kế-->  xuất hiện 1 khung thiết lập: 1> BACKGROUND CHO TOÀN BỘ BLOG: Blog Plus khác so với Yahoo 360 cũ ở chỗ: theme không up trực tiếp từ PC. a. Đối với theme nền cố định, 1 hình duy nhất: Sau khi đã tìm được theme với kích thước ưng ý, blogger sẽ up theme nền lên 1 số website: www.mediafire.com, http://www.flickr.com/, http://my.opera.com/ (blog Opera của bạn), photobucket.com/… (Plus cho phép theme có thể là ảnh nền động)
Việc đơn giản là các bạn lấy link ảnh trực tiếp tới theme đó, sau đó nhấp vào “Thiết kế”-->“Theme”““ “Tự chỉnh sửa thiết kế-->paste vào ô “Ảnh nền” (ô thứ 3 từ trên xuống –“Ảnh nền”). Background là màu nền sẵn có của tòan bộ Blog trước khi có theme mới, nếu bạn chọn background đen (#000000) thì nên set chữ màu trắng (#FFFFFF – hoặc để trống ô màu chữ) và ngược lại. Lời khuyên: Nếu theme nền của bạn có màu tối thì nên để Background đen còn theme nền sáng thì nên để Background trắng b. Theme nền gồm top và bottom (giống Blog 360): Không copy link vào ô “Ảnh nền”, mà copy đọan code dưới đây vào “Thiết kế”-->“Theme”““ “Tự chỉnh sửa thiết kế -->ô “CSS” (nơi chèn code CSS, ở phía dưới ): link file ảnh : Link tới ảnh top , bottom bạn đã up lên mạng /* Code làm top và bottom như blog 360*/ #blast A, #blast A:hover{ COLOR: #; } body{ background:/*Màu background*/;} #doc2, #doc{ background:/*Màu background*/ url(link file ảnh của top theme ) no-repeat center top;}
#bd{ background:transparent url(link file ảnh của bottom theme ) no-repeat center bottom;} c. Theme nền cố định (1 hình duy nhất): Nền theme sẽ khác (a.) 1 chút, nó nằm cố định và không set liền tiếp nhau: Copy đọan code dưới đây và ô “CSS”: (link ảnh nền: chèn link ảnh nền mà bạn đã up lên web) /* hình nền cho toàn blog */ BODY.blog_my { BACKGROUND:url(link ảnh nền) no-repeat #ffffff fixed center;background-color:6FAC72; } //Thông số fixed là để làm nền đứng yên không chuyển động theo thanh cuộn rất hợp với nền dạng partern. Nếu không thích bạn có thể loại bỏ thông số này! Chọn “Lưu”, hoặc nhấn F5 để load Blog 1 hoặc 2 lần, blog sẽ hiển thị Theme. d. Bố trí lại màu sắc của các module cho hợp lý: 1 phần nằm ở khiếu thẩm mỹ của mỗi bạn :
Màu nền module phụ và nền của tiêu đề các module phụ (phần nằm 2 bên, trong các ô dàn bên cạnh: tùy vào cách bạn chọn dàn trang) lẫn nền module và nền tiêu đề các module chính (phần ở giữa) : Vẫn sẽ là 1 màu background đơn điệu. Tùy theo theme chèn vào, các bạn chỉnh sửa lại 1 số màu sắc và phân định rõ phần nào sẽ set màu, phần nào để trong suốt (trước khi nhảy vào làm trong suốt nền hoàn toàn). Bạn có thể hiệu chỉnh riêng Module : “Thiết kế”ếế“Bài viết mới”: chỉnh độ mờ nhạt, nền màu phù hợp với chữ viết. 2> BACKGROUND CHUNG CHO CÁC MODULE: (Chèn code vào khung "CSS") a. Module chính (phần module ở giữa): ** Màu nền Module chính: Chèn đoạn code dưới đây vào ô “CSS”: + Ảnh nền là trong suốt: .col-600 .rc_bd .rc_bc .bd {background:transparent;} + Ảnh nền là 1 background bất kỳ (Thay link ảnh nền bằg URl tới ảnh) .col-600 .rc_bd .rc_bc .bd {background:transparent url(Link ảnh nền);} ** Màu nền tiêu đề các module chính: + Ảnh nền trong suốt:
.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;} + Ảnh nền là 1 background bất kỳ (Thay link ảnh nền bằg URl tới ảnh): .col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent url(Link ảnh tiêu đề);} b. Module phụ (phần module ở bên cạnh): ** Màu nền Module phụ: Chèn đoạn code dưới đây vào ô “CSS”: + Ảnh nền trong suốt: .col-150 .rc_bd .rc_bc .bd {background:transparent;} + Ảnh nền là 1 background bất kỳ (Thay link ảnh nền bằg URl tới ảnh): .col-150 .rc_bd .rc_bc .bd {background:transparent url(Link ảnh nền);} ** Màu nền tiêu đề các module phụ: + Ảnh nền trong suốt: .col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar {background:transparent;}
+ Ảnh nền là 1 background bất kỳ (Thay link ảnh nền bằg URl tới ảnh): .col-150 .rc_bd .rc_bc .hd .titlebar .hd, .col-150 .rc_bd .rc_bc .hd .titlebar {background:transparent url(Link ảnh tiêu đề);} c. Module tự tạo (phần module do bạn vào "thiết kế" thêm vào): Module tự tạo sẽ có số hiệu từ 10001-10010. Tuỳ Module số bao nhiêu mà blogger sẽ thay “X” này bằng số thích hợp. (Nhấn vào "Thiết kế" sẽ biết module đó là số bao nhiêu) #user_mod_1000X .rc_bd .rc_bc .hd .titlebar .hd{background:transparent;} #user_mod_1000X .rc_bd .rc_bc .bd {background:transparent;} 3> BACKGROUND RIÊNG CHO TỪNG MODULE: **Notes: nếu muốn làm trong suốt nền các module tòan bộ cần fải để code màu thành transparent, và chọn hình nền trong suốt! a. Ảnh nền theme của phần blog: Nếu để ảnh tràn toàn blog nên đặt là fixed như sau: BODY.blog_my {BACKGROUND: url(link hình) #000000 fixed;} b. Ảnh nền Bảng tin nhắn:
BODY.guestbook {BACKGROUND: url(link hình) #000000 fixed;} c. Ảnh nền của bộ đếm Statistic: (Có thể thay bằng ảnh động, bạn nhớ kích thước của ảnh ko nên lớn quá 30 pixels): #statistic .bd {background:#FFFFFF url(link hình);} d. Ảnh nền của phần comments: (Nên dùng ảnh màu thật nhạt, ảnh tĩnh đuôi jpg nếu ko sẽ che hết chữ): #comment_new .bd {background:#FFFFFF url(link hình);} d. Ảnh nền của phần Thư mục (tag): Có thể dùng ảnh dài, bởi tag càng nhiều nó sẽ càng dài ra: #folder .bd {background:#FFFFFF url(link hình);} e. Ảnh nền của phần lịch (cố định kích cỡ): #calendar .bd {background:#FFFFFF url( link hình);} f. Ảnh nền của trang Profiles: BODY.profile_view {BACKGROUND: url (link hình) #000000 fixed;}
g. Ảnh nền trong mỗi Entry: .mod-alist-full .main-bd{background:#FFFFFF url(link hình)} h. Ảnh nền của tiêu đề mỗi Entry: .mod-alist-full .main-hd{background:#FFFFFF url(link hình)} i. Chèn hình nền vào module tự tạo: (Riêng phần này: Chèn code trực tiếp vào module đó) ( Link hình link tới 1 trang khác) (Link hình không link tới trang khác) j. Ảnh nền phần tâm trạng: #mod_lifeline .rc_bd .rc_bc .bd {background: url(link hình) left top;} 4> 1 SỐ THỦ THUẬT KHÁC: Lưu ý: Tất các code này đều chèn trực tiếp vào : "Thiết kế"--> "Theme"--> "Tự chỉnh sửa theme" --> Khung "CSS" a. Canh phải tiêu đề: /* canh phải tiêu đề module */ .hd .titlebar .hd h2{
text-align:right;} Mục đích canh phải các tiêu đề là để thêm các icon vào bên trái mỗi module, khi đó tiêu đề sẽ không bị chồng lên icon. Thật ra canh phải tiêu đề hoàn toàn tất cả các module cũng ko hẳn là cách hay, vì tiêu đề của mỗi module có độ dài ngắn khác nhau, cho nên với module có tiêu đề ngắn nhìn ko đc hay lắm. Các bạn có thể tùy vào từng module mà canh phải hoặc canh giữa cho phù hợp, đồng thời có thể tùy chỉnh vị trí của ảnh nền cho phù hợp hơn nữa bằng cách thay đổi giá trị của 2 tham số phía sau url của ảnh: VD: background:transparent url(link hình) no-repeat X Y;text-align:{left/right/center}; X là chiều thằng đứng, Y là chiều ngang tính theo đơn vị pixel. Như bình thường mọi người thường để X Y là "left top" để căn vào góc trên bên trái. Chẳng hạn giờ Ruby muốn icon chèn vào lùi vào trong (dịch sang bên phải) 5 pixels thì code là: background:transparent url(link hình) no-repeat 5px top; Nếu bạn chèn icon vào thẻ h2 còn background của title bar chèn vào class .hd thì 2 cái này hoàn toàn có thể sử dụng đồng thời, chỉ có điều là độ trong suốt của background sẽ tăng lên một chút tùy vào độ opacity của 2 ảnh icon và background.
b. Thêm icon cho mỗi module: vị trí phía bên trái: ́ /* icon cac module */ /* bảng thống kê */ #statistic h2{ background:transparent url(http://hanamibuu.com/thongke.png) no-repeat left top;} /* Bài mới đăng */ #article_new h2{ background:transparent url(http://hanamibuu.com/baimoi.png) no-repeat left top;} /* Ảnh trong blog */ #photo_highlight h2{ background:transparent url(http://hanamibuu.com/photo.png) no-repeat left top;} .mod-comment-new .titlebar .hd h2{ background:transparent url(http://hanamibuu.com/coment.png) no-repeat left top;} /* Thư mục riêng */ #folder h2{
background:transparent url(http://hanamibuu.com/folder.png) no-repeat left top;} /* Cập nhật ngày */ #update_date h2{ background:transparent url(http://hanamibuu.com/capnhat.png) no-repeat left top;} /* RSS */ #rss_output .bd a{ height:25px;background:transparent url(http://hanamibuu.com/rss.png) no-repeat left top;} /* Tìm kiếm */ #search_module h2{ background:transparent url(http://hanamibuu.com/timkiem.png) no-repeat left top;} /* Bình luận mới nhất */ #comment_new .bd ul li {background:transparent url(link ảnh) no-repeat left top;} /* Thư mục riêng */
#folder .bd ul li {background:transparent url(link ảnh) no-repeat left top;} Các link ảnh các bạn có thể thay đổi bằng cái icon khác. Khuyên dùng định dạng .png với nền trong suốt cho đẹp (kích thước chuẩn là 26x26 hoặc 13x13, chọn ảnh động thì càng đẹp^^) c. Thay đổi con trỏ trên blog theo ý mình: body{cursor: x;} a:hover{cursor: y;} Trong đó x là tuỳ chọn cho con trỏ trên toàn bộ blog của bạn, y là con trỏ hiển thị khi đặt lên một liên kết, dưới đây là danh sách con trỏ được hỗ trợ: pointer crosshair n-resize w-resize ne-resize nw-resize move wait help d. Code chèn hình động khi rê chuột vào các link: /* Đoạn code này làm cho hình trái tim xuất hiện khi chuột rê vào các link trên toàn blog*/ a:hover {text-decoration:none; color:#D570EE; text-decoration:none; font-weight:bold; background-image:url(link ảnh);}
e. Chỉnh độ dài của 1 module tự tạo thì bạn vào CSS gõ đoạn code tương tự như sau: #user_mod_1000X .rc_bd .rc_bc .bd {height:Ypx;} Trong đó X là số thứ tự của module, từ 1 đến 10, còn Y là chiều dài của module tính theo đơn vị pixel. f. Màu nền phần chữ trong blast: #000000: là giá trị màu chữ đen #blast A, #blast A:hover{ COLOR:#000000;} g. Code làm trong suốt viền các module .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div{background:transparent url(http://nktpro.com/360plus/rc_ne.png) no-repeat right bottom;} .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(http://nktpro.com/360plus/rc_nw.png) no-repeat left bottom;} .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc{background:transparent url(http://nktpro.com/360plus/rc_e.png) repeat-y right top;} .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(http://nktpro.com/360plus/rc_w.png) repeat-y 0% 50%;} .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(http://nktpro.com/360plus/rc_se.png) no-repeat right top;} .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(http://nktpro.com/360plus/rc_sw.png) no-repeat left top;} .rc_bc .bd, #subscribe_highlight .rc_bc .bd,
#mod-tagged-frd-article .rc_bc .bd {background-color:transparent; background-image: url(http://nktpro.com/360plus/transparent_bg.png);} #blast .rc_ft {background:transparent url(http://nktpro.com/360plus/blast-sw.png) no-repeat left bottom;} #blast .rc_ft div {background:transparent url(http://nktpro.com/360plus/blast-se.png) no-repeat right bottom;} h. Khung bài viết dành cho Blog: Phần này chèn trực tiếp vào entry (đánh dấu vào ô HTML) "nội dung entry " Bài viết có tham khảo từ Blog coollove, thuthuatblog, Xin chân thành cám ơn! Theo vn.myblog