assalamualaikum sobat,
apa kabar kalian semua..mohon maaf kalo blog ini jarang di update.. :D
insya
allah sekarang saya akan mengupdate nya terus, kali ini postingan saya
membahas tentang blog lagi ni, yaitu Cara membuat energy saving Mode
pada blog,
yang seperti tergambar pada blog saya,
energy saving mode ini di buat dengan CSS jadi tidak akan memberatkan blog sobat..
pingin blog sobat ada energy saving mode nya ??
ikutin aja langkah saya dibawah ini.. :D
nih screenshotnya :
jika mousenya bergerak ke halaman sobat :
1. Login ke Blog Sobat
2. Pilih menu design/Rancangan
3. lalu klik Add gadget
4. trus pilih HTML/javascript
5. Sekarang tinggal copy code dibawah ini:
<style
type="text/css">body .saving{position: fixed;width: 100%;top:
0;left:0;height: 100%;opacity: 0.80;filter:
alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";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:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif);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", Chiller;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:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif);border:
1px solid #333;border-radius: 0;-moz-border-radius:
0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family:
Chiller, Chiller, 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://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif)
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_Tejahtc {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'>AHMAD'S BLOG<br/>
<br/><br/><span class='esm3'>.:ENERGY SAVING MODE:.<br/>http://www.cyber-empires.net/</span></p>
<div class='noochii'>
</div></div>
Keterangan : Tulisan yang berwarna Hijau ganti dengan kata" sobat.. dan tulisan yang berwarna Merah adalah URL gambar nya. sobat ganti dengan gambar sobat sendiri.
- Lalu di save dan lihat hasil nya di blog sobat.. :D
EmoticonEmoticon