belajar design blog: membuat enrgy saving dengan menggunakan css3

untuk demo silahkan tinggalkan blog ini selama 10-15 detik

Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".

Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".

Design/Rancangan : Cari dan klik "Edit HTML".

Edit HTML : Amankan template terlebih dahulu (back-up templates).

KLIK Download Template Lengkap.
Simpan file Template di folder PC.
Kembali ke halaman "Edit HTML".

Cari kode]]></b:skin>* { margin:0; padding: 0; } #navbar-iframe { height: 0; opacity: 0.0; -o-transition: height 2s linear 8s, opacity 2.5s linear 6s; -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; } body:hover #navbar-iframe { height: 30px; opacity: 1.0; -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; } body .bgsGR_esm { position: fixed; width: 100%; top: 0; height: 100%; opacity: 0.97; filter: alpha(opacity=97); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)"; background: #000; border-bottom: 3px solid transparent; z-index: 1; -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 .bgsGR_esm { 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 .bgsGR_esm p.esm1 { margin: 0; padding: 0; width: 92%; background: transparent; font-size: 100px; font-family: "Serif", Times New Roman; color: #333; /* original code by: amyxmoods.blogspot.com */ text-shadow: 1px 1px 2px #ccc; 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 .bgsGR_esm 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; } .bgsGR_esm p span.esm2 { font-size: 18px; opacity: 0.5; filter: alpha(opacity=50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; display: block; /* original code by: gubhugreyot.blogspot.com */ 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; } .bgsGR_esm:hover p span.esm2{ font-size: 10px; width: 200px; /* original code by: gubhugreyot.blogspot.com */ padding: 0; } .bgsGR_esm p span.esm3{ color: #ccc; font-family: "Tahoma", Arial, Helvetica; display: block; margin:10px auto; background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png) 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; } .bgsGR_esm .by_gubhugreyot { margin-left: 30px; text-align: left; color: #015828; font-size: 12px; font-weight: normal; position: absolute; top: 550px; /* original code by: gubhugreyot.blogspot.com */ width: 100%; height: 20px; left: 0; } .bgsGR_esm .by_gubhugreyot span.esm4 { color: #aaa; font-style:italic; }
nah taruh di atas di ats kode skin tadi
6.Cari kode<body>Gunakan Ctrl+F untuk memudahkan pencarian kode!7.Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3

xHTML Energy Saving Mode Using CSS3

<div class='bgsGR_esm'>
<p class='esm1'>amyxmoods<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 class='by_gubhugreyot'>Copyright 2010 <span class='esm4'>amyxmoods.blogspot.com</span> - All rights reserved</div>
</div>

Teks "amyxmoods berwarna oranye menggunakan font yang cukup besar (font-size: 100px;)letakkan di bawah kode <body>.8.SAVE Templates/Simpan Template : KLIK SAVE Templates.Buka blog untuk melihat hasilnya!

Catatan/Keterangan:

Untuk membuat layar menjadi gelap penuh saat Energy Saving Mode bekerja, rubahlah nilai opacity: 0.97; dan filter:alpha ... opacity=97, serta -ms-filter: ... opacity=97 menjadi 1.0 dan 100.
Untuk mengatur durasi bekerjanya "Energy Saving Mode using CSS3, atur nilai pada kode berikut:

body .bgsGR_esm{
       -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 .bgsGR_esm p.esm1 {
       -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;
}

Angka 10s merupakan durasi aktifnya Energy Saving Mode. Rubah angka berwarna merah dengan perbandingan yang sama ( -4s dan +2s).
Jika navbar digunakan, sampeyan juga harus mengganti angka yang berwarna merah juga :

#navbar-iframe {      
       -o-transition: height 2s linear 8s, opacity 2.5s linear 6s;
       -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s;
       -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s;
}

Pengurangan nilai sebesar -4s dan -6s dari durasi aktifnya Energy Saving Mode using CSS3 (10s).

About The Author

Bie, that's my name. Im just an ordinary blogger.Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones.