www.domainesia.com

Cara Membuat Energy Saving Mode Dengan CSS di Blog

Cara Membuat Energy Saving Mode Dengan CSS di Blog
Cara Membuat Energy Saving Mode Dengan CSS di Blog - Energy saving mode di blog sama saja seperti layar screen komputer ketika tidak bekerja atau sedang didiamkan dan akan muncul sebuah animasi atau gambar, sama halnya pada blog energy saving mode pada blog ini sama seperti pada komputer yang jika didiamkan akan muncul sebuah gambar, namun energy saving mode di blog ini akan muncul sebuah nama blog atau tulisan lainnya yang bisa Anda sesuaikan sendiri. Memasang energy saving mode memang tidak terlalu penting untuk blog, tetapi jika memasang energy saving mode di blog akan lebih bagus lagi, khususnya bagi Anda yang ingin mempercantik tampilan blog Anda dengan menambahkan energy saving mode pada blog Anda.

Energy saving mode kali ini hanya menggunakan sebuah CSS tanpa menggunakan javascript, jadi bagi Anda yang khawatir dengan loading blog yang lama jika menambahkan energy saving mode pada blog Anda, dengan menggunakan css tidak akan ada pengaruh terhadap loading blog Anda, berbeda jika menggunakan energy saving mode yang dibuat dengan javascript yang dapat menyebabkan loading blog Anda lama. Energy saving mode dengan css yang akan di bagikan pada blog Ficri Pebriyana ini adalah dari blognya mas +Oktri Darmadi, saya ucapkan terimakasih karena telah berbagi bersama kami semua.

Energy saving mode menggunakan css ini sudah sedikit saya modifikasi namun fungsinya masih sama dengan sebelumnya, disini saya telah mengompress css tersebut sehingga menjadi lebih ringan namun saya akan menerapkan semuanya baik yang sudah maupun yang belum di kompress, tetapi keduanya masih sama fungsinya. Langsung saja bagi Anda yang ingin membuat energy saving mode tanpa javascript silahkan baca tutorialnya dibawah ini :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy salah satu kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>
CSS Compress :
body::before,body::after{position:absolute;position:fixed;content:"";background:#000;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;z-index:99999}body::before{border:10px solid #ccc;border-left:none;top:0;left:50%;right:0;bottom:0}body::after{top:0;left:0;border:10px solid #ccc;border-right:none;right:50%;bottom:0}body:hover::before{left:100%}body span.energyatas{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 -1px;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body span.energybawah{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 0;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover::after{right:100%}body:hover::before,body:hover::after{visibility:hidden}body:hover span.energyatas{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0}body:hover span.energybawah{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:100%}body span.energy{width:35%;border-bottom:5px solid #ccc;border-top:5px solid #ccc;padding:10px;background:#000;border-radius:20px;font-size:20px;color:#fff;text-align:center;position:absolute;position:fixed;left:32%;right:45%;top:40%;bottom:45%;margin:0 0 0 0;z-index:123455543123445556888;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover span.energy{visibility:hidden;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;-webkit-transition:all .7s ease-out;transition:all .7s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;right:0;z-index:99999999}

CSS Beautify :
body::before,
body::after {
  position:absolute;
  position:fixed;
  content:"";
  background:#000;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
  z-index:99999;
}
body::before {
  border:10px solid #ccc;
  border-left:none;
  top:0;
  left:50%;
  right:0;
  bottom:0;
}
body::after {
  top:0;
  left:0;
  border:10px solid #ccc;
  border-right:none;
  right:50%;
  bottom:0;
}
body:hover::before {
  left:100%;
}
body span.energyatas {
  position:absolute;
  position:fixed;
  right:0;
  left:0;
  top:46.5%;
  border:5px solid #ccc;
  margin:0 0 0 -1px;
  z-index:999999;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -webkit-transition:all 3s ease-in;
  transition:all 3s ease-in;
  -moz-box-shadow:0 0 20px 3px #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body span.energybawah {
  position:absolute;
  position:fixed;
  right:0;
  left:0;
  top:46.5%;
  border:5px solid #ccc;
  margin:0 0 0 0;
  z-index:999999;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -webkit-transition:all 3s ease-in;
  transition:all 3s ease-in;
  -moz-box-shadow:0 0 20px 3px #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body:hover::after {
  right:100%;
}
body:hover::before,
body:hover::after {
  visibility:hidden;
}
body:hover span.energyatas {
  visibility:hidden;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  -webkit-transition:all .2s ease-out;
  transition:all .2s ease-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  top:0;
}
body:hover span.energybawah {
  visibility:hidden;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  -webkit-transition:all .2s ease-out;
  transition:all .2s ease-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  top:100%;
}
body span.energy {
  width:35%;
  border-bottom:5px solid #ccc;
  border-top:5px solid #ccc;
  padding:10px;
  background:#000;
  border-radius:20px;
  font-size:20px;
  color:#fff;
  text-align:center;
  position:absolute;
  position:fixed;
  left:32%;
  right:45%;
  top:40%;
  bottom:45%;
  margin:0 0 0 0;
  z-index:123455543123445556888;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -webkit-transition:all 3s ease-in;
  transition:all 3s ease-in;
  -moz-box-shadow:0 0 20px 3px #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body:hover span.energy {
  visibility:hidden;
  -moz-transition:all .7s ease-out;
  -o-transition:all .7s ease-out;
  -webkit-transition:all .7s ease-out;
  transition:all .7s ease-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  right:0;
  z-index:99999999;
}
Catatan :
- Kode CSS diatas sama saja fungsinya, hanya saja yang compress lebih padat, sedangkan yang beautify lebih cantik sehingga mudah untuk di edit.
- Untuk mengganti warna silahkan silahkan cari kode warnanya disini Kode Warna HTML.

5. Cari kode <body>
6. Copy kode html dibawah ini, lalu Paste dibawah kode <body>
<span class='energyatas'></span>
<span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>
<span class='energybawah'></span>
Catatan :
<data:blog.title/> merupakan nama blog Anda, jika ingin menggantinya silahkan dengan text biasa.

7. Klik Simpan Template

Sekian artikel mengenai Cara Membuat Energy Saving Mode Dengan CSS di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

29 Komentar untuk "Cara Membuat Energy Saving Mode Dengan CSS di Blog"

  1. wah, hanya terbuka jika halaman disentuh kursor, bagus bagus :)

    BalasHapus
  2. Balasan
    1. yaelah itu kan udah di kasih tau,
      kalau menggunakan css gak bakal ngeberatin loading, kecuali kalau pakai javascript baru berpengaruh ke loading blog

      Hapus
  3. Hihihi.. Sempat kaget Bang, waktu kebuka.. Wwkwkwk.. :D

    Bagus nih CSSnya, izin praktek ya.. ^^

    BalasHapus
    Balasan
    1. haha, iya...
      soalnya pas kebuka langsung item ya :D

      Hapus
  4. Saya kira cuma nyimak aja mas soal saya ndak kepingin cara ini, karena saya tak suka aneh aneh hehehehehe tapi menarik kok mas efek ini .

    BalasHapus
    Balasan
    1. ya itu sih terserah sob,
      ini ilmu yang saya dapat pasti di share di blog ini...

      Hapus
    2. saya dukung bos, apapun yang sibos share selama nggak melanggar apapun, saya selalu dukung, lanjutkan bos...

      Hapus
    3. wkwkw, maklumlah blog tutorial :D

      Hapus
  5. wah... menarik juga nih buat saya praktekan, apalagi pakai css yang nggak begitu ngaruh dengan loading... ijin kopi kode dan mempraktekannya yia bos...

    BalasHapus
  6. wahh dapet ilmu ngeblog lagi nih dari agan, boleh di coba sama blog ane yang satu lagi hehehe

    BalasHapus
    Balasan
    1. ya semoga ilmunya bermanfaat, silahkan di coba...

      Hapus
  7. oke sama-sama, semoga bermanfaat...

    BalasHapus
  8. Aku pernah mampir ke blog yang ada energy saving modenya. Ternyata ada cara bikinnya, ya :)

    BalasHapus
  9. sangat menarik mas Ficri, anggap saja penambahan kode tersebut bisa kita jadikan ibarat pintu masuk rumah ya mas, karena setelah di scroll halaman baru akan terbuka

    BalasHapus
  10. Balasan
    1. kalau gak ada kode <body> coba carinya satu-satu dari depan, contoh :
      <body

      Hapus
  11. Terima Kasih udah bersasih terapkan di blog saya

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. keren kang ficri..ijin nyoba yah

    BalasHapus
  14. bagus banget sob .. thank you

    BalasHapus
  15. caranya supaya tidak langsung muncul gimana ya gan, misalnya tunggu setiap 1 menit gitu, mohon solusinya :D

    BalasHapus
  16. wah, cocok nih mas, buat efek loading juga bisa :D thanks ya

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting