Cara membuat Preloader Sederhana

"

Kali ini saya mahu sedikit share tentang cara membuat Preloader yang bisa dipakai untuk blog anda, dari namanya pasti sudah ketahuan apa itu Preloader, yup gan, Preloader ini untuk menampilan gambar loading ketika sebuah web di akses, preloader sendiri banyak digunakan web-web modern, terutama web dengan gaya full-screen.

Nah, untuk cara membuatnya gampang gan, silahkan baca sampai selesai.

1. Persiapkan Gambar Loading�
Yang pertama harus di siapkan adalah gambar Loading fomat .GIF animasi. tenang gan, sudah banyak yang share gambar-gambar loading .gif kok, agan-agan semua bisa mencarinya digoogle, atau kalau agan-agan ini master photoshop bisa buat sendiri.

Dan untuk agan-agan yang gak mau pusing cari atau bikin, berikut saya mempunyai gambar loading modern yang saya download dari pixelbuddha.net dan saya upload. agan tinggal pilih, dan klik kanan Copy Image Location

2. Kode HTML�
Sekarang, setelah agan mengunggah gamba loading agan, anda perlu mengerdit template Blogger anda, untuk menambahkan kode HTML berikut ke Template Bloger agan-agan:

Kode hatml diatas agan paste tepat dibawah tag body , atau juga tepat diatas penutupnya , yang jelas harus didalam tag body ini gan, jangan diluar.



3. Style CSS
Setelah kode HTML diatas agan copy paste ke template blogger blog anda, silahkan copy paste juga kode style css berikut, kedalam style css template Blogger anda.

#my-preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background:#FFFFFF url('Preloader_1.gif') no-repeat scroll center;
z-index: 9999;
}

//admin layout
body#layout #my-preloader {display: none !important;}

yang perlu diganti dalam kode css ini adalah url gambar background "Preloader_1.gif" dengan URL gambar loading yang sudah anda upload ke Blogger. misalkan : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLR3sE35eQmsnJpkzbhVlXBO8nUBdKxPLeNLcT2jEsabq2TwAvNlZGqHyhyphenhyphenqlV1aEQfLJ_6Ih11zdX9n0TSfiCZVThMTwecmB9xyTxiMMA34lqVyqhlF80H59p7hH9Pi72IQqHf7kVI86/s1600/Preloader_1.gif Sejauh ini agan-agan sudah bisa save template anda, dan melihat hasilnya.

Jika tampilannya tidak full-screen coba tambahkan juga kode css berikut kedalam template anda :

html, body {
height:100%;
}

4. Javascript
Langkah selanjutnya adalah menambahkan kode javascript, untuk menghenghilakan loading kita ketika halaman sudah selasai me-load semua konten, jika tidak menambahkan kode javascript ini, dijamin gan, tuh gambar loading gak akan menghilang sampai fir'aun bangkit lagi juga.

Kode java script diatas di copy-paste kedalam template Blogger tepat di atas penutup head template . adapun angaka 5000 dalam javasript diatas adalah setting waktunya, anda bisa sesuaikan, 5000 itu sama dengan 5 detik setelah halaman selesai. Jika sudah jangan lupa save template, dan lihat hasilnya.

Selesai.. mudahkan ya?! demikianlah gan tutorial cara membuat Preloader Full screen versi Loefa-Cebook. ehehe. kalau agan-agan mau reposting tutorial ini silahkan, ilmu milik Allah gan, jangan lupa link credit tapi ya,, ahaha biar blog sederhana saya ini kebagian pengunjung. mohon maaaf jika ada salah kata, terimakasih. salam."
Source : http://www.loefa-cebook.com/2014/12/cara-membuat-preloader-sederhana.html

Related Post