Beranda
HTML

Memasang Maintenance Page di Blog

Seperti tubuh manusia, ternyata blog juga mengharapkan dukungan rutin. Yang pasti, upaya perbaikan itu penting demi memastikan setiap elemen beroperasi dengan lancar dan sesuai tuntutan.

Sekarang, di dalam sebuah artikel yang pernah saya baca dalam perancangan web, beberapa poin perbaikan perlu dilakukan. Satu di antaranya adalah menjalankan Maintenance. Apa arti sebenarnya dari kata tersebut?

Apa itu Maintenance?

Maintenance adalah serangkaian aktivitas yang dilakukan untuk menjaga dan memperbaiki suatu sistem atau objek agar tetap berfungsi dengan baik. Hal ini melibatkan perawatan rutin, pemeriksaan, perbaikan, dan penggantian suku cadang yang diperlukan agar sistem atau objek tetap optimal dalam kinerjanya. Tujuan utama dari maintenance adalah memastikan bahwa sistem atau objek tersebut tetap beroperasi dengan efisien dan mencegah terjadinya kerusakan atau kegagalan yang dapat mengganggu fungsinya. Maintenance dapat mengacu pada berbagai hal, seperti perawatan bangunan, kendaraan, peralatan, mesin, perangkat lunak, jaringan komputer, dan lain sebagainya.

Cara Memasang Maintenance Page Pada Blog

1. Masuk ke Blog

2. Pilih menu Theme

3. Pilih EDIT HTML

4. Tempel kode berikut 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 class="mainParTwo">The changelog <a href="#" target="_blank" title="Changelog">here</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>

5. Agar tampilannya lebih menarik, silahkna tempelkan kode CSS berikut di atas kode ]]></b:skin>

html,body{overflow:hidden}
.maintenancePage{position:fixed;width:100%;height:100%;background:#fefefe;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}
.mainBox{width:100%;height:100%;background:linear-gradient(11.7deg,#fafafa 53%,#ffffff 47%)}
.mainAnimation{margin-top:8.9%;display:inline-block}
#mainCount{text-align:center;margin-left:-50px}
#mainCount ul li{display:inline-block;color:#888;font-size:13px;list-style-type:none;padding:20px;text-transform:uppercase}
#mainCount ul li span{display:block;color:#555;font-size:18px;font-weight:bold}
.maintenancePage .mainSubcontainer h1{color:#677880;font-size:50px;letter-spacing:2px;text-transform:uppercase}
.maintenancePage .mainSubcontainer p{font-size:15px}
.maintenancePage .mainSubcontainer p a{color:#009ee0;font-weight:bold;text-decoration:none}
.maintenancePage .mainSubcontainer p a:hover{color:#068ac2}
.maintenancePage .mainSubcontainer p.mainParTwo{margin-top:-30px;font-size:13px;opacity:.8}
.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:46.5%}.mainSubcontainer{margin-top:42%}.maintenancePage .mainContainer h1{font-size:30px}#mainCount{margin-left:-40px}#mainCount ul li{font-size:13px}#mainCount ul li span{font-size:13px}}

6. Jika sudah, silahkan simpan.

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

Memasang Maintenance Dalam Halaman Tertentu

Jika ingin menampilkan pada halaman tertentu, silahkan tempel di bagian bawah tulisan ( pada 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 class="mainParTwo">The changelog <a href="#" target="_blank" title="Changelog">here</a>!</p>
      </div>
    </div>
  </div>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
/* Maintenance Page by www.ferisp.com */
html,body{overflow:hidden}
.maintenancePage{position:fixed;width:100%;height:100%;background:#fefefe;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}
.mainBox{width:100%;height:100%;background:linear-gradient(11.7deg,#fafafa 53%,#ffffff 47%)}
.mainAnimation{margin-top:8.9%;display:inline-block}
#mainCount{text-align:center;margin-left:-50px}
#mainCount ul li{display:inline-block;color:#888;font-size:13px;list-style-type:none;padding:20px;text-transform:uppercase}
#mainCount ul li span{display:block;color:#555;font-size:18px;font-weight:bold}
.maintenancePage .mainSubcontainer h1{color:#677880;font-size:50px;letter-spacing:2px;text-transform:uppercase}
.maintenancePage .mainSubcontainer p{font-size:15px}
.maintenancePage .mainSubcontainer p a{color:#009ee0;font-weight:bold;text-decoration:none}
.maintenancePage .mainSubcontainer p a:hover{color:#068ac2}
.maintenancePage .mainSubcontainer p.mainParTwo{margin-top:-30px;font-size:13px;opacity:.8}
.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:46.5%}.mainSubcontainer{margin-top:42%}.maintenancePage .mainContainer h1{font-size:30px}#mainCount{margin-left:-40px}#mainCount ul li{font-size:13px}#mainCount ul li span{font-size:13px}}
</style>
<!-- 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 -->

Penutup

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