faiz-tutorial demo: Tutorial Membuat Energy Save Mode Menggunakan CSS3

Wednesday, 14 August 2013

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 :)

faiz-tutorial demo

Wednesday, 14 August 2013

Tutorial Membuat Energy Save Mode Menggunakan CSS3

No comments:

Post a Comment

Shopping Here!