Cara Membuat Energy Saving Mode di Blog

Siang sob, pada pertemuan kali ini saya akan share lagi tentang Cara Membuat Energy Saving Mode di blog, namun kali ini efek yang diberikan berbeda dari postingan sebelumnya. Yuk kita coba. Ikuti langkahnya berikut ini :

1. Masuk ke Blogger.com
2. Klik Template >> Edit HTML
3. Cari kode ]]></b:skin>
4. Copy salah satu kode css di bawah ini, dan letakan di atas ]]></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;
}

Catatan :
- Kode CSS di atas dapat Anda Edit sesuai kehendak Anda.

5. Cari kode <body>
6. Copy kode html dibawah ini, lalu Paste di bawah kode <body>

<data:blog.title/> Gunakan Scroll Mouse/Keyboard Untuk Menggulir Halaman

Catatan :
<data:blog.title/> dan kode berwarna Ungu, merupakan nama blog dan Teks yang akan di tampilkan, Anda bisa menggantinya sesuai kehendak.

7. Klik Simpan Template

About IBNU MUBAROK

Terima Kasih Sudah Membaca Artikel Yang Berjudul Cara Membuat Energy Saving Mode di Blog . Jika Ingin Copas, Mohon Sertakan Link Sebagai Sumbernya. Semoga Bermanfaat.

Belajar Dasar SEO dan Blogging

Cara Membuat Energy Saving Mode di Blog

About IBNU MUBAROK

Related Post