Cara Membuat Energi Saving
23:52:00
By Unknown
Untuk Anda Yang Memerlukan Energi Saving
Silahkan Ikutti Langkah Langkah Dibawan Ini :
Cara Menggunakan Kode Energy Saving Mode dengan CSS3
Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi).
Setelah semua tertulis dengan benar, klik "Login".
* SAVING*/
*, body .saving{
margin:0;
padding:0;
}
body .saving {
background: none repeat scroll 0 0 #000000;
border-bottom: 3px solid transparent;
height: 100%;
left: 0;
opacity: 0.98;
position: fixed;
top: 0;
transition: all 3s ease-in-out 10s;
width: 100%;
z-index: 999999;
}
body:hover .saving {
background: none repeat scroll 0 0 #0A7F01;
border-bottom: 5px solid #333333;
height: 0.001%;
opacity: 0;
transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
}
body .saving p.esm1 {
background: none repeat scroll 0 0 transparent;
border: 30px solid transparent;
border-radius: 20px 20px 20px 20px;
color: #FF0000;
font-family: "Serif",Times New Roman;
font-size: 100px;
font-weight: bold;
line-height: 20px;
margin: 200px 0 0;
padding: 0;
position: relative;
text-align: center;
text-shadow: 0 0 2px #CCCCCC, 0 -5px 4px #FFFF33, 2px -6px 6px #FFDD33, -2px -8px 9px #FF4400, 2px -10px 10px #FF1100;
transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;
width: 92%;
}
body:hover .saving p.esm1 {
background: none repeat scroll 0 0 #AAAAAA;
border: 20px solid #888888;
border-radius: 170px 170px 170px 170px;
color: red;
font-size: 10px;
margin: 340px 0 0 300px;
padding: 25px;
transform: translate(600px, -500px) rotate(360deg) scale(0.2);
transition: font 1.1s ease 0.1s, width 1.3s ease 0.4s, margin-left 0.8s ease 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 0s;
width: 25%;
}
.saving p span.esm2 {
background: none repeat scroll 0 0 #000000;
border: 1px solid #333333;
border-radius: 0 0 0 0;
color: #0000FF;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: normal;
margin: -10px auto;
opacity: 0.5;
padding: 2px 8px;
text-align: center;
text-shadow: none;
transition: all 1s ease-out 0s;
width: 300px;
}
.saving:hover p span.esm2 {
font-size: 10px;
padding: 0;
width: 200px;
}
.saving p span.esm3 {
background: -moz-linear-gradient(center top , #666666, #111111) repeat scroll 0 0 transparent;
border: 1px solid #333333;
border-radius: 4px 4px 4px 4px;
color: #CCCCCC;
display: block;
font-family: "Tahoma",Arial,Helvetica;
font-size: 12px;
font-weight: normal;
line-height: 16px;
margin: 10px auto;
opacity: 0.6;
padding: 2px 10px;
text-shadow: 1px 1px 1px #000000;
width: 250px;
}
.saving .by_Doi-Comunity {
bottom: 30px;
color: #015828;
font-size: 12px;
font-weight: normal;
height: 20px;
left: 0;
margin-left: 30px;
position: absolute;
text-align: center;
width: 100%;
}
.saving .by_Doi-Comunity span.esm4 {
color: #AAAAAA;
font-size: 14px;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}
/* END SAVING*/
Silahkan Ikutti Langkah Langkah Dibawan Ini :
Cara Menggunakan Kode Energy Saving Mode dengan CSS3
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> dan letakkan kode CSS di atasnya!
Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya!
Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!
Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dan letakkan di bawah kode <body>.
SAVE Templates/Simpan Template : KLIK SAVE Templates.
Buka blog untuk melihat hasilnya!
Kode CSS Energi Saving
* SAVING*/
*, body .saving{
margin:0;
padding:0;
}
body .saving {
background: none repeat scroll 0 0 #000000;
border-bottom: 3px solid transparent;
height: 100%;
left: 0;
opacity: 0.98;
position: fixed;
top: 0;
transition: all 3s ease-in-out 10s;
width: 100%;
z-index: 999999;
}
body:hover .saving {
background: none repeat scroll 0 0 #0A7F01;
border-bottom: 5px solid #333333;
height: 0.001%;
opacity: 0;
transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;
}
body .saving p.esm1 {
background: none repeat scroll 0 0 transparent;
border: 30px solid transparent;
border-radius: 20px 20px 20px 20px;
color: #FF0000;
font-family: "Serif",Times New Roman;
font-size: 100px;
font-weight: bold;
line-height: 20px;
margin: 200px 0 0;
padding: 0;
position: relative;
text-align: center;
text-shadow: 0 0 2px #CCCCCC, 0 -5px 4px #FFFF33, 2px -6px 6px #FFDD33, -2px -8px 9px #FF4400, 2px -10px 10px #FF1100;
transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;
width: 92%;
}
body:hover .saving p.esm1 {
background: none repeat scroll 0 0 #AAAAAA;
border: 20px solid #888888;
border-radius: 170px 170px 170px 170px;
color: red;
font-size: 10px;
margin: 340px 0 0 300px;
padding: 25px;
transform: translate(600px, -500px) rotate(360deg) scale(0.2);
transition: font 1.1s ease 0.1s, width 1.3s ease 0.4s, margin-left 0.8s ease 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 0s;
width: 25%;
}
.saving p span.esm2 {
background: none repeat scroll 0 0 #000000;
border: 1px solid #333333;
border-radius: 0 0 0 0;
color: #0000FF;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: normal;
margin: -10px auto;
opacity: 0.5;
padding: 2px 8px;
text-align: center;
text-shadow: none;
transition: all 1s ease-out 0s;
width: 300px;
}
.saving:hover p span.esm2 {
font-size: 10px;
padding: 0;
width: 200px;
}
.saving p span.esm3 {
background: -moz-linear-gradient(center top , #666666, #111111) repeat scroll 0 0 transparent;
border: 1px solid #333333;
border-radius: 4px 4px 4px 4px;
color: #CCCCCC;
display: block;
font-family: "Tahoma",Arial,Helvetica;
font-size: 12px;
font-weight: normal;
line-height: 16px;
margin: 10px auto;
opacity: 0.6;
padding: 2px 10px;
text-shadow: 1px 1px 1px #000000;
width: 250px;
}
.saving .by_Doi-Comunity {
bottom: 30px;
color: #015828;
font-size: 12px;
font-weight: normal;
height: 20px;
left: 0;
margin-left: 30px;
position: absolute;
text-align: center;
width: 100%;
}
.saving .by_Doi-Comunity span.esm4 {
color: #AAAAAA;
font-size: 14px;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}
/* END SAVING*/
Kode xHTML Energy Saving
<div class='saving'><p class='esm1'>Dervira Comunity<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_DoiComunity'>Copyright * Feb 2012 * <span class='esm4'>DerviraComunity.blogspot.com</span> - All rights reserved</div></div>
0 komentar: