agung wisudhatama March 16, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

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 dapat berbentuk macam-macam jenisnya. Ada animasi loading tulisan, benda, hewan bahkan icon loading sendiri.

Animasi loading tersebut ada juga yang bentuknya spinner dan juga yang lainnya. Jeda waktu pemuatan dengan tampilan blog sangat bagus dengan adanya loading tersebut. Jadi ketika kita menunggu waktu loading untuk memuat semua halaman, maka kita bisa menantikan dengan melihat animasi loading awal blog tampil ini. Sungguh keren bukan?

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. Semakin lama blog loadingnya, maka animasinya akan semakin lama tampil dan kita bisa melihatnya lebih lama, begitu pula sebaliknya.

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. Tidak sulit kok, karena nanti tinggal copy pasti saja kode berupa HTML, CSS dan Javascript yang tertera dibawah ini dengan jelas :

Baca Juga : Efek Salju Berjatuhan di Halaman Beranda Blog

Berikut ini caranya

Animasi Loading Ketika Awal Blog Tampil Menuju Halaman Display

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.

Result

Bagikan ke teman-teman kamu

Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Animasi Loading Awal Blog Tampil . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.