Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat loading page animasi atupun preloader page di blog menggunakan gambar
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Preloader
Pada postingan admin sebelumnya telah banyak sekalibmmebahas mengenai preloader blog dengan berbaga macam tampilan, jika berkenan silahkan tuliskan di menu pencarian preloader blog, ataupun loading page animasi di dalam blog icloudice, nanti semuanya akan muncul artikel mengenai preloader ataupun loading animasi tersebut
Menggunakan Gambar
Bedanya kali ini preloader atupun loading page yang di gunakan adalah dengan menggunakan gambar, karena biasanya loading page yang admin javarkan selalu menggunakan animasi CSS
Seluruh tampilan
Apabila kamu menerapakan preloader page di dalam template kamu, maka tampilan loading page tersebut akan muncul pada seluruh halaman blog, alias akan muncul pada setiap blog di refresh ataupun di muat ulang
Contoh Tampilan
Jika kamu penasaran dengan contoh preloader page tersebut, silahkan kamu refresh halaman blog ini, nati tampilan preloader tersebut akan muncul secra otomatis
Info: Bagaimana aovat dengan contoh tampil nya keren sekali yak
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana kah caranya membuat preloader halaman di blog, perhatian setiap langkah lagkah yang admin jabarkan di bawah ini
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah mehyalin kode CSS di bawah ini, kemudian kamu bisa meletakkan nya di atas kode ]]></b:skin>
#rahpreloader{position:fixed;top:0;bottom:0;margin:auto;background:#fff;height:100%;width:100%;z-index:99999}
#rahpreloader span.rahlink{position:absolute;right:11px;top:5px}
#rahmulaiaktif{position:fixed;top:0;bottom:0;left:0;right:0;margin:auto}
#rahmulaiaktif{-webkit-animation:spinner 2.5s infinite linear;animation:spinner 2.5s infinite linear}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan adalah mejualin lagi kode javascript di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>
<script type='text/javascript'>var _0x2ab0=["\x6C\x6F\x61\x64","\x66\x61\x64\x65\x4F\x75\x74","\x23\x72\x61\x68\x6D\x75\x6C\x61\x69\x61\x6B\x74\x69\x66","\x23\x72\x61\x68\x70\x72\x65\x6C\x6F\x61\x64\x65\x72","\x62\x69\x6E\x64"];$(window)[_0x2ab0[4]](_0x2ab0[0],function(){jQuery(_0x2ab0[2])[_0x2ab0[1]]();jQuery(_0x2ab0[3])[_0x2ab0[1]]()})</script>Info: Kode JavaScript di atas tersebut jangan kamu edit, karena gak bisa juga ngeditnya heheheh
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah dengan menyalin kode HTML di bawah ini kemudian letakkan di bawah kode <body>
<div id='rahpreloader'>
<img id='rahmulaiaktif' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQFCuFpjnDju2TIRYh0ZmqWnNVrHiFysef9GD0s4JhdC3glSrUbqhLLCjKxN4DNuOlwhAMdT7g_R3zdokU7vQHBYHLWGQaA6JUp1yI3gxHdxhi-H7L6u1C3tXUW6l9iG3YJUie3Jij6Y/s0/4_20210906_020205_0003.png'/>
</div>Info: Fungsi dari kode HTML di atas adalah untuk menampilkan tampilan dari Preloader page tersebut
