Energy Saving Mode Screen

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. Screensaver kali ini hanya menggunakan kode CSS HTML5. Untuk contoh seperti yang terlihat pada postingan artikel ini, coba cursor mousenya diarahkan keluar dari tampilan layar browser secara otomatis layar browser akan langsung berubah menjadi screen saver.

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....

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.

  <style>
  body span.monozcore_canvas {
  position: absolute;position:fixed;right:0;
  left: 0;
  top: 48%;
  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%;
  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: 2px 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%;
  right: 0;
  bottom: 0;
  }
  body::after {
  top: 0;
  left: 0;
  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="color: white; font-size: 12px;">Move your mouse to exit</span>
  <br />
  <span style="color: white; font-size: 12px;">Powered By MonozCore</span><span class="monozcore_cvsbottom"></span>
  </span>

  
  KETERANGAN :
  • 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...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.

Energy Saving Mode
Move your mouse to exit
Powered By MonozCore