gema.my.id - 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 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 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:
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 ...