Membuat Mode Hemat Energi Keren di Blog

Alam semesta kita ini hampir kehabisan sumber daya alamnya, seperti minyak bumi dan lain sebagainnya. Sekarang semua orang di seluruh dunia bersama-sama saling menghemat energi, agar kelak anak dan cucu mereka juga bisa menikmati sumber daya alam ini.
Huh malah ceramah, sori hehehe . . .
Sebenarnya menghemat energi bisa di lakukan di mana saja di rumah, dan bahkan di web atau blog pun bisa sob!
Caranya dengan cara kita memasang kode script untuk mode hemat energi di blog , jadi akan kelihatan blog akan lebih keren dan lebih menarik, mode hemat energi ini akan muncul bila tidak ada kegiatan dari komputer, seperti komputer hanya diam maka mode hemat energi ini akan muncul sampai mouse di gerakkan kembali.

Di atas adalah contoh gambar Mode Hemat Energi Keren di Blog, gimana sip gak?
Tidak perlu berlama-lama lagi deh, sekarang kita akan lansung bahas cara pemasangannya ke blog sobat, cekidoooot . . . 

1. Login ke blogger sobat.


2. Pada menu klick Rancangan ➨ Tambah gadget di bagian mana saja(saya sarankan di bagian paling bawah)


3. Selanjutnya sobat pilih HTML/Java Script(tidak perlu di beri judul) ➨ Lalu copy kode script berikut dan paste atau letakkan ke dalam wiget HTML/Java script tadi..

<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/AVvXsEh-FfYsb5uVV_Fe2pCVg1oxvv6W6CpiadXfkqvaMX7cFOa1c4pLTT3fQ0t_5pi8c0IyslmmSyxWfdpMGRcfTIUBkdEdozYaLNVy0ePIf1D5YNzlqLsoaAXdjfrkG5RJxcsGEooL3lURHqs/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/AVvXsEh-FfYsb5uVV_Fe2pCVg1oxvv6W6CpiadXfkqvaMX7cFOa1c4pLTT3fQ0t_5pi8c0IyslmmSyxWfdpMGRcfTIUBkdEdozYaLNVy0ePIf1D5YNzlqLsoaAXdjfrkG5RJxcsGEooL3lURHqs/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/AVvXsEh-FfYsb5uVV_Fe2pCVg1oxvv6W6CpiadXfkqvaMX7cFOa1c4pLTT3fQ0t_5pi8c0IyslmmSyxWfdpMGRcfTIUBkdEdozYaLNVy0ePIf1D5YNzlqLsoaAXdjfrkG5RJxcsGEooL3lURHqs/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'>Oto Website<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>

5. Simpan


Sekarang sobat bisa lihat hasilnya.


Keterangan:
Silahkan sobat ganti teks warna biru dengan title blog sobat atau teks yang menurut sobat bagus.

Nah sekian dulu ya untuk postingan/article Membuat Mode Hemat Energi Keren di Blog , semoga bisa bermanfaat untuk sobat semua.

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas..!!

Tweet