Loading post navigation ...
 
 

Pro page

17
Nhận xét

[ Yêu cầu ] : Tiện ích cho phép thay đổi hình nền theo ý muốn

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Thuấn (share4vnn.tk)
[FD's BlOg] - Một tiện ích nhỏ sử dụng Javascript, cho phép bạn tùy chỉnh việc hiển thị hình nền theo ý muốn của bạn. Chỉ với việc chọn ảnh muốn hiển thị và 1 cái click chuột vào button là bạn đã có thể thay đổi hình nền theo ý bạn.
Xem demo ở đây : http://fandung.110mb.com/test/bg.html

Hình ảnh minh họa :


☼ Bây giờ ta bắt đầu thực hiện:
A. Bước 1 : Trước tiên hãy thiết lập một số thuộc tính background cho thẻ body
- Vào bố cục
- vào chỉnh sửa code HTML
- Tìm đoạn code CSS của body

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background:#695641 url(link ảnh);

}

- Hãy chú ý tới dòng code màu xanh, hãy xóa nó đi (nếu trong code template của blog bạn ko có dòng này thì thôi, nhưng nếu có phải xóa nó đi), và thêm 1 vài đoạn code màu đỏ như bên dưới:

body {
margin:0;
padding:0;
font-size: small;
text-align:center;
color:$textColor;
line-height:1.3em;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

- Giải thích về 3 đoạn code màu đỏ :

+ background-repeat:no-repeat; : code không cho ảnh nền lặp lại, nếu không có code này, khi thực hiện thủ thuật ảnh nền sẽ bị lặp lại.
+ background-attachment:fixed; : với đoạn code này, ảnh nền sẽ không bị dịch chuyển khi bạn trượt lên hoặc xuống trang.
+ background-position:center; : code xác định vị trí hiển thị của ảnh nền.

- Save template.

B. Bước 2 : Sau khi thực hiện xong bước trên ta tiếp tục chèn thêm đoạn code bên dưới vào trước thẻ đóng </head> (trong code template)

<script language="JavaScript">

var backImage = new Array();

backImage[0] = "link ảnh nền 1";
backImage[1] = "link ảnh nền 2";
backImage[2] = "link ảnh nền 3";
backImage[3] = "link ảnh nền 4";
backImage[4] = "link ảnh nền 5";


function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

function go1(){
if (document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value != "none") {
location = document.selecter1.select1.options[document.selecter1.select1.selectedIndex].value
}
}
</script>

- nếu muồn thêm các ảnh nền khác thì cứ việc thêm dòng code này : backImage[5] = "link ảnh nền 6";
- Save template.

C. Bước 3 : Tạo một widget HTML/Javascript và dán code bên dưới vào:

<script type="text/javascript">

document.write('<form name="selecter1"><select name="select1" size=1>');
document.write('<option value=none>Select Background');
document.write('<option value="javascript:changeBGImage(0)">ảnh nền 1');
document.write('<option value="javascript:changeBGImage(1)">ảnh nền 2');
document.write('<option value="javascript:changeBGImage(2)">ảnh nền 3');
document.write('<option value="javascript:changeBGImage(3)">ảnh nền 4');
document.write('<option value="javascript:changeBGImage(4)">ảnh nền 5');
document.write('</select>');
document.write('<input type="button" value="Change" onclick="go1()">');
document.write('</form>');

</script>

- Tương tự như bước 2, khi thêm 1 ảnh nền nào đó thì ta phải thêm đoạn code này vào bước 3 :

document.write('<option value="javascript:changeBGImage(5)">ảnh nền 6');


Như vậy đã hoàn thành.

Chúc các bạn thành công.


Enter your mail address:

17

Tuấn Nguyễn

công nhận anh dũng pro thật :D:D:D

share4vnn.tk

ôi trời đất ơi ! bái phục

share4vnn.tk

ko biết nếu thay đổi background sidebar thì chỉnh code thế nào anh dũng nhỉ?

share4vnn.tk

à..anh dũng nè..anh nên thêm cái tiện ích save as PDF để anh em lưu máy ofline tham khảo...blog toàn thủ thuật hay thêm cái đó rất tiện

fandung

@Thuấn : cái đó chắc cũng đc, để anh thử coi.

Còn cái ý kiến của em, anh sẽ thêm. Nhưng có load chậm bài viết thì phải chịu đó.

Khách (ẩn danh)

^^ ! ngày càng nổi tiếng rồi =((

Hiệp Cò

HC sợ anh luôn rồi đó anh dũng (_ ___!)

fandung

:D cám ơn mọi người

Khách (ẩn danh)

làm rồi mà sao ko thấy hiện gì hết FD ơi

fandung

có thể là nó chưa load đc ảnh đó bạn

Du Phương

chà chà, hay wá! nhưng mà tui muốn khi vào trang web,có sẵn 1 cái nền,rồi chừng nào người coi muốn thay nền mới click vào cái đó thì mần sao dzậy?

Phan Dũng

@Thanh Phuong : mình sẽ trả lời sau

AnhChuong

de cam on thi cac ban nen clik vo quang cao cho anh dung thuong xuyen di anh ay pro qua post toan bai hay lkhong a

fandung

cám ơn AnhChuong đã ủng hộ nhá :D

Unknown

a ơi...nếu muốn có sẵn một theme default thì làm sao ah...có sẵn một cái..rồi khin nào muốn sẽ đổi được cái kia giốngnhư ở diễn đàn vậy đó ah...sau khi đôổ thì nó s ẽ lưu lại được...để lần sau mình vào tự động có cái đó lun..a giúp e với nhé..thanks anh ....

Nguyễn A Li Thơ

làm xong xui het nhưng ko cho kết quả gì khả quan hết

Unknown

Anh ơi nếu em muốn các hình nền tự độngt hay đổi trong 1 khoảng thời gian thì phải làm thế nào ạ?



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home