Screen Saver Blog dengan Css3
hallo sobat KingQueen mgn kabar nya???? wah dah lama juga ne nga update postingan maklum sob sibuk...:D
baik sobat evanzip sebelumnya evanzip sudah menjelaskan cara update status FB via BlackBerry
dan untuk Tutorial kali ini evanzip akan membuat postingan cara membuat
Screen saver css3.Screen saver Css3 akan muncul /tampil pada blog pada
saat Mouse kita diamkan dan pada saat mouse kita gerakkan maka kita akan
kembali lagi pada halaman yang tadi.
nah gimana sobat evanzip tertarik mau buat screnn saver css3 di blog sobat silahkan ikuti langkah berikut ini:
- Login Ke Akun Blog Sobat
- Pada Dasbor Klik Rancangan=>> Kemudian Tambah Gadget Dan Pilih HTML Java/Script
- Pastekan Kode di bawah ini Tepat Didalamnya
<style type="text/css">body .saving{position: fixed;width:
100%;top: 0;left:0;height: 100%;opacity: 0.98;filter:
alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background:
#000;border-bottom: 3px 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: 0;width: 92%;background:
transparent;font-size: 100px;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: 200px;line-height: 20px;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:
25px;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;opacity: 0.5;filter:
alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display:
block;text-align: center;width: 300px;margin: -10px auto; font-weight:
normal;padding: 2px 8px;background: #000;border: 1px solid
#333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius:
0;color: #0000FF;text-shadow: none;font-family: Arial, Helvetica,
sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s
ease-out;-webkit-transition: 1s ease-out;}.saving:hover p
span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p
span.esm3{color: #ccc;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_evanzip{margin-left:
30px;text-align: center;color: #015828;font-size: 12px;font-weight:
normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left:
0;}.saving .by_Tejahtc 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'>Taufik hendriyanto<br/>
<br/><div class='by_evanzip'>Original design by: <span
class='esm4'> Evanzip.blogspot.com -
Evanzip.blogspot.com</span> - 2011</div>
</p>
<center><span class='esm3'>Move your mouse to go back to the
page!<br/><blink>Hey...jangan pergi dulu gerakin aja lagi
mousenya,nah gitu dong!</blink></span>
</center></div>
4.Ubah nama warna kuning dengan nama sobat
5.Simpan
SELAMAT MENCOBA SEMOGA BERHASIL
