membuat pesan loading blog

ELTELU - Tampilan Teks Pesan Pembuka Ketika Loading Halaman

Sobat, bisa jadi Anda sudah tidak asing lagi dengan rangkaian kode JavaScript 'alert' yang dapat digunakan untuk membuat ucapan selamat datang saat blog dibuka. Namun tahukah Anda bahwasanya penggunaan script tersebut untuk membuat pesan atau ucapan selamat datang pada sebuah blog, bisa jadi malah merepotkan pengunjung karena tiap kali halaman atau artikel dibuka maka pesan atau ucapan selamat datang akan ditampilkan dan tiap kali pesan ditampilkan maka pengunjung pun harus mengeklik tombol ‘OK’ untuk menghilangkan pesan yang dimaksud.

Nah, berbicara mengenai pembuatan ucapan selamat datang, sebenarnya ada teknik lain yang lebih efektif karena tidak akan merepotkan pengunjung untuk selalu mengeklik tombol ‘OK’ ketika pesan ditampilkan saat membuka halaman atau artikel pada sebuah blog. Bahkan apabila loading atau penayangan blog yang dimaksud termasuk lambat, maka tampilan pesan yang dimunculkan dengan menggunakan teknik berikut ini dapat dijadikan sebagai indikator proses penayangan konten dan kemudian pesan secara otomatis akan hilang ketika proses penayangan blog telah selesai.

Selanjutnya untuk membuat ucapan selamat datang atau pesan pembuka sebagai penanda proses penayangan halaman, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di atasnya.

.loading-frame {
  height: auto; overflow: hidden;
  width: 250px; padding: 5px;
  border: 1px solid #666666;
  color: #000000 !important; text-align: center;
  font: bold 13px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
  -webkit-border-radius: 4px; -moz-border-radius: 4px;
  border-radius: 4px; background: #f3f3f3;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #ffffff) );
  background: -moz-linear-gradient( center top, #f3f3f3 30%, #ffffff 70% );
}

Keterangan:

Rangkaian kode CSS tersebut digunakan untuk mengatur warna dan ukuran bingkai, latar, serta huruf yang digunakan pada tampilan pesan. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka silakan lakukan kustomisasi seperlunya.

Ketiga, sisipkan rangkaian kode berikut ini tepat di atas kode </head>.

<script type="text/javascript" language="javascript">
  function tampilkanpesanpembuka() { 
    if (document.getElementById){
      document.getElementById('pesanpembuka').style.visibility='hidden';
      }
    else {
      if (document.layers){ 
        document.pesanpembuka.visibility = 'hidden';
      }
    else { 
      document.all.pesanpembuka.style.visibility = 'hidden';
      }
    }
  }
</script>

Keempat, sisipkan kode onLoad='tampilkanpesanpembuka();' pada <body>. Sebagai contoh perhatikan penyisipan kode tersebut pada <body> yang terdapat dalam template standar (bawaan) Blogger di bawah ini.

Jika <body> yang digunakan dalam template standar (bawaan) Blogger adalah <body expr:class='"loading" + data:blog.mobileClass'>, maka setelah kode yang dimaksud disisipkan ke dalamnya akhirnya akan menjadi seperti yang tampak pada rangkaian kode di bawah ini.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onLoad='tampilkanpesanpembuka();'>

Kelima, sisipkan kode berikut ini tepat di bawah kode <body> (seperti yang dimaksud pada langkah keempat).

  <b:if cond='data:blog.isMobile'>
  <b:else/>

   <div id='pesanpembuka' align='center' style='width: 100%; top:300px; white-space: nowrap; position: fixed; z-index: 100;'>
    <div class='loading-frame'>
      <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitk5AtLiT84_y1mDfVSadj35ztNFfaoMz0fKawhgucY9P-Ag-z934G-AQgNTziSWJ60UPUXFZSfQjhFXAkys124yqFc9cE8rG7AYdfoHryJtylDPLzhBVHu0XHoqUaCAeNhCLNNwL3pEE/s800/Proses%2520Loading.gif'/><br/>
      SEDANG MEMUAT KONTEN HALAMAN<br/>
      SILAKAN TUNGGU
    </div>

   </div>
  </b:if>

Keenam, simpan template.

Dengan menggunakan teknik tersebut akhirnya ketika blog dibuka dan mulai dilakukan proses penayangan (loading), secara otomatis pesan (seperti yang tampak pada gambar di atas) akan ditampilkan dan saat proses penayangan konten halaman telah selesai maka secara otomatis pula pesan yang dimunculkan sebelumnya akan hilang atau disembunyikan.

Semoga berguna, bermanfaat, dan selamat mencoba mengimplementasikan pada blog Anda.

Salam.