Cara Menciptakan Efek Animasi Loading Keren Di Blog Terbaru

Efek animasi loading dikala halaman dibuka / dimuat pada blog, wordpress atau website sanggup menciptakan tampilan situs web tersebut menjadi keren dan menarik. Selain itu memasang atau menambahkan dampak status loading di blogger ini juga ringan tidak terlalu berat alasannya ialah tidak menggunakan banyak arahan html, hanya menggunakan beberapa arahan css dan javascript. Untuk cara kerja dari animasi loading page ini sangat sederhana yaitu akan muncul dan bergerak dikala memuat halaman ketika membuka blog dan akan berhenti / menghilang secara otomatis dan perlahan ketika blogspot kita sudah termuat secara penuh.

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

Kali ini aku akan share gimana Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat teman yang ingin memasang animasi loading page pada blog yang bergerak dikala halaman dimuat.

Cara Menambahkan Efek Loading Di Blog :

1. Bikin animasi loading menyerupai diatas yaitu dengan cara masuk ke hidangan Template dan klik Edit HTML

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru
2. Kemudian cari arahan ]]</b:skin> atau </style> gunakan Ctrl+F untuk memudahkan pencarian

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

3. Setelah itu masukkan script berikut sempurna diatas arahan ]]</b:skin> atau </style> :

#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8R9hMIsjNfit4w-GFCd5vdfQcYxDCDXpHyl8JyRmPolbKSHu8BsmSjIJyfs_2xUDo2ERDGsuZ69EL2TaKuUXuUIFRvxjKfy5OgF1USoZLcd9yWHHX6B1iVQha_Jo-lrqglWP9sU6fWg/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;}

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

4. Kemudian cari lagi arahan <body> gunakan Ctrl+F juga supaya cepat

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

5. Selanjutnya masukkan script berikut sempurna dibawah arahan <body> :

<div id='cssload'/>

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

6. Kemudian cari lagi arahan </body> biasanya paling bawah html blog

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

7. Lalu masukkan script jquery berikut sempurna diatas arahan </body> :

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

Jika sudah teman sanggup klik Simpan template.. Selesai dan lihat hasilnya

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

8. Berikut tampilan blog yang telah berhasil di pasang dampak animasi loading page :

Efek animasi loading dikala halaman dibuka  Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

Nah itulah bagaimana cara menciptakan dampak animasi loading keren di blog dengan gampang dan cepat.

Silahkan dicoba

Subscribe to receive free email updates:

0 Response to "Cara Menciptakan Efek Animasi Loading Keren Di Blog Terbaru"

Posting Komentar