Pertama-tama, maaf telat posting karena seharusnya di publish
kemarin. Maaf membuat anda menunggu (emang ada?). Awalnya saya akan
memposting artikel ini sore kemarin, tapi ternyata ada sedikit masalah
koneksi internet di rumah. Jadi, baru sempet sekarang..
Sudah 2 minggu yang lalu sejak saya terakhir kali posting tutorial tentang coding. Terakhir adalah tentang Cara Custom CSS & JS Per Post. Kali ini, saya akan kembali dengan coding. Tepatnya adalah mengenai tutorial membuat animasi pre-load keren saat sebuah halaman website dimuat dengan 7 pilihan.
Animasi Pre-loader adalah animasi yang berjalan saat sebuah halaman website sedang di-load. Animasi ini bisa berupa gambar gif, progress bar dengan javascript/jquery, atau animasi CSS3. Pada tutorial ini, yang dibahas adalah mengenai animasi CSS3, dengan sedikit bantuan dari jquery. Kelebihan dengan menggunakan animasi CSS3 untuk perloader ini adalah lebih ringan dan irit source dibanding dengan gambar atau jquery.
Sebelum membahas bagaimana cara menambahkannya pada situs atau blog anda, berikut ini adalah 7 pilihan animasi yang bisa anda pilih salah satunya.
Yap, itulah ketujuh animasi preloader yang bisa anda pilih. Oh ya, perlu anda ketahui bahwa pada beberapa browser mungkin pre-loader diatas ada yang tidak berfungsi. Hal ini karena untuk bisa menampilkan animasi CSS3, beberapa browser menggunakan prefix tertentu pada properti kode css-nya.
Pada demo di atas, saya membuatnya hanya support untuk browser chrome dan browser lain yang versinya sudah tinggi. Jika tidak berjalan pada browser anda, cobalah untuk mengupdate atau mengganti browser anda. Selengkapnya mengenai cross browser animasi CSS, anda bisa baca di sini :
Mengenal Animasi CSS3
Jika anda ingin mendownload semua animasi diatas, silahkan Klik link dibawah ini :
Download
1. Pilih salah satu style dari 7 pilihan di atas yang anda sukai. Kode CSS dan HTML-nya di copy karena akan dipakai di langkah selanjutnya.
2. Login ke Blogger Dashboard > Pilih Blog > Template > Edit HTML.
3. Pada kolom edit html, lalu tempatkan kode css preloader yang anda pilih diatas kode ]]></b:skin>
4. Untuk Kode HTML-nya, tempatkan tepat dibawah tag <body>.
5. Lalu, tambahkan script dibawah ini tepat diatas tag </head>
– Script diatas adalah untuk memanggil dan menggunakan jquery. Fungsinya adalah agar animasi pre-loader hanya muncul saat halaman sedang di load, dan hilang ketika seluruh halaman sudah di load.
– Kode Yang berwarna merah digunakan untuk memanggil library jquery. Kebanyakan template blog biasanya sudah dilengkapi jquery. Jadi, hanya sertakan kode tersebut jika template anda belum menggunakan library jquery tersebut. Cek terlebih dahulu apakah preloader jalan atau tidak tanpa kode tersebut. Jika berjalan, maka anda tidak perlu menambahkan kode merah tersebut.
6. Terakhir, jangan lupa di save pengeditan template anda.
1. Login ke Dashboard > Pilih menu Appearance > Editor. Pastikan bahwa direktori atau file tema anda sudah disetting permissionnya agar bisa di edit.
2. Pilih file “Stylesheet” (style.css), lalu tambahkan kode css animasi preloader yang anda pilih di bagian paling bawah. Klik Save.
3. Pilih File “Header” (header.php), lalu tambahkan kode html animasi preloader yang anda pilih tepat dibawah tag <body>.
4. Masih pada file header.php, tambahkan juga script dibawah ini tepat diatas tag </head>:
5. Klik Save.
Yap, selesai. Silahkan dicoba. Apabila ada kesulitan dan mengalami error, jangan sungkan untuk tanyakan di komentar. Semoga bermanfaat
Sudah 2 minggu yang lalu sejak saya terakhir kali posting tutorial tentang coding. Terakhir adalah tentang Cara Custom CSS & JS Per Post. Kali ini, saya akan kembali dengan coding. Tepatnya adalah mengenai tutorial membuat animasi pre-load keren saat sebuah halaman website dimuat dengan 7 pilihan.
Animasi Pre-loader adalah animasi yang berjalan saat sebuah halaman website sedang di-load. Animasi ini bisa berupa gambar gif, progress bar dengan javascript/jquery, atau animasi CSS3. Pada tutorial ini, yang dibahas adalah mengenai animasi CSS3, dengan sedikit bantuan dari jquery. Kelebihan dengan menggunakan animasi CSS3 untuk perloader ini adalah lebih ringan dan irit source dibanding dengan gambar atau jquery.
Sebelum membahas bagaimana cara menambahkannya pada situs atau blog anda, berikut ini adalah 7 pilihan animasi yang bisa anda pilih salah satunya.
1. Audio Wave
Efek loading ini bergerak layaknya gelombang suara.2. Circular Square
Efek loading dengan perubahan bentuk elemen yang berputar-putar3. Crossing Shapes
Efek animasi loading dengan bentuk elemen yang berganti-ganti serta saling menyilang4. 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.Yap, itulah ketujuh animasi preloader yang bisa anda pilih. Oh ya, perlu anda ketahui bahwa pada beberapa browser mungkin pre-loader diatas ada yang tidak berfungsi. Hal ini karena untuk bisa menampilkan animasi CSS3, beberapa browser menggunakan prefix tertentu pada properti kode css-nya.
Pada demo di atas, saya membuatnya hanya support untuk browser chrome dan browser lain yang versinya sudah tinggi. Jika tidak berjalan pada browser anda, cobalah untuk mengupdate atau mengganti browser anda. Selengkapnya mengenai cross browser animasi CSS, anda bisa baca di sini :
Mengenal Animasi CSS3
Jika anda ingin mendownload semua animasi diatas, silahkan Klik link dibawah ini :
Download
Cara Menambahkan Animasi Pre-loader pada Blogger/Blogspot
Untuk menampilkan animasi loading ini pada blog anda, silahkan ikuti langkah-langkah dibawah :1. Pilih salah satu style dari 7 pilihan di atas yang anda sukai. Kode CSS dan HTML-nya di copy karena akan dipakai di langkah selanjutnya.
2. Login ke Blogger Dashboard > Pilih Blog > Template > Edit HTML.
3. Pada kolom edit html, lalu tempatkan kode css preloader yang anda pilih diatas kode ]]></b:skin>
4. Untuk Kode HTML-nya, tempatkan tepat dibawah tag <body>.
5. Lalu, 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:<script type=”text/javascript”>
$(window).load(function() { $(“.preload-wrapper”).fadeOut(“slow”); })
</script>
– Script diatas adalah untuk memanggil dan menggunakan jquery. Fungsinya adalah agar animasi pre-loader hanya muncul saat halaman sedang di load, dan hilang ketika seluruh halaman sudah di load.
– Kode Yang berwarna merah digunakan untuk memanggil library jquery. Kebanyakan template blog biasanya sudah dilengkapi jquery. Jadi, hanya sertakan kode tersebut jika template anda belum menggunakan library jquery tersebut. Cek terlebih dahulu apakah preloader jalan atau tidak tanpa kode tersebut. Jika berjalan, maka anda tidak perlu menambahkan kode merah tersebut.
6. Terakhir, jangan lupa di save pengeditan template anda.
Cara Menambahkan Animasi Pre-loader pada Wordpress Self Hosted
Pengguna WordPress Self hosted juga bisa menggunakan animasi preloader ini. Sebenarnya, semua website juga bisa, tetapi disini saya hanya akan membahas yang paling umum saja. Untuk menambahkan animasi CSS3 preloader ini ke situs wordpress anda, silahkan ikuti langkah-langkah berikut ini :1. Login ke Dashboard > Pilih menu Appearance > Editor. Pastikan bahwa direktori atau file tema anda sudah disetting permissionnya agar bisa di edit.
2. Pilih file “Stylesheet” (style.css), lalu tambahkan kode css animasi preloader yang anda pilih di bagian paling bawah. Klik Save.
3. Pilih File “Header” (header.php), lalu tambahkan kode html animasi preloader yang anda pilih tepat dibawah tag <body>.
4. Masih pada file header.php, tambahkan juga 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 dengan keterangan pada panambahan preloader di blogspot di atas<script type=”text/javascript”>
$(window).load(function() { $(“.preload-wrapper”).fadeOut(“slow”); })
</script>
5. Klik Save.
Yap, selesai. Silahkan dicoba. Apabila ada kesulitan dan mengalami error, jangan sungkan untuk tanyakan di komentar. Semoga bermanfaat
0 komentar:
Posting Komentar