» » » » Cara Membuat Energy Saving Mode Keren Di Blog

2:25 AM 16 , ,
A+ A-
Cara Membuat Energy Saving Mode Keren Di Blog - Udah beberapa hari ini saya tidak posting tutorial blogger pemula. Dan di sore yang hujan cukup deras untuk wilayah Surabaya ini, saya akan post tutorial lagi yang kemungkinan besar jarang dipakai oleh para blogger atau pembangun blog. Tutorial yang saya maksudkan adalah Cara Membuat Energy Saving Mode Di Blog.


Cara Membuat Energy Saving Mode Keren Di Blog

Pasti, diantara sobat saya yang setia membaca artikel blog sederhana saya tidak mengerti untuk maksud dari tutorial ini. Karena memang jarang dipakai oleh para blogger. Untuk itu, sebelum saya memberi tutorial cara membuat energy saving mode di blog, saya akan jelaskan apa maksud dari tutorial dan kegunaannya.

Energy menurut kamus besar bahasa Inggris dapat diartikan dengan energi, daya, atau kekuatan. Saving artinya menyimpan. Sedangkan mode adalah mode atau cara. Energy=daya, saving=menyimpan, mode=cara. Jadi, arti dari kata Energy saving mode adalah Cara untuk menyimpan daya di blog.

Entah apa maksud lebih detail dari kalimat tersebut. Karena tutorial cara memasang energy saving mode di blog ini hanya lah sebuah tampilan, bukan berarti benar-benar blog nya menyimpan daya atau kekuatan.

Dan tampilan energy saving mode akan muncul, ketika pengunjung sobat pergi atau meninggalkan blog sobat. Misalnya pengunjung sobat membuka tab lain atau membuka window lain, maka tampilan energy saving mode akan muncul.

Untuk lebih jelasnya lagi, sobat bisa mencoba tutorial ini. Dan saya akan beri bebarapa cara memasang energy saving mode di blog. Sobat bisa pilih salah satu diantara pilihan cara yang saya berikan.

Cara Membuat Energy Saving Mode Dengan Gambar Sendiri

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode
 </head> 
(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </head>
<script language='javascript' src='http://infoikiblog.googlecode.com/files/Energy%20Saving%20Mode%20%5BINFOIKI%5D.txt' type='text/javascript'></script>
6. Simpan Template
Setelah itu masih ada langkah selanjutnya
7. Tata letak/layout
8. Tambahkan gadget/add gadget
9. HTML/JavaScript
10. Copy kemudian paste kode dibawah ini pada kolom HTML/JavaScript
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(URL gambar energy saving mode) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>
11. Simpan

Cara Membuat Energy Saving Mode Dalam Bahasa Indonesia

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode
 </head> 
(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </head>
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id'
type='text/javascript'/>
<script>jQuery.noConflict();</script>
6. Simpan

Cara Membuat Energy Saving Mode Dalam Bahasa Inggris

Cara Membuat Energy Saving Mode Dalam Bahasa Indonesia
1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode
 </head> 
(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </head>
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=30'
type='text/javascript'/>
<script>jQuery.noConflict();</script>
6. Simpan

Cara Membuat Energy Saving Mode Dengan CSS

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode
 ]]></b:skin> 
(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode ]]></b:skin>
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;
}
*Keterangan: sobat bisa mengubah sendiri warna nya sesuai dengan keinginan. Untuk mengetahui kode warna, silahkan klik KODE WARNA
6. Cari lagi kode 
</body> 
7. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat 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>
*Keterangan: kode <data:blog.title/> dapat diubah dengan keinginan sobat. Kode tersebut menunjukkan nama blog sobat. Sobat bisa mengganti dengan nama biasa.


Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ




Judul Cara Membuat Energy Saving Mode Keren Di Blog
Deskripsi
Cara membuat energy saving mode di blog dapat memberi tampilan hemat energi blog Anda.
Author
Author Rating
87%/ 100% Suara Dari 1297 votes

Share to:

Post a Comment

  1. AnonymousFebruary 2, 2015 at 3:00 AM

    Keren sih. Tapi kesannya kayak gak guna gitu.... malah ngrepotin pengunjung

    ReplyDelete
  2. UnknownFebruary 2, 2015 at 3:54 AM

    Setuju ama yg diatas gan !! ^ tapi keren kok gan artikelnya :)
    by : Zone-Unix

    ReplyDelete
  3. GestinaPratiwiFebruary 2, 2015 at 4:24 AM

    sip artikelnya

    ReplyDelete
  4. UnknownFebruary 2, 2015 at 4:51 AM

    manteps gan tutornya.. :D

    ReplyDelete
  5. Muhammad Adam Hussein, S.PdFebruary 2, 2015 at 6:26 AM

    Pas 2011, saya menggunakannya tapi dirasa melambat loading sebaliknya, sayapun mencabutnya dari blog.

    Tapi makasih tutornya.

    ReplyDelete
  6. UnknownFebruary 2, 2015 at 10:44 AM

    Muantebbb agannn

    ReplyDelete
  7. UnknownFebruary 2, 2015 at 10:54 AM

    Ijin sedot gan..

    ReplyDelete
  8. Tempat Download Software GratisFebruary 2, 2015 at 10:56 AM

    baru tau saya kang, ternyata begini ya cara nya :D
    thanks kang..

    by : herman z

    ReplyDelete
  9. DickyFebruary 2, 2015 at 5:07 PM

    makasih nih infonya

    ReplyDelete
  10. UnknownFebruary 2, 2015 at 5:10 PM

    pernah coba dulu ini tp ya kurang cocok di blog saya

    ReplyDelete
  11. Rumpi OnlineFebruary 2, 2015 at 9:34 PM

    wah sayang bgt ga pantes buat web saya :(
    nice post gan, bookmark dulu dah :D

    ReplyDelete
  12. Pulo BlogFebruary 2, 2015 at 10:26 PM

    wah jadi keren gitu gan hasilnya? bisa dicoba nih triknya :D hehe mantap..

    Jika berkenan, silahkan mampir ke blog sederhana ini http://puloblog.blogspot.com

    ReplyDelete
  13. UnknownFebruary 3, 2015 at 3:29 AM

    wah mantap gan tutornya.
    lain kali izin coba

    ReplyDelete
  14. UnknownFebruary 3, 2015 at 3:37 AM

    nice post gan !

    ReplyDelete
  15. UnknownFebruary 3, 2015 at 3:46 AM

    boleh dicoba gan..
    tapi kalau bisa yang aslinya lah gan

    ReplyDelete
  16. Slashky GitarisFebruary 5, 2015 at 4:15 AM

    Kayaknya keren ni buat blog ku yang satunya lagi.hehehe

    ReplyDelete

Subscribe to: Post Comments (Atom)
 
Tutorial Blog Unik © 2013. All Rights Reserved.
Tutorial Blogger dan Trik Dasar PhotoShop
Top