Membuat Pesan Tunggu (Loading) Pada Blog


pesan tunggu (loading)

Loading yang saya maksud disini merupakan waktu yang diperlukan oleh browser untuk menampilkan website anda secara keseluruhan. Pasti keren kan kalo Blog anda menampilkan loading sambil menunggu seluruh halaman terbuka. Sekedar informasi bahwa tutorial ini saya dapat dari eltelu.blogspot.com. Untuk membuatnya anda bisa mengikuti langkah-langkahnya dibawah ini,
  • Login.
  • Pilih menu "Template".
  • Klik "Edit HTML".
  • Centang "Expand Template Widget".
  • Cari kode ]]></b:skin>.
  • Kemudian copy kode dibawah ini, dan letakkan diatas kode ]]></b:skin>.
.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% );
}

  • Selanjutnya anda cari kode </head>.
  • Lalu copy kode yang ada dibawah ini, dan letakkan diatas 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>

  • Berikutnya cari kode <body>. Jika pada template Blog standar kode lengkapnya <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  • Sisipkan kode onLoad='tampilkanpesanpembuka();' didalam kode <body>, sehingga kodenya seperti pada dibawah,
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onLoad='tampilkanpesanpembuka();'>

  • Jika sebelumnya anda sisipkan diantara rangkaian kode <body>, sekarang anda letakkan kode berikut dibawah kode <body>.
<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://lh3.googleusercontent.com/-Zk40hj9L0As/UFBTZtzw8oI/AAAAAAAAAkg/THtZhPN-IU8/s800/Proses%2520Loading.gif'/><br/>
      SEDANG MEMUAT KONTEN HALAMAN<br />
      SILAKAN TUNGGU
    </div>
   </div>
</b:if>

  • Jika semua kode telah anda letakkan ditempat yang tepat, sekarang klik "Simpan template".

Dengan mengikuti langkah-langkah diatas, sekarang Blog anda akan melakukan penayangan loading-nya.

Sekian dari saya, kurang lebihnya mohon maaf.

Semoga bermanfaat.

4 comments: