Cara Membuat Tampilan Maintenance Mode Blogger Full Customize

Cara Membuat Tampilan Maintenance Mode Blogger- tutorial kali ini saya berbagu cara menerapkan Maintenance Mode blog yang dibuat menggunakan Blogger.
Cara Membuat Tampilan Maintenance Mode Blogger
Tampilan Maintenance
Tampilan Maintenance

Mode Pemeliharaan Blogger atau Mode Buat Pemeliharaan adalah indikasi informasi bahwa situs web atau aplikasi sedang dalam pemeliharaan, pemulihan fungsional, atau pekerjaan lainnya.

Halaman Mode Pemeliharaan sangat berguna ketika diterapkan pada blog atau situs web yang sedang diperbaharui atau dimodifikasi. Artikel ini akan menunjukkan cara menerapkan mode pemeliharaan ke blog yang dibuat dengan Blogger.

Mode layanan ini juga dapat dengan mudah diaktifkan dan dinonaktifkan.

Daftar Isi

Cara Membuat Maintenance Mode Sederhana di Blogger

Biasanya blog yg dibangun memakai wordpress akan secara otomatis menampilkan mode pemeliharaan atau under maintenance bila situs tadi pada keadaan pemugaran atau pembaharuan.

Berbeda menggunakan Blog yg dibangun memakai Blogger, dimana nir terdapat page atau keterangan maintenance mode bila blog sedang pada pemugaran, buat itu kita wajib menciptakan sendiri tampilan maintenance blog tadi.

Untuk Demo nya engkau sanggup lihat pada akhir artikel & buat tutorial cara menciptakan maintenance mode pada blogger berikut caranya.


Membuat Maintenance Mode Blogger

Step 1 : Masuk ke Dasbhoard Akun blogger kamu

Step 2 : Buka menu Tema > Klik Panah Bawah > Lalu Klik Edit HTML

Maintenance Maintenance Maintenance

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

Step 3 : 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.jsdelivr.net/gh/zkreations/[email protected]/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/>
	
No Keterangan Detail Code
1 NamaBlog Ganti dengan nama Blog kamu (Perhatikan besar kecil Judul blog kamu)
2 under_text Isi dengan Deskripsi Maintenance sesuai dengan yang di inginkan
3 # Isi dengan Deskripsi Maintenance sesuai dengan yang di inginkan
4 <title> Ubah title maintenance sesuai keinginan kamu

Step 4 : Lalu Copy Code Script dibawah dan paste tepat diatas kode penutup </html> template blogger kamu.

		// Copy Code berikut di Atas penutup </html>
		</b:if>
	
Step 5 : Jika sudah kemudian simpan template.

Pengaturan Maintenance Mode Blogger

Bahkan jika Anda telah mengimplementasikan mode blogger keep script di atas, Anda tidak akan melihat halaman atau informasi keep mode saat Anda membuka blog. Jadi langkah selanjutnya untuk ini adalah mengaktifkan mode perawatan atau mode perawatan seperti yang dijelaskan di atas.

NamaBlog Maintenance

Secara default, nama tadi berfungsi menjadi pengalihan buat mengaktifkan maintenance mode, itu kenapa mode ini hanya akan aktif bila engkau merubah Judul Blog menggunakan menambahkan kata "maintenance" diakhir judul. Kamu sanggup merubah kode tadi sesuka hati buat supaya lebih mudah, misalkan "off" & apapun itu dalam 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>
	

Perhatian
Jika Anda memakai LazyLoad Adsense Anda bisa menggunakan Script dibawah ini

		<script>/*<![CDATA[*/ /* Anti Ad-Blocker (Lazyload) */ var lazyAnti=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyAnti||0!=document.body.scrollTop&&!1===lazyAnti)&&(!function(){var AdB=document.querySelector("#AdB");var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";e.onerror=function(){if(AdB!=null){AdB.classList.remove("hidden");window.lazyAnti=!0}};var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyAnti=!0)},!0); /*]]>*/</script>
	

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

Penutup

Nah itu tersebut tutorial cara menciptakan maintenance mode pada blogger, bagaimana gampang bukan? Jadi engkau sanggup memanfaatkan fitur maintenance mode yg sanggup diaktifkan menggunakan gampang buat keperluan tertentu. apabila terdapat langkah yg kurang dimengerti pribadi saja tinggalkan pertanyaan dalam kolom komentar. Semoga artikel ini berguna & ingat share.

Referensi:
https://www.inputekno.com/2020/09/cara-membuat-maintenance-mode-blogger.html

Content Creator, Graphic Designer, UI / UX Designer

My Notes On Blogger : Ernesia.xyz