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.
Daftar Isi Postingan
1. Audio Wave
Efek loading ini bergerak layaknya gelombang suara.
2. Circular Square
Efek loading dengan perubahan bentuk elemen yang berputar-putar
3. Crossing Shapes
Efek animasi loading dengan bentuk elemen yang berganti-ganti serta saling 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.
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 :
Jika anda ingin mendownload semua animasi diatas, silahkan Klik link dibawah ini :
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.Watch Full Movie Online Streaming Online and Download
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”>
$(window).load(function() { $(“.preload-wrapper”).fadeOut(“slow”); })
</script>
Keterangan Kode:
– 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”>
$(window).load(function() { $(“.preload-wrapper”).fadeOut(“slow”); })
</script>
Keterangan kode sama dengan keterangan pada panambahan preloader di blogspot di atas
5. Klik Save.
Yap, selesai. Silahkan dicoba. Apabila ada kesulitan dan mengalami error, jangan sungkan untuk tanyakan di komentar. Semoga bermanfaat 🙂
~Muhammad Syakirurohman~
sumber :
– Webdesign.tutsplus.com
– ihatetomatoes.com
7 Animasi Pre-Loader Keren dengan CSS3 - BloggerIndo
[…] maaf telat posting karena seharusnya di publish kemarin. Maaf membuat anda menunggu (emang ada?). Awalnya saya akan memposting […]
newbie
Menarik, boleh dicoba.
Syakir Rahman
Yaap, Silahkan 🙂
Alfarel Zaki Maulana Anam
bagus mas patut dicoba..!
ngomong2 kotak komentarnya biar bisa seperti punya mas Syakir gimana? (ada kotak email & website)
Emang dari template atau ngedit sendiri? kalau ada boleh saya minta? Kalo boleh langsung dikirim via email y mas ! 😀
Syakir Rahman
Sip silahkan..
oh kalau itu sih memang sudah jadi komentar default.. Di wordpress semuanya juga begitu.. Kalo maksud sobat ngira blog ini adalah blogspot, yaa memang gak bakal ada format kotak komentar yang seperti ini di blogspot..
Alfarel Zaki Maulana Anam
Oh gitu ya mas… iya memang saya kira dari blogspot.. hehee. Yasudah salam sukses mas! 🙂
Syakir Rahman
Yap, sukses juga yaa mas 😀
Achmad Muharya
pernah liat yang kayanya gini juga di blog DTE, tapi yang ini banyak yang baru animasinya 😀
khoirun naim
gan ini bikin blog lola kagak
happy blogwalking hhehe
Syakir Rahman
Nggak kok gan, ini kan cuma css, sedikit lagi.. kalo lama berarti itu dari template agannya.. Dengan efek loading ini, lama tidaknya loading blog agan jadi ketauan jelas…
Sreeraj M Ajay
Great post, this is exactly what I am looking for. Waiting for next post 🙂
Abdul
Ini nih yang saya cari dari kemarin, tapi keyword untuk cari di google gak tau :D. terima kasih min.
Syakir Rahman
Yaaap.. Sama-sama 🙂
SUAIQ
Wah, keren! Izin mencoba dan share kembali.
Syakir Rahman
Yaap, silahkaan
andre.as
Saya sudah coba kang…. tenrnyata bisa dipakai di blogger mantap artikelnya 😀
okky surya
nice….
andre.as
permisi kang saya mau nanya, kita bisa bikin sendiri/custom animasi loading css seperti di atas di cssload.net tapi setelah klik get code saya bingung masangnya….:D
mohon pencerahanya kang….
maklum pemula
Syakir Rahman
di jquery diatas kan ada kode “.preload-wrapper”, nah “preload-wrapper” diganti sama class dari loader yang dihasilkan.. misalkan cssloadnya menghasilkan markup :
<div class="bubblingG">blablba..</div>, nah si “preload-wrapper” diganti jadi “bubblingG”, kalo misalnya markupnya pakai id kaya gini :<div id="bubblingG">blabla..</div>, “titik” sebelum kata preload-wrapper (“.preload-wrapper”), diganti jadi “#”, sehingga menghasilkan #preload-wrapperfahriza
klo ngeletakin nyaaa di html gmna mas,
kok malah berantakan tampilan saya
Syakir Rahman
Kan di atas sudah dijelaskan
bisot palawarukka
keren-keren, terima kasih udah share, lagi nyari animasi loading gini tapi yang backgroundnya gelap
Syakir Rahman
itu bisa kok di edit biar jadi gelap, di cssnya tambahin aja #preload_wrapper {background:rgba(0,0,0,0.5);}
Putro
maaf mas kalau dipakai untuk website dengan php bisa tidak? kalau bisa dipasangnya bagai mana ya? maaf masih pemula
Syakir Rahman
Bisa.. itu di bagian bawah kan sudah dijelaskan.. biar lebih mudah coba download saja bundle filenya
show me
udah saya taro di script html saya ko yang keluar animasi loading nya doang ya? animasi loadingnya ga selesai-selesai -_-
Syakir Rahman
Cara pakenya ada di bawah mas.. pakai javascript
Bmabang
mas cara make di html gmn mas, muter-muter trs loadernya mksh
Syakir Rahman
Jquerynya jangan lupa dimasukin juga lah.. lihat petunjuk di bagian paling bawah
ahmad aditya
thanks gan 🙂
sangat bermanfaat :))
purwanto
mas saya udah nyoba tapi kok stelah proses loading nya sudah slesai animasi nya gak hilang-hilang dan tampilan nya keluar,,mohon di bantu mas
Syakir Rahman
Coba mas ikutin petunjuk pemakaian yang pakai jquery di bagian paling bawah..
Agyztia
Bagus juga setelah dicoba , mantap buat om syakir (y)
Ridwan Salamony
Makasih gan, berhasil. 😀
Kevin Wibowo
Saya sudah coba terapkan semua gan, tapi page gak mau muncul?
alias selalu load preloadernya.. gak mau pindah ke page?
sya terapkan di Web Hosting di cpanel
syakirurahman
Ada yang salah dipenerapan jqueryny, silahkan perbaiki..
semangat
ijin download mas. mantap….tutorialnya