Cara membuat saving mode CSS3 keren dan cantik di blog

Setelah beberapa kali penulis blog walking di tetangga sebelah, akhirnya penulis menemukan artikel menarik berkaitang dengan postingan membuat saving mode dengan CSS3. Dan penulis berinisiatif untuk memposting kembali di blog penulis, maklum saja penulis masih newbie di dunia blogger dan masih dalam tahap belajar.


Hebohnya Energy Saving Mode yang di release 2009 lalu benar-benar membuat banyak blogger penasaran dan tertarik untuk ikut menggunakannya di blog. Bagi beberapa sobat blogger yang sebelumnya telah menggunakan jQuery.1.3.2.js atau jQuery.1.3.2.min.js adalah sebuah keberuntungan karena pemanfaatan jquery.1.3.2.min.js dalam desain energy saving mode sekaligus dapat digunakan untuk meng-cover kebutuhan blog akan jquery.1.3.2.js.

Hal sebaliknya akan terjadi pada blogger yang selama ini blognya sama sekali tidak menggunakan jQuery.1.3.2.min.js atau jquery.1.3.2.js untuk berbagai fungsi/fasilitas blog. Pemaksaan untuk menggunakan Energy Saving Mode justru bukan sebuah tindakan yang menguntungkan sekaligus bukan suatu langkah sebagai cerminan maksud dan tujuan dibuatnya energy saving mode. Ya ..., karena jelas-jelas beban blog akan bertambah dengan sebuah jQuery.1.3.2.min.js. Sekalipun jquery.1.3.2.min.js tidak akan menjadi beban tambahan yang fatal, namun setidaknya beban loading pasti akan cukup meningkat. Diluar hal ini "kemubaziran" akan terjadi. Yah jika memang tak satupun fungsi lain terdukung dengan digunakannya jQuery.1.3.2.min.js yang terdapat di desain Energy Saving Mode, trus apa ya nggak rugi jika jQuery.min.1.3.2.min.js yang jelas-jelas menambah beban dan loading blog ini hanya dimanfaatkan "untuk sekedar bisa menggunakan Energy Saving Mode?"

Menyikapi trend baru yang banyak menghanyutkan "nafsu" dan "keinginan" untuk ikut-ikutan menggunakan Energy Saving Mode tanpa melihat untung ruginya ini (karena bagi yang blognya tidak menggunakan jQuery.1.3.2.min.js jelas bikin kerugian), satu desain menarik Energy Saving Mode yang hanya menggunakan kode CSS telah coba aku buat. Energy Saving Mode hasil produksi anak negeri yang asli dalam negeri ini merupakan wujud kepedulian terhadap sementara blogger yang sebenarnya tidak membutuhkan jQuery.1.3.2.min.js dalam desain blognya, akan tetapi ingin menggunakan dan memasang Energy Saving Mode sebagai upaya mempercantik blog sekaligus untuk ikut mendukung upaya penghematan energy bagi dunia. Jika mungkin sampeyan tertarik dan ingin melihat seperti apa, sih, Energy Saving Mode tanpa jQuery.1.3.2.min.js, cantik atau buruk rupakah dia? Kira-kira cocok atau tidakkah buat blog anda?


Energy Saving Mode Menggunakan jQuery.1.3.2.min.js

1. Kode yang digunakan: Javascipt: 2 kbyte, jquery.1.3.2.min.js: 56 kbyte, kode CSS: 1 kbyte
2. Energy Saving Mode bekerja secara rutin tiap 10000s (bisa di atur). Energy Saving Mode bahkan selalu aktif/bekerja saat pengunjung masih menikmati posting (cenderung mengganggu!).
3. Energy Saving Mode bekerja saat pengunjung meninggalkan blog/web selama durasi yang ditentukan (10000s dan bisa diatur durasinya).
4. Menggunakan animasi gerak dan opacity.
5. Harus memanfaatkan file Hosting (javascript dan jQuery.1.3.2.min.js).
6. Efek penggunaan Energy Saving Mode hanya terlihat di halaman blog.
7. Bekerja dengan sempurna di semua browser meskipun bentuk animasi terjadi pergeseran tempat (saat mulai aktif).

Energy Saving Mode Menggunakan CSS3

1. Kode yang digunakan: Kode CSS: 4 kbyte (super irit).
2. Energy Saving Mode bekerja secara rutin tiap 10s (bisa di atur). Energy Saving Mode Using CSS3 hanya bekerja ketika cursor berada di luar halaman blog. Selama cursor di atas halaman blog maka Energy Saving Mode tidak akan aktif sehingga seluruh aktifitas pengunjung/pembaca tidak akan terganggu..
3. Menggunakan animasi gerak dan opacity dan beberapa efek lain seperti background color.
4. Tidak perlu diupload di file Hosting (langsung simpan di template alias praktis).
5. Efek penggunaan Energy Saving Mode akan terlihat di Halaman Blog dan di Page Elemen/Elemen Laman (tidak mengganggu karena saat Elemen Laman tersentuh cursor maka teks yang tertulis dalam Energy Saving Mode akan terbang melenyapkan diri!).
6. Bekerja dengan baik di semua browser. Animasi hanya bekerja di browser yang mendukung CSS3 (Opera 1063, Mozilla 4 beta 0 ke atas , Google Chrome dan Safari serta beberapa browser lain).
   nb: mulai sekarang gunakan selalu browser yang sudah mendukung CSS3 karena blog menjadi lebih enak untuk dijelajahi dan dinikmati

Dari perbandingan di atas, kiranya anda bisa menentukan sendiri kira-kira lebih nyaman menggunakan yang mana.

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: 99999999;
       -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;
       -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;
       -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;
       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;
       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;
}

1. 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!
2. Jika anda tidak akan menampilkan navbar, silahkan rubah ganti kode 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 CSS pengganti:

 #navbar-iframe {
       display: none;
}

xHTML Energy Saving Mode Using CSS3:

<div class='bgsGR_esm'>
<p class='esm1'>
<b>gubhug reyot</b><br/>
<span class='esm2'><b>Energy Saving Mode Using CSS3</b></span><br/><br/>
<span class='esm3'><b>Move your mouse to go back to the page!</b><br/><b>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</b></span>
</p>
<div class='by_gubhugreyot'>
Copyright 2010 <span class='esm4'>gubhugreyot.blogspot.com</span> - All rights reserved</div>
</div>

1. Silahkan anda rubah teks yang cetak tebal untuk menampilkan teks dalam bentuk berbeda.
2. Teks "gubhug reyot yang cetak tebal menggunakan font yang cukup besar (font-size: 100px;). Jika ingin menuliskan nama blog atau nama yang lain dengan teks cukup panjang, sampeyan 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!

Cara Menggunakan Kode Energy Saving Mode dengan CSS3:

1. Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
2. Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
3. Design/Rancangan : Cari dan klik "Edit HTML".
4. Edit HTML : Amankan template terlebih dahulu (back-up templates).
   • KLIK Download Template Lengkap.
   • Simpan file Template di folder PC.
   • Kembali ke halaman "Edit HTML".
5. Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya!
6. Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!
7. Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dan letakkan di bawah kode <body>.
8. SAVE Templates/Simpan Template : KLIK SAVE Templates.
9. Buka blog untuk melihat hasilnya!

Catatan/Keterangan:

• Untuk membuat layar menjadi gelap penuh saat Energy Saving Mode bekerja, rubahlah nilai opacity: 0.97; dan filter:alpha ... opacity=97, serta -ms-filter: ... opacity=97 menjadi 1.0 dan 100.
• Untuk mengatur durasi bekerjanya "Energy Saving Mode using CSS3, atur nilai pada kode berikut:

 body .bgsGR_esm{
       -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 .bgsGR_esm p.esm1 {
       -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;
}

• Angka 10s merupakan durasi aktifnya Energy Saving Mode. 
• Jika navbar digunakan, anda juga harus mengganti angka juga :

#navbar-iframe {     
-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;
}

• Pengurangan nilai sebesar -4s dan -6s dari durasi aktifnya Energy Saving Mode using CSS3 (10s).

Semoga bermanfaat!

Sumber: http://gubhugreyot.blogspot.com