Cara Menambahkan Animasi Loading Pada Website / Blog

Cara Menambahkan Animasi Loading Pada Halaman Website / Blog. Cara menyertakan tanda loading pada blog cukup sederhana cuma dengan menggunakan gambar gif, sedikit arahan CSS dan sedikit instruksi javascript saja. Kenapa Harus Menambahkan Animasi Loading? Alasanya sederhana, yaitu selain sebagai keindahan, dengan menambahkan tanda loading pada blog juga mampu menunjukkan tanda kepada user anda bahwa konten sedang dimuat. Apabila anda selaku seorang publisher Google Adsense, maka dengan menambahkan loading bar juga mengembangkan peluangbahwa user tidak akan melewatkan untuk menyaksikan iklan di blog anda. Dengan menambahkan loading kafetaria pada blog, maka setiap halaman di situs/blog anda akan terbuka sempurna hingga semua iklan tampil sebelum user mampu membacanya. Langsung aja berikut langka-langkah menambahkan animasi loading pada halaman situs web atau blog anda. 1. Siapkan Gambar Gif Dibawah ini ada beberapa gambar gif yang mampu anda gunakan eksklusif Jika anda ingin memakai gambar yang lain, anda mampu download dari beberapa situs dibawah ini: http://preloaders.net/ http://loading.io/ www.ajaxload.gosip http://cssload.net/ http://www.loadinfo.net/ 2. Upload Gambar Gif Setelah menentukan gambar gif yang hendak anda gunakan, silahkan upload gambar tersebut ke layanan penyimpanan gambar mana saja bebas, asal bisa diakses. Lebih gampang jikalau anda upload diblog anda sendiri kemudian copy link gambarnya. 3. Tambahkan arahan CSS Selanjutnya anda perlu menambahkan instruksi CSS untuk menertibkan properti dari gambar gif anda mirip posisi adn lain-lain. Silahkan copy isyarat CSS dibawah ini dan tambahkan didalam tag atau tag  (untuk platform Blogger) #loader position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNHlZ7ObR_2V1_brYE602pLk9KXHykRjuH5CXJ4zR5rNwDBI9wEuudKoRlBducZ2xBuYgI0pr62E8zhaWYb0tYLxbf52Z5xzpwmMII5NNXIpro5lAcDdMbJK6M0A7t58kQ3chqI7LJPao/s1600/800+%25281%2529.gif") 50% 50% no-repeat rgb(255, 255, 255); opacity: 0.9; #loader p font-size: 18px; font-weight: bold; text-align: center; margin-top: 180px; untuk mengganti gambarnya, pada bagian background:url (' '); pada aba-aba diatas ganti dengan url gambar yang anda pakai. 4. Tambahkan Kode HTML Selanjutnya silahkan tambahkan isyarat HTML dibawah ini sempurna dibawah tag pada file HTML blog/web anda. Loading... Anda bisa mengubah tulisan Loading... dengan kata apapun yang anda harapkan. 5. Tambahkan Javascript Langkah terakhir yakni menyertakan sedikit kode Javascript. Silahkan copy instruksi Javascript dibawah ini: Letakkan instruksi Javascript ini sebelum tag pada bab bawah file html anda. 6. Klik Save/Simpan Template Coba refresh halaman blog anda untuk memutuskan Loading Bar Blog yang anda tambahkan sudah melakukan pekerjaan dengan benar. Sekian Cara Menambahkan Loading Bar Pada Blog. Semoga bermanfaat :)
Sumber https://aryhm76.blogspot.com