Cara Membuat Efek Animasi Loading Sederhana - Kesempatan kali ini, saya akan berbagi tutorial tentang cara membuat efek animasi loading sederhana saat halaman pada blog Anda sedang dimuat. Saat pengunjung membuka blog Anda, secara otomatis efek atau kode ini akan berjalan pada saat blog sedang dimuat dan akan berhenti dengan sendirinya jika halaman tersebut telah dimuat sepenuhnya.
Cara ini bisa Anda gunakan untuk mengkreasikan blog Anda agar terlihat lebih menarik bagi pengunjung saat menunggu proses loading atau muat dari blog Anda. dalam menambahkan efek animasi loading sederhana ini, terbilang cukup mudah. Anda hanya perlu menambahkan beberapa scipt, untuk lebih lengkapnya silahkan Anda ikuti langkah-langkah di bawah ini.
Cara Membuat Efek Animasi Loading Sederhana
1. Silahkan masuk terlebih dahulu dalam akun blog Anda
2. Pilih bagian Template > Edit HTML
3. Carilah kode ]]></b:skin> atau </style> dengan cara tekan Ctrl+F pada keyboard Anda untuk memudahkan pencarian
4. Tambahkan kode di bawah ini, tepat berada di atas kode ]]></b:skin> atau </style>
#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyP6BcZe2Lr0jhoeRRuYOelsaehSSCa_s9fFczucimckei6KUHPPVQ7spxFgBaGVnAc2iWBL7rTO9cPWIwNFzBd1kqLljWtiwk_osnGatbWK6Q4LkUU0M3gSDttvJL3jbH9ixf1xz38HA/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;} 5. Setelah itu, tambahkan kode HTML di bawah ini, tepat berada di bawah kode <body>
<div id='cssload'/> 6. Kemudian, tambahkan kode di bawah ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script> 7. Klik tombol Simpan Template
Demikianlah tutorial cara membuat efek animasi loading sederhana saat halaman dimuat. Bagaimana cukup mudah bukan? Silahkan Anda share artikel ini agar banyak yang lebih tahu tentang tutorial ini. Semoga bermanfaat.
EmoticonEmoticon