Cara Membuat Tampilan Maintenance Dengan CSS di Blog

Cara Membuat Tampilan Maintenance Dengan CSS di Blog - Kali ini admin akan berbagi mengenai bagaimana cara membuat tampilan maintenance pada blog kalian masing-masing. Maintenance ini biasanya digunakan untuk blog yang sedang memperbaiki template atau memang ingin menutup akses blognya.

Jika blog sedang diperbaiki ada kemungkinan tampilan blog akan acak-acakan. Oleh karena itu, mode maintenance pada blog sangat perlu agar pengunjung tidak melihat tampilan yang acak-acakan, dan blog kalian termasuk kalian juga akan terlihat lebih professional mengatur blog.

Ada baiknya kalian mengaktifkan mode ini pada pagi - siang hari, mengapa? dikarenakan pagi - siang hari aktifitas internet sangat banyak. Sedangakn untuk malam hari kalian bisa menonaktifkan mode maintenance untuk mengedit ulang tampilan blog kalian. Jika tetap menggunakan mode maintenance kalian tidak akan bisa melihat perubahan tampilan blog yang sedang kalian perbaiki.

Nah, disini saya akan memberikan kode CSS untuk membuat mode maintenance, untuk demo nya silahkan kalian klik tombol dibawah ini!

Preview

Jika kalian ingin mencobanya silahkan ikuti tutorial singkatnya dibawah ini!

Cara Penerapan

1. Login ke akun Blogger kalian, lalu masuk ke Dasbord blog yang akan dieksekusi.
2. Silahkan lanjutkan untuk menuju ke Template > Edit HTML
3. Cari kode </head> dengan cara CTRL+F untuk memudahkan kalian mencari kode tersebut.
4. Copy kode dibawah ini dan letakkan sebelum kode </head> tadi.

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6VFC0Ee6_nPiRHrqrxbJiCAENDRk6tTNigwuD9q35eqAAurxrtyrcFrElN47JE8uWyjvxlo6roRE8vSHFOtJXr7-wsm0rjW68ZZN4uk-AkXO7XahHSqFy25rW0peGCxMLrmg3jGlHPNY3/s1600/maintainance.jpg) no-repeat;
  background-size: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-position: center;
}
body {
  display:none;
}
@media screen and (max-width:800px) {
  html:after {
    background-size: contain;
  }
}
/*]]>*/
</style>

5. Simpan

Jika kalian ingin melanjutkan memodifikasi template kalian, silahkan hapus terlebih dahulu kode CSS diatas! agar kalian bisa melihat perubahan yang kalian terapkan.

Mungkin sekian dulu artikel pendek dari Cara Membuat Tampilan Maintenance Dengan CSS di Blog, Jika bermanfaat silahkan share dan berikan kami support kalian dengan cara klik iklan blog ini seikhlasnya.
Terima Kasih