Home
Blogger
Tips

Cara Membuat Tampilan Maintenance Mode Blogger

4 minute read
Cara Membuat Tampilan Maintenance Mode Blogger

Membuat Maintenance Mode Blogger - 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.

Halaman Maintenance Mode sangat bermanfaat untuk diterapkan pada sebuah blog atau website yang sedang dalam perbaikan ataupun perubahan, karena dengan begitu pengunjung atau visitor dapat memahami bahwa webste tidak bisa diakses karena sedang dalam maintenance mode.

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.
  1. Cara Membuat Maintenance Mode Blogger
  2. Mengaktifkan dan Menonaktifkan Maintenance Mode Blogger
  3. Pengaturan Maintenance Mode Blogger
  4. Penutup Artikel
  5. Demo Maintenance Blogger

Cara Membuat Maintenance Mode Sederhana di Blogger

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

Berbeda dengan Blog yang dibangun menggunakan 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 Demo nya kamu bisa lihat di akhir artikel dan untuk tutorial cara membuat maintenance mode di blogger berikut caranya.

Membuat Maintenance Mode Blogger

1. Masuk ke Akun blogger kamu
2. Buka menu Tema > Klik Panah Bawah > Lalu Klik Edit HTML

Cara Membuat Tampilan Maintenance Mode Blogger- Cara Membuat Tampilan Maintenance Mode Blogger 2 Cara Membuat Tampilan Maintenance Mode Blogger 3

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.
 
Membuat Maintenance Mode Sederhana di Blogger

// 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.jsdelivr.net/gh/zkreations/plugins@1.0.5/dist/css/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

Lalu copy code dibawah dan paste tepat diatas kode penutup </html> template blogger kamu. 


// Copy Code berikut di Atas penutup </html>
</b:if>

3. Jika sudah kemudian simpan template.

Meski sudah menerapkan script maintenance mode blogger diatas, jika di buka blog kamu belum menampilkan halaman atau informasi mode pemeliharaan. Nah untuk itu diperlukan langkah selanjutnya yaitu mengaktifkan mode pemeliharaan atau maintenance mode diatas.

Mengaktifkan dan Menonaktifkan Maintenance Mode Blogger

Agara mode pemeliharaan yang sudah kamu terapkan bisa aktif, kamu perlu menambah judul Blog menjadi "Maintenance". Caranya Pergi ke Setelan > Dasar > Judul, lalu masukan judul "Maintenance" diakhir Judul Blog kamu > kemudian simpan.

Cara Membuat Tampilan Maintenance Mode Blogger 4 Cara Membuat Tampilan Maintenance Mode Blogger 5 Cara Membuat Tampilan Maintenance Mode Blogger 6

Lihat hasilnya, jika di buka blog kamu sudah dalam maintenance mode. Lalau bagaimana untuk mengaktifkan blog agar normal kembali setelah selesai melakukan perbaikan pada sebuah blog? Cukup mudah, hanya tinggal hapus tulisan "Maintenance" pada judul blog kamu.

Penggunaan maintenance mode ini kamu masih bisa melihat perubahan apapun pada blog melalui mode pertijauan. Entah itu melakukan edit widget, template, artikel dan lainnya. Jadi kamu sendiri juga tidak akan direpotkan untuk bisa melihat perubahan yang dilakukan.

Pengaturan 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 merubah Judul Blog dengan menambahkan kata "maintenance" diakhir nya.

Kamu bisa merubah kode tersebut sesuka hati untuk agar lebih mudah, misalkan "off" dan apapun itu pada kode berikut : 


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

Perlu diperhatikan, jika kamu mengubah namnya pada kode tersebut, kamu juga harus mengubah judul blog ssuai 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'>. 


// Copy Code berikut di Atas <b:tag name='body'>
<style>/*<![CDATA[*/
.wave {
  background: #fff; /* 
}
.under {
  background-color: #fdd9292; 
}
/*]]>*/</style>

Kamu bisa menyesuaikan warna background nya sesuai dengan keinginan pada code CSS tersebut.

Penutup

Nah itu tadi tutorial cara membuat maintenance mode di blogger, jika ada langkah yang kurang dimengerti langsung saja tinggalkan pertanyaan pada kolom komentar. Semoga artikel ini bermanfaat dan jangan lupa share.


Article "Cara Membuat Tampilan Maintenance Mode Blogger" protected

Post a Comment