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>
Related Posts
Written by Mazz Puji Putra Doi
Setiap org menghadapi kekecewaaan pada satu atau lain waktu tetapi pemenang adalah org yg tdk mau membiarkan kekecewaan mematahkan semangat
Saat Anda membalas rasa sakit dgn senyuman, saat itulah Anda memastikan bhw diri Anda lbh baik dr org yg menyakiti itu
Cinta dapat mengubah pahit menjadi manis, debu beralih emas, keruh menjadi bening, sakit menjadi sembuh, penjara menjadi telaga, derita menjadi nikmat, dan kemarahan menjadi rahmat.
0 komentar: