Pasang Energy Saving Mode CSS3 di Blog

Silahkan copas kode berikut:

<style type="text/css">
/* kera ngalam */
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.ngalam1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: &quot;Helvetica Neue&quot;,Arial,Helvetica,sans-serif;color: #111;text-shadow: 1px 1px 2px #333;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;}/* kera ngalam  */body:hover .saving p.ngalam1{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.ngalam2{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: 5px solid red;border-radius: 0;-moz-box-shadow: -1px 3px 20px red;-webkit-border-radius: 0;color: red;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.ngalam2{font-size: 10px;width: 200px;padding: 0;}/* kera ngalam  */.saving p span.ngalam3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background:transparent url(https://lh6.googleusercontent.com/_UL5ewe73l5Q/TagCcidjjGI/AAAAAAAAAPs/l-eBrAgrVYs/pattern.png);z-index:1;left center repeat-x;
background: -moz-linear-gradient(left top 315deg, orange, yellow 100%, orange 20%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(100%, yellow), color-stop(20%, orange));
opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 500px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius:30px 30px 30px 30px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_ngalam {margin-center: 30px;text-align: center;color: #333;font-size: 12px;font-weight: normal;position: absolute;top: 550px;width: 100%;height: 20px;left: 0;}
</style>
<div class='saving'>
<p class='ngalam1'>Andik's Ngalam<br/>
<span class='ngalam2'> <marquee direction="left" scrollamount="5" align="center" behavior="alternate">MODE: HEMAT ENERGI</marquee></span><br/><br/>
<span class='ngalam3'>Move your mouse to go back to the page!<br/><blink>Letakkan mouse anda di tengah halaman dan silahkan nikmati kembali posting kami!</blink></span></p>
<div class='by_ngalam'>&#169; Andik's Ngalam</div>
</div>

Keterangan:
- Silahkan ganti tulisan warna biru dengan nama Blog Anda.
- Untuk tulisan warna merah anda dapat membiarkannya atau silahkan ganti sesuai selera.

Langkah:

• Silahkan login ke Blog anda
• Masuk pada menu Rancangan >> Elemen laman >> Tambah Gadget >> Pilih HTML/JavaScript
• Pastekan kode di atas pada konten, untuk judul biarkan kosong
• Klik Simpan

Selesai

Semoga bermanfaat.. :)

Link to This Post:

http://jvccard.blogspot.com/2011/04/pasang-energy-saving-mode-css3-di-blog.html