Baca juga: Cara Membuat Efek Turun Salju di Blog
Memasang Efek Preloading sederhana ini sangat mudah sekali, bahkan kalian hanya perlu mengcopy kode dibawah ini dan tinggal menempelkannya pada template blog kalian.
Cara Membuat Efek Preloading Keren di Blog
Saya akan memberikan cara memasang preloading google dan preloading sederhana seperti yang saya gunakan, berikut ini adalah cara memasang preloading keren di blog.
Memasang Efek Preloading Sederhana di Blog
Pertama-tama buka Blogger > Tema > Edit HTML, lalu copy kode preloading dibawah ini dan pastekan tepat diatas </body>.
<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://4.bp.blogspot.com/-1yYrB6cSaSA/XEdMofK4dcI/AAAAAAAADk0/ypF0sOj4UYUEJKt6Wa-21MoZ4ePs-kXWgCLcBGAs/s1600/lg-text-entering-comment-loader.gif') no-repeat 50% 30%;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>Jika sudah, klik Simpan dan lihat hasilnya.
Untuk Demo Preloading Sederhana nya, Klik disini (Open in new tab).
Memasang Efek Preloading Google di Blog
Pertama-tama buka Blogger > Tema > Edit HTML, lalu copy kode preloading dibawah ini dan pastekan tepat diatas </body>.
<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://4.bp.blogspot.com/-fxhOm3MBvpw/XEdIaeZ9tuI/AAAAAAAADkc/Ww_VjylWwSc0OdaJYsQxvGsYZfmmdlZTACLcBGAs/s1600/image1.gif') no-repeat 50% 30%;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>Jika sudah, klik Simpan dan lihat hasilnya.
Untuk Demo Preloading Google nya, Klik disini (Open in new tab).
Baca juga: Cara Memasang Auto Refresh di Blog
Nah, begitulah Cara Memasang Efek Preloading Keren di Blog. Jika kalian suka dengan artikel ini, kalian bisa memfollow fanpage kita di Instagram (@infinityxsamz).
Penutup
Terima kasih telah membaca artikel Cara Membuat Efek Preloading Keren di Blog, Semoga bermanfaat untuk kalian semua.