(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 đó tôi 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 theme: 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*/
#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)
<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)
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 các 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ợ:
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)
<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>
Bài viết có tham khảo từ Blog coollove, thuthuatblog, Xin chân thành cám ơn!
Theo vn.myblog
 “ Kho kiến thức đầy đủ nhất về HOSTING" www.hosting.net.vn
|
