Energy saving dengan CSS3
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..!!!!
1. Loginlah dulu di
Blogger >
Tata Letak >
Elemen Laman > Klik
Tambah Gadget>
HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...
<style type="text/css">
/* original code by: laronity.blogspot.com - laron - generation*/
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: laronity.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: laronity.blogspot.com - generation-platinum - 2011 */.saving p span.pandet3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZbcIX5M21rfNB4cplasahrnzh7cWeO_k2S6fCHLpD4QjRA-aj4LsgrHTa7RvRXZs8EYFJjydh5Zwi3SdgV4H0SlK341J9kYNeFg2e1KFgctuJFbAr2Y10FA9ERlRcj63SplkNNJU8yan7/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_laron {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'>
Generation Platinum<br/>
<span class='pandet2'> <marquee direction="left" scrollamount="5" align="center" behavior="alternate">
Energy Saving Mode using CSS3</marquee></span><br/><br/>
<span class='pandet3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p>
<div class='by_laron'> design by: laronity.blogspot.com -laron generation</div>
</div>
=========================================================================
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> )
<!-- save your energy --><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>
<!-- save your energy end -->
2. Masuk ke halaman
Rancangan, masukkan kode di bawah di Add Widget atau Tambah Gadget.Kalo udah,di save/simpan. dan cek di blog sobat.Semoga berhasil
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(MASUKKAN URL GAMBAR SOBAT DISINI) 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; }
</style>
Selesai dan liat hasilnya...!!
