Rabu, 20 Januari 2016

Cara Membuat Mode Hemat Energi (Energy Saver) Keren di Blog

cara membuat widget mode hemat energi, widget keren cantik untuk blog


Menghemat Energi dapat dilakukan di rumah, di internet dan di tempat lainnya. Namun menghemat energi ternyata juga dapat dilakukan di dalam sebuah Blog. Cara menghemat energi pada sebuah blog adalah dengan menambahkan sedikit kode script didalamnya.

Energy Saver Mode atau Mode Hemat Energi adalah sebuah widget untuk blog yang digunakan untuk menghemat energi pada komputer jika batas waktu online melebihi waktu yang telah ditentukan ketika tidak ada pergerakan pada mouse maupun pada keyboard.

Energy Saver Mode atau Mode Hemat Energi adalah sebuah Screensaver dimana pada kondisi Standby seluruh proses akan di hentikan. Screensaver mode hemat energi ini akan dihentikan jika ada pergerakan pada mouse maupun pada keyboard.

Widget yang satu ini sangat cocok untuk para blogger yang mengelola blognya lewat laptop maupun komputer rumah. Karena dengan widget ini Anda dapat menghemat batrei laptop maupun listrik di rumah Anda. Karena widget Energy Saver Mode (Mode Hemat Energi) ini sangat ramah lingkungan.

Selain dapat mengemat batrei laptop dan juga listrik, widget Energy Saver Mode (Mode Hemat Energi) ini juga dapat mempercantik blog Anda. Jadi, blog Anda akan terlihat lebih menarik dan keren dimata pengunjung.

Saya ulangi sekali lagi, widget Energy Saver Mode (Mode Hemat Energi) ini akan muncul jika tidak ada kegiatan pada blog Anda atau tidak ada pergerakan pada mouse maupun keyboard, seperti halnya komputer hanya diam. Dan akan kembali ke bentuk semula jika mouse atau keyboard di gerakan.


Cara Membuat Energy Saver Mode (Mode Hemat Energi) Pada Blog

Baiklah langsung saja kita masuk ke tutorial pembuatannya, disini saya akan memberikan 2 versi dalam widget Energy Saver Mode (Mode Hemat Energi) untuk Anda, silahkan dipilih yang menarik untuk Anda.

  • Energy Saver Mode (Mode Hemat Energi) Versi 1

Berikut langkah-langkah pembuatannya:
1. Masuk ke akun blogger Anda
2. Pergi ke Dashbor > Template > Edit HTML
3. Cari kode </head> untuk lebih cepatnya tekan CTRL F
4. Copy dan pastekan kode script dibawah tepat di atas atau sebelum kode </head>

<script language='javascript' src=' http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Catattan: jika kode diatas tidak berfungsi, silahkan diganti dengan kode dibawah

<script language='javascript' src=' http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script>jQuery.noConflict();</script>

5. Lalu klik SAVE Template atau simpan template

Setelah menambahkan kode berikut ke dalam template, selanjutnya menambahkannya ke dalam Gadget atau menjadikannya widget. Berikut langkah-langkahnya.

1. Masuk ke Tata Letak > Tambahkan Gadget > Pilih HTML / JavaScript
2. Masukan kode dibawah ke dalamnya

<script language="javascript" type="text/javascript" src=" http://www.onlineleaf.com/savetheenvironme nt.js?time=60"></script>

3. Klik Simpan

Catattan: untuk tulisan berwarna merah yang angka time=60
adalah waktu untuk menghitung Energy Saver Mode (Mode Hemat Energi), dan terhitung dari awal membuka blog. Anda dapat menggantinya dengan angka Anda sendiri. 60 berati sama dengan 60detik yakni 1menit.

  • Cara Membuat Energy Saver Mode (Mode Hemat Energi) Versi 2

Berikut langkah-langkah cara pembuatannya:
1. Masuk ke Tata Letak > Tambahkan Gadget > Pilih HTML / JavaScript
2. Masukan kode dibawah ke dalamnya

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.80;filter: alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";background: #000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGzXAmTNTDXjYR4rYJymZ5kVomdVdYS_y2hdzMdaocecuRuEM6_QzGtzS5bUCRIsjt6jF6TPPixhSG6q1kcxf8mO6r0NQFwLfrR3GXBdoNO8v8c8ldn6q9krXRT12utTQyxyk5TQUxyss/s1600/O.W-matrik.gif);border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: "Serif", Chiller;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;position: relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center;width: 300px;margin: -10px auto; font-weight: normal;padding: 2px 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGzXAmTNTDXjYR4rYJymZ5kVomdVdYS_y2hdzMdaocecuRuEM6_QzGtzS5bUCRIsjt6jF6TPPixhSG6q1kcxf8mO6r0NQFwLfrR3GXBdoNO8v8c8ldn6q9krXRT12utTQyxyk5TQUxyss/s1600/O.W-matrik.gif);border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Chiller, Chiller, sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGzXAmTNTDXjYR4rYJymZ5kVomdVdYS_y2hdzMdaocecuRuEM6_QzGtzS5bUCRIsjt6jF6TPPixhSG6q1kcxf8mO6r0NQFwLfrR3GXBdoNO8v8c8ldn6q9krXRT12utTQyxyk5TQUxyss/s1600/O.W-matrik.gif) left center repeat-x;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: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_Tejahtc {margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left: 0;}.saving .by_Tejahtc span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>
<div class='saving'>
<p class='esm1'>Mode Hemat Energi Seyosnya Blog<br/>
<br/><br/>
<span class='esm3'>Energy Saver Mode, Move the mouse to return to the page!<br/>Mode Hemat Energi,Gerakkan mouse anda untuk kembali ke halaman!</span></p>
<div class='noochii'>
</div></div>


3. Klik Simpan

Catattan:
*. Untuk tulisan berwarna merah pada Mode Hemat Energi Seyosnya Blog silahkan diganti dengan nama blog Anda atau tulisan yang menurut Anda bagus.
*. Untuk previewnya silahkan di preview sendiri

Sekian artikel saya kali ini, semoga Anda lebih bagus dengan widget yang satu ini. Silahkan berkomentar jika ada kode yang tidak work. Terimakasih.
Load disqus comments

4 komentar