Cara Menciptakan Maintenance Mode Sederhana Dengan Css Saja

Ada beberapa alasan sesorang memakai maintenance mode pada blognya menyerupai blog sedang diperbaiki tampilannya atau mungkin sengaja ditutup sementara terusan ke blognya alasannya yaitu alasan lainnya.

Jika blog sedang diperbaiki, kemungkinan tampilan blog sedang acak-acakan. Oleh alasannya yaitu itu maintenance mode dibutuhkan di sini sehingga pengunjung tidak dapat melihat tampilan yang sedang acak-acakan.

Di siang hari maintenance mode diaktifkan alasannya yaitu sebagian banyak orang beraktifitas di siang hari. Kemudian di ketika 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 dapat menciptakan maintenance mode yang sederhana dengan hanya memakai CSS saja menyerupai pada demo berikut.

DEMO

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

 <style type='text/css'>
 /*<![CDATA[*/
 html:after {
   content: "";
   background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJSCfvF4qvL64tamgbpsx_qP78PzJmGLs2W4cIXhx1b5dgAEJ9hxje_39WhXe9rJi9bSZ1WGROLW35-VeG4tjzyEg5KioWfXy7E1dfCOS04ZgeEjQsNFDHNGSmY-5Il8OZxJgyh6aR0p9S/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 kalau Anda ingin melanjutkan modifikasi pada blognya silahkan hapus dulu isyarat style tadi. Kemudian kalau modifikasinya belum final silahkan pasang lagi style di atas untuk lalu dihapus lagi kalau ingin melanjutkan modifikasinya lagi. Begitu seterusnya hingga final modifikasinya.



Sumber https://www.kompiajaib.com/

Share this post