Berikut Cara Memasang Script Maintenance Page di Blog

Under Maintenance Blog - Mirip dengan badan, nyatanya web pula memerlukan perawatan secara berkala. Yang jelas saja, revisi tersebut bermanfaat buat membenarkan kalau seluruh komponen bisa berjalan wajar serta bekerja sebagaimana mestinya.

Nah dalam salah satu tulisan yang sempat aku baca tentang perencanaan website, terdapat sebagian poin berarti yang wajib dicoba. Salah satunya dengan melaksanakan maintenance. Apa sih yang diartikan dengan sebutan tersebut? 

Apa itu Maintenance?

Maintenance merupakan kegiatan revisi ataupun pembaruan komponen website buat memperoleh kinerja yang lebih baik. Jadi penulis memanglah tidak gampang, bukan cuma memikirkan tentang konten apa yang hendak dibagikan kedepannya, tetapi kita pula wajib pandai- pandai dalam perihal perawatan.

Terdapat 3 tipe waktu dalam melaksanakan maintenance, ialah mingguan, bulanan, ataupun tahunan. Kamu tinggal memandang mutu taman Kamu. Bila merasa telah teroptimasi dengan baik, hingga Kamu cuma butuh melaksanakan dalam skala tahunan. 

Pembuka

Perusahaan besar seperti Google maupun WordPress terkadang melakukan maintenance agar kinerja semakin baik. Nah khusus untuk blog, maintenance page ini bisa digunakan saat Anda ingin ganti template atau sekedar update artikel.

Rekomendasi: Cara Mengunci Postingan dan Halaman di Blog

Lalu, Bagaimana Cara Mulai Melakukan Maintenance?

Triknya lumayan gampang, Kamu cuma butuh memasang jendela melayang yang berisi data kalau taman lagi dalam sesi revisi. Terdapat banyak sekali tampilan maintenance yang dapat digunakan, mulai dari yang luar biasa keren sampai yang simpel.

Semacam yang sudah aku jelaskan di postingan- postingan tadinya, pengguna WordPress sangat dimanjakan dengan pemasangan fitur- fitur. Berbeda dengan pengguna Blogger yang wajib memasang secara manual yang pasti pula wajib mengenali dasar- dasar HTML template yang digunakan.

Ada pula tipe tampilan yang aku bagikan kali ini lumayan simpel dengan animasi kecil dan fitur hitung mundur pada bagian atas. Buat lebih jelasnya dapat Kamu amati lewat taman berikut: 

Jika tertarik, silahkan disimak dan diterapkan.

Cara Memasang Maintenance Page di Blog

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Tempel di atas </body>:

<div class="maintenancePage">
  <div class="mainContainer">
    <div class="mainBox">
      <div id="mainCount">
        <ul>
          <li><span id="countDays"></span>Day</li>
          <li><span id="countHours"></span>Hour</li>
          <li><span id="countMinutes"></span>Minute</li>
          <li><span id="countSeconds"></span>Second</li>
        </ul>
      </div>
      <div class="mainAnimation">
        <div class="mainOne spinOne"></div>
        <div class="mainTwo spinTwo"></div>
        <div class="mainThree spinOne"></div>
      </div>
      <div class="mainSubcontainer">
        <h1>Under maintenance</h1>
        <p>Update in progress. You can visit in any other time.</p>
        <p>Maintenance screen for <a href="#" target="_blank" title="Changelog">LiveAgent</a></p>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
const second=1000,minute=second*60,hour=minute*60,day=hour*24;
let timeReach="Jan 28, 2023 00:00:00",
    mainCount=new Date(timeReach).getTime(),
    x=setInterval(function(){
      let now=new Date().getTime(),
        distance=mainCount-now;
          document.getElementById("countDays").innerText=Math.floor(distance/(day)),
          document.getElementById("countHours").innerText=Math.floor((distance%(day))/(hour)),
          document.getElementById("countMinutes").innerText=Math.floor((distance%(hour))/(minute)),
          document.getElementById("countSeconds").innerText=Math.floor((distance%(minute))/second)
    },0)
}())
</script>

• Tempel di atas ]]></b:skin>:

/* 
Don't remove this credit!
Maintenance Page by Róbert Hegedúš / https://codepen.io/lilpirat
Countdown Timer by Matt Smith / https://codepen.io/AllThingsSmitty
*/
html, body{overflow:hidden}
.maintenancePage{position:fixed;width:100%;height:100%;font-family:"Noto Sans",sans-serif;top:0;left:0;overflow:hidden;z-index:999}
.mainContainer{margin:auto;width:100%;height:100%;text-align:center;position:relative}
.mainSubcontainer{margin-top:50px;margin-left:15px}
.mainBox{width:100%;height:100%;background:linear-gradient(11.7deg,#fafafa 53%,#ffffff 47%)}
.mainAnimation{margin-top:10%;display:inline-block}
#mainCount{text-align:center;margin-left:-50px}
#mainCount ul li{display:inline-block;color:#888;font-size:14px;list-style-type:none;padding:20px;text-transform:uppercase}
#mainCount ul li span{display:block;color:#333;font-size:18px;font-weight:bold}
.maintenancePage .mainContainer h1{color:#677880;font-size:50px;letter-spacing:2px;text-transform:uppercase}
.maintenancePage .mainContainer p{font-size:15px}
.maintenancePage .mainContainer p a{color:#009ee0;font-weight:bold;text-decoration:none}
.maintenancePage .mainContainer p a:hover{color:#009ee0}
.mainOne,.mainTwo,.mainThree{display:block;float:left}
.spinOne{-webkit-animation:spinOne 1.5s infinite linear;animation:spinOne 1.5s infinite linear}
.spinTwo{-webkit-animation:spinTwo 2s infinite linear;animation:spinTwo 2s infinite linear}
.mainOne{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:80px;height:80px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-10px;margin-right:8px}
.mainTwo{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:100px;height:100px;background-size:100% 100%;background-repeat:no-repeat} 
.mainThree{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:80px;height:80px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-50px;margin-left:-10px}
@keyframes spinOne{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}}
@keyframes spinTwo{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(359deg)}}
@media screen and (max-width:768px){.mainAnimation{margin-top:40%}.mainSubcontainer{margin-bottom:0;margin-left:0}.maintenancePage .mainContainer h1{font-size:30px}#mainCount{margin-left:-40px}#mainCount ul li{font-size:13px}#mainCount ul li span{font-size:13px}}

• Pilih SIMPAN
• Selesai.

Catatan

Skrip di atas merupakan penggabungan dan desain ulang dari sumber asli Róbert Hegedúš dan Matt Smith. Jangan menghapus komentar sebagai bentuk kredit atau penghormatan.

Jika ingin menampilkan pada halaman tertentu, silahkan tempel di bagian bawah tulisan (mode HTML):

<!-- HTML -->
<div class="maintenancePage">
  <div class="mainContainer">
    <div class="mainBox">
      <div id="mainCount">
        <ul>
          <li><span id="countDays"></span>Day</li>
          <li><span id="countHours"></span>Hour</li>
          <li><span id="countMinutes"></span>Minute</li>
          <li><span id="countSeconds"></span>Second</li>
        </ul>
      </div>
      <div class="mainAnimation">
        <div class="mainOne spinOne"></div>
        <div class="mainTwo spinTwo"></div>
        <div class="mainThree spinOne"></div>
      </div>
      <div class="mainSubcontainer">
        <h1>Under maintenance</h1>
        <p>Update in progress. You can visit in any other time.</p>
        <p>Maintenance screen for <a href="#" target="_blank" title="Changelog">LiveAgent</a></p>
      </div>
    </div>
  </div>
</div>
<!-- End HTML -->

<!-- CSS -->
/* 
Don't remove this credit!
Maintenance Page by Róbert Hegedúš / https://codepen.io/lilpirat
Countdown Timer by Matt Smith / https://codepen.io/AllThingsSmitty
*/
html, body{overflow:hidden}
.maintenancePage{position:fixed;width:100%;height:100%;font-family:"Noto Sans",sans-serif;top:0;left:0;overflow:hidden;z-index:999}
.mainContainer{margin:auto;width:100%;height:100%;text-align:center;position:relative}
.mainSubcontainer{margin-top:50px;margin-left:15px}
.mainBox{width:100%;height:100%;background:linear-gradient(11.7deg,#fafafa 53%,#ffffff 47%)}
.mainAnimation{margin-top:10%;display:inline-block}
#mainCount{text-align:center;margin-left:-50px}
#mainCount ul li{display:inline-block;color:#888;font-size:14px;list-style-type:none;padding:20px;text-transform:uppercase}
#mainCount ul li span{display:block;color:#333;font-size:18px;font-weight:bold}
.maintenancePage .mainContainer h1{color:#677880;font-size:50px;letter-spacing:2px;text-transform:uppercase}
.maintenancePage .mainContainer p{font-size:15px}
.maintenancePage .mainContainer p a{color:#009ee0;font-weight:bold;text-decoration:none}
.maintenancePage .mainContainer p a:hover{color:#009ee0}
.mainOne,.mainTwo,.mainThree{display:block;float:left}
.spinOne{-webkit-animation:spinOne 1.5s infinite linear;animation:spinOne 1.5s infinite linear}
.spinTwo{-webkit-animation:spinTwo 2s infinite linear;animation:spinTwo 2s infinite linear}
.mainOne{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:80px;height:80px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-10px;margin-right:8px}
.mainTwo{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:100px;height:100px;background-size:100% 100%;background-repeat:no-repeat} 
.mainThree{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:80px;height:80px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-50px;margin-left:-10px}
@keyframes spinOne{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}}
@keyframes spinTwo{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(359deg)}}
@media screen and (max-width:768px){.mainAnimation{margin-top:40%}.mainSubcontainer{margin-bottom:0;margin-left:0}.maintenancePage .mainContainer h1{font-size:30px}#mainCount{margin-left:-40px}#mainCount ul li{font-size:13px}#mainCount ul li span{font-size:13px}}
<!-- End CSS -->

<!-- JavaScript -->
<script>
(function(){
const second=1000,minute=second*60,hour=minute*60,day=hour*24;
let timeReach="Jan 28, 2023 00:00:00",
    mainCount=new Date(timeReach).getTime(),
    x=setInterval(function(){
      let now=new Date().getTime(),
        distance=mainCount-now;
          document.getElementById("countDays").innerText=Math.floor(distance/(day)),
          document.getElementById("countHours").innerText=Math.floor((distance%(day))/(hour)),
          document.getElementById("countMinutes").innerText=Math.floor((distance%(hour))/(minute)),
          document.getElementById("countSeconds").innerText=Math.floor((distance%(minute))/second)
    },0)
}())
</script>
<!-- End JavaScript -->

Rekomendasi: Cara Memasang Notifikasi Cookies di Blog

Cukup sekian artikel tentang Cara Memasang Maintenance Page di Blog ini, Terima kasih.