Home » » Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru


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

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

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

Cara Menambahkan Efek Loading Di Blog :

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

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

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

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

#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemYYvZXqg9xhe_Fafm7wtBFqdPdA-HYZMNCCJJgqtEakX-5uzFKhSiMuyRjiROf4KQfUOq50QLn2ik9DgiWFEiRrWDIF3dFW4IVqPQzRk_sJrdTVk1gqCSb7g_wJHj38LZt4p6A5_6Wo/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;}

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

4. Kemudian cari lagi kode <body> gunakan Ctrl+F juga agar cepat

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

5. Selanjutnya masukkan script berikut tepat dibawah kode <body> :

<div id='cssload'/>

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

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

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

7. Lalu masukkan script jquery berikut tepat diatas kode </body> :

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

Jika sudah sobat bisa klik Simpan template.. Selesai dan lihat hasilnya

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

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

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

Nah itulah bagaimana cara membuat efek animasi loading keren di blog dengan mudah dan cepat.

Silahkan dicoba

Artikel Lainnya :

9 komentar:

  1. Terima kasih boss. Jadi makin keren blog saya.

    Jangan lupa kunjungi blog saya yang masih kosong isinya hehehe...

    http://www.dwisulistiyo.id

    ReplyDelete
    Replies
    1. Mantapp boss.. makin keren blognya ya.. oke kunjungan balik ke blognya

      Delete
  2. Excellent post. I used to be checking constantly this blog and
    I am inspired! Very useful info particularly the final part
    :) I deal with such information a lot. I used to be
    looking for this certain information for a very long time.

    Thanks and good luck.

    ReplyDelete
  3. Appreciate this post. Will try it out.

    ReplyDelete
  4. keren bang..thanks ya ntuk ilmunya!

    ReplyDelete

Powered by Blogger.