Cara Membuat Maintenance Mode Sederhana Dengan CSS Saja

Ada beberapa alasan sesorang menggunakan maintenance mode pada blognya seperti blog sedang diperbaiki tampilannya atau mungkin sengaja ditutup sementara akses ke blognya karena alasan lainnya.

Jika blog sedang diperbaiki, kemungkinan tampilan blog sedang acak-acakan. Oleh karena itu maintenance mode diperlukan di sini sehingga pengunjung tidak bisa melihat tampilan yang sedang acak-acakan.

Di siang hari maintenance mode diaktifkan karena sebagian banyak orang beraktifitas di siang hari. Kemudian di saat malam hari ketika sebagian banyak orang tidur, kita buka maintenance mode-nya untuk meneruskan perbaikan blognya sehingga tidak banyak orang yang akan melihat tampilan yang sedang diperbaiki.

Nah kita bisa membuat maintenance mode yang sederhana dengan hanya menggunakan CSS saja seperti pada demo berikut.


Jika Anda ingin mencobanya, silahkan simpan style CSS berikut di atas kode </head>


<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://2.bp.blogspot.com/-7xbzasXFR50/Wa43L1IIFAI/AAAAAAAAskE/JKR51NgBl_EIuoZJylbY3QqhQv03tR2LwCLcBGAs/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>

Nah jika Anda ingin melanjutkan modifikasi pada blognya silahkan hapus dulu kode style tadi. Kemudian jika modifikasinya belum selesai silahkan pasang lagi style di atas untuk kemudian dihapus lagi jika ingin melanjutkan modifikasinya lagi. Begitu seterusnya sampai selesai modifikasinya.


Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser