Membuat Halaman Maintenance Mode Blogger dengan Timer Otomatis
Beranda
Blogger
Tutorial

Membuat Halaman Maintenance Mode Blogger dengan Timer Otomatis

Cara membuat tampilan maintenance mode atau mode pemeliharaan pada blogger dengan timer estimasi otomatis
Membuat Tampilan Maintenance Mode Blogger dengan Timer Otomatis

Jika Kalian pengguna CMS Wordpress mungkin tidak asing dengan tampilan mode pemeliharaan, karena banyak plugin yang sudah menyediakan dan mudah diaplikasikan.

Pada blogger sendiri hampir jarang ditemukan penggunaan mode maintenance dikarenakan kemungkinan error yang menyebabkan downtime jarang terjadi

Apa itu Maintenance Mode?

Maintenance Mode atau mode pemeliharaan merupakan tampilan halaman yang dibuat untuk memberitahu pengunjung, bahwa website yang di kunjungi sedang dalam perbaikan dan pengembangan, sehingga website tidak bisa diakses seperti biasa.

Fungsi utama dari Halaman Maintenance Mode adalah menyembunyikan error supaya tidak terlihat oleh pengunjung seperti proses edit template langsung, perubahan halaman statis, dll

Kapan Waktu yang Tepat Menggunakan Maintenance Mode?

Untuk perubahan kecil seperti warna dan lainya tidak seharusnya mengaktifkan tampilan ini selama tidak terjadi error

Tapi jika Kalian melakukan perubahan pada template yang ditakutkan terjadi tampilan error, maka sangat disarankan mengaktifkan Maintenance mode ini.

Cara Membuat tampilan Maintenance Mode Blogger

Kali ini saya akan berbagi tampilan maintenance mode yang sedikit berbeda, yaitu dengan fitur countdown timer yang akan secara otomatis menghilagkan mode maintenance sesuai waktu yang sudah ditentukan.

Demo

Halaman Demo terpasang dengan waktu terbatas, jika mainten tidak tampil maka estimasi mungkin sudah selesai.

Tampilan ini nantinya bisa diterapkan pada keseluruhan blog atau halaman tertentu saja. Untuk pemasanganya silahkan ikuti langakah berikut.

Step 1 : Silakan masuk ke Dashboard Blogger Kalian. Kemudian pilih Tema lalu Edit HTML

Step 2 : Paste kode css berikut tepat diatas kode ]]></b:skin> atau di atas kode </style>

/* Maintenance Mode by KuyMase */
.mtm{visibility:hidden;opacity:0;position:fixed;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#fff;background-image:url('https://raw.githubusercontent.com/leonjorel/favicon-kuymase/main/doodle.png');transition:all .5s ease;transition:all .5s ease;z-index:100}
.mtm.show{visibility:visible;opacity:1}
.mtmC{max-width:450px;padding:20px;text-align:center}
.mtmH{font-weight:700;font-size:1.5rem;margin-bottom:10px}
.mtmD{margin-bottom:10px}
.mtm .clock{width:100%;font-size:25px;text-align:center;font-weight:400;position:relative;left:0;right:0}
.mtCont{position:fixed;margin:0 20px;color:#000;background:#f2f2f2;padding:20px 30px;border-radius:10px;text-align:center;font-family:inherit;border:1px sold #d1d1d1;box-shadow:rgba(50,50,93,0.25) 0 6px 12px -2px,rgba(0,0,0,0.3) 0 3px 7px -3px}
.mtCont[data-disc]:not([data-disc=''])::before{content:attr(data-disc);display:block;font-weight:700;font-size:13px;padding:10px 0 10px;width:50px;height:50px;color:#fff;background:#242833;border-radius:5px 5px 50px 50px;position:absolute;top:-5px;right:50px}
.mtCont .mtH{margin:0 0 20px;font-size:1.3rem;font-weight:700}
.mtCont .mtIm{max-width:350px;margin:10px auto;padding:10px}
.mtCont .mtD{font-size:15px}
.mtCont .mtM{font-size:12px;font-weight:300}
.mtCont .mtHeadA .mtD{margin-bottom:25px}
.mtCont .mtown{width:100%;font-size:20px;text-align:center;font-weight:400;margin:20px 0}
.mtCont .mtBox{display:inline-block;width:55px;height:55px;margin:3px;padding-top:4px;background:#d1d1d1;border-radius:10px;box-shadow:#d1d1d1}
.mtCont .unit{display:block;font-size:10px;margin-top:-4px;opacity:.8}
.mtCont .btn{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:30px;line-height:20px;color:#fffdfc;background:#204ecf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100px}
.mtCont.ended[data-disc]::before,.mtCont.ended .mtHeadB,.mtCont:not(.ended) .mtHeadA,.mtCont.ended .mtTmr{display:none}
.maintenMode{margin-top:20%;display:inline-block;margin-bottom:5%}
.one,.two,.three{display:block;float:left}
.one{background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%2300a5af' d='M45.7 28.292c0.884 0 1.708 -0.717 1.829 -1.594 0 0 0.169 -1.232 0.169 -2.698s-0.169 -2.698 -0.169 -2.698c-0.122 -0.877 -0.944 -1.594 -1.829 -1.594h-4.573c-0.886 0 -1.805 -0.564 -2.042 -1.254s-0.566 -2.902 0.06 -3.528l3.232 -3.232c0.626 -0.626 0.674 -1.694 0.108 -2.375l-3.803 -3.804c-0.68 -0.567 -1.748 -0.519 -2.375 0.107l-3.232 3.232c-0.626 0.626 -1.669 0.878 -2.317 0.561 -0.648 -0.318 -2.465 -1.657 -2.465 -2.542V2.3c0 -0.885 -0.718 -1.708 -1.594 -1.829 0 0 -1.232 -0.17 -2.698 -0.17s-2.698 0.17 -2.698 0.17c-0.877 0.12 -1.595 0.944 -1.595 1.829v4.573c0 0.885 -0.564 1.804 -1.254 2.042 -0.69 0.238 -2.902 0.566 -3.528 -0.06l-3.232 -3.232c-0.626 -0.626 -1.694 -0.674 -2.374 -0.108l-3.804 3.804c-0.567 0.68 -0.519 1.748 0.107 2.375l3.232 3.232c0.626 0.626 0.879 1.669 0.561 2.317 -0.318 0.648 -1.657 2.465 -2.542 2.465H2.3c-0.885 0 -1.708 0.718 -1.829 1.594 0 0 -0.17 1.232 -0.17 2.698 0 1.466 0.17 2.698 0.17 2.698 0.12 0.878 0.944 1.595 1.829 1.595h4.573c0.885 0 1.804 0.564 2.042 1.254 0.238 0.69 0.566 2.902 -0.061 3.527l-3.232 3.232c-0.626 0.626 -0.674 1.694 -0.107 2.375l3.803 3.804c0.68 0.567 1.748 0.52 2.374 -0.108l3.232 -3.232c0.626 -0.626 1.669 -0.878 2.317 -0.56 0.648 0.318 2.465 1.657 2.465 2.542v4.573c0 0.885 0.718 1.708 1.595 1.828 0 0 1.232 0.17 2.698 0.17s2.698 -0.17 2.698 -0.17c0.877 -0.12 1.594 -0.943 1.594 -1.828v-4.573c0 -0.885 0.564 -1.805 1.254 -2.042 0.69 -0.238 2.902 -0.565 3.528 0.06l3.232 3.232c0.626 0.625 1.694 0.674 2.375 0.107l3.803 -3.802c0.567 -0.68 0.52 -1.748 -0.108 -2.375l-3.232 -3.232c-0.626 -0.626 -0.879 -1.669 -0.56 -2.317 0.318 -0.648 1.657 -2.465 2.542 -2.465h4.574zM24 32.675c-4.791 0 -8.674 -3.883 -8.674 -8.675 0 -4.79 3.884 -8.674 8.674 -8.674S32.675 19.209 32.675 24 28.791 32.675 24 32.675z'/%3E%3C/svg%3E');width:40px;height:40px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-4px;margin-right:4px}
.two{background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23f89000' d='M45.7 28.292c0.884 0 1.708 -0.717 1.829 -1.594 0 0 0.169 -1.232 0.169 -2.698s-0.169 -2.698 -0.169 -2.698c-0.122 -0.877 -0.944 -1.594 -1.829 -1.594h-4.573c-0.886 0 -1.805 -0.564 -2.042 -1.254s-0.566 -2.902 0.06 -3.528l3.232 -3.232c0.626 -0.626 0.674 -1.694 0.108 -2.375l-3.803 -3.804c-0.68 -0.567 -1.748 -0.519 -2.375 0.107l-3.232 3.232c-0.626 0.626 -1.669 0.878 -2.317 0.561 -0.648 -0.318 -2.465 -1.657 -2.465 -2.542V2.3c0 -0.885 -0.718 -1.708 -1.594 -1.829 0 0 -1.232 -0.17 -2.698 -0.17s-2.698 0.17 -2.698 0.17c-0.877 0.12 -1.595 0.944 -1.595 1.829v4.573c0 0.885 -0.564 1.804 -1.254 2.042 -0.69 0.238 -2.902 0.566 -3.528 -0.06l-3.232 -3.232c-0.626 -0.626 -1.694 -0.674 -2.374 -0.108l-3.804 3.804c-0.567 0.68 -0.519 1.748 0.107 2.375l3.232 3.232c0.626 0.626 0.879 1.669 0.561 2.317 -0.318 0.648 -1.657 2.465 -2.542 2.465H2.3c-0.885 0 -1.708 0.718 -1.829 1.594 0 0 -0.17 1.232 -0.17 2.698 0 1.466 0.17 2.698 0.17 2.698 0.12 0.878 0.944 1.595 1.829 1.595h4.573c0.885 0 1.804 0.564 2.042 1.254 0.238 0.69 0.566 2.902 -0.061 3.527l-3.232 3.232c-0.626 0.626 -0.674 1.694 -0.107 2.375l3.803 3.804c0.68 0.567 1.748 0.52 2.374 -0.108l3.232 -3.232c0.626 -0.626 1.669 -0.878 2.317 -0.56 0.648 0.318 2.465 1.657 2.465 2.542v4.573c0 0.885 0.718 1.708 1.595 1.828 0 0 1.232 0.17 2.698 0.17s2.698 -0.17 2.698 -0.17c0.877 -0.12 1.594 -0.943 1.594 -1.828v-4.573c0 -0.885 0.564 -1.805 1.254 -2.042 0.69 -0.238 2.902 -0.565 3.528 0.06l3.232 3.232c0.626 0.625 1.694 0.674 2.375 0.107l3.803 -3.802c0.567 -0.68 0.52 -1.748 -0.108 -2.375l-3.232 -3.232c-0.626 -0.626 -0.879 -1.669 -0.56 -2.317 0.318 -0.648 1.657 -2.465 2.542 -2.465h4.574zM24 32.675c-4.791 0 -8.674 -3.883 -8.674 -8.675 0 -4.79 3.884 -8.674 8.674 -8.674S32.675 19.209 32.675 24 28.791 32.675 24 32.675z'/%3E%3C/svg%3E');width:60px;height:60px;background-size:100% 100%;background-repeat:no-repeat}
.three{background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23010101' d='M45.7 28.292c0.884 0 1.708 -0.717 1.829 -1.594 0 0 0.169 -1.232 0.169 -2.698s-0.169 -2.698 -0.169 -2.698c-0.122 -0.877 -0.944 -1.594 -1.829 -1.594h-4.573c-0.886 0 -1.805 -0.564 -2.042 -1.254s-0.566 -2.902 0.06 -3.528l3.232 -3.232c0.626 -0.626 0.674 -1.694 0.108 -2.375l-3.803 -3.804c-0.68 -0.567 -1.748 -0.519 -2.375 0.107l-3.232 3.232c-0.626 0.626 -1.669 0.878 -2.317 0.561 -0.648 -0.318 -2.465 -1.657 -2.465 -2.542V2.3c0 -0.885 -0.718 -1.708 -1.594 -1.829 0 0 -1.232 -0.17 -2.698 -0.17s-2.698 0.17 -2.698 0.17c-0.877 0.12 -1.595 0.944 -1.595 1.829v4.573c0 0.885 -0.564 1.804 -1.254 2.042 -0.69 0.238 -2.902 0.566 -3.528 -0.06l-3.232 -3.232c-0.626 -0.626 -1.694 -0.674 -2.374 -0.108l-3.804 3.804c-0.567 0.68 -0.519 1.748 0.107 2.375l3.232 3.232c0.626 0.626 0.879 1.669 0.561 2.317 -0.318 0.648 -1.657 2.465 -2.542 2.465H2.3c-0.885 0 -1.708 0.718 -1.829 1.594 0 0 -0.17 1.232 -0.17 2.698 0 1.466 0.17 2.698 0.17 2.698 0.12 0.878 0.944 1.595 1.829 1.595h4.573c0.885 0 1.804 0.564 2.042 1.254 0.238 0.69 0.566 2.902 -0.061 3.527l-3.232 3.232c-0.626 0.626 -0.674 1.694 -0.107 2.375l3.803 3.804c0.68 0.567 1.748 0.52 2.374 -0.108l3.232 -3.232c0.626 -0.626 1.669 -0.878 2.317 -0.56 0.648 0.318 2.465 1.657 2.465 2.542v4.573c0 0.885 0.718 1.708 1.595 1.828 0 0 1.232 0.17 2.698 0.17s2.698 -0.17 2.698 -0.17c0.877 -0.12 1.594 -0.943 1.594 -1.828v-4.573c0 -0.885 0.564 -1.805 1.254 -2.042 0.69 -0.238 2.902 -0.565 3.528 0.06l3.232 3.232c0.626 0.625 1.694 0.674 2.375 0.107l3.803 -3.802c0.567 -0.68 0.52 -1.748 -0.108 -2.375l-3.232 -3.232c-0.626 -0.626 -0.879 -1.669 -0.56 -2.317 0.318 -0.648 1.657 -2.465 2.542 -2.465h4.574zM24 32.675c-4.791 0 -8.674 -3.883 -8.674 -8.675 0 -4.79 3.884 -8.674 8.674 -8.674S32.675 19.209 32.675 24 28.791 32.675 24 32.675z'/%3E%3C/svg%3E');width:30px;height:30px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-20px;margin-left:0}
@keyframes spin-one{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}}
.spin-one{animation:spin-one 1.5s infinite linear}
@keyframes spin-two{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(359deg)}}
.spin-two{animation:spin-two 2s infinite linear}

Step 3 : Letakan kode html berikut ini didalam </body> atau didalam widget.

<!--[ Mainteance Mode by Kuymase ]-->
<div class='mtm' id='maintainCont'>
  <div class='mtCont' data-disc='Note!'>
    <div class='mtHeadB'>
      <div class='maintenMode'>
        <div class='one spin-one'></div>
        <div class='two spin-two'></div>
        <div class='three spin-one'></div>
      </div>
      <div class='mtH'>Oops! We'll be back soon!</div>
      <div class='mtD'>We are sorry for the inconvenience</div>
      <div class='mtM'>This page is now under <b>maintenance</b>. Estimated remaining on :</div>
    </div>
    <div class='mtHeadA'>
      <div class='mtH'>Yeah! Maintenance has Done!</div>
      <div class='mtD'>Thanks for your patient! Please enjoy back this Blog.</div>
      <div class='mtM'>You&#39;ll be redirected automatically. If don't please click <a class='link' href='/'>Here</a>.</div>
    </div>
    <div class='mtTmr'>
      <div class='mtown'>
        <div class='mtBox'>
          <span class='days'>00</span>
          <span class='unit'>Days</span>
        </div>
        <div class='mtBox'>
          <span class='hours'>00</span>
          <span class='unit'>Hours</span>
        </div>
        <div class='mtBox'>
          <span class='minutes'>00</span>
          <span class='unit'>Minutes</span>
        </div>
        <div class='mtBox'>
          <span class='seconds'>00</span>
          <span class='unit'>Seconds</span>
        </div>
        <!--[ Please don't remove this, it won't appear in this site ]-->
        <div class='creator' style='display:none'>https://www.kuymase.com</div>
      </div>
    </div>
  </div>
</div>

Step 4 : Salin kode Javascript berikut dan letakan diatas tag penutup </body>.

<script>/*<![CDATA[*/
/* Maintenmode by KuyMase */
const waktu = {
  // Isi dengan estimasi waktu selesai
    Tanggal : 'August 28 2022' , 
    Jam : '22:24:00' , 
    ZonaWaktu : 'GMT+07:00'
}
function kuymass(a,s,m,u){return kuymasd(u- -8,a)}!function(a,s){function m(a,s,m,u){return kuymasd(m- -982,s)}function u(a,s,m,u){return kuymasd(u- -555,s)}for(var t=kuymasc();;)try{if(989595===-parseInt(u(0,34,0,-20))/1*(-parseInt(m(0,-396,-406))/2)+-parseInt(u(0,-74,0,-39))/3+-parseInt(m(0,-446,-473))/4*(-parseInt(m(0,-487,-499))/5)+-parseInt(m(0,-452,-460))/6+parseInt(u(0,-24,0,9))/7*(-parseInt(m(0,-447,-398))/8)+-parseInt(u(0,-29,0,-11))/9+parseInt(u(0,-18,0,24))/10)break;t.push(t.shift())}catch(a){t.push(t.shift())}}();var kuymasb=function(){var a=!0;return function(s,m){var u=a?function(){if(m){var a=m.apply(s,arguments);return m=null,a}}:function(){};return a=!1,u}}(),kuymasa=kuymasb(this,(function(){var a=function(){function a(a,s,m,u){return kuymasd(a-38,s)}var s;try{s=Function(m(166,113,226,162)+a(587,640)+(m(108,60,126,77)+a(569,561)+m(183,180,148,232)+' ));'))()}catch(a){s=window}function m(a,s,m,u){return kuymasd(a- -360,s)}return s}(),s=a.console=a[t(-313,-269,-324,-224)]||{};function m(a,s,m,u){return kuymasd(m- -709,a)}var u=['log','warn',m(-100,0,-134),t(-327,-305,-343,-333),m(-168,0,-129),m(-261,0,-227),'trace'];function t(a,s,m,u){return kuymasd(s- -838,a)}for(var y=0;y<u[m(-168,0,-180)];y++){var n=kuymasb[m(-253,0,-233)+'r'][t(-348,-324)][m(-261,0,-212)](kuymasb),k=u[y],r=s[k]||n;n.__proto__=kuymasb.bind(kuymasb),n[t(-281,-342)]=r.toString[t(-318,-341)](r),s[k]=n}}));function kuymast(a,s,m,u){return kuymasd(u- -959,s)}function kuymasd(a,s){var m=kuymasc();return kuymasd=function(s,u){var t=m[s-=468];if(void 0===kuymasd.rCZtMj){var y=function(a){for(var s,m,u='',t='',y=0,n=0;m=a.charAt(n++);~m&&(s=y%4?64*s+m:m,y++%4)?u+=String.fromCharCode(255&s>>(-2*y&6)):0)m='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/='.indexOf(m);for(var k=0,r=u.length;k<r;k++)t+='%'+('00'+u.charCodeAt(k).toString(16)).slice(-2);return decodeURIComponent(t)};kuymasd.dOUlkd=y,a=arguments,kuymasd.rCZtMj=!0}var n=m[0],k=s+n,r=a[k];return r?t=r:(t=kuymasd.dOUlkd(t),a[k]=t),t},kuymasd(a,s)}kuymasa();var cdtEl=document[kuymass(477,410,440,463)+kuymast(-357,-346,-378,-374)](kuymast(-413,-412,-414,-399));if(void 0!==cdtEl&&null!=cdtEl)if(document[kuymass(453,486,443,463)+kuymass(542,549,600,577)](kuymass(564,503,519,552))[kuymass(516,465,555,495)]==kuymast(-430,-457,-494,-464)+kuymass(551,457,534,490)+'com'){var arr=[waktu.Tanggal,waktu[kuymass(561,463,493,513)],waktu.ZonaWaktu];let a=arr[kuymass(580,602,578,573)](' ');var endDate=new Date(a),dayElm=document[kuymass(446,508,411,463)+'tor'](kuymass(572,549,595,570)+'ys'),hourElm=document['querySelec'+kuymass(526,625,594,577)](kuymass(532,569,609,563)+kuymast(-400,-440,-419,-459)),minuteElm=document['querySelec'+kuymass(622,554,555,577)](kuymass(580,533,563,526)+'nutes'),secondElm=document[kuymast(-471,-499,-441,-488)+kuymass(618,542,577,577)](kuymast(-433,-432,-386,-377)+'conds'),mtCont=document[kuymast(-457,-437,-438,-488)+kuymast(-352,-410,-329,-374)](kuymass(546,520,599,554)),mtm=document[kuymass(476,427,462,463)+'tor'](kuymass(458,525,561,504));let s=!1;const m=()=>{let a=new Date;function m(a,s,m,u){return kuymast(a-68,s,m-419,m-804)}function u(a,s,m,u){return kuymass(s,s-46,m-370,a-802)}(k=endDate.getTime()-a[u(1286,1340,1344)]())<=1e3&&(s=!0);var t=36e5,y=Math.floor(k/864e5),n=Math[u(1361,1385,1361)](k%864e5/t),k=(t=Math[u(1361,1421,1320)](k%t/6e4),Math[m(404,425,412)](k%6e4/1e3));dayElm[u(1278,1295,1266)]=y<10?'0'+y:y,hourElm[m(351,286,329)]=n<10?'0'+n:n,minuteElm.innerText=t<10?'0'+t:t,secondElm[m(334,289,329)]=k<10?'0'+k:k};setInterval((()=>{function a(a,s,m,u){return kuymass(a,s-443,m-86,s-880)}function u(a,s,m,u){return kuymass(m,s-395,m-83,u- -353)}s?mtCont[a(1411,1352,1386)][a(1480,1449,1439)](u(0,221,189,207)):(m(),mtm[u(0,162,165,119)][u(0,202,204,216)]('show'))}),1e3),setInterval((()=>{function a(a,s,m,u){return kuymast(a-283,s,m-477,u-1951)}var u,t;s?mtm[a(1513,1533,1517,1472)][(u=940,t=912,kuymast(u-463,t,t-438,u-1429))](a(1555,1563,1548,1581)):m()}),5e3)}else{var s=document[kuymast(-450,-491,-420,-472)+kuymast(-439,-412,-454,-455)]('div');s[kuymass(530,447,457,495)]=kuymast(-463,-406,-448,-412)+'olor:#f890'+kuymast(-504,-435,-516,-487)+kuymast(-441,-386,-373,-402)+kuymass(436,466,517,473)+kuymass(462,521,521,505)+'999999999!important;'+kuymast(-417,-465,-483,-452)+kuymast(-394,-447,-377,-432)+kuymast(-443,-457,-427,-413)+kuymass(551,588,560,529)+kuymass(436,506,424,469)+kuymast(-505,-505,-486,-465)+kuymast(-459,-492,-508,-458)+kuymass(499,492,542,483)+kuymass(499,449,441,480)+kuymass(489,490,595,540)+kuymass(495,441,511,500)+'0px;position:fixed;b'+kuymast(-476,-408,-455,-429)+kuymass(489,512,502,502)+kuymass(552,530,472,520)+kuymast(-388,-437,-453,-393)+kuymast(-453,-448,-413,-436)+'lid #eee;c'+kuymass(478,480,517,528)+'3d;text-al'+kuymast(-456,-419,-455,-466)+kuymass(502,446,473,465)+kuymast(-407,-464,-413,-418)+kuymast(-456,-523,-459,-485)+kuymass(531,445,522,497)+'argin:0 au'+kuymass(515,483,521,482)+kuymast(-447,-341,-436,-387)+' 20px rgba'+kuymast(-366,-445,-387,-398)+kuymast(-404,-440,-418,-420)+kuymass(524,596,604,550)+kuymast(-482,-440,-405,-453)+'t'><svg st'+kuymass(480,539,555,511)+kuymass(470,484,552,516)+kuymass(504,514,533,509)+'eight:50px'+kuymast(-442,-459,-380,-427)+kuymast(-424,-441,-438,-457)+kuymast(-402,-415,-397,-403)+''M12,17A2,'+kuymass(577,580,497,542)+',15C14,13.89 13.1,13'+kuymass(513,537,494,507)+kuymast(-493,-523,-540,-490)+kuymast(-536,-532,-491,-480)+kuymass(492,551,529,543)+'8,8A2,2 0 '+kuymast(-391,-363,-373,-372)+kuymast(-447,-462,-431,-434)+kuymass(536,599,534,578)+'A2,2 0 0,1 4,20V10C4'+kuymass(467,538,465,477)+kuymast(-345,-364,-370,-400)+kuymass(591,532,509,562)+kuymast(-446,-380,-449,-394)+' 0,1 17,6V8H18M12,3A'+kuymass(478,490,437,467)+kuymass(608,605,619,580)+kuymast(-401,-442,-378,-421)+' 12,3Z'></'+kuymass(480,525,550,537)+kuymast(-446,-499,-430,-473)+kuymass(486,599,586,546)+kuymass(545,614,557,575)+kuymast(-471,-437,-481,-439)+kuymass(456,547,479,491)+kuymast(-431,-463,-419,-419)+kuymast(-439,-441,-488,-470)+kuymass(515,456,465,510)+kuymass(605,528,505,566)+kuymass(456,426,456,487)+kuymass(475,504,510,490)+kuymast(-403,-472,-496,-448)+kuymass(493,594,562,544)+kuymass(473,466,446,487)+kuymass(434,533,443,490)+kuymast(-444,-335,-341,-386)+kuymast(-502,-435,-477,-481)+'l'>Need more help?</a></div>',document[kuymass(538,510,517,555)].appendChild(s)}else alert('Error! Credit is mis'+kuymast(-356,-385,-347,-404)+kuymass(579,534,551,545)+' www.kuyma'+kuymast(-394,-409,-474,-417));function kuymasc(){var a=['Dg87yM94lxnOyq','BNq7D2LKDgG6yW','z2v0vgLTzq','AwDUoMnLBNrLCG','BgL0EtP2AxnPyG','Ahr0Chm6lY93DW','Dg9tDhjPBMC','yMLUza','DY5RDxLTyxnLlG','zwrPDcbOyxmGyG','DxjZ','BguHAw1WB3j0yq','iJaGmcaYncaYna','Aw5Uzxjive1m','zw50','o3jPz2H0oJa7Bq','CZ0IA3LTlwnYza','zgLZCgXHEtPIBa','Ec13Awr0AdOZnq','oerjAfzhAG','i2zLzMvMztTIBW','y29Tpc9IpJWVCa','lM10Bq','otK5otK5otK5oq','ChjVDg90ExbL','ideYldeZqtiSmG','mZa2nJeYyxDeCKH2','zhrOoJuWChG7Aa','z2LUywWGy3jLyq','EwXLpsjMAwXSoG','y3jLyxrVCIbJCG','sMfT','mJa0mJiZmLzYAvnyEa','zgvYoJfWEcbZBW','i2uWmdaWmdT3Aq','mJbbmIWYidaGma','CMv0DxjUicHMDq','B2nRiwLTCg9YDa','CMrLCI1YywrPDq','BgvUz3rO','ywnRz3jVDw5KoG','y3rVCIGICMv0Dq','iIb2Awv3qM94pq','zxjYB3i','lM10qM94ic5TAq','ndm0BLjSuePp','B2XVCJOJmJyYza','EtOXiwLTCg9YDa','qtmSmYaWidaSma','ktT9pc9ZDhLSzq','zwvUignOyw5Nzq','nxb4o3rVCdOXnq','C2uUy29T','CM4GDgHPCYiPka','mtqZnZmWmtH4AujXqxG','Cgf0Ad48l3n2zW','yw50o29WywnPDa','phn0EwXLpMf7yW','ideWmhb4ktTTyq','BMn0Aw9UkcKG','mIaWidaSmcaXna','ldaGmtiSmtDnmq','pJXHigHYzwy9iG','Aw5MBWPhBYb0BW','ierLBMLLzce8lW','C2LUzWPnB3jLia','iJ48Cgf0AcbKpq','zhr7EI1PBMrLEa','pJXKAxyGy2XHCW','oca2ldHin1y2qq','lMnYzwf0B3i','kdaSmcWWldaUmG','lM10q29UDa','yM9KEq','mtG1nxroqwjnEq','mtiSmue1lduGma','CZOXmhb4o2jVCG','zMXVB3i','zw5Kzwq','y29UC29Szq','nsW1idaGmcWXia','lM10qM94ic5OBW','zg93oJaGmtbWEa','y29Tl3aVy29UDa','Dg9YigLZidXIpG','Aw5MBW','ndq0mM5eBwHKua','ywrK','lM10qM94ic5Kyq','mZi0mtuYmgzuwuDMzq','zxHJzxb0Aw9U','AM9PBG','lM10qM94ic5Zzq','Adm+pha+vgHLia','mJK4nfzVsgTMEq','Dg9Y','ldeGmtGSmJjinG','mcWXidiWldeWvG','osW2vJHimtvwnG','C2HVDW','E30Uy29UC3rYDq','idaGmcWWideWla','CMvTB3zL','CxvLCNLtzwXLyW','mdb9lMT5Bs1JCG','o3bHzgrPBMC6mW','mhb4o2XLzNq6ma','mYWZidaGmcWWia','y29UC3rYDwn0BW','yw50o3zPC2LIAq','ywn0lxvZlMH0Bq','mtvbmIWYidaGma','y2XHC3nmAxn0','oJK5otK5otK5oq','DgfIBgu','ndu5otG4mfPhwwnfBW','Aw5UzxjuzxH0','ldGUodKGnc45la','pJXOmZ5by2nLCW','y3jLyxrLrwXLBq','ywXJkdeWmcuGlq','zc4GvgHLig9YAq'];return(kuymasc=function(){return a})()
/*]]>*/</script>

Konfigurasi

Isikan Tanggal, Jam & ZonaWaktu sesuai format yang ada.

Format penulisan nama bulan :

No Panjang (Long Hand) Pendek (Short Hand)
1 January Jan
2 February Feb
3 March Mar
4 April Apr
5 May May
6 June Jun
7 July Jul
8 August Aug
9 September Sep
10 October Oct
11 November Nov
12 December Dec

Timer akan berjalan sesuai estimasi yang dimasukan, dan secara otomatis akan memunculkan pesan selesai sebelum kemudian Maintenance mode menghilang.

Step 5 : Silakan silahkan simpan dan lihat hasilnya.

Menampilkan Maintenance Mode Hanya pada Halaman Tertentu

Secara default, halaman maintenance akan tampil pada seluruh halaman/url. Untuk menampilkan Halaman maintenance pada halaman tertentu saja, caranya dengan membungkus Javascript menggunakan Tag Kondisional seperti dibawah ini.

Hanya muncul pada Homepage

Bungkus Script dengan tag kondisional seperti ini.

<b:if cond='data:view.isHomepage'>
  <!--[ Letakan script disini ]-->
  </b:if>

Hanya Tampil pada Halaman Statis

Bungkus Script dengan tag kondisional seperti ini.

<b:if cond='data:view.isPage'>
  <!--[ Letakan script disini ]-->
  </b:if>

Hanya Tampil pada url Tertentu

Gunakan tag kondisional berikut untuk menampilkan Maintenance Mode pada url spesifik. Bisa halaman dan juga postingan

<b:if cond='data:blog.url == &quot;https://www.kuymase.com/p/javascript-encoder.html&quot;'
<!--[ Letakan script disini ]-->
</b:if>

Ganti url yang saya tandai sesuai yang diinginkan.

Selengkapnya mengenai penggunaan Tag Kondisional silahkan Kalian baca pada artikel berikut ini.

Baca JugaTag Kondisional Blogger Terbaru dan Cara Penggunaanya

Tips & Penutup

Dalam melakukan mainten atau mengaktifkan halaman notifikasi maintenance disarankan untuk tidak terlalu sering dan pastikan ada informasi yang disampaikan terkait kapan akan dilakukan proses maintenance yang meyebabkan sebagian atau seluruh halaman tidak bisa diakses.

Jangan sampai website Kalian yang sudah dibangun susah payah untuk selalu mendapatkan kesan baik, berakhir dengan kesan tidak menyenangkan dan kurang baik dari pengunjung karena terlalu sering menemui halaman maintenance. Atau karena melihat design halaman maintenance yang terlalu sederhana dan tidak informatif.

Sekian tulisan saya mengenai Maitenance Mode dan cara Membuat halaman maintenance dengan timer otomatis pada bloger. Semoga bermanfaat.

Baca Juga

Ad

hello world('print')

4 komentar

  1. Bang buatin tutorial buat sitemap mirip blog Abang ini dong..
    1. Nanti dibuatkan ya kak
    2. Terimakasih Abang, ditunggu ya..
  2. Bang, klo udah sempet update requestan ini ya Bang..
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code

Ad