7 Cara Membuat Animasi Loading dengan CSS3 di Blog - Apa itu 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.
Apa tujuan dengan memasang animasi tersebut? Utamanya agar website/blog terlihat lebih efisien sehingga saat beberapa detik masuk ke dalam blog tidak menimbulkan bosan bagi para pengunjungnya.
Pada tutorial ini kita menggunakan CSS3, biasanya menggunakan gambar gif, javascript dan lainnya. Kelebihan dari menggunakan CSS3 lebih cepat dalam menampilkan animasi, simple, dan dalam menggunakan bahasa pemrograman CSS3 ini akan lebih terlihat lebih ringan dibandingkan yang lain.
Sebelum mengetahui caranya berikut pilihan 7 Animasi Loading dengan CSS3, pilih salah satu diantara ke tujuh ini.
Itulah Efek loading ke-7 diatas. Perlu anda ketahui tidak semua browser bisa untuk menampilkan animasi diatas, beberapa browser perlu menggunakan prefix tertentu pada properti kode css-nya.
Pada demo diatas hanya support pada browser chrome dan browser lainnya yang versinya sudah tinggi. Jika tidak berjalan dalam browser anda, cobalah untuk update versi terbarunya.
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 Merah 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
keterangan kode sama seperti pada Pre loader Blogger/Blogspot
5. Klik Save.
Selesai, semoga berhasil, jika mengalami kesulitan atau terjadi error, jangan sungkan untuk komentar :)
Thanks
 |
| Animasi Loading dengan CSS3 |
Apa tujuan dengan memasang animasi tersebut? Utamanya agar website/blog terlihat lebih efisien sehingga saat beberapa detik masuk ke dalam blog tidak menimbulkan bosan bagi para pengunjungnya.
Pada tutorial ini kita menggunakan CSS3, biasanya menggunakan gambar gif, javascript dan lainnya. Kelebihan dari menggunakan CSS3 lebih cepat dalam menampilkan animasi, simple, dan dalam menggunakan bahasa pemrograman CSS3 ini akan lebih terlihat lebih ringan dibandingkan yang lain.
Sebelum mengetahui caranya berikut pilihan 7 Animasi Loading dengan CSS3, pilih salah satu diantara ke tujuh 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.Itulah Efek loading ke-7 diatas. Perlu anda ketahui tidak semua browser bisa untuk menampilkan animasi diatas, beberapa browser perlu menggunakan prefix tertentu pada properti kode css-nya.
Pada demo diatas hanya support pada browser chrome dan browser lainnya yang versinya sudah tinggi. Jika tidak berjalan dalam browser anda, cobalah untuk update versi terbarunya.
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 Merah 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
Cara Menambahkan Animasi Pre-Loader pada Wordpress Self Hosted
Untuk pengguna Wordpress Self Hosted juga bisa menggunakan Pre-Loader ini. Sebenarnya semua website juga bisa untuk memasang animasi ini, tetapi kali ini membahas yang paling umum saja. Untuk menambahkan animasi Pre-Loader pada Wordpress Self Hosted berikut langkah-langkah nya :
1. Login ke Dashboard > Menu Appearance > Editor. Pastikan direktori sudah disetting permision agar bisa di edit.
2. Pilih stylesheet (style.css), tambahkan kode css animasi pre loader yang anda pilih di paling bawah.Klik Save.
3.Pilih file Header (header.php), tambahkan kode html animasi pre loader yang anda pilih tepat di bawah tag <body>
4. Tetap di header.php tambahkan script dibawah ini tepat diatas tag </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>
keterangan kode sama seperti pada Pre loader Blogger/Blogspot
5. Klik Save.
Selesai, semoga berhasil, jika mengalami kesulitan atau terjadi error, jangan sungkan untuk komentar :)
Thanks
1 comments:
visitor jadi ga bosen nih nunggu loading yang kaya gini
Librabry terlengkap untuk referensi tulisan anda selanjutnya
-> Komentar (relevan) sesuai posting di atas.
-> Dilarang Menyertakan Link/Url