Posted by : Unknown Selasa, 02 Juli 2013


Sekedar sharing - Cara Membuat Energy Saving Mode Keren di Blog. pada postingan kali ini Sekedar sharing akan berbagi tips yaitu bagaiman cara membuat energy saving mode keren di blog. di dalam tutorial ini tidak menggunakan javascript hanya menggunakan css3. tutorial ini dapat dibuat dengan memanfaatkan pseudo elemen ::after, ::before, <span>, dan transition untuk memperhalus gerakan. kemudian <span> digunakan untuk membuat garis dari atas dan dari bawah yang seolah-olah akan mengunci layar. Tanpa basa-basi langsung aja ikuti langkah-langkah berikut.

- Pertam Login dulu ke blog sobat
- Kemudian Klik Template >> Edit HTML.
- Kemudian masukan kode css dibawah ini di atas kode ]]></b:skin>

/* Opening Element By ZTO
Creation by ZTO.blogspot.com
ESM by sekedarsharing2.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.sekedar {
position: absolute;position:fixed;right:0;
left: 0;
top: 48%;
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 #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body span.ssblog {
position: absolute;position:fixed;
right:0;
left: 0;
top: 48%;
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 #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover::after {
right: 100%
}
body:hover::before, body:hover::after {
visibility: hidden
}
body:hover span.sekedar {
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.ssblog{
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.ss {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 #06F;
-webkit-box-shadow: 0 0 20px 3px #06F;
box-shadow: 0 0 20px 3px #06F
}
body:hover span.ss {
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
}


- Langkah terakhir masukan kode HTML di bawah ini di atas </body>

<span class='sekedar'/>
<span class='ss'>Energy Saving Mode<br/><span style='font-size:12px;color:#fff'>Gerakan Mouse untuk melihat halaman</span></span>
<span class='ssblog'/>


- Kemudian simpan dan lihat hasilnya.

Semoga Bermanfaat !!

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Selamat Datang Di Blog Saya
English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Flag Counter

Statistik

Diberdayakan oleh Blogger.

Copyright © 2013 Sekedar Sharing - Edited By |Imam Ainudin Firmansyah | 12.12.6815