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 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..
sumber : http://www.ficripebriyana.com/2014/06/cara-membuat-energy-saving-mode-dengan-css.html
Terima kasih sudah berkunjung dan membaca artikel mengenai Cara Membuat Energy Saving Mode Dengan CSS di Blog jika sobat ingin menyebar luaskan artikel ini di mohon untuk mencantumkan Link Sumbernya, Terima Kasih atas kerjasamanya ^_^
✚
Blogger
Google+
Facebook
Twitter