Membuat Tampilan Energy Saving Mode Sendiri

Kalau sebelumnya saya menulis tentang Membuat Enery Saving Mode pada Blog, dalam tutorial itu tampilan Energy Saving Modenya itu masih default/dari sananya. Nahh sekarang saya akan memberitahu bagaimana membuat tampilan Energy Saving Mode seperti yang kita inginkan. Contohnya yang saya pakai ini... tunggu aja sekitar 1 menitan, nanti juga keluar tampilannya..

OK sekarang caranya :

Copy Javascript di bawah ini di Notepad :

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"><a href="http://freakzfiles.blogspot.com"><p><img src="http://i851.photobucket.com/albums/ab71/freakz100992/headertitle2.png"/></a><br/><font style="color: #4b4b4b;">Gerakan mouse untuk kembali ke halaman</font></p><div id="copyrightOnlineLeaf">Copyright 2011 - <font style="color: #666666;">FreakzFiles.blogspot.com</font> - All rights reserved</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

Bagian yang di Edit adalah bagian yang berwarna merah, hijau dan biru, ganti kode yang berwarna merah dengan URL gambar kamu, kode berwarna hijau untuk warna Fontnya dan kode berwarna biru untuk teksnya.... kalau kalian mengerti kode Javascript kalian bisa setting sendiri tampilannya sesuka kalian...

Kemudian tekan Ctrl+S untuk save... simpan dengan nama : savingmode.js, lalu Save as Type: All Files..... kemudian tekan Save..

Upload File javascript tersebut pada hostingan kamu, karena disini judulnya bukan cara Upload File pada Hostingan jadi saya tidak memberikan caranya secara detail, tapi saya berikan sedikit garis besarnya...

1. masuk ke ripway.com
2. buat account disana kalau belum punya, lalu login
3. Klik My Files → Upload Files
4. kalau sudah klik Return to my Files

Nahh kalau sudah di upload, masuk ke Blogger → Rancangan → Edit HTML

Taruh kode di bawah ini diatas kode </head>

<script language="javascript" type="text/javascript" src="Link File yang kamu Upload"></script>

lalu ganti kode yang berwarna biru dengan URL File yang kamu upload di hostingan tadi...

Save Template...

Lalu lihat hasilnya, tunggu sekitar 1 menitan..