Cara Membuat Efek Preloading Halaman Di Blogspot

Membuat Efek Preloading Di Blogspot

TERKUAK.COM - Sudah cukup lama sepertinya saya tidak membuat posting dengan topik mengenai tutorial blogspot. Maka dari itu, pada kesempatan kali ini saya akan menguak bagaimana membuat efek preloading halaman di blogspot dengan cara yang cukup mudah.

Efek preloading pada blogspot sendiri adalah transisi yang akan muncul secara otomatis saat loading halaman di blog dan akan hilang jika halaman tersebut sudah dimuat secara penuh.

Kode efek preloading yang akan saya ulas kali ini menggunakan HTML dan CSS. Jadi, anda jangan khawatir menggunakan kode ini, karena tidak akan mempengaruhi kecepatan blog. Beda halnya kalau kita menggunakan gambar, sudah pasti akan memperberat beban loading blog.

Kira tampilan efek preloading halaman seperti demo dibawah ini:


Nah, langsung saja kita menuju ke pembahasan utama yakni cara membuat efek preloading halaman di blogspot, dibawah ini:

Memasang Kode Efek Preloading Blogspot

Pertama kita harus melakukan edit template untuk memasang 3 kode efek preloading di blogspot yakni kode CSS, HTML dan Javascript. Silahkan login terlebih dahulu ke blogger.com > pilih Tema > lalu pilih opsi Edit HTML .

Kode CSS Efek Preloading Blogspot

Silahkan copy kode CSS ini:

#ong-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}
.ong-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.ong-sp{width:42px;height:42px;clear:both;margin:20px auto}
.ong-sp-wave{border-radius:50%;position:relative;opacity:1}
.ong-sp-wave:before,.ong-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
.ong-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
.ong-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}

Kemudian letak sebelum kode ]]></b:skin>

Contohnya seperti gambar dibawah ini:
kode css efek preloading

Kode HTML Efek Preloading Blogspot

Setelah meletakkan kode CSS diatas, kemudian anda cari kode <body>, Lalu letakkan kode HTML dibawah ini tepat dibawahnya.

<div id='ong-preloader'>
  <div class='ong-preloader-wrap'>
    <div class='af-sp af-sp-wave'></div>
  </div>
</div>

Contohnya seperti ini:
kode html efek preloading

Kode JavaScript Efek Preloading Blogspot

Terakhir, kita tinggal memasag kode javascript untuk membuat efek preloading di blogspot. Copy kode javascript dibawah ini:

<script>//<![CDATA[
window.addEventListener('load', function() {
  // document.querySelector('#ong-preloader').style.display = 'none'
  document.getElementById('ong-preloader').style.display = 'none'
})
//]]></script>
<script>//<![CDATA[
$(window).on('load', function() {
  $('#ong-preloader').delay(500).fadeOut('slow')
})
//]]></script>

Lalu letakkan tepat di atas kode </body> yang ada baris paling bawah template, contohnya seperti gambar dibawah ini:
kode javascript efek preloading

Jika sudah selesai memasang kode efek preloading tersebut, silahkan klik icon Simpan. Kemudian buka blog anda lihat apakah efek preloading nya sudah muncul atau tidak. Namun saya rasa 100% akan berhasil karena hanya menggunakan beberapa kode yang bisa dibilang ringan.

Nah, mungkin saya akhiri posting kali ini mengenai Cara Membuat Efek Preloading Halaman Di Blogspot. Semoga bermanfaat untuk anda yang ingin mengubah tampilan blog menjadi lebih menarik. Jika ada kekurangan silahkan tulis pada kolom komentar dibawah ini.
See you ...

You may like these posts

1 Comments

  1. mhdr
    Tulisannya bagus om, pengen coba tapi takut salah, saya pelajari dulu deh

    Mampir om
    sukadibaca.com