Tutorial Membuat Energy Save Mode Menggunakan CSS3

Pada entri yang lepas saya ada share tutorial Energy Saving Mode menggunakan javascript . Kali ini saya ingin kongsi satu lagi tutorial mengenai Energy Saving Mode dengan hanya menggunakan CSS3.

Screenshot

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada butang More Option dan klik Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

]]><b:skin>

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod ]]><b:skin>

/* Credit By ZTO
Edited by faiz-tutorial.blogspot.com
*/
body::before, body::after {
position: absolute;
position:fixed;
content: "";
background: #000;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 9999
}

body::before {
border: 10px solid #ccc;
border-left:none;
top: 0;
left: 50%;
right: 0;
bottom: 0;
}

body::after {
top: 0;
left: 0;
border: 10px solid #ccc;
border-right:none;
right: 50%;
bottom: 0;
}

body:hover::before {
left: 100%
}

body span.sme {
position: absolute;
position:fixed;
right:0;
left: 0;
top: 47%;
border: 5px solid #ccc;
margin: 0 0 0 -1px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #00FF33;
-webkit-box-shadow: 0 0 20px 3px #00FF33;
box-shadow: 0 0 20px 3px #00FF33
}

body span.smeblog {
position: absolute;
position:fixed;
right:0;
left: 0;
top: 47%;
border: 5px solid #ccc;
margin: 0 0 0 0px;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #00FF33;
-webkit-box-shadow: 0 0 20px 3px #00FF33;
box-shadow: 0 0 20px 3px #00FF33
}

body:hover::after {
right: 100%
}

body:hover::before, body:hover::after {
visibility: hidden
}

body:hover span.sme {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 0;
}

body:hover span.smeblog {
visibility: hidden;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
top: 100%;
}

body span.ok3 {
width:35%;
border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;
padding:10px;
background:#000;
font-size:25px;
color:#fff;
text-align:center;
position: absolute;
position:fixed;
left: 32%;
right:45%;
top: 40%;
bottom: 45%;
margin: 0 0 0 0px;
z-index: 123455543123445556888;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
-moz-box-shadow: 0 0 20px 3px #00FF33;
-webkit-box-shadow: 0 0 20px 3px #00FF33;
box-shadow: 0 0 20px 3px #00FF33
}

body:hover span.ok3 {
visibility: hidden;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
-webkit-transition: all .7s ease-out;
transition: all .7s ease-out;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
right: 0;
z-index:99999999
}

7. Cari kod dibawah:

<body>

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah selepas kod <body>

Energy Saving Mode Sila Sentuh Halaman Ini Untuk Masuk Ke Halaman Blog

9. Klik Save Template

#Selesai :)