ENERGI SAVING MODE ala GubhugReyot :D

Artikel inilah hasil daripada saya menjelajah blog-blog yang udh lama berkiprah di dunia maaya ini. hhehe
Energi Saving Mode ini sendiri diperkenalkan pertama kali pada tahun 2009, yang mana banyak dari para blogger mengharapkan adanya Energi saving Mode ini di Blog nya .

Tanpa Berlama lama berikut saya tuliskan tutorial cara pembuatan Energi Saving Mode ala bang 'cah ndeso kluthuk pada blog nya. Untuk yang masih penasaran bisa liat dulu contoh nya di SINI.
*untuk melihat aksi Energi Saving Mode ini jgn letakkan kursor anda selama 10 detik pada contoh halaman blog nya.

Berikut Tahapan nya : 

•  Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
• Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
• Design/Rancangan : Cari dan klik "Edit HTML".
• Edit HTML : Amankan template terlebih dahulu (back-up templates).
  • KLIK Download Template Lengkap.
  • Simpan file Template di folder PC.
  • Kembali ke halaman "Edit HTML".
• Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini sebelumnya!

 Kode CSS Energi Saving Mode Menggunakan CSS3

* { 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;
}

• Desain Energy Saving Mode sekaligus menyertakan animasi pada navbar. Jika anda 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. Sangat cantik! Cobalah jika anda tidak percaya!

• Jika anda tidak akan menampilkan navbar, silahkan ganti kode diatas yang seperti berikut dengan kode baru di bawahnya.

#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;
}

Kode baru sebagai pengganti

#navbar-iframe {
display: none;
}

• Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!
• Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dibawah ini dan letakkan di bawah kode <body>.

xHTML Energy Saving Mode Using CSS3

<div class='bgsGR_esm'>
<p class='esm1'>cheahabBlog<br/>
<span class='esm2'>Energy Saving Mode Using CSS3</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_gubhugreyot'>Copyright 2010 <span class='esm4'>gubhugreyot.blogspot.com</span> - All rights reserved</div>
</div>

• Silahkan anda rubah teks berwarna merah untuk menampilkan teks dalam bentuk berbeda.
• Teks cheahabBlog berwarna merah menggunakan font yang cukup besar (font-size: 100px;). Jika ingin menuliskan nama blog atau nama yang lain dengan teks cukup panjang, Anda 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!
  
• Mohon teks yang lain yang di bagian terbawah (Copyright 2010, gubhugreyot.blogspot.com dan All rights reserved) untuk tidak dihapus. Terus terang membuat desain Energy Saving Mode dengan CSS3 ini cukup menyita waktu! (Atas kesediaan Anda, sebelumnya saya mengucapkan banyak terima kasih!).
• dan traaaaaaaaaaaadaaaaaaaaaaaaaaaa..... Energi saving mode ala reyot terpasang di blog anda . eeehhh blooonn, save dulu dengan meng klik tanda save TEMPLATE. hehhehe

Source

Artikel Terkait