Energy saving ini mungkin bagi sobat blogger semua sudah mengetahui cara pemasangannya dan bukan lagi hal yg baru,tapi ngak apa-apa lah bagi-bagi info dikit..walaupun simple tapi pasti haihay^_^...Trik ini buat yg belom tau aja..,kali ini kita akan bikin Energy Saving dengan mode CSS3 dan sobat blogger bisa langsung otak atik kode CSS3 nya,dan kode di bawah ini masih hangat cuma sedikit modifikasi dari saya,kalau sobat blogger gak suka dengan tampilan nya silahkan sobat blogger otak atik sendiri kode di bawah ini dan silahkan bekreasi sesuai dengan keinginan sobat semua..selamat berkarya...MeRdEkA..!!!!
Cara Pertama
1. Loginlah dulu di Blogger >
2. Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
3. Jika sudah buatlah nama pada widget yang baru ini l
4. lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

1. <style type="text/css">  

2.  /* origi

3. nal code by: www.pandet-pandet.blogspot.com - generation-platinum - 2011 */  

4. 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.pandet1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 90px;font-family: "Helvetica Neue",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;}/* original code by: www.pandet-pandet.blogspot.com - generation-platinum - 2011  */body:hover .saving p.pandet1{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.pandet2{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.pandet2{font-size: 10px;width: 200px;padding: 0;}/* original code by:  www.pandet-pandet.blogspot.com - generation-platinum - 2011  */.saving p span.pandet3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background:transparent url(http://1.bp.blogspot.com/-uXlgXrs0Q6k/TZHqF0xN9-I/AAAAAAAAAC8/CrD8_KFqT7k/s1600/pattern.png);z-index:1;left center repeat-x;background: -moz-linear-gradient(top,#333,#000);background: -webkit-gradient(linear,0% top,0% bottom,from(#000),to(#333));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 800px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius:0px 0px 30px 30px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_pandet {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>  

5. <div class="saving"><p class="pandet1"><span style="color: rgb(127, 96, 0);">DekanMaru™</span>  

6. <span class="pandet2"> <marquee direction="left" scrollamount="5" align="center" behavior="alternate"><span style="color: rgb(153, 0, 0);">Energy Saving Mode using CSS3</span></marquee></span>  

7. <span class="pandet3"><span style="color: rgb(39, 78, 19);">Move your mouse to go back to the page!</span>  

8. <span style="color: rgb(12, 52, 61);">Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></span></p><div class="by_pandet">design by: DekanMaru.blogspot.com - DekanMaru™-2011</div></div> 

DEMO cara pertama

CARA KEDUA
Ada juga cara lain yg lebih simple,tapi ini menggunakan gambar ,oke langsung aja :
1. Pertama, sobat harus pasang script Energy Saving terlebih dahulu.
. (Masukkan scriptnya di bagian Edit Template HTML, diatas kode )</head>
2. Cari kode

</head>

3. Masukan script di bwah ini tepat di atas kode </head> tadi


4. Lalu Car kode ]]></b:skin> dan simpan css di bawah ini tepat di atas kode ]]></b:skin>