Cara Buat Tampilan Hemat Energi di Blog Dengan Gambar Sendiri

Sahabat mungkin sudah pada tau apa itu Tampilan Hemat Energi di Blog, seperti yang saya pake juga di blog ini. Ketika sahabat tidak melakukan aktivitas di blog ini atau ketika sedang browsing di halaman lain, maka ketika membuka halaman blog saya ini lagi akan terlihat tampilan halaman hemat energi. 

Contoh tampilan hemat energi punya blog saya

OK langsung saja ke tutorialnya:

1. copy script berikut dan paste di notepade

var idleTime = 0; var standby = false; function CheckInactivity() { idleTime += 10; if(idleTime > 60) { 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();", 10000); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><p><a href="http://mafiaray.blogspot.com" target="_blank"><img src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash2/166922_336734259676920_243451975671816_1620412_1000593647_n.jpg" border="0" alt="sin1aja"></a><br /><span>Gerakan Mouse Sahabat Untuk Kembali Ke Halaman</span></p><div id="copyrightOnlineLeaf">Copyright 2011 <font style="color: #666666;">DIKDIK M WIGUNA</font> - All rights reserved</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

2. kemudian cari tulisan yang ditandai warna merah berikut yang ada di dalam script diatas:

• http://ugiw.blogspot.com (ganti dengan URL blog kamu)
• http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash2/166922_336734259676920_243451975671816_1620412_1000593647_n.jpg (ganti dengan URL image kamu yang nantinya akan menjadi tampilan background Hemat Energi)  
• Gerakan Mouse Sahabat Untuk Kembali Ke Halaman (ganti tulisan ini sesuai dengan selera kamu)
• DIKDIK M WIGUNA (ganti dengan namamu atau tulisan apa saja terserah)

3. Setelah selesai dimodifikasi, selanjutnya save dengan exsistensi file JS (Java Script). caranya save as, lalu kasih nama: hematenergi.js (catatan: jangan lupa pada save as type pilih All file dan pada encoding pilih Ansi)

4. Kemudian upload file JS tersebut ke alamat ini: http://yourjavascript.com/
browse file yang akan di upload tadi, lalu masukkan email kamu. Nanti akan ada balasan dan dikirim widget scriptnya ke email kamu. Setelah di upload buka dan cek email kamu, lalu copy scriptnya yang dikirim tadi.

5. selanjutnya masuk ke blog kamu, pilih Tata letak =>Tambah gadget => Html javascript, kemudian pastekan widget javascript tadi. Klik simpan/save

6. Semoga berhasil