Oleh: Farisal Dwitama Maulana 9H/09
Assalamu'alaikum Wr. Wb masih bersama saya Farisal Dwitama M. kali saya akan membagikan cara membuat animasi loading dengan CSS3 di blog.
Sebelum kita memasang animasi loadingnya sebaiknya kita mengetahui tentang Pre-Loader adalah animasi loading yang berjalan sebelum masuk dalam sebuah system atau dalam bentuk lainnya, biasanya terdapat dalam website atau blog yang sering kita temui dengan efek loading yang berbeda-beda.
Jika sudah mengetahui apa arti Pre-Loader itu maka saya akan membagikan caranya.
Pertama : Pilih salah satu dari 7 animasi loading dibawah ini.
1. Audio Wave
Efek dari loading ini seperti gelombang suara
2. Circular Square
Efek loading dengan berbentuk kotak berputar-putar
3. Crossing Shapes
Efek loading elemen yang berganti-ganti dan menyilang
4. The Snake
Animasi loading website ini menyerupai seperti seekor ular yang sedang melata.
5. Spinning Disc
Animasi pre-load yang berputar-putar layaknya disket yang sedang bekerja.
6. Glistening Windows
Animasi pre-loading blog ini menyerupai ikon windows yang berputar-putar.
7. Big Spinning
Sama seperti nomor 5, animasi ini berbentu lingkaran berputar-putar, namun lebih dinamis.
Tahap Kedua : Cara Menambahkan Animasi Pre-Loader Pada Blogger/Blogspot
Untuk menampilkan animasi loading diatas, ikuti langkah dibawah ini :
1. Pilih salah satu style diatas dan copy kode CSS dan HTML nya, karena akan dipakai dalam langkah selanjutanya.
2. Masuk ke akun blogger sobat dan klik menu Template lalu Edit HTML.
3. Letakkan kode CSS Preloader yang anda pilih tadi di atas
]]></b:skin>
4. Untuk kode HTML nya letakkan di bawah
<body>
5. Lalu tambahkan script dibawah ini tepat diatas kode
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript">$(window).load(function() { $(".preload-wrapper").fadeOut("slow"); })</script>
Script diatas untuk memanggil dan menggunakan jQuery. Fungsinya agar animasi pre-loader hanya muncul saat halaman sedang load, dan hilang ketika seluruh halaman telah di load.
Kode yang berwarna
Biru digunakan untuk memanggil library jQuery. Biasanya template blog sudah ada jQuery tersebut, Letakan kode tersebut jika dalam template anda belum ada. cek dahulu pre-loader tersebut jika sudah berjalan tidak perlu memasukan jQuery tersebut.
6. Save Template
7.Lihat Hasilnya
 |
| Hasil Penerapan Animasi Loading dengan CSS3 di Blog |
