Cara Membuat Energy Saving Mode Dengan CSS

Mohon maaf bagi anda yang sudah nunggu post update dari saya, ada sedikit kesibukan yang membuat aktifitas posting saya sedikit terhabat. Nah untuk menemani pagi anda kali ini saya  akan berbagi sedikit tips sederhana kepada anda. Pokok bahasan kita kali ini mengenai " Cara Membuat Energy Saving Mode Dengan CSS"di blog.

Pengunjung : buruan dibahas gan, saya jadi penasaran?

Author : Iya sabar bentar sekarang saya postkan.

Contoh : 

Silakan click disini "Demo"

Ini merupakan salah tips yang berguna untuk memperindah tampilan blog anda. langsung saja ke langkah pengerjaannya :

• Seperti biasa login  dulu ke akun blog anda.
• Kemudian pada Dasbor click Rancangan => Tambah Gadget => Pilih HTML Java/Script.
• Selanjutnya copy paste code di bawah ini.

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.98;filter: alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";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: #0a7f01;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", Times New Roman;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: #000;border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Arial, Helvetica, 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 http://i964.photobucket.com/albums/ae124...) 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_Verar Fujastawan {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'>Griya Dalem<br/> <span class='esm2'>Energy Saving Mode using CSS3</span><br/><br/> <span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p> </div>

• Ganti code yang berwarna pada "<p class='esm1'>Griya Dalem<br/>" dengan nama anda.
• Finnaly, save as your file.

Note :

1. Mohon donasi dari anda dengan memfollow site ini agar lebih baik kedepannya.
2. Kritik dan saran yang membangun sangat kami perlukan kedepannya.