Custom Energy Saving-1

Postingan ghoscell kali untuk menanggapi request dari sobat Fzhlr tentang cara membuat custom energy saving. Bagi temen blogger silahkan baca artikel mengenai cara pemasangan energy saving dari onlineleaf.com terlebih dahulu.

Duh, akhirnya.. ghostcell memberanikan diri juga untuk berbagi cara membuat custom energy saving ini, tepatnya hanya sebatas merubah tulisan yang muncul saja.

Ghoscell mohon maaf jika cara membuat custom energy saving ini merepotkan sekali. Sebenarnya caranya adalah dengan mengubah kode savetheenvironment.js yang terdiri dari satu kode css dan satu kode javascript lagi didalamnya. Maka, dapat diambil kesimpulan kode savetheenvironment.js ini punya anak 2.. hahaha..
Oke fokus, custom selebihnya bisa anda eksperimen sendiri.., misal: merubah warna background, dan waktu. harap maklum ya gan, ghostcell kan pemula, hehehe.. cekidot deh

Langkah I:
1. Download kode savetheenvironment.js
2. Download kode savetheenvironment.css

Langkah II:
1. Buka dan edit kode savetheenvironment.css dgn notepad
2. Point:
   #energysaving : background-color, opacity
   #energysaving p : middle text (font-size, font-family, color)
   #energysaving p span : footer text
3. Simpan, upload ke filehosting dan catat alamat urlnya.

code of savetheenvironment.css :
div#energysaving, div#energysaving * {  -moz-border-radius: 0;  -webkit-border-radius: 0;  border: 0;  background-color: #000000; } div#energysaving {  margin: 0;  padding: 0;  position: absolute;  left: 50%;  top: 50%;  opacity: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  text-align: center;  z-index: 100; } @media screen { body>div#energysaving { position: fixed; } } div#energysaving p {  margin: 0;  padding: 0;  width: 100%;  font-size: 18px;  font-family: arial;  color: #333333;  position: relative;  top: 40%;  line-height: 20px;  font-weight: bold;  text-align: center;  text-shadow: none; } div#energysaving p span {  color: #555555;  font-size: 12px;  font-weight: normal; } div#energysaving div#copyrightOnlineLeaf {  padding: 0;  margin: 0;  color: #333333;  font-size: 12px;  font-weight: normal;  position: absolute;  bottom: 20px;  text-align: center;  width: 100%;  height: 20px;  left: 0%; }

Langkah III:
1. Buka dan edit kode savetheenvironment.js dgn notepad
2. Cari "http://www.onlineleaf.com/savetheenvironment.css" dan ganti dengan url file savetheenvironment.css yang telah anda edit.
3. Cari ( Ctrl F / F3 dan Edit Move your mouse to go back to the page.
4. Simpan, dan upload ke filehosting anda..
5. Catat alamat urlnya untuk pemasangan di blog anda.

Baca lagi artikel cara menambahkan energy saving di blog.

code of savetheenvironment.js :
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>Energy saving mode<br /><span>Move your mouse to go back to the page.</span></p><div id="copyrightOnlineLeaf">Copyright 2009 <font style="color: #666666;">OnlineLeaf.com</font> - All rights reserved</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

click to activate the saving energy

code activating energy saving with link :
<a onclick="setTimeout('InitializeStandBy();', 500);" style="font-size: 18px; cursor: pointer; color: rgb(0, 102, 0);">click to activate the saving energy</a>

Selamat mencoba, semoga sukses..

P/s: Jika temen blogger ingin share cara lain tentang custom energy saving silahkan, ghostcell menerima kritik dan saran yang bersifat membangun dengan senang hati.. namanya juga belajar.. salam persahabatan

Posted in: Blog