Cara Membuat Tampilan Maintenance Mode Blogger

Cara Membuat Tampilan Maintenance Mode Blogger, Mode maintenance ini juga bisa diaktifkan dan di nonaktifkan dengan mudah.

Maintenance Mode atau mode pemeliharaan adalah tampilan dimana berisi informasi bahwa sebuah website atau suatu aplikasi sedang dalam pemeliharaan atau perbaikan fitur atau hal lain.

Info Maintenance Mode sangat bermanfaat diterapkan pada sebuah website yang sedang dalam perbaikan ataupun perubahan, agar pengunjung atau visitor dapat memahami bahwa webste tidak bisa diakses karena dalam maintenance.

Pada artikel ini saya akan berbagi bagaimana cara menerapkan Maintenance Mode blog yang dibuat menggunakan Blogger. Mode maintenance ini juga bisa diaktifkan dan di nonaktifkan dengan mudah.

Table of Contents

Membuat Maintenance Mode di Blogger

Biasanya blog yang dibangun menggunakan wordpress akan secara otomatis menampilkan mode pemeliharaan atau under maintenance jika situs tersebut dalam keadaan perbaikan atau update.

Berbeda dengan platform Blogger, dimana tidak ada halaman atau informasi maintenance mode jika blog sedang dalam perbaikan, untuk itu kita harus membuat sendiri tampilan maintenance blog tersebut.

Untuk Demonya kamu bisa klik tombol dibawah dan untuk tutorial cara membuat maintenance mode di blogger berikut caranya.


Panduan Membuat Maintenance Mode Blogger

  • Langkah #1 : Masuk ke Dasbhoard Akun blogger
  • Langkah #2 : Buka menu Tema > Klik Panah Bawah > Lalu Klik Edit HTML
Maintenance Mode Blogger

Untuk berjaga-jaga agar jika terjadi error, kamu bisa backup terlebih dahulu template blogger dengan cara Klik panah bawah > Cadangkan.

Jika sudah masuk ke tampilan Editor Template, kemudian Copy dan Paste code dibawah ini tepat diatas kode <head> template kamu.

<!--[  Copy Code berikut di Atas <head> ]-->
<b:if cond='data:blog.title == "NamaBlog Maintenance" and !data:view.isPreview and !data:view.isLayoutMode'>
<b:tag name='head'>
<title>Maintenance Potretekno</title>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<link href='//use.fontawesome.com/releases/v5.12.1/css/all.css' rel='stylesheet'/>
<link href='//cdn.inputekno.com/CodeBlog/Under%20Maintenance/under.min.css' rel='stylesheet'/>
</b:tag>
<b:tag name='body'>
<div class='under'>
  <header class='under__content'>
    <h1 class='under__title'>Maintenance!</h1>
    <div class='under__text'>Blog PotreTekno sedang dalam Proses Pemeliharaan, kami akan segera kembali!</div>
  </header>
  <footer class='under__footer'>
    <a href='//facebook.com/#' target='_blank'><i class="fab fa-facebook-f"/></a>
    <a href='//twitter.com/#' target='_blank'><i class="fab fa-twitter"/></a>
    <a href='//github.com/#' target='_blank'><i class="fab fa-github"/></a>
    <a href='//instagram.com/#' target='_blank'><i class="fab fa-instagram"/></a>
    <a href='//youtube.com/#' target='_blank'><i class="fab fa-youtube"/></a>
  </footer>
  <b:loop values='1 to 3' var='l'><div expr:class='"wave wave" + data:l'/></b:loop>
</div>
</b:tag>
<b:else/>
Keterangan Detail
NamaBlog Ganti dengan nama Blog kamu (Perhatikan besar kecil Judul blog kamu)
under_text Isi dengan Deskripsi Maintenance sesuai dengan yang di inginkan
# Isi dengan alamat media sosial kamu
<title> Ubah title maintenance sesuai keinginan kamu

Lalu Copy Code dibawah dan PASTE tepat diatas kode penutup </html> template blogger kamu.

<!--[ Copy Code berikut di Atas penutup </html> ]-->
</b:if>
  • Langkah #3 : Jika sudah kemudian SIMPAN template.

Meski sudah menerapkan script maintenance mode blogger diatas, jika di buka blog kamu belum menampilkan halaman atau informasi under maintenance.

Nah untuk itu diperlukan langkah selanjutnya yaitu mengaktifkan mode pemeliharaan atau maintenance mode diatas. Caranya cukup mudah, berikut langkahnya :

Mengaktifkan dan Menonaktifkan Maintenance Mode Blogger

Agara mode pemeliharaan yang sudah kamu pasang tadi bisa aktif, kamu perlu menambah judul Blog menjadi "Maintenance". Contohnya seperti ini Inputekno Maintenance

Caranya Pergi ke Setelan > Dasar > Judul, lalu masukan judul "Maintenance" diakhir Judul Blog kamu > kemudian simpan.

Maintenance Mode Blogger

Sekarang lihat hasilnya, jika di buka blog kamu sudah dalam maintenance mode. Lalau untuk mengaktifkan blog agar normal kembali bagaimana?

Cukup sederhana, kamu hanya tinggal hapus tulisan "Maintenance" pada judul blog yang sempat ditambahkan.

Penggunaan maintenance mode ini kamu masih bisa melihat perubahan apapun pada blog melalui mode pertijauan. Jadi tidak akan direpotkan untuk bisa melihat perubahan yang dilakukan.


Pengaturan Maintenance Mode Blogger

Berikut penjelasan untuk melakukan perubahan pada tampilan maintenance mode blogger :

NamaBlog Maintenance

Secara default, nama tersebut berfungsi sebagai pengalihan untuk mengaktifkan maintenance mode, itu kenapa mode ini hanya akan aktif jika kamu ubah Judul Blog dengan menambahkan kata Maintenance diakhir judul.

Kamu bisa ubah kode tersebut sesuka hati agar lebih mudah, misalkan "off" atau kalimat apapun pada kode berikut :

<b:if cond='data:blog.title == "NamaBlog Maintenance" and !data:view.isPreview and !data:view.isLayoutMode'>

Jika kamu mengubah namanya pada kode tersebut, kamu juga harus mengubah judul blog sesuai dengan nama yang kamu setting pada code diatas untuk bisa mengaktifkan maintenance mode blogger.

Tampilan Background Maintenance Mode

Untuk bisa merubah tampilan background, kamu hanya tinggal menambahkan code berikut tepat di bawah code <b:tag name='body'>.

<style>/*<![CDATA[*/
.wave {
  background: #fff; /* 
}
.under {
  background-color: #fdd9292; 
}
/*]]>*/</style>

Kamu bisa menyesuaikan warna background sesuai keinginan pada CSS tersebut.


Penutup

Nah itu tadi tutorial cara membuat maintenance mode di blogger. Jadi kamu bisa memanfaatkan fitur maintenance mode yang bisa diaktifkan dengan mudah untuk keperluan Maintenance.

Jika ada pertanyaan silakan tanyakan melalui kolom komentar. Semoga artikel ini bermanfaat dan jangan lupa share.

Hi. Lets connect and be friends!
Gabung dalam percakapan