Cara Memasang Energy Saving Mode CSS3 dengan Kode CSS3

Pada halaman posting yang ini Education For All, akan posting artikel tentang Cara Memasang Energy Saving Mode CSS3 dengan Kode CSS3.Energy Saving mode yang dibuat menggunakan css3 ini mempunyai kode sekaligus efek lebih sederhana, nah bila sobat blogger mania berminat untuk membuatnya silahkan ikuti saja langkah langkah dibawah ini, Energy saving barang kali perlu dipasang pada blog sobat blogger mania, untuk emlindungi blog sobat blogger mania dari panas dan hujan, termasuk badai dan ntusnami hee..he..he...selain itu mungkin juga bisa memperindah blog. Banyak sekali pertanyaan dari sobat blogger mania, berat nggak? loadingnya. dijamin tidak. Nah sebelum mempraktekanya alangkah lebih baiknya kalau melihat D E M O dibawah ini,

D E M O

Cara Memasang Energy Saving Mode CSS3

1. Login ke Blogger.
2. Halaman Dasbor/Dasboard : Klik "Rancangan/Design".
3. Klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari Kode ]]></b:skin>
6. Copy kode CSS dibawah ini dan letakkan di atas ]]></b:skin>

Kode CSS

*, body .bgsEFA_esm{
      margin:0;
      padding:0;
}
body .bgsEFA_esm{
      position:fixed;
      width:98%;
      top:0;
      left:0; /* original code by: fajar7siblings.blogspot.com */
      height:97%;
      opacity:.99;
      filter:alpha(opacity=99);
      -ms-filter:alpha(opacity=99);
      background:#000;
      border:10px solid #666;
      border-bottom:30px solid #666;
      z-index:99999999;
      transition:all 6s ease-in-out 60s;
      -o-transition:all 6s ease-in-out 60s;
      -moz-transition:all 6s ease-in-out 60s;
      -webkit-transition:all 6s ease-in-out 60s;
      -ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsEFA_esm{
      border-color:#F00;
      background:#930;
      width:50%;
      height:3%;
      left:25%;
      top:40%; /* original code by: fajar7siblings.blogspot.com */
      transition:3.5s ease-out;
      -o-transition:3.5s ease-out;
      -moz-transition:3.5s ease-out;
      -webkit-transition:3.5s ease-out;
      -ms-transition:3.5s ease-out;
}
body:hover .bgsEFA_esm,body:hover .bgsEFA_esm p.esm1,body:hover .bgsEFA_esm p span.esm2,body:hover .bgsEFA_esm p span.esm3,body:hover .bgsEFA_esm .by_EFA{
      transition:3s;
      -o-transition:3s;
      -moz-transition:3s;
      -webkit-transition:3s;
      -ms-transition:3s;
      z-index:-10;
      opacity:.0;
      filter:alpha(opacity=0);
      -ms-filter:alpha(opacity=0);
}
body .bgsEFA_esm p.esm1{
      margin:0; /* original code by: efa */
      padding:0;
      width:92%;
      height:100%;
      background:transparent;
      font-size:100px;
      font-family:Serif,Times New Roman;
      color:#333;
      text-shadow:1px 1px 2px #ccc;
      position:relative;
      margin-top:200px;
      line-height:20px;
      font-weight:bold;
      text-align:center;
      display:block;
      margin-left:auto;
      margin-right:auto;
}
.bgsEFA_esm p span.esm2{
      font-size:18px;
      opacity:.5;
      filter:alpha(opacity=50);
      -ms-filter:alpha(opacity=50);
      display:block;
      text-align:center;
      margin:-10px auto;
      font-weight:normal;
      padding:2px 8px;
      background:#000;
      border:1px solid #333;
      color:#00f;
      text-shadow:none;
      font-family:Arial,Helvetica,sans-serif;
}
.bgsEFA_esm p span.esm3{
      color:#ccc;
      font-family:Tahoma,Arial,Helvetica;
      display:block;
      margin:10px auto;
      background:#111;
      background:-moz-linear-gradient(top,#111 0,#666 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
      background:-webkit-linear-gradient(top,#111 0,#666 100%);
      background:-o-linear-gradient(top,#111 0,#666 100%);
      background:-ms-linear-gradient(top,#111 0,#666 100%);
      background:linear-gradient(top,#111 0,#666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
      opacity:.6;
      filter:alpha(opacity=60);
      -ms-filter: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;
}
.bgsEFA_esm .by_efa{
      margin-left:30px;
      text-align:left;
      color:#015828;
      font-size:12px;
      font-weight:normal;
      position:absolute;
      top:550px;
      width:100%;
      height:20px;
      left:0;
}
.bgsEFA_esm .by_efa span.esm4{
      color:#aaa;
      font-style:italic;
}

Selanjutnya cari kode seperti dibawah ini:

<body> , atau <body expr:class='"loading" + data:blog.mobileClass'> 

Lalu coppy dan pastekan kode xHTML dibawah ini tepat dibawah kode diatas.

Kode xHTML

<div class='bgsEFA_esm'><p class='esm1'>E F A<br/><span class='esm2'>Energy Saving Friends</span><br/><br/><span class='esm3'>Visit http://fajar7siblings.blogspot.com!<br/>Kunjungi Link di atas untuk mengikuti tutorial menarik lainya!</span></p><div class='by_efa'>Copyright * june 2012 * <span class='esm4'>fajar7siblings.blogspot.com</span> - All rights reserved</div></div>

Untuk mengatur durasi waktu Energy Saving Mode lakukan perubahan nilai (60s) pada syntax body .bgsEFA_esm(kode paling atas!):

all 6s ease-in-out 60s;

nilai 60s; menciptakan durasi 60 detik energy saving secara rutin bekerja menutup layar dengan background hitam. Untuk merubah durasi menjadi 5 menit maka nilai menjadi 5x60 = 300s. Untuk durasi yang berbeda silahkan hitung sendiri.
Ganti Teks E F A yang ber-warna merah dengan nama blog anda atau teks lain.

Selamat Mencob Semoga Berhasil.........

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «