Cara Membuat Screen Saver (Energy Saving Mode)

Kali ini Pphoo™ akan mengulas Cara Membuat Screen Saver (Energy Saving Mode).


Langsung Kita ke TKP Kawan... pphoo.tk

Klik rancangan.
Klik add gadget atau tambah gadget.
Pilih HTML/JavaScript.
Masukan kode berikut di dalamnya.


<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 200%;opacity: 0.97;filter: alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background: #000;border-bottom: 5px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background: #0a7f01;border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 12px;width: 100%;background: transparent;font-size: 40px;font-family: "Serif", Times New Roman;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;position: relative;margin-top: 5px; line-height:47px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 40px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 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;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;color:#7FFF00;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center; width: 300px;margin:0px auto; font-weight: normal;padding: 2px 8px;background:url(http://i.imgur.com/UGYMo.gif);;border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color:#FF00FF;text-shadow: none;font-family: Showcard Gothic;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 300px;padding: 0;height:10px;}.saving p span.esm3{color: #7CFC00;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background: url http://i964.photobucket.com/albums/ae124...) left center repeat-x;background: -moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_Pphoo™ {margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;center: 0;}.saving .by_Pphoo™ span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>

<div class="saving">
<p class="esm1">Pphoo™
<br/><br/><br/><br/><br/>
<span class="esm2">Energy Saving Mode</span>
<br/>
<span class="esm3"><a style="text-decoration: blink;color: #7CFC00;">
Gerakan mouse akan mengembalikan Anda pada postingan Pphoo™...</a></span><center><img alt=":lol:" class="wp-smiley" src="http://i.imgur.com/OPlUP.gif" alt="pphoo.tk" /></center><br/><br/>
<center><span class="esm4"><div class="by_Pphoo™"><marquee align="center" direction="left" scrollamount="7" width="27%" height="70"><a style="font-size: 15px;
font-family: Old English Text MT; color: #FFFF00;"> Copyright © 2011 <a style="font-size: 16px;
font-family: Vijaya; color: #00FFFF;"> <img src="http://i.imgur.com/bu4Fa.gif" alt="pphoo.tk"  /></a>  <a style="font-size: 23px;
font-family: Arabic Typesetting; color: #00FFFF;">  created design by : www.pphoo.tk</a></a></marquee></div></span></center></p></div>

Catatan :
Ganti warna merah sesuai dengan selera Kamu...
Bonus image  
<img alt=":lol:" class="wp-smiley" src="http://i.imgur.com/OPlUP.gif"  alt="pphoo.tk" />
<img src="http://i.imgur.com/bu4Fa.gif" alt="pphoo.tk"  />

Hasilnya akan tampak seperti di bawah ini :


Bagaimana...???
Semoga bermanfaat Kawan... (",)

0 comments:

Post a Comment