Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat: How to Create Energy Saving Mode using CSS3 (di blog)

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 sampeyan? Silahkan lihat demo-nya dengan klik link DEMO di bawah ini.

Keterangan sebelum lihat demo!

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

Perbandingan Energy Saving Mode Menggunakan JQuery dan CSS3


Energy Saving Mode Menggunakan jQuery.1.3.2.min.js
  • Kode yang digunakan: Javascipt: 2 kbyte, jquery.1.3.2.min.js: 56 kbyte, kode CSS: 1 kbyte
  • 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!).
  • Energy Saving Mode bekerja saat pengunjung meninggalkan blog/web selama durasi yang ditentukan (10000s dan bisa diatur durasinya).
  • Menggunakan animasi gerak dan opacity.
  • Harus memanfaatkan file Hosting (javascript dan jQuery.1.3.2.min.js).
  • Efek penggunaan Energy Saving Mode hanya terlihat di halaman blog.
  • Bekerja dengan sempurna di semua browser meskipun bentuk animasi terjadi pergeseran tempat (saat mulai aktif).

Energy Saving Mode Menggunakan CSS3
  • Kode yang digunakan: Kode CSS: 4 kbyte (super irit).
  • 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..
  • Menggunakan animasi gerak dan opacity dan beberapa efek lain seperti background color.
  • Tidak perlu diupload di file Hosting (langsung simpan di template alias praktis).
  • 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!).
  • 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 sampeyan 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;
}

  • Deasin Energy Saving Mode sekaligus menyertakan animasi pada navbar. Jika sampeyan 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 sampeyan tidak percaya!
  • Jika sampeyan 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'>gubhug reyot<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 oranye untuk menampilkan teks dalam bentuk berbeda.
  • Teks "gubhug reyot berwarna oranye 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!
  • 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 sampeyan, sebelumnya aku mengucapkan banyak terima kasih!).

Cara Menggunakan Kode Energy Saving Mode dengan CSS3


  • 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 di atasnya!
  • Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!
  • Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dan letakkan di bawah kode <body>.
  • SAVE Templates/Simpan Template : KLIK SAVE Templates.
  • 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. Rubah angka berwarna merah dengan perbandingan yang sama ( -4s dan +2s).
  • Jika navbar digunakan, sampeyan juga harus mengganti angka yang berwarna merah 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!


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «


23 komentar:

  1. top... thanks tutorialnya...

    BalasHapus
  2. aduh sob ane dah nyoba berkali kali ampe sedikit frustasi tapi ga jadi2. malah kode xml yang buat di bawah body tampil ditemplate.....mohon solusinya ....

    BalasHapus
  3. pro: Safano (ano)
    Blog sampeyan memang tidak bisa dipasang Energy Saving Mode CSS3. Coba pakai yang menggunakan jQuery.1.3.2.js (posting sebelumnya). Sepertinya ada sebuah widget yang membuat kegagalan kerja pada ESM CSS3.

    Salam ....

    gubhug reyot

    BalasHapus
  4. thanks banyak buat infonya....boleh nanya ga sob...gmn caranya supaya di blog ane bisa ada kotak buat commentnya..... padahal di pengaturannya dah ane aktifin....anehnya klo pake template yang lain ada tuh kotak buat commentnya... ane mo ganti template sayang coz ane dah suka ma template ntu...harap info dan kunjungannya....matur suwun and salam blogger

    BalasHapus
  5. thk yo mas..., tp biar tulisan this image or video has been ilang diapain ya???

    BalasHapus
  6. 1. "this image or video has been" ini di posting yg mana, ya?
    2. GR Ngeblog mulai bulan Sept 2009
    3. m'ksh buat JOY, ZORO n smua sobat blogger
    4. Gambar melayang bisa di "close" sabar sebentar
    5.Ngebagusin blog: ikuti setiap tutorial dan di jamin bisa melakukan banyak modifikasi sendiri dengan sgala bentuk kreatifitas yg berkembang scr alami!
    6. kyuutaroº : bonusb buat sampeyan yang "tak pegal di tangan" berupa posting ttg mengatur jarak antar komentar.
    7. Yoni Ahmad : m ksh dah link GR. Aku akan berusaha buat link tuk sampeyan & yg lain. Sdg kupikir spy blog tidak terlalu brt. Maklum aku pakai modem murah asal ngeblog lancar!
    8. Arief Munandarr: posting tentang apa &dibuat di blog yg mana. Tlg ksh alamat-nya e ... moga-moga bisa berkunjung sekalian cek!

    BalasHapus
  7. Om... cara ngatur kecp kluarny energy saving mode gmna??? mohon bantuannya...

    BalasHapus
  8. binung! kalo bikin sendiri gimana caranya?

    BalasHapus
  9. bang say udah pasang energy saving mood, tapi framenya gak bisa ketutup semuanya.....saya sangat berteima kasih sekali kalau abang bisa mampir ke blog dan memberikan masukan...makasih bang. saya tunggu kedatangannya...mehesa

    BalasHapus
  10. akhirnya saya pasang saving moodnya dari green websites aja bang...hehehee tapi makasih atas ilmunya

    BalasHapus
  11. OM, Saya pengen atur durasinya.
    Tapi disitu atur kode yang warna merah. Tapi aku bingung kode yang warna merah itu yang mana, disitu ga ada kode warna merah.

    BalasHapus
  12. ass..
    saya tersesat di blog yg cukup hebat

    trimakasih buat tutorialnya mas

    matur nuwun sanget lho....

    BalasHapus
  13. cukup keren n mantap di pandang om...tutorialnya cukup bagus n tak bosen2 saya belajar dari blognya om,! minta izin tuk memahami kata2 buat menerapkannya di blog saya om...! maklum om, sy masih awam/pemula dlm dunia Bloger dan Belajar dng cara otodidak....siip....ditunggu terus postingan terbarunya om....!

    BalasHapus
  14. bekerja dengan sempurna ....!!!makasih bang semua tutorial nya keren di tunggu di blog ku http://kangmahfid.blogspot.com kritikan abang sengat aku tunggu

    BalasHapus
  15. aduuhh bang,
    dah ada yang copas artikel ini bang dan mengaku milik dia
    ini website nya
    http://tejahtc.blogspot.com

    kesal aku lihatnya bg

    BalasHapus
  16. siiiiiiiiiiiiiiipppp terima kasih

    BalasHapus
  17. dari dulu kek wa nemuin nih blog...telat wa...keren sob...

    BalasHapus
  18. Info yang sangat menarik... Bekerja baik diblog saya... Sayangnya pada saat Energy Saving, Blog yang pake Featured Post Slider, Energy Saving Screennya tertutupi oleh Slide tsb... Mohon Solusinya Pak... Thanks :)

    BalasHapus
  19. Pro : Shareiouz

    Rubah z-index: 1; jadi
    z-index:9999999; pd syntax

    body .bgsGR_esm {
    ....
    ....
    z-index: 1;
    ....
    }

    Salam ....

    gubhugreyot

    BalasHapus
  20. Waahhh... Terima Kasih Banyak Pak... :)
    Problem Solved... Salute buat kejeniusan Pak Urip :) (Maaf kalo salah nama, tadi liatnya dari profil :))

    BalasHapus
  21. Heheehee.. Salah yahh Pak,Maaf saya bukan orang Jawa, jadi tadi sekilas saya gak ngerti :)

    BalasHapus
  22. aduuuh kk pada ribet+gak ngerti Dan aku sarankan agar terdapat Contoh yang Sudah Jadinya Kayak Mana..

    BalasHapus

 
GR | Edited by | gubhug reyot