fellit
Trả lời 14 năm trước
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 blogger 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ế-->
và 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*/
Mã:
#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)
Mã:
/* 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:
Mã:
.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)
Mã:
.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:
Mã:
.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):
Mã:
.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:
Mã:
.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):
Mã:
.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:
Mã:
.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):
Mã:
.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)
Mã:
#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:
Mã:
BODY.blog_my {BACKGROUND:
url(link hình) #000000 fixed;}
b. Ảnh nền Bảng tin nhắn:
Mã:
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):
Mã:
#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ữ):
Mã:
#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:
Mã:
#folder .bd {background:#FFFFFF url(link hình);}
e. Ảnh nền của phần lịch (cố định kích cỡ):
Mã:
#calendar .bd {background:#FFFFFF url( link hình);}
f. Ảnh nền của trang Profiles:
Mã:
BODY.profile_view {BACKGROUND:
url (link hình) #000000 fixed;}
g. Ảnh nền trong mỗi Entry:
Mã:
.mod-alist-full .main-bd{background:#FFFFFF
url(link hình)}
h. Ảnh nền của tiêu đề mỗi Entry:
Mã:
.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)
Mã:
<a href="Trang link tới" target="_blank">
<img src="link hình" border="0" alt="Ruby">
</a>
(Link hình không link tới trang khác)
Mã:
<img src="Link hình">
j. Ảnh nền phần tâm trạng:
Mã:
#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 đề:
Mã:
/* 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:
Mã:
background:transparent url(link hình)
no-repeat XY;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à:
Mã:
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 các module */
Mã:
/* bảng thống kê */
#statistic h2{
background:transparent
url(http://hanamibuu.com/thongke.png) no-repeat left top;}
Mã:
/* Bài mới đăng */
#article_new h2{
background:transparent
url(http://hanamibuu.com/baimoi.png) no-repeat left top;}
Mã:
/* Ả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;}
Mã:
/* Thư mục riêng */
#folder h2{
background:transparent
url(http://hanamibuu.com/folder.png) no-repeat left top;}
Mã:
/* Cập nhật ngày */
#update_date h2{
background:transparent
url(http://hanamibuu.com/capnhat.png) no-repeat left top;}
Mã:
/* RSS */
#rss_output .bd a{
height:25px;background:transparent
url(http://hanamibuu.com/rss.png) no-repeat left top;}
Mã:
/* Tìm kiếm */
#search_module h2{
background:transparent
url(http://hanamibuu.com/timkiem.png) no-repeat left top;}
Mã:
/* Bình luận mới nhất */
#comment_new .bd ul li {background:transparent
url(link ảnh) no-repeat left top;}
Mã:
/* 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:
Mã:
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*/
Mã:
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:
Mã:
#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
Mã:
#blast A, #blast A:hover{
COLOR:#000000;}
g. Code làm trong suốt viền các module
Mã:
.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)
Mã:
<div class="content-wrapper">
<table cellspacing="50" cellpadding="30"
background="Linh ảnh nền"
border="1">
<tbody>
<tr>
<td bgcolor=#ffeecf>"nội dung entry "
</td></tr></tbody></table></div>
Còn muốn theme có sẵn thì hãy vào đây [url=http://blog.uhm.vn]http://blog.uhm.vn[/url]