Simple Energy Screen Saver

Simple Energy Screen Saver merupakan widget sederhana untuk membuat screen saver di blog. Widget ini hanya menggunakan kode CSS HTML5 tanpa menggunakan JQuery dan Javascript. Sebelumnya saya juga pernah memposting artikel tentang screensaver untuk blog yaitu Memasang Screensaver Blog v2, bedanya screensaver kali ini hanya menggunakan kode CSS HTML5. Untuk contoh seperti yang terlihat pada postingan artikel ini.

Tujuan memasang screen saver di blog adalah untuk penghematan energi pada tampilan monitor baik tabung CRT, LCD dan Plasma, yaitu dengan menampilkan warna hitam gelap, kenapa saya bilang warna hitam gelap karena warna hitam dapat juga dihasilkan dengan pencampuran warna dari RGB (Red-Green-Blue) sehingga tetap menghasilkan arus listrik walaupun warnanya hitam. Karena tujuan dari energy saving mode adalah untuk menghemat energi berarti warna hitam yang digunakan adalah warna hitam tanpa ada campuran RGB jadi saya sebut hitam gelap. Warna hitam gelap pada layar monitor dihasilkan dengan meniadakan arus listrik penghasil warna pada layar monitor sehingga dengan mematikan arus listrik ini kita sudah menghemat energi dan mengurangi emisi CO2 untuk konsumsi penggunaan listrik pada layar monitor. Penghematan yang dilakukan memang tidak terlalu signifikan tapi kalo dikali dengan pengguna komputer di seluruh dunia... lumayankan penghematannya....

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Layout" setelah itu pilih "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode berikut ini di kotak postingan gadget.
  
  
  

  <style>
  body span.monozcore_canvas {
  position: absolute;position:fixed;right:0;
  left: 0;
  top: 48%;
  border: 5px solid #ccc;
  margin: 0 0 0 -1px;
  z-index: 99999;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -moz-transition: all 3s ease-in;
  -o-transition: all 3s ease-in;
  -webkit-transition: all 3s ease-in;
  transition: all 3s ease-in;
  -moz-box-shadow: 0 0 20px 3px #06F;
  -webkit-box-shadow: 0 0 20px 3px #06F;
  box-shadow: 0 0 20px 3px #06F;
  }
  body span.monozcore_cvsbottom {
  position: absolute;position:fixed;
  right:0;
  left: 0;
  top: 48%;
  border: 5px solid #ccc;
  margin: 0 0 0 0px;
  z-index: 99999;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -moz-transition: all 3s ease-in;
  -o-transition: all 3s ease-in;
  -webkit-transition: all 3s ease-in;
  transition: all 3s ease-in;
  -moz-box-shadow: 0 0 20px 3px #06F;
  -webkit-box-shadow: 0 0 20px 3px #06F;
  box-shadow: 0 0 20px 3px #06F
  }
  body:hover::after {
  right: 100%
  }
  body:hover::before, body:hover::after {
  visibility: hidden
  }
  body:hover span.monozcore_canvas {
  visibility: hidden;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  top: 0;
  }
  body:hover span.monozcore_cvsbottom {
  visibility: hidden;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  top: 100%;
  }
  body span.monozcore_text {width:35%;border-bottom: 5px solid #ccc;
  border-top: 5px solid #ccc;padding:10px;background:#000;
  font-size:25px;color:#fff;
  text-align:center;
  position: absolute;position:fixed;
  left: 32%;right:45%;
  top: 40%;
  bottom: 45%;
  margin: 0 0 0 0px;
  z-index: 123455543123445556888;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -moz-transition: all 3s ease-in;
  -o-transition: all 3s ease-in;
  -webkit-transition: all 3s ease-in;
  transition: all 3s ease-in;
  -moz-box-shadow: 0 0 20px 3px #06F;
  -webkit-box-shadow: 0 0 20px 3px #06F;
  box-shadow: 0 0 20px 3px #06F;
  }
  body:hover span.monozcore_text {
  visibility: hidden;
  -moz-transition: all .7s ease-out;
  -o-transition: all .7s ease-out;
  -webkit-transition: all .7s ease-out;
  transition: all .7s ease-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  right: 0;
  z-index:99999999;
  }
  body::before, body::after {
  position: absolute;
  position:fixed;
  content: "";
  background: #000;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  z-index: 9999;
  }
  body::before {
  top: 0;
  left: 50%;
  border: 10px solid #ccc;
  border-left:none;
  right: 0;
  bottom: 0;
  }
  body::after {
  top: 0;
  left: 0;
  border: 10px solid #ccc;
  border-right:none;
  right: 50%;
  bottom: 0;
  }
  body:hover::before {
  left: 100%;
  }
  </style>
  <span class='monozcore_canvas'></span>
  <span class='monozcore_text'>Energy Saving Mode<br/><span style='font-size:12px;color:#fff'>Move your mouse to exit</span></span>
  <span class='monozcore_cvsbottom'></span>

  
  
  Catatan :
  • Kode style dapat dimodifikasi untuk disesuaikan dengan tema blog yang sobat pasang.
  • Tulisan Energy Saving Mode bisa sobat rubah sesuai dengan yang sobat mau.
  • Ukuran text terdapat pada kode "font-size:12px", silakan sobat sesuaikan dengan keinginan sobat.
  • Untuk warna dan style lainnya silakan dimodifikasi sendiri.


• Klik "Save" dan lihat hasilnya..

Energy Saving Mode
Salam Zonna Cyber Move Your Mouse To Exit