Membuat Energy Saving Mode di blog

Energy saving mode adalah tampilan seperti screen saver yg menghiasi blog. Jadi apabila blog ditinggalkan atau cursor tidak mengarah pada blog selama waktu tertentu akan berubah menjadi screen saver. Kali ini saya akan memberi tau langkah langkah membuatnya untuk anda yg ingin mencoba dan memasangnya di blog anda.

Langkah langkah membuat energy saving mode:

1. Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi).
Setelah semua tertulis dengan benar, klik "Login".
2. Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
3. Rancangan/Layout : Tambah Gadget
4. HTML/JavaScript : Copy dan paste KOde di bawah ini di dalamnya :

<style type="text/css">
body .saving{
 position:fixed;
 width:100%;
 top:0; /* original code by : MadaPutra - update 3 Desember 2011 */
 height:98%;
 border-bottom:30px ridge #222;
 background:#000;
 background:rgba(1,14,0,0.995);
 z-index:999999;
 transition:all 1s ease-in-out 300s;  /* lamanya energy saving mode nongol lagi */
 -o-transition:all 1s ease-in-out 300s;  /* lamanya energy saving mode nongol lagi */
 -moz-transition:all 1s ease-in-out 300s;  /* lamanya energy saving mode nongol lagi */
 -webkit-transition:all 1s ease-in-out 300s;  /* lamanya energy saving mode nongol lagi */
}
body:hover .saving{
 z-index:-1;
 opacity:0;
 filter:alpha(opacity=0);
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 background:#0a7f01;
 border:40px solid blue;
 border-radius:400px;
 width:0.0001%;    /* original code by : MadaPutra - update 3 Desember 2011 */
 margin-left:460px;
 height:0.0001%;
 top:160px;
 transform:scale(0.001);
 -o-transform:scale(0.001);
 -moz-transform:scale(0.001);
 -webkit-transform:scale(0.001);
 transition:all 1.5s;
 -o-transition:all 1.5s;
 -moz-transition:all 1.5s;
 -webkit-transition:all 1.5s;
}
body .saving p.esm1{
 width:94%;background:
 transparent;
 font-size:100px;
 font-family:"Serif", Times New Roman;
 color:#333;
 text-shadow:1px 1px 2px #ccc;
 position:relative;
 margin-top:200px;
 line-height:20px;
 font-weight:bold;
 text-align:center;
 border-radius:20px;
}
.saving p span.esm2{
 font-size:18px;
 display:block;
 text-align:center;
 width:500px;   /* original code by : MadaPutra - update 3 Desember 2011 */
 margin:-10px auto;
 font-weight:normal;
 padding:2px 8px;
 background:#333;
 border:1px solid #777;
 border-radius:0;color:
 #0000FF;
 text-shadow:none;
 font-family:Arial, Helvetica, sans-serif;
}
.saving p span.esm3{
 color:#ccc;
 font-family:"Tahoma", Arial, Helvetica;
 display:block;
 margin:10px auto;
 background: url('http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png') left center repeat-x;
 background:linear-gradient(top,#666,#111);
 background:-o-linear-gradient(top,#666,#111);
 background:-moz-linear-gradient(top,#666,#111);
 background:-webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));
 opacity:0.6;
 filter:alpha(opacity=60);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 width:550px;
 text-shadow:1px 1px 1px #000;
 border: 1px solid #333;
 border-radius:4px;
 padding:2px 10px;
 font-size:12px;
 font-weight:500;
 line-height:16px;
}
.saving .by_gubhugreyot{
 transform:rotate(90deg);
 -o-transform:rotate(90deg);
 -moz-transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
 margin-left:30px;
 text-align:left;
 color:#096;    /* original code by : Mada Putra - update 3 Desember 2011 */
 font-size:12px;
 font-weight:500;
 position:absolute;
 bottom:0px;
 width:100%;
 height:20px;
 right:-470px;
}
.saving .by_gubhugreyot span.esm4{
 color:#699;
}
</style>

<!--[if IE]>
<style type="text/css">
.saving .by_MadaPutra{right:-200px;}  /*untuk IE */
body:hover .saving{display:none;}
</style>
<![endif]-->

<div class="saving" style="left:0px;">
<p class="esm1">MadaPutra<br/>
<span class="esm2">Simple Energy Saving Mode using CSS3<br/><span style="font-size:14px;">MadaPutra 3Desember 2011 </span></span><br/><br/>
<span class="esm3">Dengan kode css3 lebih irit!<br/>Gerakkan mouse anda dan gubhug reyot akan melindungi anda dari panas dan hujan!</span>
</p>  <!-- Mohon teks di bawah ini jangan di ganti !!! -->
<div class="by_MadaPutra">Original design by: <span class="esm4"> madamarga-putra.blogspot.com - putrafreezone.blogspot.com</span> - Oktober 2010
</div>
</div>