Tips Mudah Cara Membuat Energy Saving Mode Dengan CSS di Blog

 Energy saving mode di blog sama saja seperti layar screen komputer ketika tidak bekerja atau sedang didiamkan dan akan muncul sebuah animasi atau gambar, sama halnya pada blog energy saving mode pada blog ini sama seperti pada komputer yang jika didiamkan akan muncul sebuah gambar, namun energy saving mode di blog ini akan muncul sebuah nama blog atau tulisan lainnya yang bisa Anda sesuaikan sendiri. Memasang energy saving mode memang tidak terlalu penting untuk blog, tetapi jika memasang energy saving mode di blog akan lebih bagus lagi, khususnya bagi Anda yang ingin mempercantik tampilan blog Anda denganmenambahkan energy saving mode pada blog Anda.

Energy saving mode kali ini hanya menggunakan sebuah CSS tanpa menggunakan javascript, jadi bagi Anda yang khawatir dengan loading blog yang lama jika menambahkan energy saving mode pada blog Anda, dengan menggunakan css tidak akan ada pengaruh terhadap loading blog Anda, berbeda jika menggunakan energy saving mode yang dibuat dengan javascript yang dapat menyebabkan loading blog Anda lama.

Energy saving mode menggunakan css ini sudah sedikit saya modifikasi namun fungsinya masih sama dengan sebelumnya, disini saya telah mengompress css tersebut sehingga menjadi lebih ringan namun saya akan menerapkan semuanya baik yang sudah maupun yang belum di kompress, tetapi keduanya masih sama fungsinya. Langsung saja bagi Anda yang ingin membuat energy saving mode tanpa javascript silahkan baca tutorialnya dibawah ini :

DEMO

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy salah satu kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>
CSS Compress :

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:99999}body::before{border:10px solid #ccc;border-left:none;top:0;left:50%;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%}body span.energyatas{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 -1px;z-index:999999;-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 #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body span.energybawah{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 0;z-index:999999;-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 #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover::after{right:100%}body:hover::before,body:hover::after{visibility:hidden}body:hover span.energyatas{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.energybawah{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.energy{width:35%;border-bottom:5px solid #ccc;border-top:5px solid #ccc;padding:10px;background:#000;border-radius:20px;font-size:20px;color:#fff;text-align:center;position:absolute;position:fixed;left:32%;right:45%;top:40%;bottom:45%;margin:0 0 0 0;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 #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover span.energy{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}

CSS Beautify :

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:99999;
}
body::before {
  border:10px solid #ccc;
  border-left:none;
  top:0;
  left:50%;
  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%;
}
body span.energyatas {
  position:absolute;
  position:fixed;
  right:0;
  left:0;
  top:46.5%;
  border:5px solid #ccc;
  margin:0 0 0 -1px;
  z-index:999999;
  -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 #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body span.energybawah {
  position:absolute;
  position:fixed;
  right:0;
  left:0;
  top:46.5%;
  border:5px solid #ccc;
  margin:0 0 0 0;
  z-index:999999;
  -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 #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body:hover::after {
  right:100%;
}
body:hover::before,
body:hover::after {
  visibility:hidden;
}
body:hover span.energyatas {
  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.energybawah {
  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.energy {
  width:35%;
  border-bottom:5px solid #ccc;
  border-top:5px solid #ccc;
  padding:10px;
  background:#000;
  border-radius:20px;
  font-size:20px;
  color:#fff;
  text-align:center;
  position:absolute;
  position:fixed;
  left:32%;
  right:45%;
  top:40%;
  bottom:45%;
  margin:0 0 0 0;
  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 #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body:hover span.energy {
  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;
}

Catatan :
- Kode CSS diatas sama saja fungsinya, hanya saja yang compress lebih padat, sedangkan yang beautify lebih cantik sehingga mudah untuk di edit.
- Untuk mengganti warna silahkan silahkan cari kode warnanya disini Kode Warna HTML.

5. Cari kode <body>
6. Copy kode html dibawah ini, lalu Paste dibawah kode <body>

<span class='energyatas'></span>
<span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>
<span class='energybawah'></span>

Catatan :
<data:blog.title/> merupakan nama blog Anda, jika ingin menggantinya silahkan dengan text biasa.

7. Klik Simpan Template

Sekian artikel mengenai Cara Membuat Energy Saving Mode Dengan CSS di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...