Energy Saving mode dengan CSS3 ini memang keren :D gk percaya ? liat SSnya
Penasaran langsung liat DEMO aja di TKP xD
nanti pada saat kalian klik Link DEMO kalian langsung bisa liat energy saving modenya ! kayak SS di atas !
Udah liat demonya ? tertarik? mau pasang di blog ? oke ikuti tutornya :D
1. login dulu deh ke Blogger
2. masuk ke Template > Edit HTML
3. cari kode ]]></b:skin> lalu
*, body .bgsGR_esm{
margin:0;
padding:0;
}
body .bgsGR_esm{
position:fixed;
width:98%;
top:0;
left:0; /* original code by: gubhugreyot.blogspot.com */
height:97%;
opacity:.99;
filter:alpha(opacity=99);
-ms-filter:alpha(opacity=99);
background:#000;
border:10px solid #666;
border-bottom:30px solid #666;
z-index:99999999;
transition:all 6s ease-in-out 60s;
-o-transition:all 6s ease-in-out 60s;
-moz-transition:all 6s ease-in-out 60s;
-webkit-transition:all 6s ease-in-out 60s;
-ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsGR_esm{
border-color:#F00;
background:#930;
width:50%;
height:3%;
left:25%;
top:40%; /* original code by: gubhugreyot.blogdetik.com */
transition:3.5s ease-out;
-o-transition:3.5s ease-out;
-moz-transition:3.5s ease-out;
-webkit-transition:3.5s ease-out;
-ms-transition:3.5s ease-out;
}
body:hover .bgsGR_esm,body:hover .bgsGR_esm p.esm1,body:hover .bgsGR_esm p span.esm2,body:hover .bgsGR_esm p span.esm3,body:hover .bgsGR_esm .by_gubhugreyot{
transition:3s;
-o-transition:3s;
-moz-transition:3s;
-webkit-transition:3s;
-ms-transition:3s;
z-index:-10;
opacity:.0;
filter:alpha(opacity=0);
-ms-filter:alpha(opacity=0);
}
body .bgsGR_esm p.esm1{
margin:0; /* original code by: gubhugreyot */
padding:0;
width:92%;
height:100%;
background:transparent;
font-size:100px;
font-family:Serif,Times New Roman;
color:#333;
text-shadow:1px 1px 2px #ccc;
position:relative;
margin-top:200px;
line-height:20px;
font-weight:bold;
text-align:center;
display:block;
margin-left:auto;
margin-right:auto;
}
.bgsGR_esm p span.esm2{
font-size:18px;
opacity:.5;
filter:alpha(opacity=50);
-ms-filter:alpha(opacity=50);
display:block;
text-align:center;
margin:-10px auto;
font-weight:normal;
padding:2px 8px;
background:#000;
border:1px solid #333;
color:#00f;
text-shadow:none;
font-family:Arial,Helvetica,sans-serif;
}
.bgsGR_esm p span.esm3{
color:#ccc;
font-family:Tahoma,Arial,Helvetica;
display:block;
margin:10px auto;
background:#111;
background:-moz-linear-gradient(top,#111 0,#666 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
background:-webkit-linear-gradient(top,#111 0,#666 100%);
background:-o-linear-gradient(top,#111 0,#666 100%);
background:-ms-linear-gradient(top,#111 0,#666 100%);
background:linear-gradient(top,#111 0,#666 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
opacity:.6;
filter:alpha(opacity=60);
-ms-filter:alpha(opacity=60);
width:250px;
text-shadow:1px 1px 1px #000;
border:1px solid #333;
border-radius:4px;
padding:2px 10px;
font-size:12px;
font-weight:normal;
line-height:16px;
}
.bgsGR_esm .by_gubhugreyot{
margin-left:30px;
text-align:left;
color:#015828;
font-size:12px;
font-weight:normal;
position:absolute;
top:550px;
width:100%;
height:20px;
left:0;
}
.bgsGR_esm .by_gubhugreyot span.esm4{
color:#aaa;
font-style:italic;
}
4. COPAS xHTML di bawan ini, tepat DIBAWAH kode <body>
<div class='bgsGR_esm'><p class='esm1'>dayZ Blog's<br/><span class='esm2'>Energy Saving Mode</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_dayZ'>Copyright 2011-2012 <span class='esm4'>http://sidayz.tk</span> - All rights reserved</div></div>
selesai deh :* xD
Thanks to ghubug reyot atas CSSnya :D
Ingat saya tidak melarang COPAS!! tetapi jikalau kalian COPAS harap cantumkan Sumber dengan Link ! HARGAI LAH KARYA ORANG !!
