Powered by Blogger.

Membuat Tampilan Maintenance Mode Dengan CSS

Posted by blog loker

Saya pernah melihat sebuah blog atau website yang sedang memperbaiki tampilan atau struktur dari template tersebut, hal hasil tampilan web/blog tersebut menjadi acak-acakan tanpa teratur. Maka dari itu saya akan membagikan cara membuat tampilan website/blog menjadi maintenance mode.

Baca juga : Cara Membuat Text Warna Menjadi Gradient Dengan CSS

Ada baiknya bila Anda sedang memperbaiki atau menambah beberapa fitur pada disain atau tampilan web Anda, Anda mengubah tampilan web Anda dengan mode maintenance, karna dapat berdampak buruk untuk Anda. Karna jika ada seseorang pengunjung dan Anda sedang memperbaiki blog Anda pada saat itu, otomatis tampilan blog tidak terartur, dan pengunjung tidak akan bertahan lama di blog Anda. Tutorial ini saya dapatkan dari sebuah blog yang membagikan tentang tutorial yaitu Kompi Ajaib.

Membuat Mode Maintenance Mode Dengan CSS

  1. Silakan Login ke Blogger
  2. Pilih Tema > Edit HTML
  3. Silakan Anda cari kode </head> atau head/ atau yang lainnya
  4. Dan taruh kode di bawah ini tepat di atas kode tersebut.
<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>

Anda bisa juga mengganti tampilan gambar, ganti tulisan yang di warnai dengan url gambar selera Anda.

Dan jika Anda sudah melakukan modifikasi pada web/blog Anda, silakan Anda hapus kode tersebut dari template Anda, maka otomatis kode tersebut akan hilang :D.

Related Post



Post a Comment