Membuat ScreenSaver (Energy Saving Mode) Unik ~ Tips-Tricks Computer & Internet

Jika teman-teman mengunjungi Blog ini, maka tampilan pertama adalah berupa screensaver. Pada postingan sebelum-nya saya sudah pernah menjelaskan bagaimana cara membuat screensaver (energy saving mode) di Blog. Kalau sekarang saya akan menjelaskan:

Lihat Demo ScreenSaver
Nb. Untuk melihat aksi saat Energy Saving Mode using CSS3 mulai bekerja, silahkan jangan letakkan cursor di halaman blog selama 10 detik!

Bagaimana cara membuat ScreenSaver (Energy Saving Mode) yang Unik ?

Ikuti step by step:
1. Pastikan Anda telah Login ke Blog.
2. Klik "Design/Rancangan"
3. Klik "Edit HTML"
4. Backup Template kamu terlebih dahulu. Klik "Download Full Template"
5. Cari kode
]]></b:skin>
dan letakkan kode CSS di atas kode ]]></b:skin>!
Kode CSS:

* { margin:0; padding: 0; }
#navbar-iframe {
height: 0;
opacity: 0.0;
-o-transition: height 2s linear 8s, opacity 2.5s linear 6s;
-moz-transition: height 2s linear 8s, opacity 2.5s linear 6s;
-webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s;
}
body:hover #navbar-iframe {
height: 30px;
opacity: 1.0;
-o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
-moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
-webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
}
body .bgsGR_esm {
position: fixed;
width: 100%;
top: 0;
height: 100%;
opacity: 0.97;
filter: alpha(opacity=97);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";
background: #000;
border-bottom: 3px solid transparent;
z-index: 1;
-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 .bgsGR_esm {
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 .bgsGR_esm p.esm1 {
margin: 0;
padding: 0;
width: 92%;
background: transparent;
font-size: 100px;
font-family: "Serif", Times New Roman;
color: #333; /* original code by: gubhugreyot.blogspot.com */
text-shadow: 1px 1px 2px #ccc;
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 .bgsGR_esm 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;
}
.bgsGR_esm p span.esm2 {
font-size: 18px;
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
display: block; /* original code by: gubhugreyot.blogspot.com */
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;
}
.bgsGR_esm:hover p span.esm2{
font-size: 10px;
width: 200px; /* original code by: gubhugreyot.blogspot.com */
padding: 0;
}
.bgsGR_esm p span.esm3{
color: #ccc;
font-family: "Tahoma", Arial, Helvetica;
display: block;
margin:10px auto;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png) 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;
}
.bgsGR_esm .by_gubhugreyot {
margin-left: 30px;
text-align: left;
color: #015828;
font-size: 12px;
font-weight: normal;
position: absolute;
top: 550px; /* original code by: gubhugreyot.blogspot.com */
width: 100%;
height: 20px;
left: 0;
}
.bgsGR_esm .by_gubhugreyot span.esm4 {
color: #aaa;
font-style:italic;
}

Nb.
1. Desain Energy Saving Mode sekaligus menyertakan animasi pada navbar. Jika kamu suka menampilkan navbar sebagai pelengkap blog, maka kode ini dapat langsung disimpan di template. Sebuah animasi cantik tidak hanya terjadi di Energy Saving Mode, namun animasi juga akan terjadi pada navbar. Cantik banget! Cobalah jika kamu tidak percaya!
2. Kalau kamu tidak ingin menampilkan navbar, silahkan ubah/ganti kode ini.

#navbar-iframe {
height: 0;
opacity:0.0;
-o-transition: height 2s linear 8s, opacity 2.5s linear 6s;
-moz-transition: height 2s linear 8s, opacity 2.5s linear 6s;
-webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s;
}
body:hover #navbar-iframe {
height: 30px;
opacity: 1.0;
-o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
-moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
-webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s;
}

dengan kode ini:

#navbar-iframe {
display: none;
}

6. Cari kode
<body>
dan letakkan kode xHTML di bawah kode <body>!
Kode xHTML:

<div class='bgsGR_esm'>
YAUNI 
Energy Saving Mode Active 
Move your mouse to go back to the page! Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

</div>

Nb.
1. Silahkan ubah teks warna biru untuk menampilkan teks dalam bentuk yang berbeda.
2. Teks "YAUNI" berwarna biru menggunakan font yang cukup besar (font-size: 100px;). Jika ingin menuliskan nama blog atau nama yang lain dengan teks cukup panjang, kamu bisa kecilkan ukuran font yang terdapat dalam syntax :

body .bgsGR_esm p.esm1{font-size: 100px;}

Ukuran font bisa diperkecil (misalnya 50px) hingga bisa terlihat ideal di blog!

7. Klik Save/Simpan Template.

Sekarang buka Blog kamu dan lihat hasilnya.,

Catatan/Keterangan:
Untuk membuat layar menjadi gelap penuh saat Energy Saving Mode bekerja.

Carilah kode:

body .bgsGR_esm {
position: fixed;
width: 100%;
top: 0;
height: 100%;
opacity: 0.97;
filter: alpha(opacity=97);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";
background: #000;
border-bottom: 3px solid transparent;
z-index: 1;
-o-transition: all 3s ease-in-out 10s;
-moz-transition: all 3s ease-in-out 10s;
-webkit-transition: all 3s ease-in-out 10s;
}

Ubahlah nilai:
opacity: 0.97;
filter: alpha(opacity=97);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";

Menjadi:
opacity: 1.0;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

Sumber: Google

Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!