Pada posting yang lalu telah dibahas mengenai membuat energy saving mode / screensaver blog, kali ini kita akan memodifikasi tampilannya dengan gambar yang kita inginkan sehingga tampilan screensaver berupa gambar, namun perlu Anda ketahui bahwa penambaan gambar pada energy saving ini akan membuat loading blog akan semakin berat karena mendapat tambahan satu gambar lagi yaitu gambar pada energy saving mode, hal ini dapat Anda jadikan pertimbangan jika ingin membuat energy saving mode dengan gambar, untuk yang benar-benar ingin memasangnya ikuti langkah berikut :
- Pertama edit script Energy Saving Mode, Buka Notepad, dan Copy Paste script Berikut :
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://nthoeng.blogspot.com" target="_blank"><img src="URL GAMBAR" border="0" alt="sin1aja"></a><br /><span>Move Your Mouse</span></p><div
id="copyrightOnlineLeaf">2012<font style="color:
#666666;">Nthoeng</font> - All rights
reserved</div></div>'); jQuery("#energysaving").hide(); });
}); } } InitJQuery();
- Teks warna merah, ganti dengan Url Gambar yang akan dipasang.
- Teks warna biru silahkan sesuaikan keinginan.
- Kemudian Save as dengan Format .Js, Misal Energysaving.Js.
- Selanjutnya Upload file tersebut ke web hosting Anda, disini saya memakai Google Code.
- Setelah ter-Upload, copy link file tersebut.
- Ganti teks warna hijau didalam script berikut dengan Url file .js yang telah ter-Upload tadi :
- Copy script tersebut, dan sisipkan di atas tag </head>, pada Html template.
- Dan Simpan Template.
- Semoga Bermanfaat.
3komentar:
wah mantaf nih blog, bisa dapat banyak ilmu disini.
ikut baca2 ya sob... sukses buat blognya :)
Gpp kalo Ane di PERTAMAX :D
Thankz !! Kunjungannya. .
benar mas tambah berat kok.
trims
Posting Komentar