16 March 2022

Animasi Loading Awal Blog Tampil

Animasi Loading Awal Blog Tampil

Ketika membuka sebuah blog di pencarian google search engine, pasti kalian pernah menemui animasi loading ketika mau menuju ke halaman dalam dari blog yang sedang kita tuju tersebut.

Animasi loading yang dimaksud bisa bermacam-macam bentuknya, ada yang berbentuk spinner, ada yang berbentuk tulisan dan ada juga animasi ikon loading. Jeda waktu pemuatan dengan tampilan blog sangat bagus dengan adanya loading tersebut.

Baca Juga : Efek Daun Berguguran dengan Kode Javascript

Maka tak ayal lagi, banyak blogger yang memasang animasi loading blog di blog yang mereka kelola. Selain menambah keindahan, para pengunjung blog akan disuguhi animasi unik sebelum membaca artikel di dalamnya.

Sungguh indah bukan bentuk animasi ini. Dan sekarang, malam ini saya akan memberi sedikit cara guna menampilkan animasi loading blog tersebut. Caranya bisa kalian simak dibawah ini ya :

Baca Juga : Efek Salju Berjatuhan di Halaman Beranda Blog

Berikut ini caranya

Animasi Loading Awal Blog Tampil


CSS

Kalian masuk ke Edit Template/Edit HTML disini kita akan mengutak-atik kode di dalam template. Harap back up dulu template kalian supaya nanti ketika ada error yang terjadi, template kalian masih aman.

Temukan kode ]]></b:skin> dan tempelkan kode dibawah diatas persis kode ]]></b:skin>. Nyari dengan tekan Control + F bebarengan.
#alifaload {background:url(URL gif kalian taruh disini) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}


HTML

Cari kode </head>, tempelkan kode dibawah ini tepat dibawah kode </head>.
<div id='alifaload'/>


Javascript

Cari kode </body> dan tempelkan kode dibawah tepat diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#alifaload").fadeOut(1e3)});
//]]>
</script>


Catatan :
Untuk tulisan URL gif kalian taruh disini adalah URL gambar yang akan ditampilkan saat membuka blog


Nah bila sudah semua tinggal kalian save pekerjaan kalian dan publikasikan blog yang sudah diedit barusan. Terima kasih ya yang sudah mampir kesini dan membaca, serta mempraktekkan artikel Animasi Loading Awal Blog Tampil. Untuk animasi loadingnya bisa kalian lihat di Loading.IO. Terima kasih dan Salam.

Bagikan ke teman-teman kamu
Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon