Egablog: Membuat screen saver di blog

Pasti kalian pernah dengar yang namanya Screen Saver. Screen Saver di blog adalah halaman yang ditampilkan apabila tidak ada respon / aktifitas di blog kita. Jadi, ketika kita membuka blog, dan tidak kita respon, secara tiba-tiba akan muncul sebuah halaman baru. Tapi jika kita menggerakan kursor kita pada halaman tersebut, maka halaman blognya akan kembali lagi. Gimana??? Bagus kan??? Oh iya, kode javascript ini, saya peroleh dari www.onlineleaf.com, dengan sedikit perubahan. Dan tentunya sudah saya kompress, sehingga insya Allah tidak terlalu memberatkan blog. Ayo kita langsung aja membuat nya!!

1. Login ke blogger
2. Masuk ke tata letak
3. Dan pilih Edit HTML
4. Jangan lupa centang kotak kecil (Expand Template Widget)
5. Cari Kode <head>
6. Letakan kode di bawah ini, diatas kode <head>

<script src='http://egablog.googlecode.com/files/screensaver.js'>
</script>

7. Selesai deh.

Sebenarnya, cara diatas sudah bisa di gunakan untuk membuat Screen saver di blog. Namun, kurang menarik. Anda bisa mengeditnya dengan kreatifitas anda sendiri. Berikut adalah kode javascript yang saya edit

var idleTime=0;var standby=false;function CheckInactivity(){idleTime+=10;if(idleTime>60){InitializeStandBy()}}function InitializeStandBy(){if(!standby){var a=0;a=jQuery(window).height();jQuery("#energysaving").show().css({height:"0",width:"0",left:"50%",top:"50%"}).animate({width:"100%",height:a,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(a){idleTime=0;StopStandBy()});jQuery(document).keypress(function(a){idleTime=0;StopStandBy()});jQuery("body").append('<div id="energysaving"><p><font style="color: #2fb2fa;">SCREEN SAVER MODE IS "<blink>ACTIVE</blink>"</font><br/><span><font style="color: #FFFFFF;">please move the cursor if you want to "<blink>NONACTIVE</blink>" the Screen Saver</font></span></p><div id="copyrightOnlineLeaf"><font style="color: #00FF00;">Copyright 2010 - Egablog | visit my blog | http://egablogspot.blogspot.com/</font> <font style="color: #FFFFFF;">Supported by: www.onlineleaf.com</font></div></div>');jQuery("#energysaving").hide()})})}}InitJQuery();

Copy kode diatas di notepad. Setelah anda edit, simpan kode tersebut dengan ekstensi .js
Jika sudah disimpan, upload file tersebut (baca: http://egablogspot.blogspot.com/2010/02/hosting-file-javascript-dengan-google.html)

Setelah anda upload, copy kode di bawah ini, diatas kode <head>
<script src='URL File JS Yang sudah anda upload'>
</script>

Selesai deh, selamat ber kreasi