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...
<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.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;}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;}.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>
<div class="saving"><p class="pandet1"><span style="color: rgb(127, 96, 0);">DekanMaru™</span>
<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>
<span class="pandet3"><span style="color: rgb(39, 78, 19);">Move your mouse to go back to the page!</span>
<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>
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
<!-- save your energy --><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>
<!-- save your energy end -->
4. Lalu Car kode
]]></b:skin> dan simpan css di bawah ini tepat di atas kode
]]></b:skin>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(<span style="color: #990000;">MASUKKAN URL GAMBAR SOBAT DISINI</span>) no-repeat center center fixed black; }
div#energysaving p { margin: 0; padding: 0; width: 100%; font-size: 0px; font-family: arial; color: transparent; position: relative; top: 40%; line-height: 20px; font-weight: bold; text-align: center; text-shadow: none; display: none; }
div#energysaving p { color: transparent; font-size: 0px; font-weight: normal; display: none; }
