Home Tips Blog Cara Membuat Tampilan Blog Sedang Dalam Perbaikan

17 September 2023

Cara Membuat Tampilan Blog Sedang Dalam Perbaikan

Komentar
بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Cara Membuat Tampilan Blog Sedang Dalam Perbaikan
MAINTENANCE adalah sebuah pekerjaan yang meliputi pemeliharaan dan perawatan. Menurut para ahli, menjelaskan secara rinci bahwa dalam inti dari maintenance tersebut.

Bahwa maintenance adalah suatu kegiatan untuk memelihara dan menjaga fasilitas yang ada serta memperbaiki, melakukan penyesuaian, atau penggantian yang diperlukan untuk mendapatkan suatu kondisi operasi produksi agar sesuai dengan perencanaan yang ada.

Baca Juga :



Dalam dunia perBlogger-an, juga terdapat istilah maintenance teman-teman. Dimana maintenance ini meliputi : Edit Template, Ganti Template, Publish Artikel, Edit Meta Tag, Edit Custom Widget Template dan lain sebagainya. Seperti sebuah peralatan listrik dan motor yang memerlukan perawatan, Blog juga membutuhkan perawatan rutin.

Sehingga ketika kita sebagai seorang blogger akan mengedit blog, disarankan dan sangat disarankan untuk memberikan sebuah informasi kepada pengunjung dengan sebuah papan pengumuman penting.

Pengumuman itu meliputi tulisan :"Blog Sedang Dalam Maintenance". Lah terus bagaimana membuatnya. Apakah kita harus menguasai jurus-jurus tertentu supaya pengumuman itu dapat tampil? sepertinya tidak teman-teman. Apakah kita harus mengundang seorang pesulap untuk menampilkannya? saya rasa juga tidak. Terus bagaimana?

Ternyata kita hanya perlu menggunakan bahasa pemrograman yang sudah sangat familiar dan juga menjadi andalan tutorial di website ini yaitu CSS. Ya dengan CSS-lah kita akan membuatnya.

Demo akan saya berikan seperti ini nanti jadinya :



Baca Juga :



Sekarang kita beranjak ke cara bagaimana membuatnya. Oke ikuti terus ya, dan simak baik-baik cara dibawah ini. Terus praktekkan di blog kalian untuk menampilkannya. Ingat : Selalu "Back Up Template" sebelum utak-atik template blog kalian.

Sehingga bila terjadi kesalahan editing, bisa dikembalikan seperti semula. Dibawah ini adalah caranya :

Cara Memasang Blog Dalam Perbaikan dengan CSS

 1. Masuk ke BLOGGER
2. Pilih menu TEMA
3. Pilih EDIT HTML setelah itu kita masuk ke template
4. Tempelkan kode dibawah ini diatas </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>Dalam Perbaikan</h1>
        <p>Update sedang berjalan. Kamu dapat singgah lain waktu.</p>
        <p class="mainParTwo">Lainnya ada <a href="#" target="_blank" title="Changelog">Disini</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. Tempel kode dibawah ini diatas ]]></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. Pilih SIMPAN
7. Selesai

Jika ingin menampilkan pada halaman tertentu, tentu saja beda juga cara yang harus diterapkan. Karena kita tidak mengutak-atik template lagi, tapi hanya menempelkan code pada bagian HTML pada postingan saja. Berikut caranya :
<!-- 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>Dalam Perbaikan</h1>
        <p>Update sedang berjalan. Kamu dapat singgah lain waktu.</p>
        <p class="mainParTwo">Lainnya ada <a href="#" target="_blank" title="Changelog">Disini</a>!</p>
      </div>
    </div>
  </div>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
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 -->


Perusahaan besar seperti Google, Facebook, maupun Twitter juga sering melakukan update berkala untuk memastikan webnya bekerja maksimal untuk memenuhi kebutuhan usernya. Sedang pada Blog yang sedang kita bahas kali ini, Maintenance dilakukan ketika kita akan mengupdate artikel atau mengedit template.

Sehingga para pengunjung blog kita akan segera tahu dan akan mengerti bila blog kita sedang diupdate. Tentu saja tidak lain dan tidak bukan untuk kenyamanan pengguna. Sekian artikel hari ini. Maaf ya sudah lama tidak update artikel. Semoga lain waktu kita bisa membahas tutorial yang lain. Selamat sore. Salam Blogger.

Bagikan ke teman-teman kamu
Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Membuat Tampilan Blog Sedang Dalam Perbaikan . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts
Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon

Subscribe to: Post Comments ( Atom )