Jumat, 08 September 2017

Cara Membuat Maintenance Mode Sederhana With CSS


Cara Membuat Maintenance Mode Sederhana With CSS

Membuat Maintenance Mode With CSS - Halo guys bertemu lagi dengan writer tercakep di blog Kang Karding. Pada kesempatan kali ini saya akan berbagi tutorial tentang Cara Membuat Maintenance Mode yang begitu sederhana.

Bermacam alasan seseorang untuk menggunakan maintenance mode pada blognya yakni blog sedang diperbaiki designnya atau mungkin saja sengaja ditutup untuk sementara akses ke blognya karena alasan tertentu.

Apabila blog sedang melakukan perbaikan, kemungkinan tampilan blognya masih acak-acakan. Maka dari itu maintenance mode sangat diperlukan sehingga pengunjung blog tidak bisa melihat tampilan yang masih berantakan.

Kebanyakan orang mengaktifkan maintenance mode pada siang hari dikarenakan banyak orang yang sedang sibuk-sibuknya beraktifitas. Lalu ketika malam hari kebanyakan manusia di bumi ini melakukan istirahat, inilah saat yang tepat untuk menonaktifkan maintenance mode agar melanjutkan perbaikan pada blog.

Gampangnya lagi, kita bisa membuat maintenance mode yang sederhana hanya dengan menggunakan CSS saja seperti pada demo di bawah ini.

Cara Membuat Maintenance Mode Sederhana With CSS


Copy paste kode css di bawah ini tepat di atas kode </head>

html:after {
  content: &quot;&quot;;
  background: #fff url(http://vignette1.wikia.nocookie.net/clashofclans/images/3/3f/Under-maintenance.gif/revision/latest?cb=20130217055941) 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;
  }
}


Lalu Simpan Tema.

Apabila kamu ingin melanjutkan perbaikan di blognya silahkan hapus terlebih dulu kode style di atas. Jika perbaikannya belum juga kelar silahkan pasang kembali style di atas untuk kemudian dihapus lagi jika ingin melanjutkan modifikasinya lagi. Begitu selanjutnya hingga fix modifikasinya.


Demikian artikel ini tentang Cara Membuat Maintenance Mode Sederhana With CSS, semoga bermanfaat


Sumber: http://www.kompiajaib.com/2017/09/cara-membuat-maintenance-mode-sederhana.html

loading...


EmoticonEmoticon