Memasang Efek Animasi Loading Sederhana di Blog

Memasang Efeck Animasi Loading Sederhana di Blog

Memasang Efeck Animasi Loading Sederhana di Blog - Tips kali ini saya akan mebagikan cara memasang efek animasi loading di halaman blog saat dimuat, Cara kerja dari tips kali ini sangat simpel yaitu animasi loading akan berjalan selama blog kalian sedang dimuat dan otomatis berhenti saat blog kalian sudah siap.

Efek ini tidak akan membuat loading blog kalian lama karena ini hanya sebagai penghias dari waktu loading di website kalian,dan cara pemasangannya sangat simpel karena juga kita meletakkan kode scriptnya berada di bawah bagian template dan kalian dapat mengikuti cara dibawah ini untuk lebih jelasnya.


Memasang Efeck Animasi Loading Sederhana di Blog.


1.Login dahulu ke Blog kalian > Masuk ke menu Tema > Edit HTML dan kalian cari kode ]]></b:skin> atau </style>
dan kalian masukkan kode dibawah ini sebelum kode tersebut

#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbBcsNcKDm_ErhV5wot-4rHr8mEAD3UYkRNM4lFINwSlaA6IWjbRE-_VxFOMs36h3pNZwEsw7x3y_ViHjdG6IM_r_SybufZKLo2xIg9s_24xtgqXhB7MQHRrPSa1scUvRjn6ySasd2RU/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}

2.Selanjutnya kalian masukkan kode dibawah ini tepat dibawah kode <body>

<div id='cssload'/>

3.Dan tambahkan kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>

Untuk hasilnya kalian dapat melihat hasilnya pada demo dibawah ini kalian tinggal klik saja linknya dan kalian akan dialihkan ke codepen

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel