» » Cara Memasang Transparent Loading Screen di Blog

Cara Memasang Transparent Loading Screen di Blog

Trik yang akan dibahas pada artikel kali ini adalah, menampilkan loading screen transparan pada blog, ketika halaman blog dibuka oleh  pengunjung.  Hal ini penting untuk mengalihkan perhatian pengunjung, ketika halaman blog membutuhkan waktu loading yang lebih lama, karena memuat grafis dengan resolusi yang tinggi atau ketika sedang memuat widget dengan javascript yang agak berat.  Selain untuk mempercantik tampilan blog, trik ini juga dimaksudkan  Persentase bounce rate blog, agar pengunjung tidak terburu-buru menutup jendela browsernya sampai halaman blog terbuka secara sempurna.

Dan jika sobat suka trik ini, berikut adalah cara memasang transparent loading screen di blog.

  • Login ke blogger dengan ID sobat.
  • Klik nama blog anda pada dashboard blogger lalu pilih menu Template
  • Sebaiknya Backup template sobatterlebih dahulu
  • Kemudian klik Template->> Edit HTML ->> Proceed.
  • Cari kode <head> pada dokumen HTML template anda, copy script di bawah ini dan paste tepat di bawah kode <head>
    <script type="text/javascript">
    (function()
    { 
      if (window.addEventListener)
      {
        window.addEventListener("load", hide_loading_screen, false); 
      }
      else
      {
        window.attachEvent("onload", hide_loading_screen);
      }
    })();
    function display_loading_screen()
    {
      document.getElementById("loading_screen").style.display = 'block';
    }
    function hide_loading_screen()
    {
      document.getElementById("loading_screen").style.display = 'none';
    }
    </script>
    <style type="text/css">
    #loading_screen
    {
      display: none;
      position: fixed;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
      background-color: black;
      color: white;
      text-align: center;
      padding-top: 100px;
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
    </style>
  • Selanjutnya cari kode </body> pada dokumen HTML template sobat, copy script di bawah ini dan paste tepat di atas kode </body>
    <div id="loading_screen">
      <p>
      <img src="https://lh6.googleusercontent.com/-lfySfOMadl8/T7hpB9CKLqI/AAAAAAAABz0/LxMf7daxniA/s50/darkloading.gif" />
      <br />
      <h1>Loading...</h1>
      <br />
      <h3>Please Wait...</h3>
      </p>
    </div>
    <script type="text/javascript">display_loading_screen();</script>
  • Simpan template sobat dengan menekan tombol Save Template
  • Langkah terakhir periksa blog sobat jika berhasil ucapkan Alhamdulillah...