Skip to main content

Cara Memasang Maintenance Page di Blog

Cara Memasang Maintenance Page di Blog

Memasang Maintenance Page di Blog merupakan salah satu cara memberitahukan kepada para pengunjung bahwa blog kita sedang mengalami perbaikan atau pembaruan untuk meningkatkan user experience yang lebih baik lagi.

Biasanya beberapa orang tidak terlalu memikirkannya pada saat melakukan perubahan pada blognya, membiarkannya hanya menampilkan halaman kosong dengan pesan error yang terkadang muncul, tampilan berantakan dan sebagainya.

Hal ini bisa membuat pengunjung berpikir bahwa blog kita sudah tidak terawat dengan serius, sudah tidak bisa diakses dan lain sebagainya sehingga membuatnya kehilangan pengunjung. Tentunya sangat disayangkan bagi kamu yang blognya sudah cukup terkenal dan banyak artikel yang berada di halaman pertama mesin pencari google.

Dalam beberapa kasus, Maintenance Page juga digunakan pada blog baru untuk menginformasikan bahwa blog masih belum siap terbit, jadi masih butuh waktu dengan memberikan pesan notifikasi perbaikan.

Untuk memasang Maintenance Page di Blog caranya cukup mudah dan cepat apabila menggunakan WordPress, karena disana disediakan beberapa plugin yang dapat menunjang kebutuhan ngeblog kita.

Berbeda dengan blogger yang harus memasangnya secara manual dengan menyisipkan beberapa script terlebih dahulu ke dalam template. Tapi tenang saja, caranya tidak terlalu sulit dan tampilannya pun cukup keren dengan fitur hitungan waktu mundur, mulai dari hari, jam, menit sampai detik.

Maintenance Page

Jika tertarik, silahkan disimak cara pemasangan berikut ini.

Cara Memasang Maintenance Page di Blog

1. Masuk ke Dashboard Blogger

2. Pilih menu Theme > Edit HTML

3. Letakan kode dibawah ini tepat 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>
4. Lalu letakan lagi kode dibawah ini tepat di atas kode ]]></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}}

5. Simpan template dan selesai.

Penutup

Maintenance Page biasanya dilakukan kepada mereka yang memiliki website-website besar untuk memperbarui fitur dan kinerja yang lebih baik. Namun blogger juga dapat menggunakannya, misalkan ketika sedang mengganti atau memodifikasi template.

Sekian pembahasan artikel mengenai Cara Memasang Maintenance Page di Blog, semoga bermanfaat dan selamat mencoba.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar
-->