Membuat Maintenance Mode pada Blog Blogger

Untuk terlihat professional sebuah blog saat sedang diperbaiki/mengedit template baiknya menggunakan tampilan maintenance mode karna saat sedang diperbaiki tampilan blog sedang acak-acakan. Oleh karena itu tampilan maintenance mode diperlukan sehingga pengunjung tidak bisa melihat tampilan yang sedang acak-acakan.

Seperti situs web yang sudah terkenal jika saat sedang perbaikan, upgrade dll maka saat mengunjungi situs web tersebut anda akan di hadapkan pada tampilan yang memberitahukan kepada anda bahwa mereka sedang dalam maintenance mode.

Bagi anda pengguna blogger anda bisa membuat maintenance mode hanya dengan menggunakan CSS pada template blog anda seperti pada demo berikut dibawah ini.

https://jsfiddle.net/rendyruslan/e1fvhkob/embedded/result/

Silahkan simpan salah satu style CSS berikut di atas kode </head>

Maintenance Mode 1

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnwhLznhuTh98_JYftOxP-B9iypqMFzo15_HeFHzDx8sgEuxIvnEb5ShKZWJcKNHDEVTtMS9fDAnhGgdIP9zRpDA5WDKQv66sGnV1J57SmJAxUTV2YQbBgS-dyYZynWzsbR_mHxb5OEjkg/s1600/Maintenance1.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>

Maintenance Mode 2

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQEFcVsIIe-zDLNN49N6lOvX0t3prK9uHVd89sPEFg10aeJG3fencK6G7irlXZMnrMQwDH6cUBazeYPdNJT0ykZOqsGX625ZUZCIR5yXy9A_iOcmut3aq9y8XVxqqkyYLjIoQx379ljWY/s1600/Maintenance2.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>

Maintenance Mode 3

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18A60WLMn9w3gO4kAD9TrdQNQOquj5lBQSHBe6BexcP5PTTc3IZQI0gEzsdtcALhW38AbHjDXziLBghdHea389D5wiMBltFM-tKyskIrc6olHaNijBj9pbTJe3KOW5VqNfq_ZJ93GOw1-/s1600/Maintenance3.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>

Maintenance Mode 4

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-1YDrFJXaMnfp5qbueXuhqYgkCSZDH1Z3diXRA-v5_v8gbipzROLHP707WAY857qaAxQBlNTiMxzCxtiJSEyp7kJmVvxQNIQnw_BR1a0TJyA9SH92coZQzx3sGOycpIQNLjJ2IuXI6ny/s1600/Maintenance4.png) 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>

Catatan: Pada saat mengedit/modifikasi template di blog anda, Silahkan hapus kode style CSS diatas. Kemudian jika modifikasinya masih belum selesai atau masih kurang, error dll silahkan pasang lagi style CSS di atas.

Share this post