Thứ Sáu, 24 tháng 4, 2009

Code CSS cho Mul

Đây là một số thủ thuật sử dụng Code CSS đã ứng dụng trong Yahoo Mash và Yahoo Plus, Walk thấy cùng là Code CSS thì bất cứ Site nào dùng CSS thì chúng ta đều áp dụng được. Các bạn thử xem nhé....

Note : Truờng hợp thử mà Blog của bạn chạy lung tung, thì nhắc các bạn đừng vội click chữ 'SAVE" mà hãy click chữ "PREVIEW" truớc, nếu Multiply hiển thị cửa sổ Preview thấy ôn thì hãy SAVE. Mặt khác, nếu lở click chữ save ma Blog của bạn hiển thị ghê quá, bạn hãy tắt nó ngay, rồi login lại lần nữa, rồi vào My Account/ My Site, chọn Theme dựng sẳn để xác lập trang Blog của bạn...
1. Thay đổi con trỏ trên blog theo ý mình:  

Bố trí => Theme => Chế độ tự chỉnh sửa => CSS

Điền vào ô trống của CSS nội dung sau:

body{cursor: xxx;}
a:hover{cursor:xxx;}

Trong đó xxx là tuỳ chọn cho con trỏ trên blog bạn, body là lệnh cho con trỏ sử dụng trên toàn blog, a:hover là lệnh cho con trỏ hiển thị khi đặt lên một links liên kết, bạn sẽ điền vào:

pointer
crosshair

n-resize
w-resize

ne-resize

nw-resize

move

wait

help

Hiện blog tôi đang sử dụng lệnh:
body{cursor:nw-resize;}
a:hover{cursor:help;}


2. Ảnh nền: Nếu để ảnh tràn toàn blog nên đặt là fixed như sau:

BODY.blog_my {BACKGROUND:url(http://XXXX.jpg) #000000 fixed;}

Hãy điền links của ảnh nền vào chỗ xxx nhé. Tôi đang dùng ảnh nước hoa Kenzo.

3. Ảnh nền trang đầu, Bảng tin nhắn, có thể đặt ảnh khác, ví dụ tôi dùng ảnh xe máy
.

BODY.guestbook {BACKGROUND:url(http://XXXX.jpg) #000000 fixed;}

Mình đang thử nghiệm nó dần dần, hoá ra CSS cái này hơi khác bên blog kia tẹo, chỉ hy vọng trong quá trình thử không bị xoá cả blog đi. Bạn nào biết nhớ bổ sung thêm luôn xuống dưới nhé. Những thiết kế cơ bản sẵn có của Yahoo thì đề nghị bạn tự tìm tòi lấy nhé. Mình chỉ cung cấp  những nội dung mà bạn phải thêm vào, chứ Yahoo không có sẵn:

1. Thay đổi con trỏ trên blog theo ý mình:  

Bố trí => Theme => Chế độ tự chỉnh sửa => CSS

Điền vào ô trống của CSS nội dung sau:

body{cursor: xxx;}
a:hover{cursor:xxx;}

Trong đó xxx là tuỳ chọn cho con trỏ trên blog bạn, body là lệnh cho con trỏ sử dụng trên toàn blog, a:hover là lệnh cho con trỏ hiển thị khi đặt lên một links liên kết, bạn điền từ nào vào xxx thì sẽ hiện lên hình ngay sau đây:

pointer crosshair
n-resize w-resize ne-resize nw-resize move wait help

Hoặc bạn có thể sử dụng 1 ảnh động, 1 icons xinh đẹp để thay cho con trỏ trên blog bằng cách, copy đường links của ảnh đó điền vào chỗ xxx dưới đây:

body{cursor:url(xxx)}
a:hover {cursor:url(xxx)}


2. Ả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(http://XXXX.jpg) #000000 fixed;}

Hãy điền links của ảnh nền bạn thích vào đoạn http://www.xxx.jpg nhé. Tôi đang dùng ảnh nước hoa Kenzo.

3. Ảnh nền Bảng tin nhắn, có thể đặt ảnh khác, ví dụ tôi dùng ảnh xe máy.

BODY.guestbook {BACKGROUND:url(http://XXXX.jpg) #000000 fixed;}

4. Ảnh nền của bộ đếm Statistic cũng 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(http://www.xxxxx.gif);}

5. Ảnh nền của phần comments cũng vậy, nhưng 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(http://www.xxxxx.gif);}

6.Ảnh nền của phần Thư mục (tag) thì 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(http://www.xxxxx.gif);}

7. Ảnh nền của phần lịch thì cố định kích cỡ:

#calendar .bd {background:#FFFFFF url(http://www.xxxxx.gif);}

8. Ảnh nền của trang Profiles cũng có thể thay, giúp blog của bạn có tới mấy themes khác nhau:

BODY.profile_view {BACKGROUND:url (http://www.xxxxx.jpg) #000000 fixed;}

Ứng dụng khác:

1. Đưa ảnh động lên trên banner đầu blog:

Bố trí => đừng chọn gì mà nhìn sang tay phải, bấm vào "Sửa" => Chọn ảnh từ máy tính => Upload ảnh động bạn muốn sử dụng từ máy tính của bạn lên. Tốt nhất ảnh có kích thước phù hợp với đầu banner của blog, có bề rộng 770-800 pixels => Chọn "Hình nền trống" => Chọn "Không có khung" => OK

2. Nếu bạn không muốn đầu đề dòng chữ tên blog xuất hiện trên banner này, bạn có thể chọn:

Bố trí => Sửa => Tựa

Trong phần Chữ Màu và Link Màu, bạn đều điền vào chữ #FFFFFF (là ký hiệu của màu trắng) hoặc bấm vào bảng màu chọn màu trắng.

3. Hướng dẫn sử dụng các module tự tạo:

Bố Trí => Thêm Module => Xong. Sau khi đã tạo được một module trống trên blog, bạn thêm nội dung cho bằng cách bấm Bố Trí => bấm vào chữ Sửa trên Module đó. Bạn cho thêm các đoạn mã sau vào mỗi nội dung module nhé.

Sau đây là một số Module tôi đang gắn thêm lên trên blog tôi:

4. Thời tiết Việt Nam: Vì không có bản đồ mây của riêng VN nên tôi dùng tạm Đông Á:



5. Số người đang online trong blog bạn:

Vào http://www.usersonline.com/ đăng ký links của blog bạn rồi copy đoạn html của nó gắn vào module là xong.

6. Quét virus trực tuyến:

<a href="http://www.bitdefender.com/scan8/ie.html" target="Scan">
<img src="http://download.bitdefender.com/resources/images/new_design/onlinescanner.gif" border="0">
</a></span>



7. Số lượt người xem blog:

Vào trang http://www.petitcounter.net/ để lấy code nhé!

8. Đồng hồ:

<iframe src='http://www.locuspublishing.com/events/1111JM025/blog.swf' width="120" height="200"></iframe>

7. Số lượt người xem blog: 

Nó ít hơn pageviews thông thường rất nhiều vì chỉ đếm người thôi. Vào trang http://www.petitcounter.net/ để lấy code nhé! Bạn thích dãy số màu nào thì bấm vào dãy số đó, nó sẽ hiện ra 1 dòng để điền links blog của bạn vào rồi bấm OK.

8. Bể cá cảnh:

Copy vào module tự chọn dòng chữ sau:

<a href="http://vn.myblog.yahoo.com/trang-ha" target="_blank"><img alt="blogTrangHa" src="http://hk.geocities.com/apple73782002/121.gif"/></a>

Làm banner phía trên của Blog:

Bạn vào mục “Bố trí”,  không chọn gì trong 3 mục đã cho (Bố trí, Theme, Thêm Module), mà trỏ chuột bấm vào nút "Sửa" ở bên phải của module đầu Blog, bạn sẽ thấy hiện bảng điều chỉnh.

Trong bảng điều chỉnh, bạn chọn hình ảnh trực tiếp từ folder trong computer của bạn. Tùy ý thích là ảnh động (đuôi .gif) hay ảnh tĩnh (đuôi .jpg). Bề ngang ảnh có kích thước khoảng 760-800 pixels. Không nên chọn những ảnh quá “dày” (theo mình, bề cao khoảng 150-300 pixels là vừa).

Bạn chọn "Hình nền trống", và chọn “Có khung” hay "Không có khung" là tùy ý bạn thích có đường viền ở xung quanh hình ảnh hay không.

Làm xong thì bấm OK.

Lưu ý: Nếu bạn không muốn dòng chữ tên của blog hiện trên banner, trong bảng điều chỉnh, ở phần “Chữ Màu” và “Link Màu”, bạn chọn #FFFFFF (màu trắng), hay đơn giản là bạn bấm vào bảng màu và rê chuột đến góc, chọn màu trắng.
.

 Chỉnh nền theme của blog theo ý thích:

.

Bạn bấm vào mục “Bố trí”, chọn Theme, click ngay “Chế độ tự chỉnh sửa”, sau đó bấm “Tiếp”, sẽ thấy hiện ra một bảng tuỳ chọn. Chỉnh màu nền, màu chữ tùy thuộc sở thích theo con mắt thẩm mỹ của bạn. Điều bạn cần lưu ý chính là đoạn code dán vào ô CSS.

Tạo ảnh nền cố định (nền sẽ không thay đổi khi bạn kéo các module di chuyển), dùng code này:

BODY.blog_my {BACKGROUND:url(link hình ảnh dùng làm nền) #FFFFFF fixed;}

Trong đó: “link hình ảnh dùng làm nền” chính là mã “Direct Link” của hình ảnh mà bạn chọn (có thể lấy từ Photobucket). Còn đoạn code #FFFFFF chính là mã màu (màu trắng) của nền (code này gồm 6 ký tự, bạn lấy từ bảng màu).

 Làm nền cho “Bảng tin nhắn”:

Bạn sử dụng code này:

BODY.guestbook {BACKGROUND:url(link hình ảnh dùng làm nền) #FFFFFF fixed;}

Tương tự như trên, code “link hình ảnh dùng làm nền” cũng là mã “Direct Link”.

 Làm nền cho phần “Thống kê”:

Với phần này bạn có thể dùng hình ảnh động (đuôi .gif). Cứ “canh” cái ảnh động nào vừa bằng ô “Thống kê” là bạn có thể dùng. Code đây:
.
#statistic .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

Nhớ là mã “Direct Link” bạn nhé.
.
 Làm nền cho phần “Comments”:

Ảnh động (đuôi .gif) hay ảnh tĩnh (đuôi .jpg) đều được. Bạn cứ thử cả hai cách xem cái nào phù hợp thì chọn, vì đằng nào cũng phải bấm vào từng comment thì mới xem được nội dung cụ thể. Dùng code này:
.
#comment_new .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

Nếu bạn bố trí module cho phần comment là một cột “ốm nhách” ở bên phải hay bên trái giao diện thì chỉ cần lưu ý chọn những hình nền cũng “dài thòn” và “ốm nhom” tương ứng, chắc chắn sẽ hợp và đẹp.

Nhớ chọn “Direct Link” cho phần code “link hình ảnh dùng làm nền” bạn nhé.
.
 Làm nền cho phần “Thư mục riêng”:

Cũng tương tự như trên, nếu thư mục của bạn gồm nhiều phần thì nên dùng ảnh dài, và ảnh động (đuôi .gif) hay tĩnh (đuôi .jpg) là tùy bạn thích. Như "Thư mục riêng" của mình hiện đang có 11 phần đó, nên cũng "dài thòn". Bạn dùng code này:

#folder .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

Lưu ý “Direct Link” cho phần code “link hình ảnh dùng làm nền”.
.
 Làm nền của “Lịch”:

Chọn cái ảnh vừa với phần lịch, ảnh động (đuôi .gif) hay tĩnh (đuôi .jpg) đều được. Nếu ảnh nhỏ hơn khuôn hình thì nó sẽ tự động lặp lại để “điền” vô cho đủ khung lịch. Code nè:

#calendar .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

.

 Tóm lại, bạn paste toàn bộ đoạn code sau đây vào phần CSS ở mục tự tạo theme nền, với những “Direct Link” các ảnh mà bạn thích, rồi bấm OK là xong:

BODY.blog_my {BACKGROUND:url(link hình ảnh dùng làm nền) #FFFFFF fixed;}

BODY.guestbook {BACKGROUND:url(link hình ảnh dùng làm nền) #FFFFFF fixed;}

#statistic .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

#comment_new .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

#folder .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

#calendar .bd {background:#FFFFFF url(link hình ảnh dùng làm nền);}

BODY.profile_view {BACKGROUND:url (link hình ảnh dùng làm nền) #000000 fixed;}


.

.

 MỞ RỘNG:

Tạo thêm các module và “tùy nghi sử dụng”:

Bạn chọn “Bố Trí”, sau đó chọn phần “Thêm Module”, chọn vị trí cột mà bạn muốn cho Module đó, và bấm “Xong”. Thoát ra, bạn đã thấy có thêm một Module mới trong Blog, tùy ý cho bạn sử dụng.

Bạn chọn lại “Bố Trí”, nhìn bên phải Module mới và bấm nút “Sửa”, sẽ thấy hiện ra một bảng có 2 phần, gồm: tên và nội dung của Module. Bạn đặt tên và dán các code vào phần nội dung để được các chức năng khác nhau hợp ý thích.

 Các đoạn code tham khảo:

 Hình ảnh trang trí:

Bạn có thể dán 1 hay nhiều đoạn code của hình ảnh vào chung trong phần nội dung của một module. Nếu nhiều thì nên là những ảnh động nhỏ cùng "chủ đề" hay cùng "thể loại".

Khác với phần code khi làm theme ở trên (trong CSS) là “Direct Link”, cái này bạn dùng code HTML để dán (giống như cách bạn post hình từ Photobucket ở Blog Yahoo! 360 cũ vậy).

 Số người đang xem blog của bạn:
.
Bạn thiết lập một Module mới theo cách ở trên.

Truy cập vào trang Web: http://www.usersonline.com/ và đăng ký đường Link của Blog bạn, sau đó copy đoạn mã HTML để dán vào phần nội dung của Module mới (cái này khá nhiều người đã xài ngay từ ở Blog cũ, nhưng không phổ biến bằng hit counter cho mỗi entry).


 Số lượt người xem blog của bạn: 
.
Tình hình là bộ đếm PageView (niềm tự hào của những hot blog bên Y!360 cũ) của Blog Plus hiện nay đang tê liệt, tứ thời chết dí ở con số 0. Vì thế bạn có thể gắn thêm cái này cho vui, như khi chơi Mash vậy. Nhưng theo mình thì cũng chẳng có ý nghĩa gì cho lắm!

Bạn thiết lập Module mới và đưa vô vị trí thích hợp.

Truy cập vào một trong các trang Web:

http://www.easycounter.com/  

hoặc:

http://www.free-counters.co.uk/  

hoặc:

http://www.hit-counts.com/

Chọn kiểu đồng hồ đếm lượt người xem mà bạn thấy thích, điền link của Blog bạn và nhập các thông tin cần thiết rồi bấm OK, sau đó copy đoạn code và paste vào Module mới của bạn.

.

.

Tm thi mình mi ch biết được đến đó, và đu đã làm th hết trong Blog mình (bn có th "kim chng" ngay trong lúc đc entry này. Hì  ).

.

Chúc bn ng dng thành công, đy sáng to, và nh nhn mình qua xem nhng "công trình" đp đ, thú v trên Blog ca các bn sau khi hoàn thin nhé!

5 nhận xét:

LÊN ĐẦU TRANG