» » Thêm tiện ích trạng thái tiết kiệm năng lượng cho Blogger
Người đăng: | 11/01/2011 | 08:17

Thêm tiện ích trạng thái tiết kiệm năng lượng cho Blogger

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Bạn thường thấy, đối với một số blog hay web khi bạn không thao tác trên đó một thời gian, nó sẽ tự động ở trạng thái nghỉ hay trạng thái tiết kiệm năng lượng. Nó sẽ tự động làm tối nền blog đi, nói nôm na là nó ở trạng thái giống như chế độ màn hình chờ (screensaver) của máy tính. Chúng ta có thể áp dụng tiện ích này cho Blogspot của chúng ta, để có thể tạo được tiện ích này thì đòi hỏi bạn có chút kiến thức về cách tạo file *.JS. Bây giờ mình sẽ hướng dẫn các bạn cách làm và thêm tiện ích này vào blogspot.


I. Chỉnh sửa file *.JS

1. Đầu tiên bạn hãy mở chương trình Notepad (Vào Accessories >> Notepad)
2. Sau đó copy đoạn mã bên dưới và dán vào phần soạn thảo Notepad.
var idleTime = 0; var standby = false; function CheckInactivity() { idleTime += 10; if(idleTime > 200) { InitializeStandBy(); } } function InitializeStandBy() { if(!standby) { var h = 0; h = jQuery(window).height(); jQuery("#energysaving").show().css({ height: "0", width: "0", left: "50%", top: "50%" }).animate({ width: "100%", height: h, left: "0", top: "0", opacity: "1" }, 1000); standby = true; } } function StopStandBy() { if(standby) { jQuery("#energysaving").animate({ width: "0", height: "0", opacity: "0", left: "50%", top: "50%" }, 500); setTimeout('jQuery("#energysaving").hide();', 800); standby = false; } } document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">'); if(typeof(jQuery) == "undefined") { document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>'); } function InitJQuery() { if(typeof(jQuery) == "undefined") { setTimeout("InitJQuery();", 50); } else { jQuery(function() { jQuery(document).ready(function() { setInterval("CheckInactivity();", 9000); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><p>
Nội dung dòng 1<br />
Nội dung dòng 2<br />
Nội dung dòng 3<br />
</p><div id="copyrightOnlineLeaf">
Phần text hiện thị ở cuối trang
</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

Chỉnh sửa file JS:

- Phần code màu đỏ (opacity: "1") chúng ta có thể thiết lập độ trong suốt cho nền, bạn có thể thay đổi số này từ 0 - 1. Số càng nhỏ thì độ trong suốt càng tăng.
- Phần màu xanh (9000) chúng ta sẽ thiết lập thời gian để tiện ích này xuất hiện. Sau khoảng thời gian mà bạn thiết lập này, nếu bạn không thao tác trên nền blog nữa thì tiện ích này sẽ tự động xuất hiện.
- Các phần màu xanh này, bạn có thể thiết lập dòng tin gì đó để đọc giả có thể thấy trong nền của tiện ích này.

3. Sau khi chỉnh sửa xong bạn save file lại với tên energy_saving.js, phần Encoding chọn Unicode.
4. Bước cuối cùng là bạn upload file *.JS vừa tạo lên một host để lấy link.

II. Chèn tiện ích vào blogspot

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế
3. Chọn chỉnh sửa HTML
4. Chèn code bên dưới vào sau thẻ <head>
<script src="energy_saving.js" type="text/javascript"/></script>

Bạn hãy thay phần energy_saving.js thành link của file bạn vừa upload lên host ở bước 4 phần I ở trên.

5. Cuối cùng save template lại

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

Chuyên mục:

Không có nhận xét nào